/* Dorax Finance — the status page, /status (v247; features/status/status.view.js). Made of the site's parts (.lp2 and its l2- rules, css/public/
   landing-v2.css): the bar, the centred top, eyebrows, white and forest bands, the two-column questions for the history. Only what they have no rule
   for is here: the state capsule, the parts with their 90 bars, the incident cards and their updates.
   The state's colours are the app's own (css/base/theme-light.css): lime for working, its amber for slow or failing, its red for not working, the
   site's blue for maintenance, the line grey for no information. Never colour alone: each pill and capsule has its word, each bar its title. */
.sp-page { --sp-ok: var(--l2-lime); --sp-warn: #B87A00; --sp-crit: #D03238; --sp-maint: var(--l2-blue); --sp-none: var(--l2-line-strong); }
.sp-page .l2-h1 { font-size: clamp(42px, 5.6vw, 76px); }
.sp-page .l2-h1:focus { outline: none; }
.sp-hero { padding: 40px 0 104px; }

/* the capsule under the title: a dot in the state's colour, when it was checked, and "check now" */
.sp-now { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 6px 6px 6px 18px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line); font-size: 14px; font-weight: 500; color: var(--l2-ink-2); text-align: left; }
.sp-now-t { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.sp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sp-none); box-shadow: 0 0 0 4px rgba(195, 201, 189, .35); }
.sp-now.ok .sp-dot { background: #2F5711; box-shadow: 0 0 0 4px rgba(159, 209, 130, .45); }
.sp-now.degraded .sp-dot { background: var(--sp-warn); box-shadow: 0 0 0 4px rgba(184, 122, 0, .18); }
.sp-now.outage .sp-dot { background: var(--sp-crit); box-shadow: 0 0 0 4px rgba(208, 50, 56, .16); }
.sp-now.maintenance .sp-dot { background: var(--sp-maint); box-shadow: 0 0 0 4px rgba(91, 157, 255, .2); }
.sp-now.checking .sp-dot { animation: sp-pulse 1.2s ease-in-out infinite; }
@keyframes sp-pulse { 50% { opacity: .35; } }
.sp-check { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--l2-soft); font: 600 14px/1 var(--font); color: var(--l2-forest); transition: background-color 150ms ease-out; }
.sp-check:hover { background: var(--l2-mint); }
.sp-check:focus-visible { outline: 2px solid var(--l2-forest); outline-offset: 2px; }
.sp-check svg { width: 16px; height: 16px; }
.sp-check.spin svg { animation: sp-turn 900ms linear infinite; }
@keyframes sp-turn { to { transform: rotate(360deg); } }

/* a pill with the state's word: a dot of its colour on a tint of it, the word in ink */
.sp-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--l2-soft); font-size: 14px; font-weight: 600; color: var(--l2-ink); white-space: nowrap; }
.sp-pill i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-none); }
.sp-pill.ok { background: var(--l2-mint); } .sp-pill.ok i { background: #2F5711; }
.sp-pill.degraded { background: rgba(184, 122, 0, .12); } .sp-pill.degraded i { background: var(--sp-warn); }
.sp-pill.outage { background: rgba(208, 50, 56, .1); } .sp-pill.outage i { background: var(--sp-crit); }
.sp-pill.maintenance { background: rgba(91, 157, 255, .14); } .sp-pill.maintenance i { background: var(--sp-maint); }
.sp-pill.sm { min-height: 28px; font-size: 13px; }

/* a section's head, centred as the site's; the legend of the bars under it */
.sp-sec-h { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.sp-sec-h .l2-sub { margin: 0; }
.sp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; color: var(--l2-ink-2); }
.sp-legend li { display: inline-flex; align-items: center; gap: 8px; }
.sp-legend i { width: 10px; height: 18px; border-radius: 3px; background: var(--sp-ok); }
.sp-legend i.degraded { background: var(--sp-warn); } .sp-legend i.outage { background: var(--sp-crit); } .sp-legend i.maintenance { background: var(--sp-maint); }

/* what is going on, and what is planned: a card each, the updates as a line of moments */
.sp-cards { display: flex; flex-direction: column; gap: 20px; max-width: 880px; margin: 56px auto 0; }
.sp-card { padding: 32px; border-radius: 28px; background: var(--l2-soft); }
.l2-sec:not(.l2-white) .sp-card { background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line); }
.sp-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sp-on { font-size: 14px; font-weight: 500; color: var(--l2-ink-3); }
.sp-card h3 { margin: 18px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--l2-ink); }
.sp-meta { margin: 8px 0 0; font-size: 15px; color: var(--l2-ink-3); }
.sp-ups { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; }
.sp-ups li { position: relative; padding: 0 0 20px 26px; }
.sp-ups li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--l2-forest); }
.sp-ups li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 1px; background: var(--l2-line-strong); }
.sp-ups li:last-child { padding-bottom: 0; }
.sp-ups li + li::before { background: var(--l2-line-strong); }
.sp-u-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; color: var(--l2-ink); }
.sp-u-h time { font-size: 14px; color: var(--l2-ink-3); }
.sp-ups p { margin: 6px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--l2-ink-2); white-space: pre-line; }

/* each part: its thing, its name and what it covers, its state; under them, its days */
.sp-parts { list-style: none; max-width: 980px; margin: 56px auto 0; padding: 8px 32px; border-radius: 32px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--l2-line); }
.sp-part { padding: 26px 0; }
.sp-part + .sp-part { border-top: 1px solid var(--l2-line); }
.sp-part-h { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.sp-obj { width: 52px; }
.sp-part-t h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--l2-ink); }
.sp-part-t p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--l2-ink-3); }
.sp-auto { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0 70px; font-size: 14px; line-height: 1.5; color: var(--l2-ink-2); }
.sp-auto svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--l2-ink-3); }
.sp-bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 3px; height: 34px; margin-top: 20px; }
.sp-bars i { border-radius: 3px; background: var(--sp-ok); }
.sp-bars i.degraded { background: var(--sp-warn); } .sp-bars i.outage { background: var(--sp-crit); } .sp-bars i.maintenance { background: var(--sp-maint); }
.sp-bars i:hover { opacity: .7; }
.sp-bars.none i { background: var(--l2-line); } .sp-bars.none i:hover { opacity: 1; }
.sp-axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--l2-ink-3); }
.sp-axis .d30, .sp-sec-h .d30 { display: none; }

/* the last 90 days: the site's questions, each an incident with its day and how long it lasted */
.sp-past { display: flex; flex-direction: column; gap: 12px; }
.sp-past-i { padding: 0 24px; border-radius: 24px; background: var(--l2-soft); }
.sp-past-i summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 32px; align-items: center; gap: 14px; min-height: 76px; padding-block: 12px; }
.sp-past-i summary::-webkit-details-marker { display: none; }
.sp-past-i summary:focus-visible { outline: 2px solid var(--l2-forest); outline-offset: 4px; border-radius: 8px; }
.sp-pd { font-size: 14px; font-weight: 600; color: var(--l2-forest); }
.sp-pt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-pt b { font-size: 17px; font-weight: 600; color: var(--l2-ink); }
.sp-pt small { font-size: 14px; color: var(--l2-ink-3); }
.sp-past-i[open]:not(.closing) .l2-pm { transform: rotate(45deg); background: var(--l2-lime); }
.sp-past-i .l2-pm { background: #FFFFFF; }
.sp-past-i .sp-ups { margin: 4px 0 0 78px; padding-bottom: 24px; }
.sp-none { margin: 0 0 0 78px; padding-bottom: 22px; font-size: 15px; color: var(--l2-ink-3); }
.sp-clean { display: flex; align-items: center; gap: 18px; margin: 0; padding: 28px; border-radius: 24px; background: var(--l2-soft); }
.sp-clean span { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.5; color: var(--l2-ink-2); }
.sp-clean b { font-size: 18px; color: var(--l2-ink); }
.sp-clean .sp-obj { flex: none; width: 64px; }

/* where to ask, on the forest band */
.sp-help-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.sp-help .l2-btn:focus-visible { outline-color: var(--l2-lime); }
.sp-help .l2-btn svg { width: 16px; height: 16px; }
.sp-how { max-width: 640px; margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: var(--l2-on-dark-2); }

/* the Help center's line to here, and the screen of an account that could not be opened */
.l2-faq-l .hc-status { margin-top: -8px; }
.gate-status { margin: 18px 0 0; text-align: center; font-size: 14px; }
.gate-status .linkbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.gate-status svg { width: 14px; height: 14px; }

@media (max-width: 720px) {
  .sp-hero { padding: 20px 0 64px; }
  .sp-page .l2-h1 { font-size: clamp(34px, 9.4vw, 46px); }
  .sp-now { flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding: 12px 14px; border-radius: 24px; text-align: left; }
  .sp-now-t { gap: 10px; }
  .sp-check { width: 100%; justify-content: center; }
  .sp-card { padding: 22px; border-radius: 24px; }
  .sp-card h3 { font-size: 20px; }
  .sp-parts { padding: 4px 18px; border-radius: 24px; }
  .sp-part-h { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .sp-obj { width: 44px; }
  .sp-part-h .sp-pill { grid-column: 2; justify-self: start; }
  .sp-auto { margin-left: 0; }
  /* a phone: the last 30 days */
  .sp-bars { grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
  .sp-bars i:nth-child(-n+60) { display: none; }
  .sp-axis .d90, .sp-sec-h .d90 { display: none; } .sp-axis .d30, .sp-sec-h .d30 { display: inline; }
  .sp-past-i { padding: 0 16px; }
  .sp-past-i summary { grid-template-columns: minmax(0, 1fr) 32px; grid-template-areas: "d pm" "t pm" "p pm"; gap: 6px 12px; padding-block: 16px; }
  .sp-pd { grid-area: d; } .sp-pt { grid-area: t; } .sp-past-i summary .sp-pill { grid-area: p; justify-self: start; } .sp-past-i summary .l2-pm { grid-area: pm; }
  .sp-past-i .sp-ups, .sp-none { margin-left: 0; }
  .sp-help-acts { flex-direction: column; align-self: stretch; } .sp-help-acts .l2-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sp-now.checking .sp-dot, .sp-check.spin svg { animation: none; } }