/* Status interactions only. Layout, imagery, type, colors, cards and buttons come from site.css. */
.sd-shell .sd-notice { font-size: .8rem; line-height: 1.7; color: var(--text-2); margin-top: 20px; max-width: 62ch; }
.sd-notice strong { font-family: var(--font-mono); font-weight: 500; font-size: .68rem; letter-spacing: .08em; color: var(--cyan); margin-right: 5px; }
.sd-notice a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sd-shell .hero-actions { margin-top: 26px; }
.sd-shell .st-name:hover { color: var(--cyan); }
.sd-shell .st-state { white-space: normal; max-width: 140px; }
.sd-shell .panel-badge, .sd-shell .cheat-note { color: var(--text-2); }
.sd-panel-update { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sd-panel-update .cheat-note { margin: 0; flex: 1; font-size: .75rem; }
.sd-panel-update .btn { min-height: 38px; height: auto; font-size: .78rem; padding: 7px 12px; }
.sd-panel-update button:disabled { opacity: .6; cursor: wait; }
.sd-refresh-error { color: var(--amber); font-size: .85rem; line-height: 1.5; }
.sd-history-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 26px; }
.sd-ranges .seg-btn { display: inline-flex; align-items: center; justify-content: center; }
.sd-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; color: var(--text-2); font-size: .8rem; }
.sd-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sd-legend .status-dot { width: 7px; height: 7px; box-shadow: none; }
.sd-shell .status-dot-maintenance { background: var(--cyan); }
.sd-shell .st-state-maintenance, .sd-shell .st-badge-maintenance { color: var(--cyan); }
.sd-shell .st-badge-maintenance { border-color: rgba(69,214,255,.4); }
.sd-shell .st-card-head p, .sd-shell .st-card-foot { color: var(--text-2); }
.sd-component { scroll-margin-top: calc(var(--header-h) + 24px); min-width: 0; }
.sd-component .st-card-foot { margin-top: auto; }
.sd-bars { display: flex; }
.sd-bar { flex: 1 1 0; min-width: 0; position: relative; transition: opacity .15s; }
.sd-shell .st-bar-maintenance { background: var(--cyan); }
.sd-bar:hover, .sd-bar:focus-visible, .sd-bar[aria-pressed="true"] { z-index: 1; outline: 2px solid var(--text); outline-offset: 2px; }
.sd-history-dates { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: .66rem; margin-top: 9px; }
.sd-day-detail { margin-top: 12px; padding: 10px 12px; min-height: 61px; color: var(--text-2); font-size: .78rem; line-height: 1.6; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-900); overflow-wrap: anywhere; }
.sd-day-detail a { color: var(--cyan); display: inline-block; margin-left: 7px; text-decoration: underline; text-underline-offset: 3px; }
.sd-day-slider { display: none; }
.sd-period-card { justify-content: center; }
.sd-period-card h3 { font-size: 1.15rem; }
.sd-period-card p { color: var(--text-2); font-size: .9rem; line-height: 1.7; }
.sd-text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--cyan); font-size: .86rem; font-weight: 500; margin-top: 8px; align-self: flex-start; }
.sd-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.sd-log-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.sd-log-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 18px; }
.sd-log-heading h3 { font-size: 1.2rem; }
.sd-log-heading > span { color: var(--text-2); font-size: .7rem; }
.sd-log-aside { display: grid; gap: 16px; }
.sd-log-aside .about-card p + p { margin-top: 12px; }
.sd-feed-card .btn { margin-top: 22px; width: 100%; }
.sd-feed-card .btn-primary, .sd-feed-card .btn-primary:hover { color: var(--ink-900); }
.sd-feed-card .sd-text-link { margin-top: 16px; }
.sd-event { scroll-margin-top: calc(var(--header-h) + 24px); }
.sd-event summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.sd-event summary::-webkit-details-marker, .sd-older-events > summary::-webkit-details-marker { display: none; }
.sd-event-heading { display: grid; gap: 6px; flex: 1; min-width: 0; }
.sd-event-heading strong { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.sd-event summary:hover strong { color: var(--cyan); }
.sd-event .st-incident-meta { margin: 0; font-size: .64rem; color: var(--text-2); }
.sd-event-scope { font-size: .76rem; color: var(--text-2); }
.sd-event .st-badge { letter-spacing: 0; font-size: .68rem; }
.sd-event .faq-plus { width: 26px; height: 26px; flex: none; }
.sd-event[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(0); }
.sd-event[open] .faq-plus { color: var(--cyan); border-color: var(--cyan-soft); background: var(--cyan-soft); }
.sd-event-content { padding-top: 18px; border-top: 1px solid var(--line); margin-top: 20px; }
.sd-event .sd-event-id { margin: 0 0 22px; color: var(--text-2); font-size: .64rem; letter-spacing: .06em; }
.sd-timeline { display: grid; gap: 22px; padding-left: 20px; margin: 20px 0 6px; border-left: 1px solid var(--line-strong); }
.sd-timeline li { position: relative; }
.sd-timeline li::before { content: ''; position: absolute; top: 8px; left: -24px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px var(--ink-850); }
.sd-timeline-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.sd-timeline-heading strong { font-size: .87rem; }
.sd-timeline-heading time { color: var(--text-2); font-size: .66rem; }
.sd-event .sd-timeline p { margin-top: 6px; font-size: .86rem; }
.sd-older-events { margin-top: 18px; }
.sd-older-events > summary { width: 100%; cursor: pointer; list-style: none; }
.sd-older-events > summary > .mono { color: var(--cyan); font-size: .75rem; }
.sd-older-events[open] > summary { margin-bottom: 18px; }
.sd-maintenance .sd-event { margin-top: 20px; padding: 14px; }
.sd-maintenance .sd-event summary { flex-wrap: wrap; gap: 10px; }
.sd-maintenance .sd-event-heading { flex-basis: 100%; }
.sd-maintenance .faq-plus { margin-left: auto; }
.sd-response.hero-panel { max-width: none; }
.sd-response .panel-body { padding: 28px 28px 24px; }
.sd-response-current { color: var(--cyan); font-size: .85rem; }
.sd-chart { position: relative; height: 200px; margin-left: 48px; }
.sd-chart svg { width: 100%; height: 100%; overflow: visible; }
.sd-chart-max, .sd-chart-min { position: absolute; left: -48px; color: var(--text-2); font-size: .65rem; }
.sd-chart-max { top: 10px; }.sd-chart-min { bottom: 10px; }
.sd-gridline { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 5; }
.sd-chart-fill { fill: var(--cyan-soft); }
.sd-chart-line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sd-chart-axis { display: flex; justify-content: space-between; gap: 10px; margin-left: 48px; color: var(--text-2); font-size: .7rem; }
.sd-shell .feature-grid { margin-top: 0; }
.sd-shell #method { margin-bottom: clamp(64px, 6.5vw, 104px); }
@media (max-width: 1023px) {
  .sd-log-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; }
  .sd-event summary { flex-wrap: wrap; gap: 10px; }
  .sd-event-heading { flex-basis: calc(100% - 45px); }
  .sd-event .faq-plus { order: 2; margin-left: auto; }.sd-event .st-badge { order: 3; }
}
@media (max-width: 760px) {
  .sd-log-grid { grid-template-columns: 1fr; gap: 26px; }
  .sd-log-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-shell .sd-notice { margin-top: 14px; font-size: .78rem; }
  .sd-history-toolbar { gap: 18px; }
  .sd-day-slider { display: block; width: 100%; height: 30px; margin: 7px 0 0; accent-color: var(--cyan); cursor: pointer; }
  .no-js .sd-day-slider { display: none; }
  .sd-period-card { display: none; }
  .sd-day-detail { min-height: 64px; font-size: .76rem; }
  .sd-chart { height: 160px; }
  .sd-shell #method { margin-bottom: 48px; }
}
@media (max-width: 540px) {
  .sd-shell .st-list li { grid-template-columns: 8px minmax(0, 1fr) auto; padding: 10px; gap: 8px; font-size: .8rem; }
  .sd-shell .st-list .status-dot { width: 8px; height: 8px; }
  .sd-shell .st-state { font-size: .68rem; max-width: 90px; }
  .sd-shell .panel-head { flex-wrap: wrap; }
  .sd-ranges { width: 100%; }.sd-ranges .seg-btn { flex: 1; }
  .sd-legend { gap: 9px 12px; font-size: .68rem; }
  .sd-log-aside { grid-template-columns: 1fr; }
  .sd-shell .st-card { padding: 18px 15px; }
  .sd-shell .st-card-head { gap: 10px; }.sd-shell .st-card-head p { font-size: .8rem; }
  .sd-shell .st-incident { padding: 18px 15px; }
  .sd-event-heading strong { font-size: 1rem; }
  .sd-event .st-incident-meta { font-size: .6rem; letter-spacing: .045em; }
  .sd-event-scope { font-size: .7rem; }
  .sd-timeline { padding-left: 16px; }.sd-timeline li::before { left: -20px; }
  .sd-response .panel-body { padding: 18px 14px; }
  .sd-chart { height: 145px; margin-left: 38px; }.sd-chart-max, .sd-chart-min { left: -38px; font-size: .56rem; }
  .sd-chart-axis { margin-left: 38px; font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) { .sd-bar { transition: none; } }