/* ============================================================================
   Platform status (Pages/Status.cshtml). Ported from "Platform Status.dc.html".
   Hero backdrop is "Hero Backdrop" with pattern "Hex grid", tone Green, no bottom glow.
   Static: the design's default "all online" state. The pulse is a CSS keyframe, off under reduced motion.
   Shared pieces (.hero, .icon-well, .btn, .tools-cta__panel, ...) live in site.css. No JavaScript.
   ============================================================================ */

.tone--online {
    --status-tint: #eef7e9;
    --status-ink: #3f7c25;
    --status-dot: #70be44;
    --status-edge: rgba(112, 190, 68, .42);
    --status-halo: rgba(112, 190, 68, .09);
}
.tone--maintenance {
    --status-tint: var(--blue-tint);
    --status-ink: var(--blue-d);
    --status-dot: var(--blue);
    --status-edge: rgba(39, 165, 221, .42);
    --status-halo: rgba(39, 165, 221, .09);
}
.tone--degraded {
    --status-tint: #fdf4e4;
    --status-ink: #96640f;
    --status-dot: var(--gold);
    --status-edge: rgba(250, 175, 66, .42);
    --status-halo: rgba(250, 175, 66, .09);
}
.tone--offline {
    --status-tint: #fdedeb;
    --status-ink: #a83a2c;
    --status-dot: #d9544a;
    --status-edge: rgba(217, 84, 74, .42);
    --status-halo: rgba(217, 84, 74, .09);
}
.tone--unknown {
    --status-tint: var(--mist);
    --status-ink: var(--muted);
    --status-dot: var(--steel);
    --status-edge: rgba(154, 156, 164, .42);
    --status-halo: rgba(154, 156, 164, .09);
}

/* ---- Hero ---- */
.status-hero { padding: 76px 32px 60px; }
.status-hero .hero__inner { max-width: 820px; }
.status-hero .hero__title { font-size: 58px; line-height: 1.05; }
.status-hero .hero__lead { max-width: 660px; font-size: 17.5px; }

/* Green hero glow ("Hero Backdrop", tone Green, bottom glow off). Same rule as contact.css. */

/* ---- Board ---- */
.status-board { padding: 10px 32px 24px; }
.status-board__inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; }

.status-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    border: 1px solid var(--status-edge);
    border-radius: var(--r-card);
    background: #fff;
    padding: 24px 28px;
    box-shadow: 0 0 0 7px var(--status-halo), 0 12px 28px rgba(24, 34, 51, .05);
}
.status-summary__dot {
    position: relative;
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--status-dot);
}
.status-summary__dot span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--status-dot);
    animation: status-pulse 2.6s ease-out infinite;
}
.status-summary__title { flex: 1; min-width: 220px; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--ink); }

@keyframes status-pulse {
    0% { transform: scale(1); opacity: .55; }
    70% { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .status-summary__dot span { animation: none; display: none; }
}
.status-summary:not(.tone--online) .status-summary__dot span { animation: none; display: none; }
.status-summary__checked { flex: none; width: 100%; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.status-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: #fff;
    padding: 28px;
    box-shadow: 0 12px 28px rgba(24, 34, 51, .05);
}
.status-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--status-dot);
}
.status-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--status-tint);
    color: var(--status-ink);
    --duo-secondary: var(--status-dot);
    --duo-opacity: .4;
}
.status-card__title { margin-top: 18px; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.status-card__body { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.status-badge {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--status-tint);
    color: var(--status-ink);
}
.status-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-dot); }

/* ---- Notice ---- */
.status-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid rgba(39, 165, 221, .3);
    border-radius: var(--r-card);
    background: var(--blue-tint);
    padding: 20px 24px;
}
.status-notice__icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--blue-d);
    --duo-secondary: var(--blue);
    --duo-opacity: .4;
}
.status-notice__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--navy); text-wrap: pretty; }

/* ---- Offline detail ---- */
.status-detail { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.status-detail__toggle {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--status-ink);
    list-style: none;
}
.status-detail__toggle::-webkit-details-marker { display: none; }
.status-detail__toggle::after { content: " +"; }
.status-detail[open] .status-detail__toggle::after { content: " −"; }
.status-detail__list { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.status-detail__list li + li { margin-top: 4px; }

/* ---- Unavailable ---- */
.status-unavailable { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ---- Help panel ---- */
.status-help { padding: 56px 32px 96px; }
.status-help__panel { max-width: 1000px; margin: 0 auto; padding: 30px 32px; }
.status-help .tools-cta__title { font-size: 22px; }
.status-help .btn--lg { padding: 14px 24px; font-size: 15px; }
.status-help .btn .icon { height: 11px; width: auto; }

/* ---- Responsive ---- */
@media (max-width: 959px) {
    .status-hero { padding: 60px 24px 48px; }
    .status-hero .hero__title { font-size: 44px; }
    .status-board { padding: 8px 24px 16px; }
    .status-grid { grid-template-columns: 1fr; }
    .status-help { padding: 40px 24px 72px; }
    .status-help__panel { padding: 28px 24px; }
}
@media (max-width: 559px) {
    .status-hero { padding: 48px 20px 40px; }
    .status-hero .hero__title { font-size: 34px; }
    .status-board { padding: 8px 20px 12px; }
    .status-summary { padding: 20px 22px; }
    .status-card { padding: 24px 22px; }
    .status-help { padding: 32px 20px 56px; }
    .status-help .btn { width: 100%; white-space: normal; }
}