/*
 * <pathways-frame> design tokens (CSS custom properties).
 *
 * Sources, in order of precedence (gaps note, "Order of precedence"; UXD-5): (1) the v6 README's exact frame values
 * ("The frame (high fidelity)" and "Design tokens"); (2) the zip's _ds tokens for anything the README leaves open;
 * (3) the app's existing values. Ported from the Angular reference build's --pf-* set (src/styles.scss, commit
 * e452331) and its brand colors, renamed into the frame's own --pf-* namespace.
 *
 * How a host uses them: they are set on the <pathways-frame> element with no weight (:where), so a host can map its
 * own names onto them, for example:  pathways-frame { --pf-vital-blue: var(--my-app-blue); }
 * The frame is light only (dark mode is ruled "later", UXD-8).
 */
:where(pathways-frame) {
  /* Brand core (README "Design tokens"; the same values in _ds and the app) */
  --pf-deep-navy: #12274a;    /* Deep Navy: headings, the product name, primary buttons */
  --pf-vital-blue: #0071af;   /* Vital Blue: links, the focus outline (UXD-4), the credits ring below 80% */
  --pf-graphite: #262626;     /* Graphite: body text */
  --pf-stone: #5a5a5a;        /* Stone: secondary text */
  --pf-fog: #a6a6a6;          /* Fog: rules only, never text (README) */

  /*
   * "You are here": a 3 px Vital Blue bar (DSC-1, Mike 2026-10-11, "Vital Blue, as v7 drew it"; canon 7.2.0). It
   * replaces the 2026-10-03 rule "Orange means you are here" (UXD-51's line still holds: no orange on toasts, and no
   * bar either). Only as a thin shape (a bar, underline or dot), at most one per area of the screen, never on text
   * and never as a button fill. Allowed: the active place in the left menu, the active bottom tab, the active in-page
   * tab, and (later screens) the current workflow step. Every active-place shape in the frame uses this token, never
   * the raw hex. The name stays ("the current place's accent"); it no longer means orange, and nothing in the shell
   * draws orange now.
   */
  --accent-current: var(--pf-vital-blue);

  /* Lines and fills (README; _ds uses #E8E8E8 / #F6F7F9, and the README wins, UXD-5) */
  --pf-hairline: #e4e7ec;          /* hairlines: top bar border, dividers, menu border */
  --pf-border-secondary: #d0d5dd;  /* secondary borders: Needs you pill, + button */
  --pf-control-border: #707070;    /* control borders: Search circle, message box, secondary button */
  --pf-hover: #f2f4f7;             /* hover fill on menu items and icon buttons */
  --pf-selected: #eef5fb;          /* selected fill (scope pill, current chat) */
  --pf-selected-border: #cfe3f3;   /* selected border */
  --pf-rail: #f7f8fa;              /* collapsed Ask AI rail background */
  --pf-rail-hover: #eef1f5;        /* rail button hover (frame markup) */
  --pf-ring-track: #e4e7ec;        /* unfilled part of the credits ring */

  /*
   * Status colors (DSC-3, Mike 2026-10-11, "Canon wins (Recommended)"; canon 7.2.0 tokens.css, --px-color-success*,
   * -warning*, -danger*, -info*): text and icon ink, chip and callout fill, chip border. Set here once; the state
   * words, the credits ring, the amber "untrusted" edge and the notices read them.
   */
  --pf-success: #1a7a4a;       --pf-success-fill: #e6f4ea;  --pf-success-border: #b7dfc6;
  --pf-warning: #8a5410;       --pf-warning-fill: #fdf1e3;  --pf-warning-border: #f3d6ac;
  --pf-danger: #c0392b;        --pf-danger-fill: #fbe9e7;   --pf-danger-border: #f2c2bb;
  --pf-info: #0071af;          --pf-info-fill: #eef5fb;     --pf-info-border: #0071af;

  /* The dialog and sheet scrim: Deep Navy at 45% (DSC-3; canon pi.css --pi-scrim) */
  --pf-scrim: rgba(18, 39, 74, 0.45);

  /* A chip carrying 14 px text is 24 px high (DSC-7, Mike 2026-10-11, "24 px (Recommended)"; canon 7.3.0) */
  --pf-chip-h: 24px;

  /* Credits ring fills (README: Vital Blue below 80%, the warning ink from 80%, the danger ink at 100%) */
  --pf-credits-ok: var(--pf-vital-blue);
  --pf-credits-warn: var(--pf-warning);
  --pf-credits-limit: var(--pf-danger);

  /* Untrusted content from an Artifact (UXD-27): an amber edge and a warm fill, the canon's warning ink and fill (DSC-3) */
  --pf-untrusted: var(--pf-warning);
  --pf-untrusted-fill: var(--pf-warning-fill);

  /* Type (README: base Lato 14px/1.45 in Graphite; product name Gill Sans 600). The host loads the fonts (gaps §C). */
  --pf-font-body: Lato, Arial, sans-serif;
  --pf-font-heading: "Gill Sans", "Gill Sans MT", Arial, sans-serif;

  /* Radii (_ds shape.css scale; the README's frame values land on it) */
  --pf-radius-xs: 8px;
  --pf-radius-sm: 10px;
  --pf-radius-md: 12px;
  --pf-radius-lg: 14px;
  --pf-radius-pill: 999px;

  /* Shadows (README for the menus) */
  --pf-shadow-menu: 0 8px 24px rgba(18, 39, 74, 0.12);
  --pf-shadow-plus-menu: 0 12px 32px rgba(18, 39, 74, 0.2);

  /* Motion (README: under 250 ms; prefers-reduced-motion turns transitions off) */
  --pf-ease-aside: cubic-bezier(0.2, 0, 0, 1);
}

/*
 * The shell's type scale: the ONE place every text size in the frame and the pages comes from (UXD-57, Mike
 * 2026-10-04, "Option a": shell text raised one step; a 14 px reading floor and nothing under 12 px anywhere; from
 * 2026-10-05 nothing visible under 14 px, TYPE-02).
 *
 * The build puts this file at the top of both stylesheets (dist/pathways-frame.css and dist/pathways-pages.css), so a
 * page works with or without the frame around it, and both read the same values. The names start --pt- ("Pathways
 * type"), shared by the pf- and pp- families. They are set on the document root with no weight (:where), so a host can
 * re-map them on any element above the shell, for example:  pathways-frame { --pt-body: 15px; }
 *
 * Every font size in src/frame/*.css, src/ask-context.css and src/pages/*.css is one of these; the floor test
 * (tests/type-floor.spec.ts, TYPE-01) fails if any drawn text is under its floor. Before UXD-57 the sizes were written
 * one by one in each rule, from 9.5 px to 14 px for text; each moved up one step onto this scale.
 */
:where(:root) {
  /* Text (raised one step by UXD-57; then, 2026-10-05, every visible size to at least 14 px: a render check asked for
     "everything visible to at least 14 px" through these tokens, so micro, label and meta now equal body. The roles
     stay named apart, so the hierarchy can come back by weight, color or case without touching a rule. The product
     owner may veto this; it is one commit.) */
  --pt-micro: 14px;    /* badges, counts, state words, tags, keyboard hints, initials, the collapsed rail and tab bar
                          labels, the CONFIDENTIAL stamp line (was 9.5 to 11.5 px; 12 px under UXD-57) */
  --pt-label: 14px;    /* column headers and small uppercase section labels (was 10.5 to 12 px) */
  --pt-meta: 14px;     /* secondary meta: row sub-labels, owner and about chips, details, times, notes, the compose
                          footer, the credits ring text, tooltips (was 11 to 12.5 px) */
  --pt-body: 14px;     /* reading text: rows, summaries, buttons, menu items, tabs, chips, status lines (was 12 to
                          13 px); the style guide's 14 px app base */
  --pt-body-lg: 15px;  /* the larger reading text: left-menu places, titles in a row or panel, dialog bodies, the
                          full-screen chat, the message box (was 13.5 to 14 px) */
  --pt-input: 16px;    /* the large text boxes, Search and the Home message box (was 15 px); 16 px also keeps iOS
                          from zooming in */

  /* Headings and the product name (unchanged by UXD-57: they were already above the floor; the hierarchy holds) */
  --pt-title: 16px;           /* the product name in the top bar, the viewer's Artifact title, form fields */
  --pt-subhead: 17px;         /* Home's section headings */
  --pt-dialog-title: 19px;    /* dialog titles */
  --pt-heading: 20px;         /* the left menu's product name, the outside view's title, Home's greeting on a short screen */
  --pt-page-title: 22px;      /* page titles and state-page headings */
  --pt-greeting-narrow: 24px; /* Home's greeting on iPhone */
  --pt-greeting: 28px;        /* Home's greeting */
}

/* <pathways-frame> styles, part 01 of 14: the root layout, the top bar, its places, Search, the buttons, Needs you and the profile button.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/*
 * <pathways-frame> styles (light DOM; every class starts with "pf-").
 *
 * Where these came from: the Angular reference build's frame styles (PathwaysAIChatPortal-frame-v6, branch
 * feat/pathways-frame-v6, commit e452331), compiled once from SCSS to plain CSS on 2026-10-03. Three mechanical
 * changes were made, nothing else:
 *   1. Angular's host selector became the custom element's own tag, "pathways-frame".
 *   2. Angular's icon tag became the class ".pf-icon" (the icon helper draws <span class="pf-icon">).
 *   3. The app's color names became the frame's own namespaced tokens (--pf-deep-navy, --pf-vital-blue, --pf-graphite,
 *      --pf-stone, --pf-fog), defined in tokens.css, so the frame never depends on, or collides with, a host page's
 *      variable names.
 * Values are the v6 README's, in px, as drawn. Precedence: the README's exact values, then the zip's _ds tokens, then
 * the app's styles. Anything added after the conversion is marked "Added for the web component".
 */
/* Live since the 2026-10-05 render check: a stray comment closer above it had made browsers drop it since 2026-10-04. */
pathways-frame {
  display: block;
  height: 100%;
}
/* The host's `hidden` attribute still hides it: the browser's own [hidden] rule loses to the one above. */
pathways-frame[hidden] {
  display: none;
}
/* ---------- Root: the top bar, then a row of Ask AI and the page ---------- */
.pf-root {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
  font: var(--pt-body)/1.45 var(--pf-font-body);
  color: var(--pf-graphite);
  text-align: left;
  /* The inherited text properties, stated, so a host's body { … } cannot reach in by inheritance (step 12). */
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  white-space: normal;
}

.pf-spacer {
  flex: 1;
}

/* Focus: the app's clear 2 px Vital Blue outline (ruling 2026-10-03, "Go with your picks"; it replaces the _ds
 * 15% halo, which was too faint to see). Every focusable control the frame draws. Full-width rows draw it inside
 * their own edge, so a scrolling list cannot clip it. */
.pf-root :focus-visible {
  outline: 2px solid var(--pf-vital-blue);
  outline-offset: 2px;
  box-shadow: none;
}

.pf-root .pf-menu__item:focus-visible,
.pf-root .pf-look-item:focus-visible,
.pf-root .pf-plus-item:focus-visible,
.pf-root .pf-side__item:focus-visible,
.pf-root .pf-side__chat:focus-visible,
.pf-root .pf-chat:focus-visible,
.pf-root .pf-tab:focus-visible {
  outline-offset: -2px;
}

/* ---------- Top bar ---------- */
.pf-topbar {
  position: relative;
  z-index: 30;
  height: 56px;
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px 0 12px;
  border-bottom: 1px solid var(--pf-hairline);
  background: #fff;
}

.pf-logo {
  /* An image-only link: pinned to the frame's text color so no inherited link color (the app's is Oravive) can
   * leak into it. */
  color: var(--pf-graphite);
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 4px;
  border-radius: var(--pf-radius-xs);
}

.pf-logo__img {
  height: 28px;
  width: auto;
  display: block;
}

.pf-divider {
  width: 1px;
  height: 24px;
  flex: none;
  background: var(--pf-hairline);
  margin: 0 8px;
}

.pf-product {
  flex: none;
  font-family: var(--pf-font-heading);
  font-weight: 600;
  font-size: var(--pt-title);
  color: var(--pf-deep-navy);
  white-space: nowrap;
}

.pf-workspace {
  flex: none;
  margin: 0 10px;
  height: 24px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: var(--pf-radius-pill);
  border: 1px solid var(--pf-hairline);
  color: var(--pf-stone);
  font: var(--pt-meta) var(--pf-font-body);
  white-space: nowrap;
}

/* Search: a 36 px circle */
.pf-search {
  width: 36px;
  height: 36px;
  flex: none;
  box-sizing: border-box;
  margin-right: 6px;
  padding: 0;
  border: 1px solid var(--pf-control-border);
  background: #fff;
  border-radius: var(--pf-radius-pill);
  color: var(--pf-graphite);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Buttons (README "Shapes"): pills 34 px high, padding 0 14px, 700 13px. Secondary: 1px #707070 on white. */
.pf-btn {
  height: 34px;
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--pf-radius-pill);
  font: 700 var(--pt-body) var(--pf-font-body);
  white-space: nowrap;
  cursor: pointer;
}

.pf-btn--primary {
  border: 1px solid var(--pf-deep-navy);
  background: var(--pf-deep-navy);
  color: #fff;
}

.pf-btn--secondary {
  border: 1px solid var(--pf-control-border);
  background: #fff;
  color: var(--pf-graphite);
}
.pf-btn--secondary:hover {
  background: var(--pf-hover);
}

/* Needs you: a link pill */
.pf-needs {
  height: 36px;
  flex: none;
  margin-left: 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 6px 0 12px;
  border-radius: var(--pf-radius-pill);
  border: 1px solid var(--pf-border-secondary);
  background: #fff;
  color: var(--pf-deep-navy);
  font: 700 var(--pt-body) var(--pf-font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease;
}
.pf-needs:hover {
  border-color: var(--pf-deep-navy);
}

.pf-needs__badge {
  min-width: var(--pf-chip-h);
  height: var(--pf-chip-h);
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-deep-navy);
  color: #fff;
  font: 700 var(--pt-micro)/var(--pf-chip-h) var(--pf-font-body);
  text-align: center;
}

/* Profile */
.pf-profile {
  position: relative;
  flex: none;
}

.pf-profile__btn {
  width: 38px;
  height: 38px;
  border: 0;
  padding: 0;
  border-radius: var(--pf-radius-pill);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pf-profile__initials {
  width: 32px;
  height: 32px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-deep-navy);
  color: #fff;
  font: 700 var(--pt-micro) var(--pf-font-body);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* <pathways-frame> styles, part 02 of 14: the menus (profile and +), the body row, the Ask AI aside, its open panel and the scope line.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* ---------- Menus (profile and +): opacity plus a 4 px slide over .15 s ---------- */
.pf-menu {
  box-sizing: border-box;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--pf-hairline);
  border-radius: var(--pf-radius-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.pf-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* Visible at once on open, so focus can move into the menu straight away; the fade still plays, and on close
   * visibility waits for it. */
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

.pf-profile__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 272px;
  box-shadow: var(--pf-shadow-menu);
  z-index: 40;
  transform: translateY(-4px);
}
.pf-profile__menu.pf-menu--open {
  transform: translateY(0);
}

.pf-menu__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 10px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--pf-hairline);
}

.pf-menu__name {
  color: var(--pf-deep-navy);
  font-size: var(--pt-body-lg);
  font-weight: 700;
}

.pf-menu__role {
  display: inline-flex;
  align-items: center;
  height: var(--pf-chip-h);
  box-sizing: border-box;
  padding: 0 8px;
  border-radius: var(--pf-radius-pill);
  border: 1px solid var(--pf-deep-navy);
  color: var(--pf-deep-navy);
  font: 700 var(--pt-label)/1 var(--pf-font-body);
}

.pf-menu__workspace {
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-menu__item {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: var(--pf-radius-xs);
  background: transparent;
  color: var(--pf-graphite);
  font: var(--pt-body) var(--pf-font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pf-menu__item:hover {
  background: var(--pf-hover);
}

.pf-menu__release {
  padding: 8px 10px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--pf-hairline);
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

/* ---------- Body row: Ask AI aside and the page ---------- */
.pf-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

/* The aside: 320 px open, 56 px collapsed; width moves over .2 s cubic-bezier(.2,0,0,1). */
.pf-ask {
  position: relative;
  z-index: 10;
  flex: none;
  width: 56px;
  overflow: hidden;
  background: #fff;
  transition: width 0.2s var(--pf-ease-aside);
}

.pf-ask--open {
  width: 320px;
}

/* Open panel */
.pf-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  display: flex;
  flex-direction: column;
  box-shadow: inset -1px 0 0 var(--pf-hairline);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.2s;
}

.pf-ask--open .pf-panel {
  opacity: 1;
  visibility: visible;
}

.pf-panel__head {
  height: 52px;
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 10px;
  border-bottom: 1px solid var(--pf-hairline);
}

.pf-panel__spark {
  margin-left: 2px;
}

.pf-panel__title {
  color: var(--pf-deep-navy);
  font-size: var(--pt-body-lg);
  font-weight: 700;
  margin-left: 4px;
}

.pf-icon-btn {
  flex: none;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--pf-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pf-graphite);
  cursor: pointer;
}
.pf-icon-btn:hover {
  background: var(--pf-hover);
}

/* Chats toggle: a 32 px pill with aria-pressed */
.pf-chats-toggle {
  height: 32px;
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--pf-border-secondary);
  border-radius: var(--pf-radius-pill);
  background: #fff;
  color: var(--pf-deep-navy);
  font: 700 var(--pt-body) var(--pf-font-body);
  cursor: pointer;
}

.pf-chats-toggle--on {
  border-color: var(--pf-deep-navy);
  background: var(--pf-deep-navy);
  color: #fff;
}

/* v7 draws the panel header's Chats pill 34 px tall with 12 px of padding each side, and its icon buttons (New chat, full screen,
 * collapse) 36 px square (UXD-119 M1). The off pill's border is v7's #E4E7EC, the hairline token; the on pill keeps its own navy
 * border, so the border rule skips it (this scoped selector would otherwise outrank .pf-chats-toggle--on). */
.pf-panel__head .pf-chats-toggle {
  height: 34px;
  padding: 0 12px;
}
.pf-panel__head .pf-chats-toggle:not(.pf-chats-toggle--on) {
  border-color: var(--pf-hairline);
}
.pf-panel__head .pf-icon-btn {
  width: 36px;
  height: 36px;
}
/* v7's frame (UXD-124, 2026-10-14): Collapse Ask sits at the header's right end, its panel icon drawn mirrored. */
.pf-panel__collapse svg {
  transform: scaleX(-1);
}

/* Scope line */
.pf-scope {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--pf-hover);
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-scope__pill {
  min-width: 0;
  height: 24px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-selected);
  border: 1px solid var(--pf-selected-border);
  color: var(--pf-deep-navy);
  font: 700 var(--pt-micro) var(--pf-font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-scope__follows {
  flex: none;
  white-space: nowrap;
}

/* <pathways-frame> styles, part 03 of 14: the conversation, the Chats view and the message box.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* Conversation */
.pf-conv {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--pt-body);
  line-height: 1.5;
}

.pf-msg-user {
  align-self: flex-end;
  max-width: 244px;
  padding: 9px 12px;
  border-radius: 12px 12px 4px 12px;
  background: var(--pf-hover);
  color: var(--pf-graphite);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pf-msg-run {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--pf-selected-border);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-selected);
  font-size: var(--pt-body);
  color: var(--pf-deep-navy);
}

.pf-msg-run__text {
  flex: 1;
}

.pf-stop {
  height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border: 1px solid var(--pf-control-border);
  border-radius: var(--pf-radius-pill);
  background: #fff;
  color: var(--pf-graphite);
  font: 700 var(--pt-body) var(--pf-font-body);
  cursor: pointer;
}

.pf-msg-note {
  padding: 8px 10px;
  border: 1px dashed var(--pf-fog);
  border-radius: var(--pf-radius-sm);
  font-size: var(--pt-body);
  color: var(--pf-stone);
}

.pf-eyebrow {
  font: 700 var(--pt-label) var(--pf-font-body);
  letter-spacing: 0.08em;
  color: var(--pf-stone);
}

.pf-sugg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
}

.pf-sugg__btn {
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--pf-selected-border);
  border-radius: var(--pf-radius-pill);
  background: #fff;
  color: var(--pf-deep-navy);
  font: var(--pt-body)/1.35 var(--pf-font-body);
  text-align: left;
  cursor: pointer;
}
.pf-sugg__btn:hover {
  background: var(--pf-selected);
}

/* Chats view */
.pf-chats {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-chats__head {
  padding: 4px 10px 6px;
}

.pf-chats__head--agents {
  padding: 14px 10px 6px;
}

.pf-chat {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--pf-radius-xs);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--pf-font-body);
}
.pf-chat:hover {
  background: var(--pf-hover);
}
.pf-chat .pf-icon {
  margin-top: 2px;
}

.pf-chat--current {
  background: var(--pf-selected);
}

.pf-chat--static {
  cursor: default;
}
.pf-chat--static:hover {
  background: transparent;
}

.pf-chat__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pf-chat__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--pt-body);
  font-weight: 700;
  color: var(--pf-deep-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-chat__detail {
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-concept {
  display: inline-flex;
  align-items: center;
  height: var(--pf-chip-h);
  padding: 0 8px;
  border-radius: var(--pf-radius-pill);
  border: 1px solid var(--pf-deep-navy);
  font: 700 var(--pt-micro)/1 var(--pf-font-body);
}

.pf-chats__all {
  margin: 12px 10px 0;
  font: 700 var(--pt-body) var(--pf-font-body);
  color: var(--pf-vital-blue);
  text-decoration: none;
}

/* Message box */
.pf-compose {
  flex: none;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--pf-hover);
}

.pf-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--pf-control-border);
  border-radius: var(--pf-radius-lg);
  background: #fff;
  transition: border-color 0.15s ease;
  /* README: the border "turns #0071AF on focus" (of the message box itself, not of the + menu inside it). */
}
.pf-box:has(.pf-box__input:focus) {
  border-color: var(--pf-vital-blue);
}

.pf-box__input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  padding: 2px 0;
  font: var(--pt-body-lg)/1.45 var(--pf-font-body);
  color: var(--pf-graphite);
  /* The box's blue border is this field's focus indicator (README), so the outline is not doubled here. */
}
.pf-box__input:focus-visible {
  outline: none;
  box-shadow: none;
}
.pf-box__input::placeholder {
  color: var(--pf-stone);
  opacity: 1;
}

.pf-box__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-plus {
  width: 30px;
  height: 30px;
  flex: none;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--pf-border-secondary);
  border-radius: var(--pf-radius-pill);
  background: #fff;
  color: var(--pf-graphite);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pf-send {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-deep-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* <pathways-frame> styles, part 04 of 14: the message row: the credits ring, the row under the box, popover placement and choice marks.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* Credits ring: a conic gradient (color set inline from frame-credits.ts) */
.pf-ring {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
  white-space: nowrap;
}

.pf-ring__dial {
  width: 20px;
  height: 20px;
  border-radius: var(--pf-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-ring__hole {
  width: 14px;
  height: 14px;
  border-radius: var(--pf-radius-pill);
  background: #fff;
}

.pf-ring--rail {
  flex-direction: column;
  gap: 4px;
  font: 700 var(--pt-meta) var(--pf-font-body);
}
.pf-ring--rail .pf-ring__dial {
  width: 22px;
  height: 22px;
}
.pf-ring--rail .pf-ring__hole {
  width: 16px;
  height: 16px;
  background: var(--pf-rail);
}

/* "Look in" (ruling 2026-10-03): a chip beside the + button, and its menu. */
.pf-look {
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
  height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border: 1px solid var(--pf-selected-border);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-selected);
  color: var(--pf-deep-navy);
  font: 700 var(--pt-body) var(--pf-font-body);
  cursor: pointer;
}
.pf-look .pf-icon {
  flex: none;
}

/* The row under the box wraps on narrow widths; the credits ring and Send stay together on the right. */
.pf-box__row {
  flex-wrap: wrap;
  row-gap: 6px;
}

.pf-box__end {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pf-look {
  max-width: 100%;
}

.pf-proj {
  border-color: var(--pf-border-secondary);
  background: #fff;
}

.pf-proj-search {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 0 10px;
  border: 1px solid var(--pf-control-border);
  border-radius: var(--pf-radius-xs);
  font: var(--pt-body) var(--pf-font-body);
  color: var(--pf-graphite);
}

.pf-proj-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-proj-list .pf-look-item[aria-selected=true] .pf-look-item__mark {
  border-color: var(--pf-deep-navy);
  background: var(--pf-deep-navy);
  box-shadow: inset 0 0 0 2px #fff;
}

.pf-proj-none {
  padding: 8px 10px;
  font-size: var(--pt-body);
  color: var(--pf-stone);
}

.pf-proj-new {
  color: var(--pf-vital-blue);
  font-weight: 700;
}

.pf-saved {
  margin: 0;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-look__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-look-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 300px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  overflow: auto;
  box-shadow: var(--pf-shadow-plus-menu);
  z-index: 6;
  transform: translateY(4px);
}
.pf-look-menu.pf-menu--open {
  transform: translateY(0);
}

/* Opens below the chip when there is more room below (Home's centered box). */
/* Opens below the box when there is more room below (Home's centered box). More specific than each popover's own
 * "opens above" rule, so it wins wherever the popover's rule sits in this file. */
.pf-menu.pf-look-menu--down {
  bottom: auto;
  top: calc(100% + 8px);
}

/* The message row's popovers sit above everything near them (the page, the footer). Their placement keeps them
 * inside the visible page area, so they never reach under the top bar. */
.pf-box .pf-menu {
  z-index: 25;
}

.pf-look-item {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--pf-radius-xs);
  background: transparent;
  color: var(--pf-graphite);
  font: var(--pt-body) var(--pf-font-body);
  text-align: left;
  cursor: pointer;
}
.pf-look-item:hover {
  background: var(--pf-hover);
}
.pf-look-item[aria-disabled=true] {
  color: var(--pf-stone);
  cursor: not-allowed;
}

.pf-look-item--sub {
  padding-left: 30px;
}

/* The choice mark: a ring for one choice, a box for add-ons; filled navy when chosen (never orange). */
.pf-look-item__mark {
  flex: none;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1.5px solid var(--pf-control-border);
  border-radius: 50%;
}

.pf-look-item--check .pf-look-item__mark {
  border-radius: 3px;
}

.pf-look-item[aria-checked=true] .pf-look-item__mark {
  border-color: var(--pf-deep-navy);
  background: var(--pf-deep-navy);
  box-shadow: inset 0 0 0 2px #fff;
}

.pf-look-item__text {
  display: flex;
  flex-direction: column;
}

.pf-look-item__detail {
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-look-credits {
  letter-spacing: 0;
  text-transform: none;
}

.pf-look-reset {
  margin-top: 4px;
  color: var(--pf-vital-blue);
  font-weight: 700;
}

.pf-pinned {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-pinned__reset {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pf-vital-blue);
  font: 700 var(--pt-meta) var(--pf-font-body);
  cursor: pointer;
}

.pf-web-notice {
  margin: 0;
  padding: 6px 8px;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-warning-fill);
  color: var(--pf-graphite);
  font-size: var(--pt-body);
}

/* An answer's "Looked in" line (stub sources). */
.pf-looked {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-looked__label {
  font-weight: 700;
}

.pf-looked__src {
  color: var(--pf-graphite);
}

a.pf-looked__src {
  color: var(--pf-vital-blue);
}

/* <pathways-frame> styles, part 05 of 14: the + menu, the collapsed rail, the page area and the CONFIDENTIAL footer.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* The + menu: above the message box */
.pf-plus-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 296px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  overflow: auto;
  box-shadow: var(--pf-shadow-plus-menu);
  z-index: 5;
  transform: translateY(4px);
}
.pf-plus-menu.pf-menu--open {
  transform: translateY(0);
}

.pf-plus-menu__head {
  padding: 6px 10px 2px;
}

.pf-plus-menu__rule {
  height: 1px;
  background: var(--pf-hairline);
  margin: 6px 4px;
}

.pf-plus-menu__note {
  padding: 6px 10px 4px;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-plus-item {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--pf-radius-xs);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--pf-font-body);
}
.pf-plus-item:hover {
  background: var(--pf-hover);
}

.pf-plus-item__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pf-plus-item__title {
  font-size: var(--pt-body);
  color: var(--pf-graphite);
}

.pf-plus-item__detail {
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-plus-item__tag {
  flex: none;
  width: 34px;
  height: var(--pf-chip-h);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-hover);
  color: var(--pf-deep-navy);
  font: 700 var(--pt-micro)/var(--pf-chip-h) var(--pf-font-body);
  text-align: center;
  letter-spacing: 0.04em;
}

.pf-compose__foot {
  text-align: center;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

/* ---------- Collapsed rail ---------- */
.pf-rail {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 56px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px; /* v7's frame: the strip's buttons 6 px apart (UXD-124) */
  padding: 10px 0 12px;
  background: var(--pf-rail);
  box-shadow: inset -1px 0 0 var(--pf-hairline);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease, visibility 0.2s;
}

.pf-ask--open .pf-rail {
  opacity: 0;
  visibility: hidden;
}

/* v7's frame (UXD-124, 2026-10-14): each strip button is a 44 px square holding its icon only; its name is its aria-label
 * and its tooltip its title. The touch tier (styles-08) keeps its 44 px minimum. */
.pf-rail__btn {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--pf-radius-sm);
  background: transparent;
  color: var(--pf-graphite);
  cursor: pointer;
}
.pf-rail__btn:hover {
  background: var(--pf-rail-hover);
}

.pf-rail__btn--primary {
  background: var(--pf-deep-navy);
  color: #fff;
}
.pf-rail__btn--primary:hover {
  background: var(--pf-deep-navy);
}

/* ---------- The page: its content scrolls, and the CONFIDENTIAL footer sits under it, in the flow ---------- */
.pf-page {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.pf-page__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Ruling 2026-10-03 ("Go with your picks"): a small CONFIDENTIAL footer on every page, modeled on Pathways
 * Intelligence's shell footer. In the flow under the page, so it never covers the message box, and on a phone it
 * sits above the tab bar. */
.pf-footer {
  flex: none;
  box-sizing: border-box;
  padding: 5px 16px;
  border-top: 1px solid var(--pf-hairline);
  background: #fff;
  color: var(--pf-stone);
  font: var(--pt-micro)/1.4 var(--pf-font-body); /* the stamp line: at the 12 px floor, so it stays one line (R-22) */
  text-align: center;
}

.pf-page__content[hidden] {
  display: none;
}

/* <pathways-frame> styles, part 06 of 14: Home is Ask AI: the full-screen chat, its centered box and suggestions.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* =====================================================================================================
 * Home is Ask AI, full-screen chat (ruling 2026-10-03, "similiar to Claude"). Every size.
 * A centered column (v6 screen 2's 820 px message box), the box at the center when the chat is empty and docked at
 * the bottom once a conversation starts. Needs you and Continue sit under the empty box; v6 listed rows under Needs you, v7 shows its count only (UXD-116).
 * ===================================================================================================== */
.pf-root--full-chat .pf-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pf-fc {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.pf-fc__head {
  height: 52px;
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--pf-hairline);
}

/* In full screen it is the page's h1 (audit 2026-10-05, S6): no margin and the line height it had as plain text. */
.pf-fc__title {
  flex: none;
  margin: 0;
  line-height: inherit;
  color: var(--pf-deep-navy);
  font-size: var(--pt-body-lg);
  font-weight: 700;
}

.pf-fc__scope {
  margin-left: 4px;
  flex: 0 1 auto;
}

.pf-fc__new {
  flex: none;
}

/* The scrolling area. A size container, so the hero can be sized as a share of what is visible. */
.pf-fc__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  container-type: size;
}

/* The centered column: 820 px of content, like v6 screen 2's message box. */
.pf-fc__col {
  width: 100%;
  max-width: 868px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 24px;
}

.pf-fc__empty {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 32px;
}

/* The greeting and the box fill most of what is visible, centered, so the box sits near the middle. */
.pf-fc__hero {
  min-height: 64cqh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding-top: 24px;
}

/* Full screen and the phone sheet: the box at the exact center of what is visible. */
.pf-fc__hero--center {
  min-height: 100cqh;
  padding: 24px 0;
}

/* The box, with suggestions hung below it outside the flow (so they do not move the box off center). */
.pf-fc__boxwrap {
  position: relative;
}

.pf-fc__chips {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pf-fc__exit {
  flex: none;
}

.pf-home__greeting {
  margin: 0;
  font: 600 var(--pt-greeting)/1.2 var(--pf-font-heading);
  color: var(--pf-deep-navy);
}

.pf-home__subline {
  margin: 0;
  font-size: var(--pt-body-lg);
  color: var(--pf-stone);
}

/* Home's message box (v6 screen 2): max width 820, at least 96 px high, 2px #0071AF border, radius 16. */
.pf-box--home {
  max-width: 820px;
  min-height: 96px;
  box-sizing: border-box;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px 18px;
  border: 2px solid var(--pf-vital-blue);
  border-radius: 16px;
}
.pf-box--home .pf-box__input {
  font-size: var(--pt-input);
}
.pf-box--home .pf-plus {
  width: 32px;
  height: 32px;
}
.pf-box--home .pf-send {
  width: 34px;
  height: 34px;
}

.pf-box__looking {
  min-width: 0;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-home__h {
  margin: 0;
  font: 600 var(--pt-subhead) var(--pf-font-heading);
  color: var(--pf-deep-navy);
}

/* v7's Home shows Needs you's count only, with no list and no link (UXD-116); v6 screen 2's rows, and their styles, are gone. */
.pf-home__needs {
  display: flex;
  flex-direction: column;
}

.pf-home__continue {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-home__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pf-home__card {
  border: 1px solid var(--pf-hairline);
  border-radius: var(--pf-radius-sm); /* canon card radius 10 (DSC-3; was 12) */
  background: #fff;
  box-sizing: border-box;
  padding: 14px 16px;
}

.pf-home__cont {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  text-align: left;
  text-decoration: none;
  font-family: var(--pf-font-body);
  color: inherit;
  cursor: pointer;
}
.pf-home__cont strong {
  font-size: var(--pt-body-lg);
  line-height: 1.35;
  color: var(--pf-deep-navy);
}

.pf-home__kind {
  font: 700 var(--pt-label) var(--pf-font-body);
  letter-spacing: 0.06em;
  color: var(--pf-stone);
}

.pf-home__card-when {
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

/* v6 2b, a first visit */
.pf-home__tries {
  display: flex;
  align-items: center;
  gap: 6px 18px;
  flex-wrap: wrap;
  font-size: var(--pt-body-lg);
  color: var(--pf-stone);
}

.pf-home__try {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pf-vital-blue);
  font: var(--pt-body-lg) var(--pf-font-body);
  text-align: left;
  cursor: pointer;
}

.pf-home__nothing {
  padding: 16px 18px;
}
.pf-home__nothing strong {
  color: var(--pf-deep-navy);
}
.pf-home__nothing p {
  margin: 6px 0 0;
  font-size: var(--pt-body-lg);
  line-height: 1.55;
}

/* <pathways-frame> styles, part 07 of 14: Home's docked box, fitting the top bar, and the medium (iPad) and narrow (iPhone) layouts.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* A conversation on Home */
.pf-fc__conv {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  padding-bottom: 16px;
  font-size: var(--pt-body-lg);
  line-height: 1.55;
}
.pf-fc__conv .pf-msg-user {
  max-width: 75%;
}

.pf-fc__chats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* The docked box */
.pf-fc__dock {
  flex: none;
  padding: 10px 0 14px;
  border-top: 1px solid var(--pf-hover);
  background: #fff;
}
.pf-fc__dock .pf-fc__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* =====================================================================================================
 * The iPad and iPhone layer (frameResponsive). NOT IN v6 YET — swap for the designer's version when drawn.
 * Every rule below is scoped to .pf-root--responsive, so turning the flag off brings the desktop frame back.
 * On a desktop at 1100 px and wider with a mouse, none of these rules changes anything.
 * ===================================================================================================== */
/* iOS safe areas (the notch and the home indicator). They are 0 px everywhere else. */
.pf-root--responsive {
  /* The profile menu always fits on screen. */
}
.pf-root--responsive .pf-topbar {
  height: calc(56px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.pf-root--responsive .pf-body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.pf-root--responsive .pf-profile__menu {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 80px - env(safe-area-inset-top));
  overflow: auto;
}

/* ---------- Fitting the top bar, one step at a time (data-fit is set by the component). Since UXD-118 only the iPhone's
 * bar exists, and it has one step (level 1, under Narrow below); the medium tier's levels 2 and 3 went with the iPad's bar. ---------- */
.pf-root--responsive .pf-topbar[data-fit="1"] .pf-workspace {
  display: none;
}

/* ---------- Medium (744–1099 px): Ask AI is the rail, and opens as an overlay with a scrim ---------- */
.pf-root--medium .pf-ask,
.pf-root--medium .pf-ask--open {
  width: 56px;
  overflow: visible;
}
.pf-root--medium .pf-ask--open {
  z-index: 20;
}
.pf-root--medium .pf-panel {
  z-index: 1;
  background: #fff;
  box-shadow: var(--pf-shadow-plus-menu), inset -1px 0 0 var(--pf-hairline);
}

.pf-scrim {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: var(--pf-scrim);
  animation: pf-fade-in 0.15s ease;
}

@keyframes pf-fade-in {
  from {
    opacity: 0;
  }
}
/* ---------- Narrow (below 744 px, iPhone): no rail; Ask AI is a full-screen sheet ---------- */
.pf-root--narrow {
  /* The words "Needs you" go only when the bar is still too full (the count badge stays). */
  /* The sheet covers the whole screen, inside the iOS safe areas. */
  /* Header buttons go icon-only on a phone; their words stay as the accessible names. */
  /* Home on a phone: the column narrows, and Needs you and Continue stack. */
}
.pf-root--narrow .pf-divider,
.pf-root--narrow .pf-product,
.pf-root--narrow .pf-workspace {
  display: none;
}
.pf-root--narrow .pf-topbar[data-fit="1"] {
  /* Badge only: at least 44 px wide itself, so its touch area does not reach over the profile button's. */
}
.pf-root--narrow .pf-topbar[data-fit="1"] .pf-needs {
  min-width: 44px;
  justify-content: center;
  padding: 0 6px;
}
.pf-root--narrow .pf-topbar[data-fit="1"] .pf-needs__word {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pf-root--narrow .pf-ask {
  width: 0;
}
.pf-root--narrow .pf-rail {
  display: none;
}
.pf-root--narrow .pf-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #fff;
  animation: pf-sheet-in 0.2s var(--pf-ease-aside);
}
.pf-root--narrow .pf-fc__head {
  height: 56px;
}
.pf-root--narrow .pf-fc__btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pf-root--narrow .pf-fc__head .pf-chats-toggle {
  width: 36px;
  padding: 0;
  justify-content: center;
}
.pf-root--narrow .pf-msg-user {
  max-width: 80%;
}
.pf-root--narrow .pf-fc__head {
  padding: 0 12px 0 16px;
}
.pf-root--narrow .pf-fc__col {
  padding: 0 16px;
}
.pf-root--narrow .pf-home__greeting {
  font-size: var(--pt-greeting-narrow);
}
.pf-root--narrow .pf-home__cards {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.pf-root--narrow .pf-home__card {
  padding: 12px 14px;
}

@keyframes pf-sheet-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
/* Medium screens: Continue as two columns when four no longer fit comfortably. */
.pf-root--medium .pf-home__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Short screens (an iPhone on its side): a smaller docked box, no footer line. */
@media (max-height: 500px) {
  .pf-root--responsive .pf-fc__dock .pf-box--home {
    min-height: 0;
  }
  .pf-root--responsive .pf-fc__dock .pf-compose__foot {
    display: none;
  }
}

/* <pathways-frame> styles, part 08 of 14: the phone tab bar and its More menu, and the 44 px touch targets.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* ---------- The bottom tab bar (phones). Icon plus a short label; 56 px plus the home-indicator inset. ------ */
.pf-tabbar {
  position: relative;
  z-index: 30;
  flex: none;
  box-sizing: border-box;
  height: calc(56px + env(safe-area-inset-bottom));
  display: flex;
  align-items: stretch;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border-top: 1px solid var(--pf-hairline);
  background: #fff;
}

.pf-tabbar__places {
  flex: 4 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.pf-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--pf-graphite);
  font: 400 var(--pt-micro) var(--pf-font-body);
  text-decoration: none;
  cursor: pointer;
}

.pf-tab__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-tab--active {
  color: var(--pf-deep-navy);
  font-weight: 700;
}

/* The active tab's Vital Blue mark (DSC-1; was Oravive), at the top edge (the top bar's underline, turned for a bottom bar). */
.pf-tab__mark {
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent-current);
  opacity: 0;
}

.pf-tab--active .pf-tab__mark {
  opacity: 1;
}

/* The More tab and its small menu, opening upward above the tab bar. */
.pf-tab-more {
  position: relative;
  flex: 1 1 0;
  display: flex;
}

.pf-more-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 200px;
  box-shadow: var(--pf-shadow-menu);
  transform: translateY(4px);
}
.pf-more-menu.pf-menu--open {
  transform: translateY(0);
}

.pf-more-item {
  gap: 10px;
}
.pf-more-item[aria-current=page] {
  color: var(--pf-deep-navy);
  font-weight: 700;
}

.pf-tab--ask {
  flex: 1 1 0;
  color: var(--pf-deep-navy);
  font-weight: 700;
}

.pf-tab__ask-dot {
  width: 34px;
  height: 24px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-deep-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Touch screens: every frame control gets a hit area of at least 44 x 44 (v6 R28, screen 34) ------
 * Transparent icon buttons and list rows simply grow (they look the same). Outlined and filled controls keep their
 * drawn size, and an invisible ::after hit area makes the target 44 x 44. Mouse users see no change. */
@media (pointer: coarse) {
  .pf-root--responsive {
    /* Menu rows a little taller than 44 px: Safari's engine rounds hit-testing at fractional positions by about
     * 1.5 px, so an exactly-44 px row loses its bottom edge to the next row there. */
    /* Room between the message box's text and its row of controls, and between the row's lines when it wraps, so
     * their 44 px touch areas do not overlap. */
  }
  .pf-root--responsive .pf-logo {
    height: 44px;
  }
  .pf-root--responsive .pf-icon-btn {
    width: 44px;
    height: 44px;
  }
  .pf-root--responsive .pf-menu__item,
  .pf-root--responsive .pf-look-item,
  .pf-root--responsive .pf-plus-item,
  .pf-root--responsive .pf-sugg__btn,
  .pf-root--responsive .pf-rail__btn,
  .pf-root--responsive .pf-home__try {
    min-height: 44px;
  }
  .pf-root--responsive .pf-chats__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .pf-root--responsive .pf-box__input {
    min-height: 44px;
  }
  .pf-root--responsive .pf-proj-search {
    height: 44px;
  }
  .pf-root--responsive .pf-menu__item,
  .pf-root--responsive .pf-look-item {
    min-height: 48px;
  }
  .pf-root--responsive .pf-box__row {
    margin-top: 4px;
    row-gap: 14px;
  }
  .pf-root--responsive .pf-search,
  .pf-root--responsive .pf-needs,
  .pf-root--responsive .pf-profile__btn,
  .pf-root--responsive .pf-plus,
  .pf-root--responsive .pf-send,
  .pf-root--responsive .pf-chats-toggle,
  .pf-root--responsive .pf-stop,
  .pf-root--responsive .pf-look,
  .pf-root--responsive .pf-pinned__reset,
  .pf-root--responsive .pf-btn {
    position: relative;
  }
  .pf-root--responsive .pf-search::after,
  .pf-root--responsive .pf-needs::after,
  .pf-root--responsive .pf-profile__btn::after,
  .pf-root--responsive .pf-plus::after,
  .pf-root--responsive .pf-send::after,
  .pf-root--responsive .pf-chats-toggle::after,
  .pf-root--responsive .pf-stop::after,
  .pf-root--responsive .pf-look::after,
  .pf-root--responsive .pf-pinned__reset::after,
  .pf-root--responsive .pf-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}
/* No hover on touch screens: keep a tapped pill from staying in its hover color. */
@media (hover: none) {
  .pf-root--responsive .pf-needs:hover {
    border-color: var(--pf-border-secondary);
  }
}

/* <pathways-frame> styles, part 09 of 14: the left menu (sidebar): its frame, widths and the collapsed rail.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* =====================================================================================================
 * The left-menu frame (ruling 2026-10-03, "Let's go with left menu"). The only frame since UXD-117 (the v6
 * top-bar frame is retired). A grid: the sidebar in its own column, the page beside it (the iPhone's minimal top bar above it, the one top bar left), the phone tab bar
 * across the bottom. Ask AI moves to the right of the page.
 * Departs from v6: rule S2 ("no menu, pins or bell") and the README frame section (top-bar places, aside on the left).
 * ===================================================================================================== */
.pf-root--left {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Ask AI on the right: the aside follows the page, and its panel and rail are anchored to the right edge. */
}
.pf-root--left > .pf-side {
  grid-column: 1;
  grid-row: 1/3;
}
.pf-root--left > .pf-topbar {
  grid-column: 2;
  grid-row: 1;
}
.pf-root--left > .pf-body {
  grid-column: 2;
  grid-row: 2;
}
.pf-root--left > .pf-tabbar {
  grid-column: 1/-1;
  grid-row: 3;
}
.pf-root--left .pf-ask {
  order: 2;
}
.pf-root--left .pf-panel,
.pf-root--left .pf-rail {
  left: auto;
  right: 0;
  box-shadow: inset 1px 0 0 var(--pf-hairline);
}

.pf-root--left.pf-root--medium .pf-panel {
  box-shadow: var(--pf-shadow-plus-menu), inset 1px 0 0 var(--pf-hairline);
}

/* The sidebar: 260 px open, a 104 px icon rail collapsed; the README aside's width transition.
 * The rail was 56 px while it showed the Q. Ruling 2026-10-04 (UXD-34), "Use the full TRIARQ wordmark on the iPad
 * menu": the rail now holds the full wordmark at the frame's 28 px minimum (about 88 px wide), with the 7 px clear
 * space each side, so it is 104 px (88 plus 8 each side). Only the rail widens; the icons stay centered in it. */
.pf-side {
  --pf-side-rail: 104px;
  position: relative;
  z-index: 35;
  width: 260px;
  min-height: 0;
  transition: width 0.2s var(--pf-ease-aside);
}

.pf-side--collapsed {
  width: var(--pf-side-rail);
}

/* Medium screens: the grid column stays the rail; expanded, the panel lies over the page. */
.pf-root--medium .pf-side {
  width: var(--pf-side-rail);
}

.pf-root--side-overlay .pf-side {
  z-index: 50;
}

.pf-side__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: var(--pf-rail);
  box-shadow: inset -1px 0 0 var(--pf-hairline);
  overflow: hidden;
}

.pf-side--collapsed .pf-side__panel {
  padding-left: max(6px, env(safe-area-inset-left));
  padding-right: 6px;
  align-items: center;
}

.pf-root--side-overlay .pf-side__panel {
  width: 260px;
  box-shadow: var(--pf-shadow-plus-menu);
  animation: pf-side-in 0.2s var(--pf-ease-aside);
}

@keyframes pf-side-in {
  from {
    width: var(--pf-side-rail);
  }
}
.pf-side-scrim {
  position: absolute;
  inset: 0;
  z-index: 45;
  background: var(--pf-scrim);
  animation: pf-fade-in 0.15s ease;
}

.pf-side__top {
  width: 100%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

/* Collapsed: the wordmark, with the expand control directly under it. */
.pf-side--collapsed .pf-side__top {
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  margin-bottom: 6px;
}

.pf-side__toggle {
  position: relative;
  flex: none;
  color: var(--pf-stone);
}

.pf-top-chat {
  margin-left: 2px;
}

.pf-top-chat[aria-pressed=true] {
  background: var(--pf-selected);
  color: var(--pf-deep-navy);
}

.pf-side__product {
  display: block;
  padding: 2px 4px 12px;
}

/* "Skip to content" (accessibility audit 2026-10-05, N1): the first Tab stop, out of sight until it has focus, then
   shown at the top left above everything. The main region it moves focus to draws no ring of its own. */
.pf-skip {
  position: fixed;
  left: 8px;
  top: 8px;
  z-index: 90;
  transform: translateY(-200%);
  /* A 44 px touch target, like every frame control (R-13). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border-radius: var(--pf-radius-sm);
  background: var(--pf-deep-navy);
  color: #fff;
  font: 600 var(--pt-body) var(--pf-font-body);
  text-decoration: none;
}
.pf-skip:focus {
  transform: none;
}
.pf-page:focus {
  outline: none;
}

/* <pathways-frame> styles, part 10 of 14: the sidebar's rows, the active place, collapsed icons, tooltips, and the top bar's left padding (the iPhone's minimal bar only, since UXD-118).
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* A row: at least 36 px (44 on touch), radius 8, hover #F2F4F7, as in the profile menu. */
.pf-side__item {
  position: relative;
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--pf-radius-xs);
  background: transparent;
  color: var(--pf-graphite);
  font: var(--pt-body-lg) var(--pf-font-body);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.pf-side__item:hover {
  background: var(--pf-hover);
}

.pf-side__new {
  color: var(--pf-deep-navy);
  font-weight: 700;
  margin-bottom: 6px;
}

.pf-side__places {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

/* The active place: navy and bold, with a 3 px Vital Blue bar (DSC-1; was Oravive) on its left edge (the README's underline, turned for a
 * vertical list: derived, not drawn). */
.pf-side__item--active {
  color: var(--pf-deep-navy);
  font-weight: 700;
}
.pf-side__item--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-current);
}

.pf-side--collapsed .pf-side__item {
  width: 44px;
  justify-content: center;
  padding: 0;
}

/* The places list is as wide as the rail, so its 44 px icon rows are centered in it, like the rows above. */
.pf-side--collapsed .pf-side__places {
  align-items: center;
}

/* Collapsed: icons only. The label stays as the accessible name. */
.pf-side--collapsed .pf-side__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pf-side__rule {
  height: 1px;
  flex: none;
  margin: 10px 4px;
  background: var(--pf-hairline);
}

.pf-side__recents {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.pf-side__head {
  padding: 2px 10px 6px;
}

.pf-side__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-side__chat {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--pf-radius-xs);
  background: transparent;
  text-align: left;
  font-family: var(--pf-font-body);
  cursor: pointer;
}
.pf-side__chat:hover {
  background: var(--pf-hover);
}

.pf-side__chat--current {
  background: var(--pf-selected);
}

.pf-side__chat-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--pt-body);
  color: var(--pf-graphite);
}

.pf-side__chat--current .pf-side__chat-title {
  color: var(--pf-deep-navy);
  font-weight: 700;
}

.pf-side__chat-detail {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-side__list li {
  min-width: 0;
}

/* Collapsed: each icon's name shows as a tooltip on hover and on keyboard focus (it is the accessible name, too). */
.pf-side--collapsed .pf-side__panel {
  overflow: visible;
}

.pf-side__tip {
  display: none;
}

.pf-side--collapsed .pf-side__item:hover .pf-side__label,
.pf-side--collapsed .pf-side__item:focus-visible .pf-side__label,
.pf-side--collapsed .pf-side__toggle:hover .pf-side__tip,
.pf-side--collapsed .pf-side__toggle:focus-visible .pf-side__tip,
.pf-side:not(.pf-side--collapsed) .pf-side__toggle:hover .pf-side__tip,
.pf-side:not(.pf-side--collapsed) .pf-side__toggle:focus-visible .pf-side__tip {
  display: block;
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  width: auto;
  height: auto;
  margin: 0;
  clip-path: none;
  overflow: visible;
  transform: translateY(-50%);
  z-index: 5;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--pf-deep-navy);
  color: #fff;
  font: 700 var(--pt-meta)/1.3 var(--pf-font-body);
  white-space: nowrap;
  pointer-events: none;
}

/* Collapsed, the row is narrower than the rail and centered in it, so the tooltip starts past the rail's edge:
 * half of what the rail has beyond the row (100% here is the row's width), plus the 8 px gap. */
.pf-side--collapsed .pf-side__item:hover .pf-side__label,
.pf-side--collapsed .pf-side__item:focus-visible .pf-side__label,
.pf-side--collapsed .pf-side__toggle:hover .pf-side__tip,
.pf-side--collapsed .pf-side__toggle:focus-visible .pf-side__tip {
  left: calc(100% + (var(--pf-side-rail) - 100%) / 2 + 8px);
}

/* Expanded, the collapse control is at the right edge, so its tooltip opens below it instead. */
.pf-side:not(.pf-side--collapsed) .pf-side__toggle:hover .pf-side__tip,
.pf-side:not(.pf-side--collapsed) .pf-side__toggle:focus-visible .pf-side__tip {
  left: auto;
  right: 0;
  top: calc(100% + 6px);
  transform: none;
}

/* The top bar in the left-menu frame, now only the iPhone's minimal bar (UXD-118): its left padding is 16 px, or the safe-area inset where that is larger. */
.pf-root--left .pf-topbar {
  padding-left: max(16px, env(safe-area-inset-left));
}

@media (pointer: coarse) {
  .pf-root--responsive .pf-side__item,
  .pf-root--responsive .pf-side__chat {
    min-height: 44px;
  }
}

/* <pathways-frame> styles, part 11 of 14: "Do all 7" (Home and the top-bar-off frame) and the sidebar's brand lockup.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* =====================================================================================================
 * "Do all 7" (ruling 2026-10-03) — Home and the top-bar-off frame.
 * ===================================================================================================== */
/* Item 1: with something needing the person, the box sits in the upper third, so Needs you and Continue fit above
 * the fold. Dead center (the hero's own height rule) stays only when nothing needs them. */
.pf-fc__hero--upper {
  min-height: 0;
  justify-content: flex-start;
  padding-top: 28px;
}

.pf-fc--home .pf-fc__empty {
  gap: 22px;
}

/* Item 4: three suggestions under Home's box; they wrap on phones. */
.pf-home__sugg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.pf-home__sugg .pf-concept {
  margin-left: 6px;
  vertical-align: 1px;
}

/* Item 5: Continue is one compact row of four cards. */
.pf-root .pf-home__cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pf-home__cont {
  padding: 10px 12px;
  gap: 4px;
}
.pf-home__cont strong {
  font-size: var(--pt-body-lg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* On a phone the row scrolls sideways (one row, swipe for more) rather than stacking four tall cards. */
.pf-root--narrow .pf-home__cards {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}
.pf-root--narrow .pf-home__cards .pf-home__cont {
  flex: 0 0 62%;
  scroll-snap-align: start;
}

/* Short screens (an iPhone on its side): a tighter hero, so the box still starts in the upper third. */
@media (max-height: 500px) {
  .pf-root--responsive .pf-fc__hero--upper {
    padding-top: 10px;
    gap: 6px;
  }
  .pf-root--responsive .pf-fc__hero--upper .pf-home__greeting {
    font-size: var(--pt-heading);
  }
}
/* Item 7, the left menu with no top bar (desktop and iPad, the only layout there since UXD-118): Search at the sidebar's top, Needs you as a place, the workspace and profile at its foot. */
.pf-side__search {
  flex: none;
  color: var(--pf-graphite);
}

.pf-side:not(.pf-side--collapsed) .pf-side__top .pf-logo {
  margin-right: auto;
}

.pf-side__needs {
  position: relative;
}

.pf-side__badge {
  margin-left: auto;
  min-width: var(--pf-chip-h);
  height: var(--pf-chip-h);
  box-sizing: border-box;
  padding: 0 6px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-deep-navy);
  color: #fff;
  font: 700 var(--pt-micro)/var(--pf-chip-h) var(--pf-font-body);
  text-align: center;
}

/* Collapsed: the badge sits on the icon. */
.pf-side--collapsed .pf-side__badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: var(--pf-chip-h);
  height: var(--pf-chip-h);
  padding: 0 4px;
  font-size: var(--pt-micro);
  line-height: var(--pf-chip-h);
}

.pf-side__foot {
  margin-top: auto;
  padding-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--pf-hairline);
}

.pf-side--collapsed .pf-side__foot {
  justify-content: center;
  border-top: 0;
}

.pf-side__workspace {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The profile menu opens upward from the foot, and to the right of a collapsed rail. */
.pf-side__foot .pf-profile__menu {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  transform: translateY(4px);
}
.pf-side__foot .pf-profile__menu.pf-menu--open {
  transform: translateY(0);
}

.pf-side__foot .pf-profile {
  margin-left: auto;
}

.pf-side--collapsed .pf-side__foot .pf-profile {
  margin-left: 0;
}

/* The foot's menu must not be clipped by the sidebar. */
.pf-root--left .pf-side__panel:has(.pf-side__foot) {
  overflow: visible;
}

/* Build step 05 (SBT-05-11): in a short window (an iPhone on its side) the collapsed rail's own content — the
 * wordmark, New chat, the places (Home, Artifacts, Projects, Workflows and, as a place, Needs you) and the profile
 * foot — can be taller than the window, with no box a finger can scroll (the panel above keeps overflow: visible, on
 * purpose, so the foot's profile menu and a toggle's tooltip are never clipped). The places list is the one part
 * that may grow without bound, so it is the part that scrolls: the wordmark, New chat and the foot stay put (each is
 * `flex: none` already), and only `.pf-side__places` grows to fill what is left and scrolls the rest into view. */
@media (max-height: 500px) {
  .pf-root--left .pf-side--collapsed .pf-side__places {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

.pf-menu__preview {
  margin-top: 4px;
  padding: 6px 4px 0;
  border-top: 1px dashed var(--pf-hairline);
}
.pf-menu__preview .pf-eyebrow {
  display: block;
  padding: 0 6px 2px;
}

/* =====================================================================================================
 * The sidebar's brand lockup (ruling 2026-10-03: "Can you fix the TRIARQ Health logo? … Pathways Intelligence needs
 * to be the right size for that branding").
 * The guidelines (v4, pp5–8) give no clear-space, minimum-size or product-name rule, so these are DERIVED, not ruled:
 *   - the wordmark is 28 px high, the README's frame value (its only pinned size), used as the minimum;
 *   - the clear-space unit X is a quarter of the wordmark's height (7 px); nothing sits within X of it;
 *   - "Pathways Intelligence" is Gill Sans SemiBold (p16, p19 "Headline Small"), 24 px, so its cap height is close to
 *     the TRIARQ letters' (about 16 px against 18.6 px) and it fits the 240 px column; it sits X below the wordmark.
 * The wordmark, the product name and the nav icons share one left edge (20 px: the panel's 10 px plus a row's 10 px).
 * ===================================================================================================== */
.pf-root--left .pf-side:not(.pf-side--collapsed) {
  --pf-lockup-x: 7px;
}
.pf-root--left .pf-side:not(.pf-side--collapsed) .pf-side__top {
  min-height: 44px;
  margin-bottom: var(--pf-lockup-x);
}
.pf-root--left .pf-side:not(.pf-side--collapsed) .pf-side__wordmark {
  height: 44px;
  padding: 0 0 0 10px;
  margin-right: auto;
}
.pf-root--left .pf-side:not(.pf-side--collapsed) .pf-side__wordmark .pf-logo__img {
  height: 28px;
}
.pf-root--left .pf-side:not(.pf-side--collapsed) .pf-side__product {
  padding: 0 0 12px 10px;
  /* Ruling 2026-10-03 ("Yes to all"): 20 px, down from 24. */
  font: 600 var(--pt-heading)/1.1 var(--pf-font-heading);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Center: the stacked lockup centered in the header; the collapse control (and Search) in the top-right corner. */
.pf-root--lockup-center .pf-side:not(.pf-side--collapsed) .pf-side__top {
  position: relative;
  justify-content: center;
}
.pf-root--lockup-center .pf-side:not(.pf-side--collapsed) .pf-side__wordmark {
  padding: 0;
  margin: 0;
}
.pf-root--lockup-center .pf-side:not(.pf-side--collapsed) .pf-side__toggle {
  position: absolute;
  top: -6px;
  right: -4px;
}
.pf-root--lockup-center .pf-side:not(.pf-side--collapsed) .pf-side__search {
  position: absolute;
  top: -6px;
  right: 40px;
}
.pf-root--lockup-center .pf-side:not(.pf-side--collapsed) .pf-side__product {
  padding: 0 0 12px;
  text-align: center;
}

/* Collapsed (UXD-34): the same wordmark, 28 px high, centered in the 104 px rail and in its 44 px row; the 8 px left
 * each side and the 8 px above and below it keep the clear space X (7 px). */
.pf-side--collapsed .pf-side__wordmark {
  height: 44px;
  padding: 0;
  margin: 0 auto;
}
.pf-side--collapsed .pf-side__wordmark .pf-logo__img {
  height: 28px;
}

/* <pathways-frame> styles, part 12 of 14: voice: the microphone, the listening line, the notice, ambient's consent step and its indicator.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* =====================================================================================================
 * Voice: the mic left of Send, the listening line, the notice, ambient's consent step and its indicator.
 * ===================================================================================================== */
.pf-voice,
.pf-voice-more {
  position: relative;
  flex: none;
  height: 32px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--pf-border-secondary);
  background: #fff;
  color: var(--pf-deep-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pf-voice {
  width: 32px;
  border-radius: var(--pf-radius-pill);
}

.pf-voice-more {
  width: 20px;
  margin-left: -6px;
  border: 0;
  background: transparent;
}

/* Listening: navy with a pulsing ring (no animation with reduced motion). */
.pf-voice--on {
  border-color: var(--pf-deep-navy);
  background: var(--pf-deep-navy);
  color: #fff;
  animation: pf-voice-pulse 1.4s ease-out infinite;
}

@keyframes pf-voice-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 113, 175, 0.45);
  }
  100% {
    box-shadow: 0 0 0 9px rgba(0, 113, 175, 0);
  }
}
.pf-voice-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 240px;
  z-index: 26;
  box-shadow: var(--pf-shadow-menu);
}

.pf-voice-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 var(--pt-meta) var(--pf-font-body);
  color: var(--pf-deep-navy);
}

.pf-voice-live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pf-vital-blue);
}

.pf-voice-line,
.pf-voice-error {
  margin: 0;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-voice-error {
  color: var(--pf-credits-limit);
  font-weight: 700;
}

.pf-voice-notice {
  padding: 10px 12px;
  border: 1px solid var(--pf-selected-border);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-selected);
  font-size: var(--pt-body);
  color: var(--pf-graphite);
}
.pf-voice-notice p {
  margin: 0 0 8px;
}

.pf-voice-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-ambient-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--pf-scrim);
}

.pf-ambient-confirm {
  position: fixed;
  z-index: 81;
  left: 50%;
  top: 50%;
  width: min(420px, 100vw - 32px);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: var(--pf-radius-md);
  background: #fff;
  box-shadow: var(--pf-shadow-plus-menu);
  font-size: var(--pt-body-lg);
}
.pf-ambient-confirm p {
  margin: 8px 0;
}

.pf-ambient-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  color: var(--pf-deep-navy);
}
.pf-ambient-consent input {
  width: 20px;
  height: 20px;
}

/* The recording indicator: on every page and on iPhone, above the tab bar, never hidden. */
.pf-ambient-bar {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 14px;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-deep-navy);
  color: #fff;
  font: 700 var(--pt-body) var(--pf-font-body);
  box-shadow: var(--pf-shadow-plus-menu);
}

.pf-ambient-bar__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pf-danger);
}

.pf-ambient-bar__btn {
  min-width: 44px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--pf-radius-pill);
  background: transparent;
  color: #fff;
  font: 700 var(--pt-body) var(--pf-font-body);
  cursor: pointer;
}

.pf-msg-draft {
  padding: 10px 12px;
  border: 1px solid var(--pf-selected-border);
  border-radius: var(--pf-radius-sm);
  background: #fff;
  font-size: var(--pt-body);
}

.pf-msg-draft__head {
  color: var(--pf-deep-navy);
}

.pf-msg-draft__text {
  margin: 6px 0;
  white-space: pre-wrap;
}

.pf-msg-draft__note {
  display: block;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-msg-draft__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

@media (pointer: coarse) {
  .pf-root--responsive {
    /* Room on both sides, so the mic's, the options' and Send's 44 px touch areas never overlap. */
  }
  .pf-root--responsive .pf-voice::after,
  .pf-root--responsive .pf-voice-more::after,
  .pf-root--responsive .pf-ambient-bar__btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .pf-root--responsive .pf-voice-more {
    width: 28px;
    margin: 0 6px;
  }
  .pf-root--responsive .pf-ambient-bar__btn {
    position: relative;
    height: 44px;
  }
}
/* README "Motion": prefers-reduced-motion turns transitions (and this layer's animations) off. */
@media (prefers-reduced-motion: reduce) {
  .pf-root,
  .pf-root * {
    transition: none !important;
    animation: none !important;
  }
}

/* UXD-40, fail closed: no engine is allowed for this person, so the microphone is drawn disabled (as Send is when
   paused); pressing it shows the plain reason, never starts anything. */
.pf-voice[aria-disabled=true] {
  background: var(--pf-hover);
  color: var(--pf-stone);
  cursor: not-allowed;
}

/* <pathways-frame> styles, part 13 of 14: the @ vocabulary: the picker, the chips, the outside-system confirm, and the box's focus.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* ---------- The @ vocabulary (v6 screen 22; ruling 2026-10-03, "add @ after the current build passes") ----------
 * Chips use the Look in chip's style (selected fill and border, navy 700 12px, pill). They sit in a token row just
 * above the text, so the box stays a plain textarea. The picker is placed like the other message-row popovers. */
.pf-mentions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pf-mention {
  min-width: 0;
  max-width: 100%;
  height: 28px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--pf-selected-border);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-selected);
  color: var(--pf-deep-navy);
  font: 700 var(--pt-body) var(--pf-font-body);
}
.pf-mention .pf-icon {
  flex: none;
}

.pf-mention__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-mention__x {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--pf-radius-pill);
  background: transparent;
  color: var(--pf-deep-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pf-mention__x:hover {
  background: var(--pf-selected-border);
}

/* A sent message shows its chips, smaller, before the text. */
.pf-msg-user__mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
  white-space: normal;
}

.pf-mention--sent {
  height: var(--pf-chip-h);
  padding: 0 8px;
  font-size: var(--pt-meta);
  background: #fff;
}

.pf-mention-pop {
  width: 320px;
}
.pf-mention-pop.pf-mention-pop--full {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
}

.pf-mention-opt[aria-selected=true] {
  background: var(--pf-selected);
  box-shadow: inset 0 0 0 1px var(--pf-selected-border);
}
.pf-mention-opt .pf-icon {
  flex: none;
}
.pf-mention-opt .pf-concept {
  /* Unit H, item 3: a long label ("Concept · needs the gateway") wraps inside the row, never past the panel's edge. */
  flex: 0 1 auto;
  max-width: 48%;
  height: auto;
  min-height: var(--pf-chip-h);
  padding: 2px 8px;
  margin-left: auto;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
.pf-mention-opt .pf-look-item__text {
  flex: 1 1 auto;
  min-width: 0;
}

.pf-mention-opt__name {
  color: var(--pf-deep-navy);
  font-weight: 700;
}

.pf-mention-hint {
  font-weight: 700;
  color: var(--pf-deep-navy);
}

.pf-using {
  color: var(--pf-graphite);
}

.pf-outside-note {
  margin: 6px 0 0;
  font-size: var(--pt-meta);
  color: var(--pf-stone);
}

.pf-outside-confirm__concept {
  margin: 2px 0 6px;
}

.pf-outside-confirm__list {
  margin: 8px 0;
}
.pf-outside-confirm__list dt {
  font: 700 var(--pt-label) var(--pf-font-body);
  color: var(--pf-stone);
}
.pf-outside-confirm__list dd {
  margin: 0 0 6px;
  color: var(--pf-graphite);
}

@media (pointer: coarse) {
  .pf-root--responsive {
    /* The chip's remove control gets a 44 x 44 touch area; the row's gap keeps two such areas from overlapping. */
  }
  .pf-root--responsive .pf-mentions {
    gap: 16px 26px;
    margin-bottom: 8px;
  }
  .pf-root--responsive .pf-mention__x::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}
/* A disabled primary button (ambient listening's Start before consent) must look disabled, not filled navy. Stone
 * on the hover fill is about 6.3:1, so even the disabled label passes 4.5:1. */
.pf-btn--primary:disabled {
  border-color: var(--pf-border-secondary);
  background: var(--pf-hover);
  color: var(--pf-stone);
  cursor: not-allowed;
}

/* The chat box's focus (ruling 2026-10-03, "Yes to all"): the message box's own border is the only focus indicator,
 * at least 2 px. The frame-wide focus outline outranked the text area's "none", which drew a second blue outline
 * inside the border; this rule is specific enough to win. The panel's box has a 1 px border, so on focus a 1 px ring
 * of the same blue joins it (2 px in all, no layout shift); Home's box is already drawn with a 2 px blue border. */
.pf-root .pf-box .pf-box__input:focus,
.pf-root .pf-box .pf-box__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.pf-box:not(.pf-box--home):has(.pf-box__input:focus) {
  box-shadow: 0 0 0 1px var(--pf-vital-blue);
}

/* Home's and full-screen Ask AI's box is drawn with its 2 px blue border at rest too, so its border cannot also show
 * focus (accessibility audit 2026-10-05, B1; WCAG 2.4.7). On focus it takes the shell's standard ring instead: the
 * 2 px Vital Blue outline, 2 px outside the border, as every other control draws it. */
.pf-box--home:has(.pf-box__input:focus) {
  outline: 2px solid var(--pf-vital-blue);
  outline-offset: 2px;
}

/* The @ button (UXD-80): drawn like +, beside it; its tap area is 44 px, so it sits 14 px clear of its neighbor. */
.pf-at {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  box-sizing: border-box;
  margin-left: 14px;
  padding: 0;
  border: 1px solid var(--pf-border-secondary);
  border-radius: var(--pf-radius-pill);
  background: #fff;
  color: var(--pf-graphite);
  /* The @ is a drawing centered by flex, as the + is (ASX8): a text @ sits low in its line and looks off center. */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pf-at:first-child {
  margin-left: 0;
}
/* On Home the @ is the same size as the + beside it (32 px). */
.pf-box--home .pf-at {
  width: 32px;
  height: 32px;
}
.pf-at::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* "Show more" and the count under a long list (ASX9): the same row look as an option, bold, with a 44 px touch target. */
.pf-mention-more {
  color: var(--pf-vital-blue);
  font-weight: 700;
}
.pf-mention-count {
  color: var(--pf-graphite);
}

/* The kind chips above the list (ASX10): a wrapping row, so none runs past the picker, 44 px high on touch. */
.pf-mention-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px 4px;
}
.pf-mention-kind {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--pf-border-secondary);
  border-radius: var(--pf-radius-pill);
  background: #fff;
  color: var(--pf-graphite);
  font: 700 var(--pt-body) var(--pf-font-body);
  cursor: pointer;
}
.pf-mention-kind[aria-pressed=true] {
  border-color: var(--pf-vital-blue);
  background: var(--pf-selected);
  color: var(--pf-deep-navy);
}
@media (pointer: coarse) {
  .pf-mention-kind {
    min-height: 44px;
  }
}

/* <pathways-frame> styles, part 14 of 14: added for the web component: icons, host containers, the iPhone drawer, pinned tabs, state words.
   scripts/build.mjs joins the parts in number order, so the cascade is exactly that of the one older file they were
   split from on 2026-10-04 (no rule changed). */

/* ======================================================================================================== */
/* Added for the web component.                                                                             */
/* ======================================================================================================== */

/*
 * The base the Angular build got from its app's global styles (Ionic's normalize and structure sheets, and the
 * app's own `* { box-sizing: border-box }`), scoped to the frame's own markup, and since build step 12 (SBP-48) also
 * the frame's guard against the host page's own CSS (light DOM, frame technology spec Risks 1).
 *
 * In plain language: each rule below has the weight of five element names (`html pathways-frame button`, plus two
 * empty `:not(pf-none)`, which always match and each count as one more element name), so
 *   - any frame rule with a class (every pf- rule) still wins over it, exactly as before; and
 *   - a host's rule written with up to four element names (`button { … }`, `html body div button { … }`) loses to it.
 * Each rule starts with `all: revert`, which puts back the browser's own defaults, so with no host CSS the frame
 * looks exactly as it did; then it restates the base it always had. The host's own page and chat content, inside
 * [data-pf-slot], is left out on purpose: it is the host's page. Inline SVG and images are not reverted (their width
 * and height attributes would be dropped with it); images get plain zero spacing instead. A host rule with a class or
 * an id aimed at the frame's elements can still reach them: docs/bridge-hand-off.md says so.
 */
:where(pathways-frame),
:where(pathways-frame *:not([data-pf-slot] *)) {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html pathways-frame:not(pf-none):not(pf-none) :is(div, span, p, a, button, strong, b, em, i, small, ul, ol, li, dl, dt, dd, section, nav, header, footer, main, aside, h1, h2, h3, h4, label, input, textarea, select, kbd, code):where(:not([data-pf-slot] *)) {
  all: revert;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html pathways-frame:not(pf-none):not(pf-none) :where(*:not([data-pf-slot] *))::before,
html pathways-frame:not(pf-none):not(pf-none) :where(*:not([data-pf-slot] *))::after {
  box-sizing: border-box;
}
html pathways-frame:not(pf-none):not(pf-none) button:where(:not([data-pf-slot] *)) {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-style: inherit;
  font-variant: inherit;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: button;
  touch-action: manipulation;
}
html pathways-frame:not(pf-none):not(pf-none) a:where(:not([data-pf-slot] *)) {
  background-color: transparent;
  touch-action: manipulation;
}
html pathways-frame:not(pf-none):not(pf-none) textarea:where(:not([data-pf-slot] *)) {
  overflow: auto;
  height: auto;
  font: inherit;
  color: inherit;
  line-height: normal;
  touch-action: manipulation;
}
html pathways-frame:not(pf-none):not(pf-none) input:where(:not([data-pf-slot] *)),
html pathways-frame:not(pf-none):not(pf-none) label:where(:not([data-pf-slot] *)) {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: normal;
}
:where(.pf-root input[type=search]:not([data-pf-slot] *))::-webkit-search-cancel-button,
:where(.pf-root input[type=search]:not([data-pf-slot] *))::-webkit-search-decoration {
  -webkit-appearance: none;
}
html pathways-frame:not(pf-none):not(pf-none) img:where(:not([data-pf-slot] *)) {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
html pathways-frame:not(pf-none):not(pf-none) :is(strong, b):where(:not([data-pf-slot] *)) {
  font-weight: bold;
}
html pathways-frame:not(pf-none):not(pf-none) :is(h1, h2):where(:not([data-pf-slot] *)) {
  font-weight: 500;
  line-height: 1.2;
}
/* The icon helper's wrapper, as the Angular icon component drew its host. */
.pf-icon {
  display: inline-flex;
  flex: none;
  line-height: 0;
}

/* The chat body container for the host's own chat content: it takes no room until the host fills it. */
.pf-chat-slot:empty {
  display: none;
}

/*
 * One placement for every popover (coordinator ruling 2026-10-03, after Mike's "fix the microphone menu"). The
 * component's placePopover() picks the side with more room and caps the height to the visible page area; these two
 * classes move the popover to that side, and every popover scrolls inside when it is taller than its room.
 */
.pf-root .pf-menu.pf-pop--up {
  top: auto;
  bottom: calc(100% + 8px);
}
.pf-root .pf-menu.pf-pop--down {
  bottom: auto;
  top: calc(100% + 8px);
}
.pf-root .pf-profile__menu,
.pf-root .pf-more-menu,
.pf-root .pf-voice-menu {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A collapsed rail's tooltip is nudged up or down to stay inside the visible page area (--pf-tip-shift). */
.pf-side--collapsed .pf-side__item:hover .pf-side__label,
.pf-side--collapsed .pf-side__item:focus-visible .pf-side__label,
.pf-side--collapsed .pf-side__toggle:hover .pf-side__tip,
.pf-side--collapsed .pf-side__toggle:focus-visible .pf-side__tip {
  margin-top: var(--pf-tip-shift, 0);
}
/* The profile menu sits 10 px below its button (README), not the message row's 8 px. */
.pf-root .pf-profile__menu.pf-pop--down {
  top: calc(100% + 10px);
}
/* Until the frame has drawn its first real page, nothing fades or slides (see renderNow: data-pf-ready). */
pathways-frame:not([data-pf-ready]) *,
pathways-frame:not([data-pf-ready]) *::before,
pathways-frame:not([data-pf-ready]) *::after {
  transition: none !important;
}

/* ---------- iPhone: the menu as a drawer (ruling 2026-10-03, "go with your picks"; phoneNav 'drawer') ----------
 * The left menu slides in from the left over the page, with a scrim; no bottom tabs. Overrides v6 S2's no-drawer rule.
 * Targets are 44 px (the frame's touch rules apply to its rows). */
.pf-root--narrow .pf-side--drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 75;
  width: min(300px, 86vw);
  transition: none;
}
.pf-root--narrow .pf-side--drawer .pf-side__panel {
  width: 100%;
  height: 100%;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--pf-shadow-plus-menu);
  animation: pf-drawer-in 0.2s var(--pf-ease-aside);
}
@keyframes pf-drawer-in {
  from {
    transform: translateX(-100%);
  }
}
.pf-root--narrow .pf-drawer-scrim {
  position: fixed;
  z-index: 74;
}
.pf-menu-btn,
.pf-top-ask {
  flex: none;
}
.pf-menu-btn {
  margin-right: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .pf-root--narrow .pf-side--drawer .pf-side__panel {
    animation: none;
  }
}
/* iPhone with the drawer: no tab bar below the page, so the page keeps clear of the home indicator itself. */
.pf-root--responsive.pf-root--narrow.pf-root--left:not(.pf-root--tabs-pinned) .pf-body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- iPhone: the pinned tab bar (phoneNav 'tabs' with the left menu; Mike's device test, 2026-10-03) ----------
 * The shell is fixed height and only the page scrolls, so the bar never scrolls away. Ask AI opens as tab content
 * above the bar (not over it), with the Ask AI tab marked. Only the on-screen keyboard hides the bar. */
.pf-root--tabs-pinned .pf-sheet.pf-sheet--tab {
  bottom: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: 0;
}
.pf-root--tabs-pinned.pf-root--keyboard .pf-tabbar {
  display: none;
}
.pf-root--tabs-pinned.pf-root--keyboard .pf-sheet.pf-sheet--tab {
  bottom: 0;
}
.pf-tab--ask-here .pf-tab__label {
  color: var(--pf-deep-navy);
  font-weight: 700;
}

/* ---------- State words (v6 README "Design tokens"; screen 34, "words for state rather than color alone") ----------
 * One pill, five tones. 24 px high (DSC-7), padding 0 9px, radius 999, 700 14px (DSC-2). The four status tones are the
 * canon's (DSC-3); the neutral one is unchanged. Shared by the frame and the host's pages. */
.pf-state {
  display: inline-flex;
  align-items: center;
  height: var(--pf-chip-h);
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid;
  border-radius: 999px;
  font: 700 var(--pt-micro)/1 var(--pf-font-body);
  white-space: nowrap;
}
.pf-state--ok {
  border-color: var(--pf-success-border);
  background: var(--pf-success-fill);
  color: var(--pf-success);
}
.pf-state--info {
  border-color: var(--pf-info-border);
  background: var(--pf-info-fill);
  color: var(--pf-info);
}
.pf-state--warn {
  border-color: var(--pf-warning-border);
  background: var(--pf-warning-fill);
  color: var(--pf-warning);
}
.pf-state--bad {
  border-color: var(--pf-danger-border);
  background: var(--pf-danger-fill);
  color: var(--pf-danger);
}
.pf-state--mute {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #5a5a5a;
}

/* The credits meter can't be read: the ring becomes a state word and Send looks disabled (gap F7). */
.pf-ring--unavailable {
  gap: 0;
}
.pf-send[aria-disabled=true] {
  background: var(--pf-hover);
  border: 1px solid #d0d5dd;
  color: var(--pf-stone);
  cursor: not-allowed;
}
.pf-credits-paused {
  margin: 6px 0 0;
  font-size: var(--pt-body);
  line-height: 1.45;
  color: var(--pf-warning);
}

/* Short screens (iPhone landscape): the expanded menu scrolls as a whole, so Recents keep their room and the foot
 * (workspace and profile, which sit there because desktop and iPad have no top bar) stays in view at the bottom. The foot's profile menu is placed on the
 * screen itself by placePopover, so this scrolling never clips it. */
@media (max-height: 500px) {
  .pf-side:not(.pf-side--collapsed) .pf-side__panel {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .pf-side:not(.pf-side--collapsed) .pf-side__recents {
    flex: none;
    min-height: auto;
    overflow: visible;
  }
  .pf-side:not(.pf-side--collapsed) .pf-side__foot {
    position: sticky;
    bottom: calc(-12px - env(safe-area-inset-bottom));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--pf-rail);
  }
}
/* Pinned tabs: the Ask AI view is tab content between the top bar and the tab bar, so its own header (Close, Chats,
 * New chat) shows below the top bar instead of under it. */
.pf-root--tabs-pinned .pf-sheet.pf-sheet--tab {
  top: calc(56px + env(safe-area-inset-top));
  padding-top: 0;
}

/* Added (step 12, render check 2026-10-05): the frame sizes itself. Straight in body it is the page's shell, so it takes
   the window's height (dvh: the visible area on iPhone) even when the host sets no height on html or body, where
   "height: 100%" shrank it to a 28 px strip. The default body margin goes; :where() keeps a host's own margin winning. */
body > pathways-frame {
  height: 100vh;
  height: 100dvh;
}

:where(body:has(> pathways-frame)) {
  margin: 0;
}

/*
 * The full chat port's few pieces (build step 10, SBP-35 to SBP-41): the line after Stop, a reopened chat's title,
 * and the + menu's Skills heading. Added for the web component; every value from the tokens and the one type scale.
 */
.pf-msg-stopped {
  margin: 0;
  color: var(--pf-stone);
  font: var(--pt-body) var(--pf-font-body);
}

.pf-thread-head {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pf-hover);
}

/* The scope line under the title: "Scope: <project> · project", "Started on …" (v6 screen 20). */
.pf-thread-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0;
  color: var(--pf-stone);
  font: var(--pt-meta) var(--pf-font-body);
}

.pf-thread-title {
  margin: 0 0 4px;
  color: var(--pf-deep-navy);
  font: 700 var(--pt-body) var(--pf-font-body);
}

/* The Skills heading is written in sentence case and drawn in capitals, like the + menu's other headings. */
.pf-plus-menu__head--words {
  text-transform: uppercase;
}

/* The answer's action row (v6 screen 20): "AI-generated", what it used where the back end said, Copy, and the rating. */
.pf-answer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 2px 0 8px;
  color: var(--pf-stone);
  font: var(--pt-meta) var(--pf-font-body);
}

.pf-answer-row__ai {
  display: inline-flex;
  align-items: center;
  height: var(--pf-chip-h);
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--pf-hover);
  border-radius: var(--pf-radius-pill);
  font: 700 var(--pt-micro) var(--pf-font-body);
}

.pf-answer-row__btn {
  min-height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pf-deep-navy);
  font: var(--pt-meta) var(--pf-font-body);
  cursor: pointer;
}

.pf-answer-row__btn:hover {
  background: var(--pf-hover);
}

.pf-answer-row__btn[aria-pressed='true'] {
  background: var(--pf-selected);
  font-weight: 700;
}

/* <pathways-frame> styles, part 16: Add a document and Add an Artifact (UXD-78, 2026-10-06).
   The document chips, the refusal message under the box, and the + menu's Back row. Every value comes from the frame's
   tokens and the one type scale; the chips reuse the @ chip's shape, so a document and an Artifact look like siblings
   but say different things ("Document: …" and "Artifact: …"). */

/* The hidden file picker is never drawn; "Choose a file" opens it. */
.pf-doc-input {
  display: none;
}

.pf-docs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pf-doc {
  min-width: 0;
  max-width: 100%;
  height: 28px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 4px;
  border: 1px solid var(--pf-border-secondary);
  border-radius: var(--pf-radius-xs);
  background: #fff;
  color: var(--pf-graphite);
  font: var(--pt-body) var(--pf-font-body);
}

.pf-doc__tag {
  flex: none;
  min-width: 34px;
  height: var(--pf-chip-h);
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--pf-radius-pill);
  background: var(--pf-hover);
  color: var(--pf-deep-navy);
  font: 700 var(--pt-micro)/calc(var(--pf-chip-h) - 2px) var(--pf-font-body);
  text-align: center;
  letter-spacing: 0.04em;
}

.pf-doc__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A refused file: the reason in words, file by file, and a Dismiss. */
.pf-doc-refused {
  margin: 6px 0 0;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left: 3px solid var(--pf-credits-limit);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-untrusted-fill);
  color: var(--pf-graphite);
  font: var(--pt-body)/1.45 var(--pf-font-body);
}

.pf-doc-refused__body {
  flex: 1;
  min-width: 0;
}

.pf-doc-refused__allowed {
  margin: 6px 0 0;
  color: var(--pf-stone);
}

.pf-doc-refused__list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

.pf-doc-refused__list li + li {
  margin-top: 4px;
}

.pf-doc-refused__x {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--pf-control-border);
  border-radius: var(--pf-radius-xs);
  background: #fff;
  color: var(--pf-deep-navy);
  font: 700 var(--pt-meta) var(--pf-font-body);
  cursor: pointer;
}

/* The Artifact list's Back row: the down chevron turned to point left. */
.pf-plus-back {
  flex: none;
  display: inline-flex;
  transform: rotate(90deg);
}

/* "Choose a file" drawn off when the settings can't be read (fail closed). */
.pf-plus-item[aria-disabled="true"] {
  cursor: not-allowed;
}
.pf-plus-item[aria-disabled="true"] .pf-plus-item__title {
  color: var(--pf-stone);
}

/* Touch screens: the same 44 x 44 hit areas as the frame's other controls (v6 R28). Document chips wrap with the @ chips'
   row gap, so two Remove areas never overlap; Dismiss keeps its drawn size and gains an invisible 44 x 44 area. */
@media (pointer: coarse) {
  .pf-root--responsive .pf-docs {
    gap: 16px 26px;
    margin-bottom: 8px;
  }
  .pf-root--responsive .pf-doc-refused__x {
    position: relative;
  }
  .pf-root--responsive .pf-doc-refused__x::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/*
 * Ask AI on an Artifact (UXD-27, ask-context.ts): the scope chip, the "From the Artifact · untrusted" block, and the
 * untrusted line under an answer. Kept in its own file (the older stylesheet may not grow); the build appends it.
 */

/* The scope chip above the message box: "This Artifact · <title>". */
.pf-actx-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0 0 6px;
  padding: 3px 10px;
  width: fit-content;
  min-height: var(--pf-chip-h);
  box-sizing: border-box;
  border: 1px solid var(--pf-selected-border);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-selected);
  color: var(--pf-deep-navy);
  font-size: var(--pt-meta);
  font-weight: 700;
}
.pf-actx-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* What Ask AI read from the Artifact, labeled untrusted: an amber edge, a warm fill, text only. */
.pf-actx {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--pf-untrusted);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-untrusted-fill);
  font-size: var(--pt-body);
  text-align: left;
}
.pf-actx__label {
  margin: 0 0 6px;
  color: var(--pf-untrusted);
  font-size: var(--pt-meta);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pf-actx__fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 10px;
  margin: 0;
}
.pf-actx__fields dt {
  color: var(--pf-stone);
}
.pf-actx__fields dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--pf-graphite);
}
.pf-actx__empty {
  margin: 0;
  color: var(--pf-stone);
}
.pf-actx__questions,
.pf-actx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.pf-actx__hint {
  flex: 1 0 100%;
  color: var(--pf-stone);
  font-size: var(--pt-meta);
}

/* Under an answer that drew on the Artifact's content. */
.pf-msg-note[data-trust='untrusted'] {
  border-left: 3px solid var(--pf-untrusted);
  padding-left: 8px;
}
.pf-actx-note {
  margin: 6px 0 0;
  color: var(--pf-untrusted);
  font-size: var(--pt-meta);
  font-weight: 700;
}

/*
 * The shell's type scale: the ONE place every text size in the frame and the pages comes from (UXD-57, Mike
 * 2026-10-04, "Option a": shell text raised one step; a 14 px reading floor and nothing under 12 px anywhere; from
 * 2026-10-05 nothing visible under 14 px, TYPE-02).
 *
 * The build puts this file at the top of both stylesheets (dist/pathways-frame.css and dist/pathways-pages.css), so a
 * page works with or without the frame around it, and both read the same values. The names start --pt- ("Pathways
 * type"), shared by the pf- and pp- families. They are set on the document root with no weight (:where), so a host can
 * re-map them on any element above the shell, for example:  pathways-frame { --pt-body: 15px; }
 *
 * Every font size in src/frame/*.css, src/ask-context.css and src/pages/*.css is one of these; the floor test
 * (tests/type-floor.spec.ts, TYPE-01) fails if any drawn text is under its floor. Before UXD-57 the sizes were written
 * one by one in each rule, from 9.5 px to 14 px for text; each moved up one step onto this scale.
 */
:where(:root) {
  /* Text (raised one step by UXD-57; then, 2026-10-05, every visible size to at least 14 px: a render check asked for
     "everything visible to at least 14 px" through these tokens, so micro, label and meta now equal body. The roles
     stay named apart, so the hierarchy can come back by weight, color or case without touching a rule. The product
     owner may veto this; it is one commit.) */
  --pt-micro: 14px;    /* badges, counts, state words, tags, keyboard hints, initials, the collapsed rail and tab bar
                          labels, the CONFIDENTIAL stamp line (was 9.5 to 11.5 px; 12 px under UXD-57) */
  --pt-label: 14px;    /* column headers and small uppercase section labels (was 10.5 to 12 px) */
  --pt-meta: 14px;     /* secondary meta: row sub-labels, owner and about chips, details, times, notes, the compose
                          footer, the credits ring text, tooltips (was 11 to 12.5 px) */
  --pt-body: 14px;     /* reading text: rows, summaries, buttons, menu items, tabs, chips, status lines (was 12 to
                          13 px); the style guide's 14 px app base */
  --pt-body-lg: 15px;  /* the larger reading text: left-menu places, titles in a row or panel, dialog bodies, the
                          full-screen chat, the message box (was 13.5 to 14 px) */
  --pt-input: 16px;    /* the large text boxes, Search and the Home message box (was 15 px); 16 px also keeps iOS
                          from zooming in */

  /* Headings and the product name (unchanged by UXD-57: they were already above the floor; the hierarchy holds) */
  --pt-title: 16px;           /* the product name in the top bar, the viewer's Artifact title, form fields */
  --pt-subhead: 17px;         /* Home's section headings */
  --pt-dialog-title: 19px;    /* dialog titles */
  --pt-heading: 20px;         /* the left menu's product name, the outside view's title, Home's greeting on a short screen */
  --pt-page-title: 22px;      /* page titles and state-page headings */
  --pt-greeting-narrow: 24px; /* Home's greeting on iPhone */
  --pt-greeting: 28px;        /* Home's greeting */
}

/*
 * The shell pages' design tokens (v6 README "Design tokens"; the same values as the frame's tokens.css, under the
 * pages' own --pp- names, so a page works with or without the frame around it). Set on each page element with no
 * weight (:where), so a host can map its own names onto them.
 */
:where(.pp-el) {
  --pp-navy: #12274a;          /* Deep Navy: headings, primary buttons, active text */
  --pp-blue: #0071af;          /* Vital Blue: links, focus, the search box border */
  --pp-current: #0071af;       /* "You are here": the 3 px Vital Blue bar or underline, never a fill (DSC-1; was --pp-orange, Oravive) */
  --pp-text: #262626;
  --pp-text-2: #5a5a5a;
  --pp-control: #707070;       /* control borders */
  --pp-hairline: #e4e7ec;
  --pp-border-2: #d0d5dd;
  --pp-hover: #f2f4f7;
  --pp-selected: #eef5fb;
  --pp-selected-border: #cfe3f3;
  --pp-canvas: #f7f8fa;
  --pp-white: #ffffff;
  --pp-danger: #c0392b;        /* destructive buttons (canon danger ink, DSC-3; was #8b1a1a) */
  --pp-warn-text: #8a5410;

  /* State words: border / fill / text. Success, info, warning and danger are the canon's (DSC-3, canon 7.2.0,
     --px-color-success*, -info*, -warning*, -danger*); "bad" is the canon's danger. Neutral ("mute") is unchanged: it is
     not one of the status colors DSC-3 names. */
  --pp-ok-b: #b7dfc6;   --pp-ok-f: #e6f4ea;   --pp-ok-t: #1a7a4a;
  --pp-info-b: #0071af; --pp-info-f: #eef5fb; --pp-info-t: #0071af;
  --pp-warn-b: #f3d6ac; --pp-warn-f: #fdf1e3; --pp-warn-t: #8a5410;
  --pp-bad-b: #f2c2bb;  --pp-bad-f: #fbe9e7;  --pp-bad-t: #c0392b;
  --pp-mute-b: #d0d5dd; --pp-mute-f: #f2f4f7; --pp-mute-t: #5a5a5a;

  --pp-font: Lato, Arial, sans-serif;
  --pp-font-heading: "Gill Sans", "Gill Sans MT", Arial, sans-serif;
  --pp-font-mono: ui-monospace, Menlo, monospace;

  --pp-radius-field: 8px;
  --pp-radius-card: 10px;      /* canon card and callout radius (DSC-3; was 12) */
  --pp-radius-dialog: 12px;    /* canon dialog radius (DSC-3; was 14) */
  --pp-shadow-dialog: 0 12px 32px rgba(18, 39, 74, 0.16);
  --pp-shadow-pop: 0 8px 24px rgba(18, 39, 74, 0.12);
  --pp-scrim: rgba(18, 39, 74, 0.45);   /* canon scrim, Deep Navy at 45% (DSC-3; was 32%) */

  /* Buttons: pills 34 px, padding 0 14px, 700 at the body size (14 px since UXD-57, 13 px before); 44 px on touch */
  --pp-btn-h: 34px;
  --pp-chip-h: 24px;           /* a chip with 14 px text is 24 px high (DSC-7, canon 7.3.0) */
  --pp-touch: 44px;
}

/*
 * The shared patterns (v6 build step 2): buttons, state words, fields, dialogs, popovers. Every class starts with
 * pp- (npm run lint:css), and every value comes from pages-tokens.css.
 */
.pp-el { display: block; font-family: var(--pp-font); font-size: var(--pt-body); line-height: 1.45; color: var(--pp-text); }
.pp-el *, .pp-el *::before, .pp-el *::after { box-sizing: border-box; }

/* ---- Buttons (2a): primary, secondary, tertiary, destructive. Never an orange fill. */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--pp-btn-h); padding: 0 14px; border-radius: 999px;
  font: 700 var(--pt-body) var(--pp-font); white-space: nowrap; cursor: pointer;
  border: 1px solid var(--pp-control); background: var(--pp-white); color: var(--pp-text);
}
.pp-btn--primary { background: var(--pp-navy); border-color: var(--pp-navy); color: var(--pp-white); }
.pp-btn--tertiary { background: transparent; border-color: transparent; color: var(--pp-blue); padding: 0 8px; }
.pp-btn--destructive { background: var(--pp-white); border-color: var(--pp-danger); color: var(--pp-danger); }
.pp-btn--small { min-height: 28px; font-size: var(--pt-body); }
.pp-btn:hover { background: var(--pp-hover); }
.pp-btn--primary:hover { background: var(--pp-navy); opacity: 0.92; }
.pp-btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.pp-btn:focus-visible, .pp-round:focus-visible, .pp-tab:focus-visible, .pp-chip:focus-visible, .pp-link:focus-visible,
.pp-option:focus-visible, .pp-menu__item:focus-visible, .pp-chipbtn:focus-visible, .pp-choice:focus-within {
  outline: 2px solid var(--pp-blue); outline-offset: 2px;
}
.pp-btn__kbd { font-weight: 400; opacity: 0.8; }
.pp-round {
  flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--pp-control);
  background: var(--pp-white); color: var(--pp-text); font: 700 var(--pt-body-lg) var(--pp-font); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pp-round--on { border-color: var(--pp-blue); background: var(--pp-selected); }
.pp-link { background: none; border: 0; padding: 0; color: var(--pp-blue); font: inherit; text-align: left; cursor: pointer; }
/* A link drawn as a link button or a button looks the same as the button it replaced (audit 2026-10-05, S8). */
a.pp-link, a.pp-btn { text-decoration: none; }
.pp-link strong { color: var(--pp-navy); }

/* Touch: every target at least 44 px (README "Touch targets"). */
@media (pointer: coarse) {
  .pp-btn, .pp-btn--small, .pp-round, .pp-tab, .pp-chip, .pp-option, .pp-menu__item, .pp-chipbtn, .pp-input, .pp-choice {
    min-height: var(--pp-touch);
  }
  .pp-round { width: var(--pp-touch); height: var(--pp-touch); }
}

/* ---- State words: words carry the state; color only repeats it. 24 px high (DSC-7), the canon's status colors (DSC-3). */
.pp-pill {
  display: inline-flex; align-items: center; height: var(--pp-chip-h); padding: 0 9px; border-radius: 999px;
  font: 700 var(--pt-micro)/1 var(--pp-font); white-space: nowrap; border: 1px solid;
}
.pp-pill--small { padding: 0 8px; font-size: var(--pt-micro); } /* DSC-7: no shorter than a chip (was 16 px high) */
.pp-pill--ok { border-color: var(--pp-ok-b); background: var(--pp-ok-f); color: var(--pp-ok-t); }
.pp-pill--info { border-color: var(--pp-info-b); background: var(--pp-info-f); color: var(--pp-info-t); }
.pp-pill--warn { border-color: var(--pp-warn-b); background: var(--pp-warn-f); color: var(--pp-warn-t); }
.pp-pill--bad { border-color: var(--pp-bad-b); background: var(--pp-bad-f); color: var(--pp-bad-t); }
.pp-pill--mute { border-color: var(--pp-mute-b); background: var(--pp-mute-f); color: var(--pp-mute-t); }
.pp-pills { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Text */
.pp-h1 { margin: 0; font: 600 var(--pt-page-title)/1.2 var(--pp-font-heading); color: var(--pp-navy); }
.pp-muted { color: var(--pp-text-2); }
.pp-mono { display: block; font: var(--pt-meta) var(--pp-font-mono); color: var(--pp-text-2); }
.pp-note { margin: 0; font-size: var(--pt-meta); line-height: 1.5; color: var(--pp-text-2); }
.pp-note--warn { display: block; color: var(--pp-warn-text); }
.pp-warn-text { color: var(--pp-warn-text); font-weight: 700; }
.pp-spacer { flex: 1; }
.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-kbd { font: 600 var(--pt-micro) var(--pp-font); padding: 2px 6px; border: 1px solid var(--pp-hairline); border-radius: 4px; color: var(--pp-text-2); }
.pp-row-flex { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- Fields: label 700 at the body size (UXD-57; 12.5px before); control at least 40 px, 1px #707070, radius 8. */
.pp-field { display: flex; flex-direction: column; gap: 5px; }
.pp-field--inline { gap: 3px; }
.pp-field__label { font: 700 var(--pt-body) var(--pp-font); color: var(--pp-text); }
.pp-input {
  min-height: 40px; padding: 6px 10px; border: 1px solid var(--pp-control); border-radius: var(--pp-radius-field);
  background: var(--pp-white); font: var(--pt-input) var(--pp-font); color: var(--pp-text); width: 100%; max-width: 100%;
}
.pp-input:focus { outline: 2px solid var(--pp-blue); outline-offset: 1px; }
.pp-select { width: auto; font-size: var(--pt-body-lg); }
.pp-q { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-q legend { width: 100%; padding: 0 0 4px; font: 700 var(--pt-body) var(--pp-font); }
.pp-choice {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--pp-control); cursor: pointer; font-size: var(--pt-body);
}
.pp-choice--on { border-color: var(--pp-navy); background: var(--pp-selected); font-weight: 700; color: var(--pp-navy); }
.pp-choice--off { opacity: 0.45; cursor: not-allowed; }
.pp-label-line { margin: 6px 0 0; font-weight: 700; color: var(--pp-navy); }

/* ---- Dialogs: radius 12 (canon, DSC-3; the README said 14), padding 22px 24px, shadow. One filled action. */
.pp-scrim { position: fixed; inset: 0; background: var(--pp-scrim); z-index: 90; }
.pp-dialog {
  position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  display: flex; flex-direction: column; gap: 14px; padding: 22px 24px;
  border-radius: var(--pp-radius-dialog); background: var(--pp-white); box-shadow: var(--pp-shadow-dialog);
}
.pp-dialog__title { margin: 0; font: 600 var(--pt-dialog-title) var(--pp-font-heading); color: var(--pp-navy); }
.pp-dialog__body { margin: 0; font-size: var(--pt-body-lg); line-height: 1.55; }
.pp-dialog__note { margin: 0; font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-dialog__actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.pp-alert { padding: 10px 12px; border-radius: var(--pp-radius-card); background: var(--pp-bad-f); color: var(--pp-bad-t); font-size: var(--pt-body-lg); line-height: 1.5; }
.pp-alert--warn { background: var(--pp-warn-f); color: var(--pp-warn-t); }
.pp-problems { margin: 0; padding-left: 18px; font-size: var(--pt-body); color: var(--pp-bad-t); }
@media (max-width: 640px) {
  .pp-dialog { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 92dvh; border-radius: var(--pp-radius-dialog) var(--pp-radius-dialog) 0 0; padding: 18px 16px; }
}

/* ---- Governance details */
.pp-gov { display: flex; flex-direction: column; gap: 8px; }
.pp-gov__h { margin: 6px 0 0; font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pp-text-2); }
.pp-facts { margin: 0; display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 3px 12px; font-size: var(--pt-body); }
.pp-fact { display: contents; }
.pp-fact dt { color: var(--pp-text-2); }
.pp-fact dd { margin: 0; overflow-wrap: anywhere; }
.pp-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pp-check { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--pt-body); }

/* ---- Popovers and menus: on screen at every size (R-36b), scroll inside when tall. */
.pp-pop {
  position: absolute; z-index: 40; max-width: calc(100vw - 24px); max-height: min(70dvh, 520px); overflow: auto;
  background: var(--pp-white); border: 1px solid var(--pp-hairline); border-radius: 12px; box-shadow: var(--pp-shadow-pop);
}
.pp-menu { display: flex; flex-direction: column; padding: 6px; min-width: 240px; }
.pp-menu__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 36px; padding: 6px 10px;
  border: 0; border-radius: 8px; background: none; font: var(--pt-body) var(--pp-font); color: var(--pp-text); text-align: left; cursor: pointer;
}
.pp-menu__item:hover { background: var(--pp-hover); }
.pp-menu__note { margin: 4px 10px; font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-options, .pp-recipients, .pp-views { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pp-options { max-height: none; }
.pp-option {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 40px; padding: 6px 10px;
  border: 1px solid var(--pp-hairline); border-radius: 8px; background: var(--pp-white); font: var(--pt-body) var(--pp-font); text-align: left; cursor: pointer;
}
.pp-option:hover { background: var(--pp-hover); }
.pp-option--off { opacity: 0.6; cursor: not-allowed; }
.pp-option__why { font-size: var(--pt-meta); color: var(--pp-warn-text); }
.pp-recipient { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--pp-hairline); }
.pp-recipient > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 640px) { .pp-recipient { grid-template-columns: 1fr; } }
.pp-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--pp-hairline); border-radius: 10px; background: var(--pp-white); }
.pp-save-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pp-patterns { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }

/*
 * The screens of v6 build step 3 and the sharing pages: the Artifacts list (3), the viewer bar (5), the contract (7),
 * Shared by me (8b) and the outside recipient's view (8c). Phone layouts stack instead of scrolling sideways.
 */

/* ---- Tabs: the active one has the 3 px Vital Blue "you are here" underline (DSC-1; it was orange). A row too
   wide for the screen (the scope tabs on iPhone, at the UXD-57 type) wraps onto a second line, so no tab is ever
   hidden past the right edge (TABS-01); it used to scroll sideways with no visible cue. */
.pp-tabs { display: flex; flex-wrap: wrap; gap: 0 18px; border-bottom: 1px solid var(--pp-hairline); }
.pp-tab {
  padding: 8px 0; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none;
  font: var(--pt-body) var(--pp-font); color: var(--pp-text); white-space: nowrap; cursor: pointer;
}
.pp-tab--on { border-bottom-color: var(--pp-current); color: var(--pp-navy); font-weight: 700; }
.pp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-chip {
  height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--pp-border-2); background: var(--pp-white); color: var(--pp-text); font: var(--pt-body) var(--pp-font); cursor: pointer; white-space: nowrap;
}
.pp-chip--on { border-color: var(--pp-navy); background: var(--pp-navy); color: var(--pp-white); font-weight: 700; }
.pp-chip__n { opacity: 0.8; font-weight: 400; }

/* ---- The list (screen 3) */
.pp-list { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.pp-list__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-list__line { margin: 0; font-size: var(--pt-body); }
/* The tab panel under the scope and kind tabs (audit 2026-10-05, S4): it spaces its parts as the list did. */
.pp-list__panel { display: flex; flex-direction: column; gap: 14px; }
.pp-inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.pp-search {
  min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border: 2px solid var(--pp-blue); border-radius: var(--pp-radius-field); background: var(--pp-white);
}
.pp-search__input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: var(--pt-input) var(--pp-font); color: var(--pp-text); min-height: 40px; }
.pp-table { display: flex; flex-direction: column; }
.pp-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 128px 120px 84px 48px minmax(72px, auto); gap: 10px;
  align-items: center; padding: 10px; border-bottom: 1px solid var(--pp-hairline); font-size: var(--pt-body);
}
.pp-row--head { padding: 0 10px 8px; border-bottom: 2px solid var(--pp-navy); font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.08em; color: var(--pp-text-2); }
.pp-row__main, .pp-row__status, .pp-row__upd { min-width: 0; display: flex; flex-direction: column; }
.pp-row__title strong, .pp-row__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pp-row__meta { font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-row__act { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
/* Share on the row (ASX1): the word from 1024 px; below that an icon, at least 44 px on each side (UXD-101). */
.pp-share-btn { gap: 6px; }
@media (max-width: 1023px) {
  .pp-share-btn { min-width: 44px; min-height: 44px; padding: 0; }
  .pp-share-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.pp-num { text-align: right; }
@media (max-width: 900px) {
  .pp-list { padding: 16px 14px 24px; }
  .pp-row--head { display: none; }
  .pp-row { grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row; gap: 4px 10px; }
  .pp-row__main, .pp-row__status { grid-column: 1 / -1; }
  .pp-row__upd, .pp-num { display: none; }
  /* At least 24 px to tap (accessibility audit 2026-10-05, N4; it was 20 px, passing 2.5.8 only by its spacing). */
  .pp-row__title { display: flex; align-items: center; min-height: 24px; min-width: 0; }
}

/* ---- The Details side panel (ASX3): at the right edge; a full-width sheet on a phone. */
.pp-details {
  /* Below the frame top bar (56 px): R-36b / F11 — a modal side panel must stay clear of pf-topbar. */
  position: fixed; top: 56px; right: 0; bottom: 0; z-index: 90; width: min(440px, 100vw); overflow: auto; padding: 18px 20px 24px;
  display: flex; flex-direction: column; gap: 10px; background: var(--pp-white); border-left: 1px solid var(--pp-hairline); box-shadow: var(--pp-shadow-pop);
}
.pp-details__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pp-details__title { margin: 0; min-width: 0; font: 600 var(--pt-title) var(--pp-font-heading); color: var(--pp-navy); overflow-wrap: anywhere; }
.pp-details__about { margin: 0; line-height: 1.5; }
.pp-details-btn { min-width: 34px; padding: 0 6px; }
@media (max-width: 1023px) { .pp-details-btn { min-width: 44px; min-height: 44px; } }
@media (max-width: 640px) { .pp-details { width: 100vw; border-left: 0; } }

/* ---- The viewer bar (screen 5): 52 px, one filled action (Ask AI). */
.pp-vb { position: relative; }
.pp-vb__bar {
  height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--pp-white);
  border-bottom: 1px solid var(--pp-hairline);
}
.pp-vb__owner { white-space: nowrap; font-size: var(--pt-meta); }
@media (max-width: 1280px) { .pp-vb__owner { display: none; } }
.pp-vb__title { margin: 0; min-width: 0; max-width: 330px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 var(--pt-title) var(--pp-font-heading); color: var(--pp-navy); }
.pp-chipbtn {
  height: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--pp-control); background: var(--pp-white); font: var(--pt-meta) var(--pp-font); color: var(--pp-text); white-space: nowrap; cursor: pointer;
}
.pp-chipbtn--on { border-color: var(--pp-blue); background: var(--pp-selected); }
.pp-about { left: 14px; top: 58px; width: min(440px, calc(100vw - 24px)); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pp-about__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; font-size: var(--pt-body); line-height: 1.45; }
.pp-about__k { font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.06em; color: var(--pp-text-2); padding-top: 2px; }
.pp-vb__more { right: 12px; top: 56px; width: min(290px, calc(100vw - 24px)); }
/* Step 11 (UXD-47): the collection, its stepper, Export and Edit; Ask AI, Export, Edit and the stepper are 44 px targets. */
.pp-vb__act { min-height: var(--pp-touch); flex: none; }
.pp-vb__collection { white-space: nowrap; font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-vb__step, .pp-vb__morestep { display: inline-flex; gap: 4px; flex: none; }
.pp-vb__stepbtn { width: var(--pp-touch); height: var(--pp-touch); }
.pp-vb__stepbtn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 1280px) { .pp-vb__colname { display: none; } }
/* Step 11: the bar is a size container, so it fits the page it is in (beside the rail and Ask AI), not the window.
   The title never collapses (at least 96 px); as the bar narrows, the owner, the collection's name and the ⌘J hint go
   first; on a tablet-width bar, only when they do not fit, the actions wrap together to a second row rather than
   run off the screen. */
.pp-vb { container: pp-vb / inline-size; }
.pp-vb__acts { display: flex; align-items: center; gap: inherit; flex: none; margin-left: auto; }
.pp-vb__title { flex: 0 1 auto; min-width: 96px; }
@container pp-vb (max-width: 1239px) { .pp-vb__owner { display: none; } }
@container pp-vb (max-width: 1079px) { .pp-vb__colname { display: none; } }
@container pp-vb (max-width: 999px) { .pp-vb__bar { gap: 8px; } .pp-vb__bar .pp-btn__kbd { display: none; } }
@media (min-width: 761px) {
  @container pp-vb (max-width: 799px) {
    .pp-vb__bar { height: auto; min-height: 52px; flex-wrap: wrap; row-gap: 6px; padding: 6px 14px; }
    .pp-vb__title { flex: 1 1 96px; }
    .pp-vb__bar > .pp-spacer { display: none; }
    .pp-vb__more, .pp-about { top: calc(100% + 4px); }
  }
}
.pp-only-narrow { display: none; }
@media (max-width: 760px) {
  .pp-hide-narrow { display: none; }
  .pp-only-narrow { display: flex; }
  .pp-vb__bar { height: 56px; padding: 0 10px; }
  .pp-vb__title { flex: 1; max-width: none; }
  /* What folds into More keeps a 44 px target (Ask AI, Export, Edit; the stepper's buttons already are). */
  .pp-vb__more .pp-menu__item { min-height: var(--pp-touch); }
  .pp-about { left: 10px; right: 10px; width: auto; }
}

/* ---- The contract (screen 7) */
.pp-ct { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.pp-ct__table { display: flex; flex-direction: column; }
.pp-ct__row { display: grid; grid-template-columns: 110px 180px minmax(0, 1fr) 200px; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--pp-hairline); font-size: var(--pt-body); align-items: start; }
.pp-ct__row--head { border-bottom: 2px solid var(--pp-navy); font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.08em; color: var(--pp-text-2); }
.pp-ct__group { font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.06em; color: var(--pp-text-2); }
.pp-ct__field { font-weight: 700; }
.pp-ct__value { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
@media (max-width: 900px) {
  .pp-ct { padding: 16px 14px 24px; }
  .pp-ct__row { grid-template-columns: 1fr; gap: 2px; }
  .pp-ct__row--head, .pp-ct__group:empty { display: none; }
}

/* ---- Shared by me (8b) */
.pp-sbm { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.pp-sbm__table { display: flex; flex-direction: column; }
.pp-sbm__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) 140px 120px 110px 120px 110px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--pp-hairline); font-size: var(--pt-body); }
.pp-sbm__row--head { border-bottom: 1px solid var(--pp-navy); font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.06em; color: var(--pp-text-2); }
@media (max-width: 900px) {
  .pp-sbm { padding: 16px 14px 24px; }
  .pp-sbm__row { grid-template-columns: 1fr 1fr; gap: 2px 10px; }
  .pp-sbm__row--head { display: none; }
}

/* ---- The outside recipient's view (8c): no frame, one header. */
.pp-outside { display: flex; flex-direction: column; min-height: 100%; background: var(--pp-white); }
.pp-outside__bar { min-height: 56px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--pp-hairline); }
.pp-outside__logo { height: 26px; width: auto; }
.pp-outside__product { font: 600 var(--pt-body-lg) var(--pp-font-heading); color: var(--pp-navy); }
.pp-outside__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.pp-outside__main { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-outside__title { margin: 0; font: 600 var(--pt-heading) var(--pp-font-heading); color: var(--pp-navy); }
.pp-outside__artifact { flex: 1; min-height: 320px; border: 1px dashed var(--pp-border-2); border-radius: 10px; overflow: hidden; }
.pp-outside__side { padding: 24px 22px; border-left: 1px solid var(--pp-hairline); display: flex; flex-direction: column; gap: 10px; font-size: var(--pt-body-lg); line-height: 1.55; }
.pp-outside__side p { margin: 0; }
@media (max-width: 760px) {
  .pp-outside__body { grid-template-columns: 1fr; }
  .pp-outside__side { border-left: 0; border-top: 1px solid var(--pp-hairline); }
  .pp-outside__main { padding: 16px 14px; }
}

/* Build step 05: the state page (screen 9) and Save as a draft Artifact (screen 6). */
.pp-state { max-width: 560px; margin: 48px auto; padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius-card); background: var(--pp-white); }
.pp-state__h { margin: 0; font: 600 var(--pt-page-title) var(--pp-font-heading); color: var(--pp-navy); }
.pp-state__text { margin: 0; font-size: var(--pt-body-lg); line-height: 1.5; color: var(--pp-text); }
.pp-state__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-state__ref { font: var(--pt-meta) var(--pp-font-mono); }

/* Build step 10: a project's thread and the projects list (SBP-37), and search (SBP-38); spaced like Needs you. */
.pp-proj, .pp-find { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 12px; max-width: 812px; }
@media (max-width: 700px) {
  .pp-proj, .pp-find { padding: 16px 14px 24px; }
}
.pp-proj__members { margin: 0; padding-left: 20px; font-size: var(--pt-body); color: var(--pp-text); }
.pp-proj__chats { display: flex; flex-direction: column; gap: 6px; }
.pp-proj__chat {
  display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 8px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius-field); background: var(--pp-white); font: var(--pt-body) var(--pp-font); color: var(--pp-text);
}
.pp-proj__chat:hover { border-color: var(--pp-navy); }
.pp-proj__chat:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 2px; }
.pp-find__group { display: flex; flex-direction: column; gap: 6px; }

/*
 * The admin window (step 08): its context bar, gates line, rail and states. pp- classes and type-scale tokens only.
 * Wireframe A's layout (brief §4.2): the bar across the top, the rail on the left, the destination on the right; on a
 * phone the rail folds behind a Menu button, and every control is at least 44 px on touch.
 */
.pp-admin { display: flex; flex-direction: column; min-height: 100dvh; background: var(--pp-canvas); }
.pp-admin__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px;
  background: var(--pp-white); border-bottom: 1px solid var(--pp-hairline);
}
.pp-admin__brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
.pp-admin__wordmark { height: 28px; width: auto; display: block; }
.pp-admin__product { font: 600 var(--pt-title) var(--pp-font-heading); color: var(--pp-navy); }
.pp-admin__role {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--pp-navy); font: 700 var(--pt-body) var(--pp-font); color: var(--pp-navy);
}
.pp-admin__chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-admin__chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--pp-selected); font-size: var(--pt-body); }
.pp-admin__pass { font-size: var(--pt-meta); }
.pp-admin__gates { margin: 0; padding: 8px 16px; background: var(--pp-warn-f); color: var(--pp-warn-t); font-size: var(--pt-body); border-bottom: 1px solid var(--pp-warn-b); }
.pp-admin__gates--open { background: var(--pp-ok-f); color: var(--pp-ok-t); border-bottom-color: var(--pp-ok-b); }
.pp-admin__body { flex: 1; display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); }
.pp-admin__rail { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; background: var(--pp-white); border-right: 1px solid var(--pp-hairline); }
.pp-admin__item {
  display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px;
  color: var(--pp-text); text-decoration: none; font: var(--pt-body-lg) var(--pp-font);
}
.pp-admin__item:hover { background: var(--pp-hover); }
.pp-admin__item--on { background: var(--pp-selected); color: var(--pp-navy); font-weight: 700; box-shadow: inset 3px 0 0 var(--pp-current); }
.pp-admin__item:focus-visible, .pp-admin__tabs a:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 2px; }
.pp-admin__railbtn { display: none; }
.pp-admin__main { min-width: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.pp-admin__tabs { display: flex; flex-wrap: wrap; gap: 0 24px; border-bottom: 1px solid var(--pp-hairline); }
.pp-admin__tabs a { text-decoration: none; }
.pp-admin__tabs .pp-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 2px; }
.pp-admin__page { min-width: 0; }
.pp-admin__mlist { flex-direction: column; align-items: stretch; }
.pp-admin__mrow { justify-content: flex-start; border-radius: 10px; min-height: 40px; }
.pp-admin-state { max-width: 640px; margin: 32px auto; padding: 24px; display: flex; flex-direction: column; gap: 12px; background: var(--pp-white); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius-card); }
.pp-admin-state__steps { margin: 0; padding-left: 20px; font-size: var(--pt-body-lg); line-height: 1.6; }
@media (max-width: 760px) {
  .pp-admin__body { grid-template-columns: minmax(0, 1fr); }
  .pp-admin__railbtn { display: inline-flex; align-self: flex-start; margin: 8px 16px 0; }
  .pp-admin__rail { display: none; border-right: 0; border-bottom: 1px solid var(--pp-hairline); }
  .pp-admin__rail--open { display: flex; }
  .pp-admin__main { padding: 12px; }
}
@media (pointer: coarse) {
  /* Controls only: the role badge and the tenant and scope chips are labels, not buttons, so they stay compact. */
  .pp-admin__item, .pp-admin__tabs a, .pp-admin__tabs .pp-tab { min-height: var(--pp-touch); }
}
/* A phone: the context bar and the gates line stay within the top of the first screen (render check item 2). */
@media (max-width: 640px) {
  .pp-admin__bar { padding: 8px 12px; gap: 4px 8px; }
  .pp-admin__wordmark { height: 22px; }
  .pp-admin__role, .pp-admin__chip { min-height: 24px; padding: 0 8px; }
  .pp-admin__gates { padding: 6px 12px; line-height: 1.4; }
  .pp-admin__railbtn { margin: 6px 12px 0; }
}

/* ---- The screens: a heading, notes, and real tables with real headers (WCAG 2.2 AA; brief §7). */
.pp-admin-screen { display: flex; flex-direction: column; gap: 12px; }
.pp-admin-group { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--pp-white); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius-card); }
.pp-admin-group__h { margin: 0; font: 700 var(--pt-body-lg) var(--pp-font); color: var(--pp-navy); }
.pp-admin-table { width: 100%; border-collapse: collapse; font-size: var(--pt-body); }
.pp-admin-table th { text-align: left; font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pp-text-2); padding: 6px 8px; border-bottom: 1px solid var(--pp-hairline); }
.pp-admin-table td { padding: 8px; border-bottom: 1px solid var(--pp-hairline); vertical-align: top; overflow-wrap: break-word; hyphens: manual; }
/* A sentence inside a table (the bounded-logins line) reads as body text, not as an uppercase label. */
.pp-admin-table th.pp-admin-table__note { font: var(--pt-body) var(--pp-font); letter-spacing: 0; text-transform: none; color: var(--pp-text); }
/* A wide table scrolls inside its own box, never the page (render check item 1). */
.pp-admin-group { overflow-x: auto; }
.pp-admin-table td .pp-note { display: block; }
/* A narrow page: each row becomes a small card, so nothing runs off the right edge. The admin window's page is a size
   container, so the cards also come in where the rail beside it leaves the page narrow (an iPad held upright, a phone
   on its side); the viewport rule covers hosts with no admin page around the table. */
.pp-admin__page { container-type: inline-size; }
@media (max-width: 640px) {
  .pp-admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pp-admin-table, .pp-admin-table tbody, .pp-admin-table tr, .pp-admin-table td { display: block; width: 100%; }
  .pp-admin-table tr { padding: 8px 0; border-bottom: 1px solid var(--pp-hairline); }
  .pp-admin-table td { border-bottom: 0; padding: 2px 0; }
  .pp-admin-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--pp-text-2); }
}
@container (max-width: 640px) {
  .pp-admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pp-admin-table, .pp-admin-table tbody, .pp-admin-table tr, .pp-admin-table td { display: block; width: 100%; }
  .pp-admin-table tr { padding: 8px 0; border-bottom: 1px solid var(--pp-hairline); }
  .pp-admin-table td { border-bottom: 0; padding: 2px 0; }
  .pp-admin-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--pp-text-2); }
}

/* The Admin screens (step 08, SBP-83): layout only. Every font size is a type-scale token (UXD-57; npm run lint:css). */
.pp-admin-screen__head .pp-note, .pp-admin-screen__empty { font-size: var(--pt-body); }
.pp-admin-screen__banner { font-size: var(--pt-body); font-weight: 700; }
.pp-admin-screen__form { display: grid; gap: 12px; max-width: 640px; }
.pp-admin-screen__actions, .pp-admin-screen__links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-admin-screen__fixed-list { margin: 4px 0; padding-left: 20px; font-size: var(--pt-body); }
.pp-admin-table__wrap { overflow-x: auto; max-width: 100%; }
.pp-admin-act { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pp-field__help, .pp-field__hint { font-size: var(--pt-meta); }
/* The reason a control is held is reading text, shown beside it (render check items 7 and 9). */
.pp-admin-act__why { font-size: var(--pt-body); color: var(--pp-text-2); }
.pp-field__error { font-size: var(--pt-meta); font-weight: 700; }
.pp-field__req { font-weight: 400; }
.pp-admin-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The decision record card: a definition list, labels apart from their values (render check item 4). */
.pp-admin-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.pp-admin-dl dt { font-weight: 700; color: var(--pp-text-2); }
.pp-admin-dl dd { margin: 0; overflow-wrap: anywhere; }
.pp-admin-card__actions { display: flex; }
@container (max-width: 480px) { .pp-admin-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .pp-admin-dl dd { margin-bottom: 6px; } }
/* Reading text on the admin screens and states is at least 14 px (UXD-57; render check item 9). */
.pp-admin-screen .pp-note, .pp-admin-state .pp-note, .pp-admin-screen__empty, .pp-admin-card__authority { font-size: var(--pt-body); }
.pp-admin-state__brand { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }

/* "Skip to content" (accessibility audit 2026-10-05, N1): out of sight until it has focus; the main region it moves
   focus to draws no ring of its own. */
.pp-skip {
  position: fixed; left: 8px; top: 8px; z-index: 90; transform: translateY(-200%); padding: 0 16px;
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; /* a 44 px touch target */
  border-radius: var(--pp-radius-field); background: var(--pp-navy); color: var(--pp-white);
  font: 600 var(--pt-body) var(--pp-font); text-decoration: none;
}
.pp-skip:focus { transform: none; }
.pp-admin__main:focus { outline: none; }

/* The passkey check's three screens (SUX1, SUX2; the step-up addendum). Asked and in progress are a dialog (the shell's
   dialog: a sheet the width of the screen on a phone); refused is a card in the page. On a phone the buttons stack, the
   primary on top, each at least 44 px high. Words carry the state; color only repeats it. */
.pp-passkey { max-width: 100%; z-index: 93; }
/* It stands above whatever form asked for it (the act's own dialog, which dims behind it). */
.pp-passkey__scrim { z-index: 92; }
.pp-passkey__dots { margin: 0; color: var(--pp-blue); font-size: var(--pt-title); letter-spacing: 6px; line-height: 1; }
.pp-refused { display: flex; flex-direction: column; gap: 8px; }
.pp-refused__msg, .pp-refused__hint { margin: 0; }
.pp-refused__msg:focus { outline: 2px solid var(--pp-blue); outline-offset: 2px; border-radius: 4px; }
.pp-refused .pp-muted { margin: 0; font-size: var(--pt-body); }
@media (max-width: 640px) {
  .pp-passkey .pp-dialog__actions, .pp-refused .pp-dialog__actions { flex-direction: column; align-items: stretch; }
  .pp-passkey .pp-btn, .pp-refused .pp-btn { min-height: var(--pp-touch); width: 100%; justify-content: center; }
}

/*
 * The work pages (build steps 06 and 07): Needs you (16), and Workflows (17), a workflow (24), the builder, the work
 * queue (25) and the shadow run (26). pp- classes only; every font size from the type scale (UXD-57). Phone layouts
 * stack instead of scrolling sideways; every button is at least 44 px on touch (pages-base.css raises .pp-btn).
 */

/* ---- Needs you (16) */
.pp-needs { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.pp-needs__group { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pp-needs__h { margin: 0; font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-text-2); }
.pp-needs__item {
  display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--pp-hairline);
  border-radius: var(--pp-radius-card); background: var(--pp-white);
}
.pp-needs__item--due { border-color: var(--pp-blue); background: var(--pp-selected); }
.pp-needs__item--update { background: var(--pp-canvas); }
.pp-needs__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-needs__title { margin: 0; font-size: var(--pt-body-lg); color: var(--pp-navy); }
.pp-needs__due { font-size: var(--pt-meta); color: var(--pp-text-2); white-space: nowrap; }
.pp-needs__due--today { color: var(--pp-warn-text); font-weight: 700; }
.pp-needs__ctx { margin: 0; font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-needs__why { margin: 0; font-size: var(--pt-body); color: var(--pp-text); }
.pp-needs__act { flex: none; }
@media (max-width: 700px) {
  .pp-needs { padding: 16px 14px 24px; }
  .pp-needs__item { flex-direction: column; align-items: stretch; }
  .pp-needs__act { display: flex; }
}

/* ---- Workflows (17), a workflow (24), the builder, the work queue (25), the shadow run (26) */
.pp-wf { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.pp-wf__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-wf__crumbs { font-size: var(--pt-meta); }
.pp-wf__table, .pp-q-table { display: flex; flex-direction: column; }
.pp-wf-row, .pp-q-row {
  display: grid; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--pp-hairline); font-size: var(--pt-body);
}
.pp-wf-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 80px; }
/* The actions column has its own fixed share (never auto), so each row's columns start at the same place: every row is
   its own grid, and "auto" sized each row's last column to its own buttons (render check, 2026-10-05). */
.pp-q-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 110px minmax(0, 1.4fr) minmax(170px, 1.2fr); }
.pp-wf-row--head, .pp-q-row--head {
  padding: 0 10px 8px; border-bottom: 2px solid var(--pp-navy); font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.08em; color: var(--pp-text-2);
}
.pp-wf-row__main, .pp-q-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-wf-row__meta { font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-q-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* A cell's own label shows only when the columns stack (below); the headings name each value in the table layout. */
.pp-cell-label { display: none; font-weight: 700; color: var(--pp-text-2); }
/* The last run's pill may wrap inside its column rather than run into the credits beside it (iPad, 2026-10-05). */
.pp-wf-row__last .pp-pill { height: auto; min-height: 22px; padding: 3px 9px; line-height: 1.25; white-space: normal; }
.pp-wf__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 6px; }
.pp-wf__cols--detail { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pp-wf__main, .pp-wf__side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-wf__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: var(--pt-body); }
.pp-wf__list li { display: flex; flex-direction: column; gap: 2px; }
.pp-wf__showing { margin: 0; font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-wf__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pp-wf-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pp-wf-step {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--pp-hairline);
  border-radius: var(--pp-radius-card); background: var(--pp-white);
}
.pp-wf-step__n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pp-navy); color: var(--pp-white);
  display: inline-flex; align-items: center; justify-content: center; font: 700 var(--pt-micro) var(--pp-font);
}
.pp-wf-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.pp-wf-step__type { font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.08em; color: var(--pp-text-2); }
.pp-wf-step__title { font-size: var(--pt-body-lg); color: var(--pp-navy); }
.pp-wf-step__detail { font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-wf-step__state { flex: none; }
.pp-wf-picker { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pp-wf-picker__opt {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--pp-border-2); border-radius: var(--pp-radius-field);
  background: var(--pp-white); display: flex; flex-direction: column; justify-content: center; gap: 2px; cursor: pointer; font-size: var(--pt-body);
}
.pp-wf-picker__opt:hover { background: var(--pp-hover); }
.pp-wf-picker__opt:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 2px; }
.pp-wf-sim { padding: 12px 14px; border: 1px solid var(--pp-ok-b); border-radius: var(--pp-radius-card); background: var(--pp-ok-f); }
.pp-wf-sim p { margin: 0 0 6px; color: var(--pp-ok-t); }
.pp-q-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--pt-body); }
.pp-q-facts dt { font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-text-2); }
.pp-q-facts dd { margin: 0; }
.pp-shadow-pass { padding: 12px 14px; border: 1px solid var(--pp-info-b); border-radius: var(--pp-radius-card); background: var(--pp-info-f); }
.pp-shadow-pass__n { margin: 4px 0; font: 600 var(--pt-page-title) var(--pp-font-heading); color: var(--pp-navy); }
@media (max-width: 900px) {
  .pp-wf { padding: 16px 14px 24px; }
  .pp-wf-row--head, .pp-q-row--head { display: none; }
  .pp-wf-row, .pp-q-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pp-q-acts { justify-content: flex-start; }
  .pp-cell-label { display: inline; }
  .pp-wf__cols, .pp-wf__cols--detail { grid-template-columns: minmax(0, 1fr); }
  .pp-wf-step { flex-wrap: wrap; }
}

/*
 * The Workflows builder (builder plan Tasks 6 to 13): v6 screen 24 as ruled, drawn with the pages' tokens
 * (pages-tokens.css) and the one type scale (type-scale.css; every font size is a --pt- token). The
 * current tab's underline is Vital Blue (DSC-1, from pages-screens.css), and no orange is drawn; selection is blue; connectors gray and navy.
 */
.pp-wfb { padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-wfb-head { display: flex; flex-direction: column; gap: 8px; }
.pp-wfb-head__r1, .pp-wfb-head__r3, .pp-wfb-head__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-wfb-head__r2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-wfb-flag { font-size: var(--pt-micro); color: var(--pp-text-2); border: 1px dashed var(--pp-control); border-radius: 999px; min-height: var(--pp-chip-h); box-sizing: border-box; display: inline-flex; align-items: center; padding: 2px 10px; }
.pp-wfb-seg { display: inline-flex; border: 1px solid var(--pp-control); border-radius: 999px; overflow: hidden; }
.pp-wfb-seg button { font: 700 var(--pt-body) var(--pp-font); min-height: var(--pp-btn-h); padding: 0 14px; border: 0; background: var(--pp-white); color: var(--pp-navy); cursor: pointer; }
.pp-wfb-seg button[aria-pressed="true"] { background: var(--pp-navy); color: var(--pp-white); }
.pp-wfb-seg button:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: -2px; }
.pp-wfb-actline, .pp-wfb-text { margin: 0; font-size: var(--pt-body-lg); }
.pp-wfb-meta { font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-wfb-read { font-size: var(--pt-body-lg); }
.pp-wfb__cols { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.pp-wfb__canvas { min-width: 0; }
.pp-wfb-pal { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp-wfb-pal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pp-wfb-pal__chips, .pp-wfb-words, .pp-wfb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-wfb-pal__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow: auto; }
.pp-wfb-pal__opt { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--pp-hairline); border-radius: 10px; background: var(--pp-white); cursor: pointer; }
.pp-wfb-pal__opt:hover, .pp-wfb-row[role="button"]:hover { background: var(--pp-hover); }
.pp-wfb-pal__opt:focus-visible, .pp-wfb [role="button"]:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 2px; }
.pp-wfb-pal__blurb { font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-wfb-steps { display: flex; flex-direction: column; gap: 6px; }
.pp-wfb-steps__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-wfb-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pp-wfb-li { display: flex; flex-direction: column; }
.pp-wfb-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--pp-hairline); border-radius: 10px; background: var(--pp-white); cursor: pointer; }
.pp-wfb-row--on, .pp-wfb-row--on:hover { background: var(--pp-selected); border-color: var(--pp-blue); }
.pp-wfb-row--err { border-color: var(--pp-bad-b); }
.pp-wfb-row--fixed { cursor: default; background: var(--pp-canvas); }
.pp-wfb-num { width: 28px; height: 28px; border-radius: 50%; background: var(--pp-navy); color: var(--pp-white); display: inline-flex; align-items: center; justify-content: center; font: 700 var(--pt-micro) var(--pp-font); }
.pp-wfb-num--trig { background: var(--pp-canvas); border: 1px solid var(--pp-control); }
.pp-wfb-row--on .pp-wfb-num { background: var(--pp-blue); }
.pp-wfb-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-wfb-row__title { color: var(--pp-navy); overflow-wrap: anywhere; }
.pp-wfb-row__words { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.pp-wfb-chip { font-size: var(--pt-micro); border: 1px solid var(--pp-border-2); border-radius: 999px; min-height: var(--pp-chip-h); box-sizing: border-box; display: inline-flex; align-items: center; padding: 2px 10px; background: var(--pp-white); overflow-wrap: anywhere; }
.pp-wfb-ins { display: flex; justify-content: center; padding: 2px 0; }
.pp-wfb-ins .pp-link { font-size: var(--pt-meta); }
.pp-wfb-route { font-size: var(--pt-meta); color: var(--pp-navy); }
.pp-wfb-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 14px 4px 56px; }
.pp-wfb-title { display: inline-flex; align-items: center; gap: 8px; }
.pp-wfb__cols--panel { grid-template-columns: 280px minmax(0, 1fr) 400px; }
.pp-wfb-panel { min-width: 0; border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius-card); background: var(--pp-white); }
.pp-wfb-panel .pp-tabs { padding: 0 14px; }
.pp-wfb-panel__body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pp-wfb-sect { margin: 6px 0 0; font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pp-text-2); }
.pp-wfb-sect .pp-wfb-meta { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pp-wfb-fld { display: flex; flex-direction: column; gap: 4px; }
.pp-wfb-fld__l { font: 700 var(--pt-label) var(--pp-font); color: var(--pp-text); }
.pp-wfb-help { font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-wfb .pp-input { min-height: 40px; }
/* WebKit's theme sets a native select's height itself and ignores min-height, so the builder draws its selects plainly,
   with a small chevron from two gradients (no image, so a strict Content Security Policy is fine), and the 40 px and
   touch heights apply in every engine (Task 17's screen check, WFB-73). */
.pp-wfb select.pp-input {
  -webkit-appearance: none; appearance: none; padding-right: 34px; background-repeat: no-repeat; background-size: 6px 6px, 6px 6px;
  background-image: linear-gradient(45deg, transparent 50%, var(--pp-text-2) 50%), linear-gradient(135deg, var(--pp-text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
}
.pp-wfb-tg { display: inline-flex; gap: 8px; align-items: center; font-size: var(--pt-body); cursor: pointer; align-self: flex-start; }
.pp-wfb-rcards { display: flex; flex-direction: column; gap: 6px; }
.pp-wfb-rcard { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--pp-hairline); border-radius: 10px; cursor: pointer; font-size: var(--pt-body); }
.pp-wfb-rcard--on { border-color: var(--pp-blue); background: var(--pp-selected); }
.pp-wfb-fixed { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pp-wfb-fixed li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--pt-body-lg); }
.pp-wfb-acts--panel { padding: 0; }
.pp-wfb-chk { margin: 0; padding: 8px 10px; border-radius: var(--pp-radius-card); border: 1px solid; font-size: var(--pt-body-lg); }
.pp-wfb-chk--error { border-color: var(--pp-bad-b); background: var(--pp-bad-f); color: var(--pp-bad-t); }
.pp-wfb-chk--warn { border-color: var(--pp-warn-b); background: var(--pp-warn-f); color: var(--pp-warn-t); }
.pp-wfb-chk--info { border-color: var(--pp-info-b); background: var(--pp-info-f); color: var(--pp-info-t); }
.pp-wfb-sum, .pp-wfb-checks { display: flex; flex-direction: column; gap: 10px; }
.pp-wfb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-wfb-tile { border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius-card); padding: 10px; display: flex; flex-direction: column; gap: 2px; font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-wfb-tile__n { font: 700 var(--pt-heading) var(--pp-font); color: var(--pp-navy); }
.pp-wfb-box { padding: 10px 12px; border-radius: 10px; border: 1px solid; font-size: var(--pt-body-lg); }
.pp-wfb-box--ok { border-color: var(--pp-ok-b); background: var(--pp-ok-f); color: var(--pp-ok-t); }
.pp-wfb-box--warn { border-color: var(--pp-warn-b); background: var(--pp-warn-f); color: var(--pp-warn-t); }
.pp-wfb-box--info { border-color: var(--pp-info-b); background: var(--pp-info-f); color: var(--pp-info-t); }
.pp-wfb-kvs { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-wfb-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; font-size: var(--pt-body); }
.pp-wfb-kv dt { color: var(--pp-text-2); }
.pp-wfb-kv dd { margin: 0; overflow-wrap: anywhere; }
.pp-wfb-sblock { border: 1px solid var(--pp-hairline); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.pp-wfb-chk--row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pp-wfb-chk .pp-link { font-size: inherit; }
@media (max-width: 560px) {
  .pp-wfb-lanes-wrap { --pp-wfb-label-w: 112px; }
  .pp-wfb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-wfb-kv { grid-template-columns: minmax(0, 1fr); }
}
.pp-wfb-lanes-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
/* The lane names stick at the left and the column heads at the top. The grid is as wide as its columns (max-content), so
   the sticky names stay in view however far the lanes scroll; the scroll padding keeps a card scrolled into view clear of
   both (Task 17's screen check). */
.pp-wfb-lanes-wrap { --pp-wfb-label-w: 128px; }
.pp-wfb-lanes-scroll { overflow: auto; max-height: 72vh; border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius-card); background: var(--pp-white); scroll-padding: 40px 0 0 var(--pp-wfb-label-w); }
.pp-wfb-lanes { position: relative; display: grid; grid-template-rows: auto; grid-auto-rows: minmax(84px, auto); width: max-content; min-width: 100%; }
.pp-wfb-colh { position: sticky; top: 0; z-index: 3; padding: 8px 10px; background: var(--pp-white); font: 700 var(--pt-label) var(--pp-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-text-2); }
.pp-wfb-colh--corner { left: 0; z-index: 4; }
.pp-wfb-lane { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 10px; border-top: 1px solid var(--pp-hairline); background: var(--pp-canvas); font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-wfb-lane strong { font-size: var(--pt-body); color: var(--pp-navy); }
.pp-wfb-cell { padding: 10px; border-top: 1px solid var(--pp-hairline); }
.pp-wfb-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--pp-border-2); border-radius: 10px; background: var(--pp-white); cursor: pointer; }
.pp-wfb-card--on { border: 2px solid var(--pp-navy); }
.pp-wfb-card--err { border-color: var(--pp-bad-b); }
.pp-wfb-card--fixed { cursor: default; background: var(--pp-canvas); }
.pp-wfb-card__h { display: flex; gap: 8px; align-items: flex-start; }
.pp-wfb-acts--card { padding: 6px 0 0; }
.pp-wfb-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pp-wfb-edge { fill: none; stroke: var(--pp-control); stroke-width: 1.5; }
.pp-wfb-edge--route { stroke: var(--pp-navy); }
.pp-wfb-arrow { fill: var(--pp-control); }
.pp-wfb-status { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pp-wfb-status p { margin: 0; font-size: var(--pt-body-lg); }
.pp-wfb-sim p { margin: 0 0 6px; font-size: var(--pt-body-lg); }
.pp-wfb-sim li { font-size: var(--pt-body-lg); }
@media (max-width: 1280px) {
  .pp-wfb__cols--panel { grid-template-columns: 260px minmax(0, 1fr); }
  .pp-wfb-panel { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pp-wfb__cols--panel { grid-template-columns: minmax(0, 1fr); }
  .pp-wfb-acts { padding-left: 14px; }
  .pp-wfb { padding: 14px; }
  .pp-wfb__cols { grid-template-columns: minmax(0, 1fr); }
  .pp-wfb-pal__list { max-height: 40vh; }
  .pp-wfb-row { grid-template-columns: 32px minmax(0, 1fr); }
  .pp-wfb-row__words { grid-column: 2; justify-content: flex-start; }
}
@media (pointer: coarse) {
  .pp-wfb-pal__opt, .pp-wfb-row, .pp-wfb-seg button, .pp-wfb .pp-input, .pp-wfb select, .pp-wfb-ins .pp-link, .pp-wfb-tg { min-height: var(--pp-touch); }
}
/* The icon pass (2026-10-10): the shell's own 16 px glyphs (src/icons.ts), decoration beside words that say the same
   thing. Kind, lane and fact icons take the secondary text color; button and link icons their control's own color; the
   trigger and end circles navy, and white on the selected Starts-when row's blue. The lock stands in for the facts'
   bullet, so the list drops its bullets. */
.pp-wfb-ic { display: inline-flex; flex: none; line-height: 0; color: var(--pp-text-2); }
.pp-btn .pp-wfb-ic, .pp-link .pp-wfb-ic { color: inherit; }
.pp-wfb-num--trig .pp-wfb-ic { color: var(--pp-navy); }
.pp-wfb-row--on .pp-wfb-num--trig .pp-wfb-ic { color: var(--pp-white); }
/* An icon sits on its words' first line when they wrap (a long kind line, a lane name in its narrow column). */
.pp-wfb-kind, .pp-wfb-pal__t, .pp-wfb-lane strong { display: flex; align-items: flex-start; gap: 6px; }
.pp-wfb-ph { display: flex; align-items: center; gap: 6px; }
.pp-wfb-sblock__go { display: inline-flex; align-items: flex-start; gap: 6px; text-align: left; }
:is(.pp-wfb-kind, .pp-wfb-pal__t, .pp-wfb-lane strong, .pp-wfb-sblock__go, .pp-wfb-fixed li, .pp-wfb-rcard) > .pp-wfb-ic { margin-top: 2px; }

/*
 * Caps & limits' summary in the Admin window, v7's Credits page C2 (Admin's v7 plan, Task 7). pp- classes and type-scale
 * tokens only (npm run lint:css). Ring, bar, tile and meter colors come from src/credits.ts through style(), never from
 * here, so the frame's ring and this summary cannot drift. No orange: it means "you are here" only (L10).
 */
.pp-credits { display: flex; flex-direction: column; gap: 12px; }
.pp-credits__caps { margin: 0; font-size: var(--pt-body); line-height: 1.5; color: var(--pp-text); }
.pp-credits__stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-credits__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pp-credits__card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; font-size: var(--pt-body);
  background: var(--pp-white); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius-card);
}
.pp-credits__day { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
.pp-credits__col { flex: 1 1 160px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.pp-credits__card > .pp-pill { align-self: flex-start; }
.pp-credits__label { font: 700 var(--pt-label)/1.3 var(--pp-font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pp-text-2); }
.pp-credits__head { font: 700 var(--pt-body-lg)/1.3 var(--pp-font); color: var(--pp-navy); }
.pp-credits__ring { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--pp-hairline); }
.pp-credits__ring--off { background: var(--pp-mute-f); border: 2px dashed var(--pp-mute-b); }
.pp-credits__hole { display: block; width: 52px; height: 52px; border-radius: 50%; background: var(--pp-white); }
.pp-credits__n { font: 600 var(--pt-page-title)/1 var(--pp-font-heading); color: var(--pp-navy); }
.pp-credits__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.pp-credits__meter { display: block; height: 8px; border-radius: 999px; background: var(--pp-hairline); overflow: hidden; }
.pp-credits__fill { display: block; height: 100%; }
.pp-credits__bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; border-bottom: 1px solid var(--pp-border-2); }
.pp-credits__bar { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0; }
.pp-credits__axis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: var(--pt-meta); color: var(--pp-text-2); }
.pp-credits__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-credits__tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--pp-hairline); border-left-width: 4px; border-radius: var(--pp-radius-card); }
.pp-credits__then { margin-top: 8px; }
@media (max-width: 760px) {
  .pp-credits__tiles { grid-template-columns: minmax(0, 1fr); }
}

/*
 * The v7 frame (Admin's v7 plan, Task 6): title row with the mode chip, the group and reach line, and the right-hand blocks.
 * pp- classes and the shell's tokens only (npm run lint:css). No orange: it means "you are here" only.
 *
 * The layout: a screen that carries the blocks draws its head, then one body box (everything else, in source order), then
 * the blocks. Narrow, they stack (the screen's own column, pages-admin.css), so the blocks come after the body. Wide
 * (1,100 px and up), the head spans the top, the body is the left column and the blocks the right one; the body is one
 * grid item, so a tall block column never stretches the rows of the body apart.
 */
.pp-v7__titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pp-v7__line { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--pt-meta); color: var(--pp-text-2); }
/*
 * A reach word is a label, so it takes the canon's outline chip (canon 7.5.0, px-chip-outline: Fog Ink border, white fill,
 * Graphite text, bold 14 px, 24 px high). Status pills ("Active", the mode chip) keep their status tones.
 */
.pp-v7__reach, .pp-admin-label {
  display: inline-flex; align-items: center; height: var(--pp-chip-h); padding: 1px 8px; box-sizing: border-box;
  border: 1px solid var(--pp-control); border-radius: 999px; background: var(--pp-white); color: var(--pp-text);
  font: 700 var(--pt-micro)/1 var(--pp-font); letter-spacing: 0.04em; white-space: nowrap;
}
.pp-v7__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-v7__aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; font-size: var(--pt-body); }
.pp-v7__block { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--pp-white); border: 1px solid var(--pp-hairline); border-radius: var(--pp-radius-card); }
.pp-v7__block p { margin: 0; }
.pp-v7__h { margin: 0; font: 700 var(--pt-label)/1.3 var(--pp-font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pp-text-2); }
.pp-v7__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pp-v7__list li { display: list-item; }
.pp-v7__check { margin-left: 8px; font-size: var(--pt-meta); color: var(--pp-text-2); }
@media (min-width: 1100px) {
  .pp-admin-screen--with-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; align-items: start; }
  .pp-admin-screen--with-aside > .pp-admin-screen__head { grid-column: 1 / -1; grid-row: 1; }
  .pp-admin-screen--with-aside > .pp-v7__body { grid-column: 1; grid-row: 2; }
  .pp-admin-screen--with-aside > .pp-v7__aside { grid-column: 2; grid-row: 2; }
}
/*
 * The body is its own size container (the user-experience session's review of PR 20, 2026-10-14; test AV7-40). Wide,
 * the blocks take up to 340 px beside the body, so at 1,440 px the body is only 804 px wide (544 px on an iPad held
 * sideways), and a table with an act column cut that column off inside its own sideways-scrolling box ("Revoke a
 * deploymer", "Pin ve"). So, below 880 px of the body's own width, each table row becomes a small card: the same card
 * a narrow page draws (pages-admin.css), its values labeled by column, so every act and the reason beside it show in
 * full. The container is named, so this rule reads the body's width, never the page's.
 */
.pp-v7__body { container: pp-v7-body / inline-size; }
@container pp-v7-body (max-width: 879px) {
  .pp-admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pp-admin-table, .pp-admin-table tbody, .pp-admin-table tr, .pp-admin-table td { display: block; width: 100%; }
  .pp-admin-table tr { padding: 8px 0; border-bottom: 1px solid var(--pp-hairline); }
  .pp-admin-table td { border-bottom: 0; padding: 2px 0; }
  .pp-admin-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--pp-text-2); }
}
/*
 * People's table head in v7's style (UXD-130, the product owner's "v7's style (Recommended)", 2026-10-15): a thin navy
 * rule under the head, with the column names in Stone, as v7 screen 3 draws it and the Artifacts list already does
 * (pages-screens.css, .pp-row--head: a 2 px navy rule), and as the canon's px-table head reads since 7.5.0. Scoped to People, Admin's own screen, so the user-experience
 * session's sheet (pages-admin.css, which draws every Admin table's head) is left as it is; when that sheet takes v7's head
 * for every table (UX's task V7M-27), this rule says the same thing and can go. Wide only: below 880 px of body width the
 * head is hidden and each row is a card (above).
 */
.pp-admin-people .pp-admin-table thead th {
  border-bottom: 2px solid var(--pp-navy); color: var(--pp-text-2);
  /* canon 7.5.0's px-table head: bold 14 px Stone words in sentence case, as written, never set in capitals */
  font: 700 var(--pt-label) var(--pp-font); letter-spacing: normal; text-transform: none;
}
/*
 * People's list title: v7's solid Deep Navy band above the rows (the v7 Admin page, its list block), at every width. It is
 * a list title, not a table's column head, so UXD-130 does not apply to it (the user-experience session's controller
 * ruling, 2026-10-15). The band runs to the box's edges, as v7 draws it.
 */
.pp-admin-people .pp-admin-group__h {
  margin: -12px -14px 0; padding: 10px 14px; background: var(--pp-navy); color: var(--pp-white);
  border-radius: var(--pp-radius-card) var(--pp-radius-card) 0 0;
  font: 600 var(--pt-label) var(--pp-font-heading); letter-spacing: 0.06em; text-transform: uppercase;
}
/*
 * People's rows below 880 px of body width: v7's one-line row (the v7 Admin page's list block, the user-experience
 * session's controller ruling on AV7-G3, 2026-10-15), in place of the stacked "Principal: / Kind: / …" card. Left, the
 * name over one meta line (kind · scope · roles, the roles with "Member" first), drawn as ONE run of text that wraps like
 * a sentence (the name cell's own copy, .pp-admin-people__meta), so it never splits into columns; then the state pill;
 * then the act, on the right. A held row's reason is a line of its own under the meta, so every row's pill and Revoke
 * line up. The Kind, Scope and Roles cells stay, out of sight, for screen readers, each read with its column label; the
 * column head stays hidden too, as the shared card rule above leaves it. The wide table at 880 px and up is the same
 * markup, with the meta copy not drawn.
 */
.pp-admin-people__meta { display: none; }
@container pp-v7-body (max-width: 879px) {
  .pp-admin-people .pp-admin-table tr {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; align-items: center;
    min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--pp-hairline);
  }
  .pp-admin-people .pp-admin-table td { position: relative; width: auto; padding: 0; }
  .pp-admin-people .pp-admin-table td[data-label="Principal"] { grid-column: 1; grid-row: 1; }
  .pp-admin-people .pp-admin-table td[data-label="Principal"] strong { color: var(--pp-navy); }
  .pp-admin-people .pp-admin-table td[data-label="State"] { grid-column: 2; grid-row: 1; }
  .pp-admin-people .pp-admin-table td.pp-admin-people__act { grid-column: 3; grid-row: 1; justify-self: end; }
  /* The meta line, and a held row's reason under it. */
  .pp-admin-people .pp-admin-people__meta { display: block; font-size: var(--pt-meta); color: var(--pp-text-2); }
  .pp-admin-people .pp-admin-people__why { display: block; margin-top: 2px; }
  /* The three meta cells: read by a screen reader with their labels, never drawn (the drawn copy is the meta line). */
  .pp-admin-people .pp-admin-table td:is([data-label="Kind"], [data-label="Scope"], [data-label="Roles"]) {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* The name's and the state's column labels: read out, never drawn. */
  .pp-admin-people .pp-admin-table td:is([data-label="Principal"], [data-label="State"])::before {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* The bounded-logins line runs the row's whole width, a sentence above that group's rows. */
  .pp-admin-people .pp-admin-table th.pp-admin-table__note { grid-column: 1 / -1; padding: 8px 0; text-align: left; }
}
/* A narrow body (a phone): the state and the act move to a line of their own under the name, the act on the right. */
@container pp-v7-body (max-width: 479px) {
  .pp-admin-people .pp-admin-table tr { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
  .pp-admin-people .pp-admin-table td[data-label="Principal"] { grid-column: 1 / -1; }
  .pp-admin-people .pp-admin-table td[data-label="State"] { grid-column: 1; grid-row: 2; }
  .pp-admin-people .pp-admin-table td.pp-admin-people__act { grid-column: 2; grid-row: 2; }
}

/*
 * <pathways-artifact-viewer> — light DOM, every class prefixed pfa- (the frame's pf- rule applied to Layer 2).
 * Values come from the frame's custom properties when the viewer sits inside <pathways-frame>, with plain fallbacks.
 */
.pfa-viewer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  position: relative;
  font-family: var(--pf-font-body, Lato, Arial, sans-serif);
  color: var(--pf-graphite, #262626);
}
/* v6 screen 5: "One 52 px bar." */
.pfa-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--pf-hairline, #e4e7ec);
  flex-wrap: wrap;
}
.pfa-bar__title {
  font-family: var(--pf-font-heading, "Gill Sans", "Gill Sans MT", Arial, sans-serif);
  font-weight: 600;
  color: var(--pf-deep-navy, #12274a);
  font-size: 16px;
}
.pfa-bar__status { margin-left: auto; color: var(--pf-stone, #5a5a5a); font-size: 13px; }
.pfa-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pf-deep-navy, #12274a);
  color: #fff;
}
.pfa-chip--quiet { background: var(--pf-selected, #eef5fb); color: var(--pf-deep-navy, #12274a); font-weight: 600; }
.pfa-stage { flex: 1; min-height: 360px; position: relative; overflow: auto; }
.pfa-frame { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; background: #fff; }
.pfa-state { padding: 40px 24px; max-width: 560px; }
.pfa-state__title { margin: 0 0 8px; color: var(--pf-deep-navy, #12274a); font-size: 20px; }
.pfa-state__ref { color: var(--pf-stone, #5a5a5a); font-size: 13px; }
/* v6 screen 10: the confirm. Drawn by the shell over the Artifact. */
.pfa-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 39, 74, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10;
}
.pfa-confirm {
  background: #fff;
  border-radius: var(--pf-radius-md, 12px);
  box-shadow: var(--pf-shadow-plus-menu, 0 12px 32px rgba(18, 39, 74, 0.2));
  padding: 20px 22px;
  max-width: 460px;
  width: 100%;
}
.pfa-confirm__title { margin: 0 0 10px; font-size: 18px; color: var(--pf-deep-navy, #12274a); }
.pfa-confirm__list { margin: 0 0 10px; padding-left: 18px; font-size: 14px; }
.pfa-confirm__what { margin: 0 0 16px; font-size: 14px; color: var(--pf-stone, #5a5a5a); }
.pfa-confirm__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.pfa-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--pf-radius-xs, 8px);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.pfa-btn--secondary { background: #fff; border: 1px solid var(--pf-control-border, #707070); color: var(--pf-graphite, #262626); }
.pfa-btn--primary { background: var(--pf-deep-navy, #12274a); border: 1px solid var(--pf-deep-navy, #12274a); color: #fff; }
.pfa-btn:focus-visible { outline: 2px solid var(--pf-vital-blue, #0071af); outline-offset: 2px; }
/* The bar's Ask AI button. It opens the frame's ONE Ask AI panel; the viewer draws no Ask AI panel of its own (UXD-27). */
.pfa-bar__ask { min-height: 36px; padding: 0 12px; }
/* With the shell's own bar (cfg.bar false): only a thin live status line under the Artifact. */
.pfa-statusline { display: block; min-height: 20px; padding: 2px 14px; font-size: 12px; color: var(--pf-stone, #5a5a5a); }

/*
 * The app entry's own styles (step 09). The frame fills the window; the app's own two pieces, the space under the
 * viewer bar and the internal-pilot notice, use the pp-app- prefix (npm run lint:css) and the frame's tokens (they sit
 * inside the frame's page container, so the frame's --pf- values reach them). No font size is set here: they keep the
 * page's own.
 */
html,
body {
  margin: 0;
  height: 100%;
}

pathways-frame {
  position: fixed;
  inset: 0;
}

pathways-frame[hidden] {
  display: none;
}

.pp-app-body {
  margin: 10px;
  padding: 20px 24px;
  color: var(--pf-stone);
  font-family: var(--pf-font-body);
}

/* The notice lines up with what the page drew (render check, 2026-10-05: it sat left of the content). On a column page,
   with the pages' own content column: their side padding is 26 px, and 14 px at 900 px and below
   (src/pages/pages-screens.css). On a centered card page (app/views.ts, layout 'card'), with the card's own text: the
   card is at most 560 px wide, centered, with a 1 px border and 28 px of padding (the state page's .pp-state). */
.pp-app-notice {
  box-sizing: border-box;
  margin: 12px 0;
  padding: 0 26px;
  color: var(--pf-stone);
  font-family: var(--pf-font-body);
}

/* The tenant chooser (unit 4B): one full-width choice per workspace, each a 44 px touch target. */
.pp-app-workspaces__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-app-workspace {
  width: 100%;
  min-height: 44px;
  justify-content: space-between;
  white-space: normal;
  text-align: left;
}

.pp-app-workspace__current {
  color: var(--pf-stone);
}

/* On a phone the chooser card keeps side margins, so its rounded corners show (main's render check, unit 4B). */
@media (max-width: 760px) {
  .pp-app-workspaces {
    margin-left: 12px;
    margin-right: 12px;
  }
}

.pp-app-notice--card {
  max-width: 560px;
  margin: 12px auto;
  padding: 0 29px;
}

@media (max-width: 900px) {
  .pp-app-notice:not(.pp-app-notice--card) {
    padding: 0 14px;
  }
}