/* Shared layout for document-style pages (about, support, privacy) and the
   system status page. Loaded alongside the base stylesheet; provides the
   continuous-prose content column (no card boxes) used by those pages. The
   system status widgets further down keep their own card styling. */

.page-doc {
  align-items: center;
  justify-content: flex-start;
}

.page-doc main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 58rem);
  margin: 0 auto;
  padding: 3.5rem 1.25rem 4rem;
}

/* Anchored to main's own padding box, not to .content — so it renders at a
   fixed, always-visible position regardless of where .content ends up, and
   is completely excluded from .content's centering math (it's out of flow,
   so .content is main's only flow child). This is what makes .content's
   centering ignore the button's height entirely without risking the button
   being pushed off-screen, which happened when it was anchored to
   .content's own (variable) position instead. .content's auto top/bottom
   margins center it when it fits and clamp to 0 (top-aligned, never
   clipped) when it doesn't — unlike justify-content: center, which lets
   overflow push content above the visible area with no way to scroll back
   to it.

   top must match main's own padding-top exactly (not 0) — the containing
   block for an absolutely positioned element is the nearest positioned
   ancestor's *padding box*, so top: 0 aligns with where main's padding
   starts being applied, not with its content edge. In other words 0
   ignores main's padding entirely and sits flush against main's true
   outer edge (the viewport edge, in practice) — which was the "touches
   the top" bug. left/right stay 0 (not main's side padding) deliberately:
   with width also set, left + right + width is over-constrained, and
   browsers resolve that by silently discarding the "right" value — so a
   non-zero left/right here would NOT inset the button as expected. The
   side inset is instead baked into the width formula below. */
.page-doc .top-action {
  position: absolute;
  top: 3.5rem;
  left: 0;
  right: 0;
  width: min(calc(100% - 2.5rem), 40rem);
  margin: 0 auto;
}

.page-doc .content {
  width: min(100%, 40rem);
  /* Guarantees a minimum gap from the button above even in the worst case
     (margin-top resolving toward 0 for content close to main's full
     height, e.g. longer pages on short mobile viewports) — margin-top:auto
     alone has no floor, so without this the heading could render right up
     against the button. */
  padding-top: 4rem;
  margin-top: auto;
  margin-bottom: auto;
}

.page-doc .hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.page-doc .hero h2 {
  max-width: 34rem;
}

@media (min-width: 1024px) {
  .page-doc main {
    width: min(100%, 62rem);
  }

  .page-doc .top-action {
    width: min(calc(100% - 2.5rem), 46rem);
  }

  .page-doc .content {
    width: min(100%, 46rem);
  }
}

@media (min-width: 1440px) {
  .page-doc main {
    width: min(100%, 68rem);
  }

  .page-doc .top-action {
    width: min(calc(100% - 2.5rem), 50rem);
  }

  .page-doc .content {
    width: min(100%, 50rem);
  }
}

.doc-stack {
  margin-top: var(--space-7);
  opacity: 0;
  filter: blur(8px);
  animation: appleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.doc-text {
  margin-top: 0.6rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.72);
}

.doc-text + .doc-text {
  margin-top: 0.8rem;
}

.doc-text a {
  color: var(--accent);
  text-decoration: none;
}

.doc-text a:hover {
  color: var(--accent-hover);
}

.doc-list {
  margin: 0.7rem 0 0 1.1rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.72);
}

.doc-list li {
  margin-top: 0.25rem;
}

.doc-updated {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Continuous prose layout (no cards) — used by the privacy page. */
.doc-prose .doc-heading {
  margin-top: var(--space-5);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.doc-prose .doc-heading:first-child {
  margin-top: 0;
}

.doc-prose .doc-heading + .doc-text {
  margin-top: 0.5rem;
}

/* ---- System status widgets ---- */

:root {
  /* Base green 34C759 (light); tint + segment shades derived from it. */
  --status-ok: #34c759;
  --status-ok-bg: rgba(52, 199, 89, 0.12);
  /* Degraded uses the brand orange FF8D28 (light). */
  --status-degraded: #ff8d28;
  --status-degraded-bg: rgba(255, 141, 40, 0.14);
  /* Down uses red FF383C (light); tint derived from it. */
  --status-down: #ff383c;
  --status-down-bg: rgba(255, 56, 60, 0.12);
  --status-unknown: rgba(0, 0, 0, 0.42);
  --status-unknown-bg: rgba(0, 0, 0, 0.06);
  --seg-up: #34c759;
  --seg-partial: #ff8d28;
  --seg-down: #ff383c;
  --seg-none: rgba(0, 0, 0, 0.1);
}

.status-overall {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--card-border);
  background: var(--status-unknown-bg);
}

.status-overall .status-dot {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--status-unknown);
}

.status-overall .status-headline {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.status-overall.is-ok { background: var(--status-ok-bg); }
.status-overall.is-ok .status-dot { background: var(--status-ok); }
.status-overall.is-degraded { background: var(--status-degraded-bg); }
.status-overall.is-degraded .status-dot { background: var(--status-degraded); }
.status-overall.is-down { background: var(--status-down-bg); }
.status-overall.is-down .status-dot { background: var(--status-down); }

.status-components {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.status-component {
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius-card);
  background: var(--card-background);
  border: 1px solid var(--card-border);
}

.status-component-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.status-name {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  background: var(--status-unknown-bg);
  color: var(--status-unknown);
  -webkit-font-smoothing: antialiased;
}

.status-pill.is-ok { background: var(--status-ok-bg); color: var(--status-ok); }
.status-pill.is-degraded { background: var(--status-degraded-bg); color: var(--status-degraded); }
.status-pill.is-down { background: var(--status-down-bg); color: var(--status-down); }

.uptime-bar {
  display: flex;
  gap: 2px;
  align-items: stretch;
  height: 2.1rem;
  margin-top: 0.9rem;
}

.uptime-seg {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: 2px;
  background: var(--seg-none);
}

.uptime-seg.is-up { background: var(--seg-up); }
.uptime-seg.is-partial { background: var(--seg-partial); }
.uptime-seg.is-down { background: var(--seg-down); }

.uptime-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.status-note {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.status-component-incidents {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--card-border);
}

.status-component-incidents-label {
  margin: 0 0 0.55rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-component-incident + .status-component-incident {
  margin-top: 0.5rem;
}

.status-component-incident > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  list-style: none;
}

.status-component-incident > summary::-webkit-details-marker {
  display: none;
}

.status-component-incident > .status-note {
  margin: 0.5rem 0 0;
  padding-right: 0.5rem;
  font-size: 0.84rem;
}

.incident {
  margin-top: var(--space-3);
  padding: 1rem 1.2rem;
  border-radius: var(--radius-card);
  background: var(--card-background);
  border: 1px solid var(--card-border);
}

.incident-title {
  font-size: 0.98rem;
  font-weight: 600;
}

.incident-meta {
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.status-footnote {
  margin-top: var(--space-5);
  font-size: 0.8rem;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .page-doc main {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .page-doc .top-action {
    top: 3rem;
  }

  .page-doc .content {
    width: 100%;
  }

  .page-doc .hero h2 {
    max-width: 18rem;
  }

  .doc-stack {
    margin-top: 2rem;
  }

  .status-component {
    padding: 1.15rem 1.1rem;
    border-radius: var(--radius-card-mobile);
  }

  .doc-text,
  .doc-list {
    font-size: 0.96rem;
  }

  .uptime-bar {
    gap: 1px;
    height: 1.8rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Base green 30D158 (dark); tint + segment shades derived from it. */
    --status-ok: #30d158;
    --status-ok-bg: rgba(48, 209, 88, 0.16);
    /* Degraded uses the brand orange FF9230 (dark). */
    --status-degraded: #ff9230;
    --status-degraded-bg: rgba(255, 146, 48, 0.16);
    /* Down uses red FF4245 (dark); tint derived from it. */
    --status-down: #ff4245;
    --status-down-bg: rgba(255, 66, 69, 0.16);
    --status-unknown: rgba(246, 248, 249, 0.42);
    --status-unknown-bg: rgba(255, 255, 255, 0.06);
    --seg-up: #30d158;
    --seg-partial: #ff9230;
    --seg-down: #ff4245;
    --seg-none: rgba(255, 255, 255, 0.1);
  }

  .doc-text,
  .doc-list {
    color: rgba(246, 248, 249, 0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-stack {
    animation: none !important;
    opacity: 1;
    filter: none;
    transform: none;
  }
}