/* Docs layout/prose only; shared tokens, foundation and native controls load first. */
.docs-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 4vw; border-bottom:1px solid var(--tp-border-default); }
.brand { color:var(--tp-text-primary); font-size:1.05rem; font-weight:600; text-decoration:none; }
.brand span { color:var(--tp-text-muted); font-weight:400; }
.docs-header nav { display:flex; gap:24px; flex-wrap:wrap; }
.docs-header nav a { font-size:.9rem; text-decoration:none; }
.docs-layout { max-width:1440px; margin:auto; display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(24px,5vw,80px); padding:36px 4vw 0; }
.docs-sidebar { font-size:.9rem; }
.docs-sidebar>.desktop-contents { position:sticky; top:24px; max-height:calc(100dvh - 48px); overflow:auto; padding:4px 10px 20px 4px; }
.docs-sidebar .mobile-contents { display:none; }
.docs-sidebar summary { font-weight:600; cursor:pointer; min-height:32px; }
.docs-sidebar h2 { font-family:var(--tp-font-family-sans); font-size:.75rem; text-transform:uppercase; letter-spacing:.09em; margin:30px 0 12px; color:var(--tp-text-muted); }
.docs-sidebar ol { list-style:none; margin:0; padding:0; }
.docs-sidebar li { margin:4px 0; }
.docs-sidebar a { display:block; padding:8px 10px; text-decoration:none; border-radius:var(--tp-radius-sm); line-height:1.45; color:var(--tp-text-secondary); }
.docs-sidebar a[aria-current=page] { color:var(--tp-selection-text); background:var(--tp-selection-bg); font-weight:600; }
.docs-sidebar a:hover { background:var(--tp-surface-panel); }
main { max-width:76ch; min-width:0; padding-bottom:40px; }
.breadcrumbs ol { display:flex; flex-wrap:wrap; list-style:none; padding:0; gap:8px; font-size:.8rem; color:var(--tp-text-muted); margin:0 0 42px; }
.breadcrumbs li+li:before { content:'/'; margin-right:8px; }
.eyebrow { font-size:.75rem; text-transform:uppercase; letter-spacing:.13em; color:var(--tp-accent); font-weight:600; }
h1,h2,h3 { color:var(--tp-text-primary); }
h1,h2 { font-family:var(--tp-font-family-display); font-weight:400; }
h1 { font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.12; letter-spacing:-.025em; margin:14px 0 22px; max-width:24ch; }
h2 { font-size:1.65rem; line-height:1.3; scroll-margin-top:24px; }
h3 { font-size:1.13rem; margin-top:28px; }
.lead { font-size:1.2rem; line-height:1.65; color:var(--tp-text-secondary); }
article { font-size:1.025rem; line-height:1.8; }
article section+section { margin-top:52px; }
article p { margin:16px 0; }
article li { margin:8px 0; }
article ul,article ol { padding-left:24px; }
.anchor { font-family:var(--tp-font-family-sans); font-size:.75em; text-decoration:none; }
.example { padding:20px 24px; background:var(--tp-surface-panel); border-radius:var(--tp-radius-md); border:1px solid var(--tp-border-default); margin:24px 0; }
.example p:first-child { margin-top:0; }.example p:last-child { margin-bottom:0; }
.table-scroll { overflow:auto; max-width:100%; margin:24px 0; }
.table-scroll:focus-visible { outline:2px solid var(--tp-focus-ring); }
table { border-collapse:collapse; width:100%; font-size:.9rem; line-height:1.6; }
th,td { text-align:left; padding:12px; border-bottom:1px solid var(--tp-border-default); vertical-align:top; min-width:120px; }
th { font-weight:600; background:var(--tp-surface-panel); }
caption { text-align:left; color:var(--tp-text-secondary); padding-bottom:10px; }
.frame-tree { list-style:none; border:1px solid var(--tp-border-default); padding:16px 20px; border-radius:var(--tp-radius-md); }
.frame-tree ol { list-style:none; }.frame-tree li { padding:4px 0; }.frame-tree strong { color:var(--tp-accent); }
.flow { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:20px; background:var(--tp-surface-panel); border-radius:var(--tp-radius-md); }
.flow span { flex:1; min-width:130px; }.flow b { font-size:1.5rem; color:var(--tp-accent); }
code { font-size:.9em; overflow-wrap:anywhere; }
.docs-pager { display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--tp-border-default); margin-top:64px; padding-top:24px; }
.docs-pager div { max-width:48%; }.docs-pager span { display:block; color:var(--tp-text-muted); font-size:.75rem; margin-bottom:8px; }.docs-pager div:last-child { text-align:right; }
footer { font-size:.8rem; color:var(--tp-text-muted); margin-top:48px; line-height:1.8; }
.skip-link { position:absolute; top:10px; left:16px; transform:translateY(-160%); background:var(--tp-surface-input); padding:12px; z-index:10; }.skip-link:focus { transform:none; }
.activity-demo { margin:24px 0; padding:16px; border:1px solid var(--tp-border-default); border-radius:var(--tp-radius-md); }
.semantic-grid button,.profile-buttons button { padding:10px; min-height:44px; text-align:left; line-height:1.4; }
.semantic-grid button:disabled { opacity:1; }
.profile-buttons button[aria-pressed=true] { border-color:var(--tp-border-selected); background:var(--tp-selection-bg); color:var(--tp-selection-text); }
.profile-buttons button[aria-pressed=true]::before { content:'✓ '; }
.semantic-grid { min-width:620px; }.semantic-grid th,.semantic-grid td { min-width:0; padding:8px; }.semantic-grid th { overflow-wrap:anywhere; }.semantic-grid th:first-child { min-width:110px; overflow-wrap:normal; }
.semantic-grid button { width:100%; height:100%; font-size:.82rem; overflow-wrap:anywhere; position:relative; border:0; background:transparent; font-weight:400; padding-right:26px; }
.semantic-grid button[aria-pressed=true]::before { position:absolute; right:7px; top:10px; content:'✓'; line-height:1.4; }
.semantic-grid-wrap { margin:16px 0 0; border:1px solid var(--tp-border-default); border-bottom:0; }
.grid-explanations summary { cursor:pointer; overflow-wrap:anywhere; }.grid-explanations p:last-child { margin-bottom:0; }

.semantic-grid-wrap tbody tr:last-child>* { border-bottom:0; }
.semantic-grid-wrap :is(th,td) { transition:background-color var(--tp-motion-duration-normal) var(--tp-motion-ease-default); }
.semantic-grid-wrap th { background-color:var(--docs-grid-axis-bg,var(--tp-surface-panel)); }
.semantic-grid-wrap tbody td { background-color:var(--docs-grid-axis-bg,var(--tp-surface-canvas)); }
.semantic-grid-wrap td:has(button[aria-pressed=true]) { background-color:var(--tp-selection-bg); }
.semantic-grid button[aria-pressed=true] { color:var(--tp-selection-text); }
/* Column 1 contains row headings; the four semantic columns are 2–5. */
@media screen {
  .semantic-grid-wrap tr:has(button:focus-visible) > *,
  .semantic-grid-wrap table:has(td:nth-child(2) button:focus-visible) tr > :nth-child(2),
  .semantic-grid-wrap table:has(td:nth-child(3) button:focus-visible) tr > :nth-child(3),
  .semantic-grid-wrap table:has(td:nth-child(4) button:focus-visible) tr > :nth-child(4),
  .semantic-grid-wrap table:has(td:nth-child(5) button:focus-visible) tr > :nth-child(5) {
    --docs-grid-axis-bg:color-mix(in oklch,var(--tp-selection-bg) 38%,var(--tp-surface-canvas));
  }
}
@media screen and (hover:hover) and (pointer:fine) {
  .semantic-grid-wrap tbody tr:has(td:hover) > *,
  .semantic-grid-wrap table:has(tbody td:nth-child(2):hover) tr > :nth-child(2),
  .semantic-grid-wrap table:has(tbody td:nth-child(3):hover) tr > :nth-child(3),
  .semantic-grid-wrap table:has(tbody td:nth-child(4):hover) tr > :nth-child(4),
  .semantic-grid-wrap table:has(tbody td:nth-child(5):hover) tr > :nth-child(5) {
    --docs-grid-axis-bg:color-mix(in oklch,var(--tp-selection-bg) 38%,var(--tp-surface-canvas));
  }
}
.grid-explanations details { border:1px solid var(--tp-border-default); padding:20px; background:var(--tp-surface-panel); }.grid-explanations summary { list-style:none; font-weight:400; }.grid-explanations summary::-webkit-details-marker { display:none; }
.profile-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }.profile-buttons button { font-size:.9rem; }.activity-demo h3 { margin-top:16px; }.activity-demo [data-profile-panel]+[data-profile-panel] { margin-top:36px; }
.activity-curve { display:block; width:100%; height:auto; overflow:visible; color:var(--tp-text-primary); }.activity-curve text { fill:currentColor; font:13px var(--tp-font-family-sans); }.curve-axis { fill:none; stroke:var(--tp-text-muted); stroke-width:1; }.curve-line { fill:none; stroke:var(--tp-accent); stroke-width:3; stroke-linejoin:round; }.curve-dot { fill:var(--tp-accent); }
.phase-key { display:flex; flex-wrap:wrap; gap:8px 30px; font-size:.85rem; padding-left:24px; }.phase-key li { margin:0; }.demo-instruction { font-size:.9rem; color:var(--tp-text-secondary); }.curve-mobile-labels { display:none; }
@media(max-width:850px) {
  .docs-layout { grid-template-columns:1fr; padding-top:20px; gap:28px; }
  .docs-sidebar>.desktop-contents { display:none; }.docs-sidebar .mobile-contents { display:block; }
  .docs-sidebar nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.docs-sidebar ol { font-size:.85rem; }.docs-sidebar summary { padding:10px 0; }
  .breadcrumbs ol { margin-bottom:28px; } main { max-width:100%; }
  .docs-header { flex-wrap:wrap; gap:16px; }.docs-header nav { order:3; width:100%; gap:22px; }
  .docs-sidebar details[open] { border-bottom:1px solid var(--tp-border-default); }
}
@media(max-width:600px) { .activity-curve .curve-axis-label { display:none; }.activity-curve text { font-size:28px; }.curve-mobile-labels { display:grid; font-size:.85rem; line-height:1.6; gap:4px; }.activity-demo { padding:12px; }.activity-curve { min-height:155px; }.profile-buttons button { flex:1 1 120px; } }
@media(max-width:430px) { .docs-sidebar nav { grid-template-columns:1fr; }.docs-pager { font-size:.9rem; }h1 { font-size:2.1rem; }.example { padding:16px; }.frame-tree { padding:12px; }.frame-tree ol { padding-left:16px; }.docs-header { padding-inline:4vw; }.brand { font-size:.9rem; } }
@media print { .docs-header,.docs-sidebar,.docs-pager,.skip-link,.profile-buttons { display:none !important; }.docs-layout { display:block; padding:0; }main { max-width:none; }.table-scroll { overflow:visible; }[data-grid-panel][hidden],[data-profile-panel][hidden] { display:block !important; }a { color:inherit; } }

/* Docs composition only; map, navigation and panels use production recipes. */
[data-doc-illustration] { margin-inline:0; }
story-stages-example { display:block; }
emotion-explorer { display:block; }
.emotion-explorer { margin-block:20px; padding:20px; border:1px solid var(--tp-border-default); border-radius:var(--tp-radius-md); background:var(--tp-surface-panel); line-height:1.5; }
.emotion-explorer .emotion-example { margin:0 0 20px; color:var(--tp-text-secondary); }
.emotion-axis { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; }
.emotion-axis + .emotion-axis { margin-top:20px; }
.emotion-axis .concept-emotion-axis { display:contents; }
.emotion-axis .concept-emotion-axis-label { grid-row:1; grid-column:1; font-weight:600; }
.emotion-axis .concept-emotion-axis-value { grid-row:1; grid-column:2; overflow-wrap:anywhere; }
.emotion-axis .emotion-question { grid-row:2; grid-column:1 / -1; color:var(--tp-text-secondary); }
.emotion-axis .concept-emotion-range { grid-row:3; grid-column:1 / -1; width:100%; min-width:0; height:32px; margin:0; }
.emotion-axis .emotion-meaning { grid-row:4; grid-column:1 / -1; }
.emotion-axis p { margin:0; }
.emotion-reference-fallback dt { font-weight:600; }
.emotion-reference-fallback dd { margin:0 0 8px; }
emotion-explorer[data-enhanced] + .emotion-reference-fallback { display:none; }
@media(pointer:coarse) { .emotion-axis .concept-emotion-range { height:44px; } }
@media(max-width:430px) { .emotion-explorer { padding:12px; } }
.story-stages-live { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 48px; height:clamp(240px,65vh,420px); border:1px solid var(--tp-border-default); color:var(--tp-text-primary); }
.story-stages-canvas { min-width:0; min-height:0; }
.story-stages-controls { padding-top:var(--tp-space-2); background:var(--tp-surface-chrome); }
.story-stages-live app-slide-panel { inset:12% 0 0; }
.story-stages-fallback .framing-rails { position:static; display:block; max-width:none; }
.story-stages-fallback .table-scroll { max-height:none; }
.story-stages-legend { display:inline-flex; align-items:center; gap:var(--tp-space-2); margin-right:var(--tp-space-3); }
.story-stages-legend i { width:24px; height:3px; }
story-stages-example[data-enhanced] + .story-stages-fallback { display:none; }
@media print {
  emotion-explorer { display:none; }
  emotion-explorer[data-enhanced] + .emotion-reference-fallback { display:block; }
  story-stages-example { display:none; }
  story-stages-example[data-enhanced] + .story-stages-fallback { display:block; }
  .story-stages-fallback .framing-rails { width:100%; height:auto; }
  .story-stages-fallback .table-scroll { overflow:visible; }
  .story-stages-summary > * { display:block; }
}