/* Hallmark · macrostructure: Wide observation map + setup verification · tone: technical, restrained · anchor hue: AISEC teal
 * design-system: design.md · designed-as-app · genre: modern-minimal
 * pre-emit critique: P4 H4 E4 S4 R4 V4 · computed text contrast: pass
 * tokens inherited from product.css and versioned tokens.css
 */
.sentinel-page h1, .sentinel-page h2, .sentinel-page h3 { min-width: 0; font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; }
.sentinel-page h2 { margin: 0; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.08; font-weight: 500; letter-spacing: -.035em; }
.sentinel-page h3 { margin: 0; font-size: 23px; line-height: 1.3; font-weight: 500; }
.sentinel-page p { text-wrap: pretty; }
.sentinel-page .brand, .sentinel-page .sign-in, .sentinel-page .product-links a, .sentinel-page .footer-links a { min-height: 44px; }
.sentinel-page .footer-links a { display: inline-flex; align-items: center; }
.sentinel-page .footer-note, .sentinel-page .footer-meta { color: var(--color-muted); }
.sentinel-page .button { transition: transform var(--dur-short) var(--ease-out); }
.sentinel-page .button-primary:hover { background: var(--color-accent); border-color: var(--color-accent); }
.sentinel-link { display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-sm); color: inherit; font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 4px; white-space: nowrap; }
.sentinel-link:hover { text-decoration-color: currentColor; }
.sentinel-link:active { opacity: .8; }
.sentinel-page section[id] { scroll-margin-top: 112px; }
.sentinel-hero { padding-block: var(--space-4xl) var(--space-5xl); }
.sentinel-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-4xl); align-items: end; }
.sentinel-heading h1 { margin: 0; max-width: 14ch; font-size: clamp(46px, 5.5vw, 76px); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.sentinel-intro > p { max-width: 44ch; margin: 0; font-size: 18px; color: var(--color-muted); }
.sentinel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); margin-top: var(--space-xl); }
.sentinel-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; margin: var(--space-3xl) 0 0; padding-top: var(--space-2xl); border-top: var(--rule-strong); }
.activity-kinds { padding-right: var(--space-2xl); }
.activity-kinds > div { position: relative; padding: var(--space-md) 0 var(--space-md) var(--space-2xl); }
.activity-kinds strong { display: block; font-size: 16px; font-weight: 500; }
.activity-kinds > div > span:last-child { display: block; margin-top: var(--space-xs); font-size: 13px; color: var(--color-muted); }
.activity-glyph { position: absolute; top: var(--space-md); left: 0; width: 20px; height: 20px; fill: none; stroke: var(--color-warning); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sentinel-collector { position: relative; min-width: 0; }
.sentinel-collector svg { width: 100%; height: auto; fill: none; stroke-width: 1; }
.collector-wire { stroke: var(--color-line-strong); }
.collector-shell { stroke: var(--color-accent); }
.collector-inner { stroke: var(--color-line); fill: var(--color-surface); }
.collector-tick { stroke: var(--color-accent); }
.sentinel-collector > div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-sm); text-align: center; }
.sentinel-collector strong { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.025em; }
.sentinel-collector span { max-width: 15ch; color: var(--color-muted); font-size: 12px; line-height: 1.5; }
.observation-result { padding: var(--space-xl) 0 var(--space-xl) var(--space-2xl); }
.observation-result h2 { font-size: 23px; letter-spacing: -.015em; }
.observation-result ul { padding: 0; margin: var(--space-lg) 0 var(--space-xl); list-style: none; }
.observation-result li { padding-block: var(--space-xs); color: var(--color-muted); font-size: 14px; }
.optional-response { padding-top: var(--space-lg); border-top: var(--rule-strong); }
.optional-response span { display: block; color: var(--color-muted); font-size: 12px; }
.optional-response strong { display: block; margin-top: var(--space-xs); color: var(--color-accent); font-size: 14px; font-weight: 500; }
.sentinel-map figcaption { grid-column: 1 / -1; padding-top: var(--space-xl); margin-top: var(--space-lg); border-top: var(--rule-subtle); color: var(--color-muted); font-size: 13px; }
.sentinel-setup { background: var(--color-surface); border-block: var(--rule-subtle); }
.setup-composition { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-5xl); padding-block: 80px; }
.setup-lead h2 { max-width: 13ch; }
.setup-lead p { margin: var(--space-xl) 0 0; max-width: 42ch; color: var(--color-muted); }
.setup-lead .sentinel-link { margin-top: var(--space-lg); }
.setup-checks { margin: 0; padding: 0; list-style: none; }
.setup-checks > li { padding-block: var(--space-2xl); border-top: var(--rule-strong); }
.setup-checks > li:first-child { padding-top: 0; border: 0; }
.setup-checks > li:last-child { padding-bottom: 0; }
.setup-task p { margin: var(--space-md) 0 0; color: var(--color-muted); }
.setup-proof { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); }
.setup-proof strong { color: var(--color-accent); font-size: 13px; font-weight: 500; }
.setup-proof p { margin: 0; font-size: 14px; color: var(--color-muted); }
.setup-proof b, .setup-task b { color: var(--color-ink); font-weight: 500; }
.sentinel-edge { padding-block: var(--space-5xl); }
.edge-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3xl); margin-bottom: var(--space-3xl); }
.edge-heading h2 { max-width: 15ch; }
.edge-heading > p { margin: 0; max-width: 43ch; color: var(--color-muted); }
.edge-contract { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); background: var(--color-report-paper); color: var(--color-report-ink); }
.edge-source, .edge-destination { padding: var(--space-3xl); }
.edge-source { border-right: 1px solid var(--color-report-rule); }
.edge-contract svg { width: 32px; height: 32px; margin-bottom: var(--space-xl); stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.edge-contract h3 { font-size: 28px; }
.edge-contract p { margin: var(--space-lg) 0 0; color: var(--color-report-muted); }
.edge-source ul { padding: 0; margin: var(--space-xl) 0 0; list-style: none; }
.edge-source li { padding-block: var(--space-sm); border-top: 1px solid var(--color-report-rule); font-size: 14px; }
.edge-caution { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-report-rule); }
.edge-caution strong { font-size: 15px; font-weight: 600; }
.edge-caution p { font-size: 14px; margin-top: var(--space-sm); }
.sentinel-maintenance { padding-block: var(--space-4xl); background: var(--color-surface); border-block: var(--rule-subtle); }
.maintenance-heading { display: flex; align-items: start; gap: var(--space-xl); }
.maintenance-heading > svg { flex-shrink: 0; width: 36px; height: 36px; margin-top: var(--space-sm); stroke: var(--color-warning); stroke-width: 3; fill: none; }
.maintenance-heading h2 { max-width: 25ch; font-size: clamp(32px, 3.5vw, 44px); }
.maintenance-heading p { max-width: 64ch; margin: var(--space-xl) 0 0; color: var(--color-muted); }
.maintenance-sequence { display: flex; margin: var(--space-3xl) 0 var(--space-2xl); padding: 0; list-style: none; border-top: var(--rule-strong); }
.maintenance-sequence li { position: relative; flex: 1; min-width: 0; padding: var(--space-2xl) var(--space-2xl) 0 0; }
.maintenance-sequence li:last-child { padding-right: 0; }
.maintenance-sequence li::before { position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--color-warning); border-radius: 50%; content: ''; }
.maintenance-sequence h3 { font-size: 20px; }
.maintenance-sequence p { max-width: 38ch; margin: var(--space-md) 0 0; color: var(--color-muted); font-size: 15px; }
.maintenance-note { margin: 0; padding-top: var(--space-xl); border-top: var(--rule-subtle); color: var(--color-warning); font-size: 13px; }
.sentinel-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xl) var(--space-4xl); padding-block: var(--space-5xl); }
.sentinel-close h2 { max-width: 22ch; }
.sentinel-close > div p { max-width: 56ch; margin: var(--space-xl) 0 0; color: var(--color-muted); }
.sentinel-plan-note { grid-column: 1 / -1; margin: 0; color: var(--color-muted); font-size: 13px; }
.sentinel-plan-note .sentinel-link { color: var(--color-ink); }
@media (max-width: 1100px) {
  .sentinel-heading { gap: var(--space-2xl); }
  .setup-composition { gap: var(--space-3xl); }
  .activity-kinds { padding-right: var(--space-lg); }
  .observation-result { padding-left: var(--space-xl); }
  .edge-source, .edge-destination { padding: var(--space-2xl); }
}
@media (max-width: 800px) {
  .sentinel-hero { padding-block: var(--space-3xl) var(--space-4xl); }
  .sentinel-heading, .setup-composition { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .sentinel-heading h1 { max-width: 18ch; font-size: clamp(44px, 8vw, 64px); }
  .sentinel-intro > p { max-width: 55ch; }
  .sentinel-map { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
  .activity-kinds { padding: 0; }
  .sentinel-collector { max-width: 300px; width: 100%; justify-self: end; }
  .collector-wire { display: none; }
  .observation-result { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg) var(--space-2xl); padding: var(--space-2xl) 0 0; margin-top: var(--space-xl); border-top: var(--rule-strong); }
  .observation-result h2 { grid-column: 1; }
  .observation-result ul { grid-column: 1; margin: 0; }
  .optional-response { grid-column: 2; grid-row: 1 / 3; padding: 0 0 0 var(--space-xl); border-top: 0; border-left: var(--rule-strong); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .sentinel-map figcaption { margin-top: var(--space-2xl); }
  .setup-composition, .sentinel-edge, .sentinel-close { padding-block: var(--space-4xl); }
  .setup-composition { gap: var(--space-3xl); }
  .setup-lead h2 { max-width: 20ch; }
  .setup-lead p { max-width: 56ch; }
  .edge-heading { display: block; }
  .edge-heading p { margin-top: var(--space-xl); }
  .edge-contract { grid-template-columns: minmax(0, 1fr); }
  .edge-source { border-right: 0; border-bottom: 1px solid var(--color-report-rule); }
  .maintenance-sequence { flex-direction: column; border: 0; gap: var(--space-xl); }
  .maintenance-sequence li { padding: 0 0 var(--space-xl) var(--space-xl); border-bottom: var(--rule-subtle); }
  .maintenance-sequence li::before { top: 10px; }
  .maintenance-sequence p { max-width: 56ch; }
  .maintenance-note { border: 0; padding: 0; }
  .sentinel-close { grid-template-columns: minmax(0, 1fr); }
  .sentinel-close > .button { justify-self: start; }
}
@media (max-width: 480px) {
  .sentinel-page .wrap { width: calc(100% - 32px); }
  .sentinel-heading h1 { font-size: 44px; }
  .sentinel-map { grid-template-columns: minmax(0, 1fr); }
  .activity-kinds > div { padding-block: var(--space-lg); border-bottom: var(--rule-subtle); }
  .activity-glyph { top: var(--space-lg); }
  .sentinel-collector { justify-self: center; max-width: 220px; margin-block: var(--space-xl); }
  .sentinel-collector strong { font-size: 28px; }
  .observation-result { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
  .optional-response { grid-column: 1; grid-row: auto; border-left: 0; border-top: var(--rule-subtle); padding: var(--space-lg) 0 0; }
  .setup-proof { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .edge-source, .edge-destination { padding: var(--space-xl); }
  .maintenance-heading { gap: var(--space-md); }
  .maintenance-heading > svg { width: 24px; height: 28px; }
  .maintenance-heading h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .sentinel-page .button, .sentinel-page .skip-link { transition: none; }
  .sentinel-page .button:hover, .sentinel-page .button:active { transform: none; }
}