/* Shared product layout: one outer grid, three intentional page types. */
:root {
  --page-width: 1280px;
  --reading-width: 880px;
  --shadow: 0 4px 16px rgb(23 32 38 / 4%);
  --gutter: clamp(20px, 4vw, 48px);
}
body { font-size: 16px; line-height: 1.65; }
a { text-underline-offset: .2em; }
h1, h2 { letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
h2 { font-size: clamp(1.65rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.125rem; line-height: 1.4; }
p { max-width: 76ch; }
.eyebrow { font-size: .75rem; letter-spacing: .08em; }
.top-nav, .version-inner, .site-frame, .site-footer {
  width: min(100%, var(--page-width)); max-width: var(--page-width);
  margin-inline: auto; padding-inline: var(--gutter);
}
.nav-shell { position: sticky; top: 0; }
.nav-shell .top-nav { min-height: 76px; padding-block: 16px; flex-wrap: nowrap; gap: 28px; }
.brand { gap: 12px; flex-shrink: 0; }
.mobile-navigation { flex: 1; min-width: 0; }
.mobile-navigation > summary { display: none; }
.mobile-navigation > .mobile-navigation-content { display: flex; align-items: center; gap: 24px; }
.nav-links { flex-wrap: nowrap; gap: 22px; flex: 1; justify-content: flex-end; }
.top-nav a:not(.brand), .nav-group summary { font-size: .875rem; white-space: nowrap; }
.nav-group summary { list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: '⌄'; margin-left: 6px; }
.nav-menu { width: 260px; padding: 12px; box-shadow: 0 12px 30px rgb(23 32 38 / 10%); }
.nav-menu a { white-space: normal !important; }
.nav-search { margin: 0; gap: 4px; }
.nav-search input { width: 130px; font-size: .875rem; }
.nav-search button { font-size: .875rem; }
.version-strip { padding: 0; border-bottom: 1px solid var(--border); text-align: left; font-size: .8125rem; }
.version-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; min-height: 40px; padding-block: 8px; }
.version-inner span { padding: 0; }
.docs-version-control { display: flex; align-items: center; }
.docs-version-control select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; max-width: 100%; }
.docs-version-control [hidden] { display: none; }
.version-inner > :last-child { margin-left: auto; }
.site-header { background: transparent; border: 0; }
.hero, .compact-hero { max-width: none; margin: 0; padding: 0 0 36px; }
.hero h1, .compact-hero h1 { font-size: clamp(2.25rem, 4vw, 3rem); max-width: 28ch; }
.hero-copy { max-width: 68ch; font-size: 1.0625rem; margin-top: 16px; }
.section-copy { max-width: 76ch; }
.reading-layout, .reading-layout.has-toc { display: block; max-width: none; margin: 0; }
.reading-layout main { width: 100%; max-width: none; padding: 0 0 64px; margin: 0; }
.page-content { min-width: 0; }
.documentation-frame { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding-top: 32px; }
.docs-sidebar { position: sticky; top: var(--docs-nav-offset, 92px); max-height: calc(100dvh - var(--docs-nav-offset, 92px) - 24px); overflow: auto; align-self: start; padding-right: 8px; font-size: .875rem; }
.docs-navigation > summary { display: none; }
.docs-navigation > nav { display: block; }
.docs-navigation p { color: var(--text); font-weight: 650; margin: 24px 0 8px; }
.docs-navigation p:first-child { margin-top: 0; }
.docs-navigation a { display: block; padding: 5px 10px; margin-left: -10px; color: var(--muted); text-decoration: none; border-radius: 5px; }
.docs-navigation a:hover { background: var(--surface-muted); color: var(--accent-dark); }
.docs-navigation a[aria-current] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 650; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8125rem; color: var(--muted); margin-bottom: 24px; }
.breadcrumbs a { text-decoration: none; }
.prose { max-width: none; margin: 0; }
.prose h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
.prose > p { max-width: 76ch; }
.page-toc { position: static; padding: 0; margin: 0 0 32px; font-size: .875rem; max-height: none; overflow: visible; }
.toc-disclosure { border-block: 1px solid var(--border); padding: 12px 0; }
.toc-disclosure > summary { font-weight: 600; cursor: pointer; }
.page-toc nav { display: grid; gap: 8px; padding: 14px 0 4px; }
.page-toc .toc-section { margin: 0; }
.page-toc details details summary { font-size: .8125rem; }
.page-toc a[aria-current] { border: 0; padding: 0; }
.task-section { margin-bottom: 48px; }
.docs-card, .result-card, .table-wrap, table { box-shadow: none; }
.docs-card { border-radius: 8px; }
.button { gap: 12px; min-height: 44px; font-size: .9375rem; border-radius: 6px; }
.button:hover { background: var(--surface-muted); }
.button.primary:hover { background: var(--accent-dark); }
.code-toolbar { margin-top: 20px; padding: 8px 12px; font-size: .8125rem; gap: 8px; }
.code-toolbar + pre, .install-card .code-toolbar + pre { margin-top: 0; }
pre { padding: 18px; font-size: .875rem; line-height: 1.6; overflow-x: auto; }
.copy-status { font-size: .8125rem; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: 28px; border-top: 1px solid var(--border); font-size: .8125rem; }
.footer-brand { display: grid; gap: 12px; }
.footer-brand img { display: block; width: 128px; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Product home: one value proposition with atom loss integrated into it. */
/* Source-bound legacy selectors: .home-atom-loss .loss-workflow .loss-workflow-actions */
.home-hero { display: block; padding: 80px 0; }
.home-intro { max-width: 900px; }
.home-hero h1 { font-size: clamp(2.75rem, 5.5vw, 4.5rem); max-width: 22ch; line-height: 1.08; }
.home-hero .hero-copy { font-size: 1.25rem; max-width: 64ch; margin-top: 24px; }
.home-hero .actions { margin-top: 28px; }
.atom-loss-button { border-color: #d8b29d; background: var(--accent-soft); color: var(--accent-dark); }
.atom-loss-button:hover { border-color: var(--brand-copper); background: #f1dccd; }
.home-example { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); gap: 40px; align-items: center; margin: 0 0 48px; padding: 32px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted); }
.home-example-copy h2 { margin-top: 0; }
.home-example-copy p:not(.eyebrow) { color: var(--muted); }
.home-example-copy > a { display: inline-block; margin-top: 8px; font-weight: 600; text-decoration: none; }
.home-example-copy > a:hover { text-decoration: underline; }
.home-example-preview { display: block; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 18px; }
.home-example-preview img { display: block; width: 100%; height: auto; }
.home-capabilities { border-top: 1px solid var(--border); padding: 48px 0 56px; }
.workflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 32px; }
.workflow-grid article { min-width: 0; }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: var(--accent-soft); font-size: .8125rem; font-weight: 600; color: var(--accent-dark); }
.workflow-grid h3 { margin-top: 12px; font-size: 1.375rem; }
.workflow-grid h3 a { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.workflow-grid h3 a span { color: var(--accent); font-size: .9em; }
.workflow-grid p { color: var(--muted); font-size: .9375rem; min-height: 6.6em; }
.workflow-grid a { display: inline-block; text-decoration: none; }
.workflow-grid a:hover { text-decoration: underline; }
.atom-loss-bundles { min-width: 580px; }
.home-support { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.home-support h2 { font-size: 1.65rem; }
.home-support p { color: var(--muted); max-width: 64ch; }
.home-support .content-links { flex-shrink: 0; display: grid; }
/* Search and help remain readable without decorative article framing. */
body[data-page="docs"] .hero { padding-bottom: 24px; }
.docs-search input, .docs-search button { min-height: 48px; }
.search-results li { padding-block: 20px; }
.search-results .search-path { font-size: .8125rem; margin: 0 0 4px; }
mark { background: #f3d4be; color: #693019; border-radius: 2px; }
.search-results a { text-decoration: none; }
.search-results a:hover { text-decoration: underline; }
.get-help { border: 1px solid var(--border); background: var(--surface-muted); padding: 24px; border-radius: 8px; margin-block: 40px; }
.get-help h2 { margin-top: 0; }
/* Tool pages share the same outer boundary; the canvas owns the extra space. */
body[data-page="shot"] .hero { padding: 28px 0 20px; }
body[data-page="shot"] .hero h1 { font-size: 2rem; }
body[data-page="shot"] main { padding: 0 0 48px; max-width: none; }
body[data-page="shot"] .shot-app { width: 100%; margin: 0; }
body[data-page="shot"] .shot-detail { font-size: .875rem; }
@media (max-width: 1199px) {
  .nav-shell .top-nav { justify-content: space-between; min-height: 68px; }
  .mobile-navigation { flex: none; }
  .mobile-navigation > summary { display: block; cursor: pointer; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: .875rem; }
  .mobile-navigation:not([open]) > .mobile-navigation-content { display: none; }
  .mobile-navigation > .mobile-navigation-content { position: absolute; top: 100%; left: 0; right: 0; background: white; padding: 20px var(--gutter); box-shadow: 0 12px 20px rgb(23 32 38 / 8%); border-bottom: 1px solid var(--border); display: grid; max-height: 75dvh; overflow: auto; }
  .nav-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 18px 28px; align-items: center; }
  .nav-group { position: static; }
  .nav-menu { position: static; margin-top: 12px; box-shadow: none; max-width: 100%; }
  .nav-search { width: 100%; }
  .nav-search input { width: 100%; flex: 1; }
  .documentation-frame { grid-template-columns: 190px minmax(0, 1fr); gap: 32px; }
  .workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .workflow-grid p { min-height: 3.3em; }
}
@media (max-width: 899px) {
  .documentation-frame { display: block; padding-top: 20px; }
  .docs-sidebar { position: static; max-height: none; overflow: visible; padding: 0; margin-bottom: 24px; }
  .docs-navigation > summary { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); font-weight: 600; cursor: pointer; }
  .docs-navigation > summary::after { content: '+'; float: right; }
  .docs-navigation[open] > summary::after { content: '−'; }
  .docs-navigation:not([open]) > nav { display: none; }
  .docs-navigation nav { padding: 12px; background: var(--surface-muted); }
  .home-hero { padding: 56px 0; }
  .home-hero h1 { font-size: 2.8rem; }
  .home-example { grid-template-columns: 1fr; gap: 28px; }
  .home-support { display: block; }
  .workflow-grid { gap: 24px; }
}
@media (max-width: 699px) {
  .top-nav { flex-direction: row; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 14px; }
  .version-inner { font-size: .75rem; gap: 4px 16px; }
  .version-inner > :last-child { margin-left: 0; }
  .home-hero h1 { max-width: none; }
  .home-hero .hero-copy { font-size: 1.125rem; }
  .workflow-grid { grid-template-columns: 1fr; gap: 24px; }
  .workflow-grid p { min-height: 0; }
  .workflow-grid article + article { border-top: 1px solid var(--border); padding-top: 24px; }
  .home-example { padding: 24px 20px; }
  .home-capabilities { padding-block: 36px; }
  .actions { flex-direction: row; }
  .actions .button { width: auto; }
  .code-toolbar { flex-wrap: wrap; }
  .code-toolbar button { margin-left: auto; }
  .copy-status:empty { display: none; }
  .copy-status:not(:empty) { order: 3; flex-basis: 100%; }
  .site-footer { align-items: flex-start; }
}
.evidence-preview { margin: 24px 0; }
.evidence-preview img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 8px; }
body.shot-focus .site-frame { max-width: none; padding-inline: 12px; }