/* Club Penguin server status (/status): the page's own look on top of site.css and pages.css. Layout modes and tokens are
   the content pages'; colours of the states are measured for contrast (text >= 4.5:1, marks >= 3:1 where they carry
   meaning, always paired with words and an icon). No inline styles: status.js only sets custom properties. */
.st-hero, .st-body, .st-tip {
  /* day bands on the uptime strips (validated as a set: every pair tells apart, with the words as the second channel) */
  --b-ok: #2E9E3F; --b-minor: #DDA700; --b-partial: #E0600A; --b-major: #A8001E; --b-maintenance: #2F80D8;
  --b-nodata: repeating-linear-gradient(135deg, #c3d2e1 0 2px, #e4edf6 2px 5px);
  /* the same states as text on white */
  --t-ok: #23803A; --t-dg: #8A5A00; --t-pt: #B54A00; --t-mj: #CC0000; --t-mt: #0B5DB8; --t-nd: #5A7290;
  --hair: #e3eef8; --muted: #5a7896; --prose: #1d3a57;
}

/* ------------------------------------------------------------------ hero: the sky by your clock, the state on an ice card */
.st-hero { position: relative; padding: calc(var(--header-h) + env(safe-area-inset-top) + 30px) 0 0; isolation: isolate;
  --sky-top: #003C7E; --sky-a: #00529B; --sky-b: #015DA7; --sky-c: #0280CD; }
.st-hero[data-sky="golden"] { --sky-top: #1d3f8f; --sky-a: #3a5fb4; --sky-b: #d97a6c; --sky-c: #ffc47a; }
.st-hero[data-sky="night"] { --sky-top: #0c0426; --sky-a: #2f0143; --sky-b: #1b3f93; --sky-c: #22a9d9; }
.st-sky { position: absolute; z-index: -1; inset: 0 0 auto 0; bottom: 112px; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-a) 34%, var(--sky-b) 72%, var(--sky-c) 100%); }
.st-sky::after { content: ""; position: absolute; inset: 0; background: url(/site/home/art/ui/pattern-band.png) 0 0 / 220px auto; opacity: .08; mix-blend-mode: screen; }
.st-sky__stars { position: absolute; inset: 0 0 25% 0; opacity: 0; background: url(/site/home/art/sky/night-stars.svg) 0 0 / 1200px auto repeat;
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.st-sky__glow { position: absolute; inset: 0; opacity: 0; }
.st-hero[data-sky="night"] .st-sky__stars { opacity: 1; animation: st-twinkle 5s var(--ease-bob) infinite alternate; }
.st-hero[data-sky="golden"] .st-sky__glow { opacity: 1; background: radial-gradient(60% 70% at 50% 108%, rgba(255,236,170,.75), rgba(255,190,110,.3) 45%, rgba(255,160,90,0) 72%); }
.st-hero[data-sky="night"] .st-sky__glow { opacity: 1; background: radial-gradient(70% 45% at 50% 112%, rgba(210,255,200,.45), rgba(120,220,255,.1) 55%, rgba(0,0,0,0) 76%); }
.st-cloud { position: absolute; bottom: -10px; max-width: none; height: auto; }
.st-cloud--l { left: -2%; width: min(34%, 460px); }
.st-cloud--r { right: -3%; width: min(40%, 540px); }
.st-night { display: none; }
.st-hero[data-sky="night"] .st-day { display: none; }
.st-hero[data-sky="night"] .st-night { display: block; }
.st-hero[data-sky="golden"] .st-cloud { filter: sepia(.35) saturate(1.5) hue-rotate(-18deg) brightness(1.02); }
@keyframes st-twinkle { from { opacity: .7; } to { opacity: 1; } }

.st-hero .wrap, .st-body .wrap { width: min(1050px, 100% - 2 * var(--gutter)); }
.st-hero__copy { color: #fff; padding-bottom: 6px; }
.st-eyebrow { font: 600 15px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #cdeeff; }
.st-hero h1 { margin-top: 10px; font: 400 clamp(32px, 4.4vw, 50px)/1.04 var(--f-display); letter-spacing: .005em; text-shadow: 0 3px 0 rgba(0,40,100,.4); }

.st-card { --state: #5A7290; --state-soft: #eef3f8;
  position: relative; margin-top: 24px; display: grid; grid-template-columns: 172px minmax(0, 1fr); column-gap: 28px; align-items: center;
  padding: 36px 40px 26px 28px; border-radius: 28px; background: linear-gradient(180deg, var(--state-soft), #fff 46%);
  box-shadow: inset 0 9px 0 var(--state), 0 6px 0 rgba(6,33,63,.08), 0 26px 56px rgba(6,33,63,.22); color: var(--ocean-900); }
.st-card[data-indicator="none"] { --state: #23803A; --state-soft: #ecf8ee; }
.st-card[data-indicator="minor"] { --state: #FFCC00; --state-soft: #fff9dc; }
.st-card[data-indicator="major"] { --state: #FA9301; --state-soft: #fff1e0; }
.st-card[data-indicator="critical"] { --state: #CC0000; --state-soft: #fdeaea; }
.st-card[data-indicator="maintenance"] { --state: #0B5DB8; --state-soft: #e6f1fc; }
.st-card[data-indicator="unknown"] { --state: #5A7290; --state-soft: #edf2f7; }
.st-card[data-indicator="loading"] { --state: #9fb3c8; --state-soft: #f3f7fb; }

/* the mood puffle and its speech bubble (the game's own), two words at most; the bubble rises about 0.63 of the puffle's
   width above it, so the top margin keeps it some 14 px under the card's coloured edge */
.st-mood { position: relative; align-self: end; width: 128px; margin: 68px 0 4px 10px; container-type: inline-size; }
.st-mood__puffle { display: block; width: calc(var(--pw, 1) * 100%); height: auto; margin: 0 auto; filter: drop-shadow(0 8px 10px rgba(6,33,63,.2)); transform-origin: 50% 100%; }
.st-card[data-indicator="none"] .st-mood__puffle, .st-card[data-indicator="maintenance"] .st-mood__puffle { animation: st-bob 3.6s var(--ease-bob) infinite; }
@keyframes st-bob { 50% { transform: translateY(-5px); } }
.st-mood .say { position: absolute; left: 10%; bottom: 80%; width: 106%; z-index: 2; container-type: inline-size; filter: drop-shadow(0 6px 10px rgba(6,33,63,.22)); }
.st-mood .say img { display: block; width: 100%; height: auto; }
.st-mood .say span { position: absolute; inset: 7% 8% 27% 8%; display: grid; place-items: center; text-align: center;
  font: 600 clamp(8px, 15cqi, 22px)/1.05 var(--f-ui); color: var(--ocean-900); text-wrap: balance; }
.st-card:not([data-js]) .say { visibility: hidden; }
/* the open / closed sign from the game's furniture, hung from the card's top edge like a sign in a shop window; the
   headline and the line under it keep clear of it */
.st-sign { position: absolute; right: 30px; top: -2px; width: 118px; height: auto; filter: drop-shadow(0 6px 8px rgba(6,33,63,.3)); transform-origin: 50% 0; }
.st-card { --sign-room: 122px; }
.st-card[data-sign] :is(.st-headline, .st-subline) { margin-right: var(--sign-room); }

.st-card__main { min-width: 0; }
.st-headline { font: 400 clamp(28px, 3.5vw, 42px)/1.06 var(--f-display); letter-spacing: .005em; color: var(--ocean-900); text-wrap: balance; }
.st-subline { margin-top: 10px; font-size: 18.5px; line-height: 1.5; color: #274463; max-width: 40em; text-wrap: pretty; }
.st-fallback { margin-top: 16px; }
.st-fallback__n { font: 700 17px/1.4 var(--f-body); }
.st-fallback__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 16px; }
.st-fallback__list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.st-fallback__list b { font: 600 15px/1.4 var(--f-ui); color: var(--muted); }

.st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; padding-top: 16px; border-top: 1.5px solid #e3eef8; }
/* the controls join the line only where a 200 px "Last checked" fits beside them, so a longer time ("2 min ago",
   "Updates paused...") wraps inside its box and never moves the controls to a line of their own */
.st-checked { display: inline-flex; flex: 1 1 200px; align-items: center; min-height: 44px; font: 600 15px/1.3 var(--f-ui); color: #35516f; }
/* the dot sits on the first line; a line that wraps starts under the words, not under the dot */
.st-checked__in { display: block; padding-left: 20px; text-indent: -20px; }
.st-dot { position: relative; display: inline-block; width: 11px; height: 11px; margin-right: 9px; vertical-align: middle; border-radius: 50%; background: #9fb3c8; }
.st-card[data-poll="live"] .st-dot { background: #5BE36B; box-shadow: 0 0 0 3px rgba(91,227,107,.28); }
/* live: a ring grows out of the dot and fades (transform and opacity only) */
.st-card[data-poll="live"] .st-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(91,227,107,.55);
  animation: st-ring 2.4s var(--ease-out) infinite; }
@keyframes st-ring { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.st-card[data-poll="stale"] .st-dot { background: #e0564f; box-shadow: 0 0 0 3px rgba(224,86,79,.22); }
.st-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* narrower than this the controls always take a line of their own: chosen by the width, not by how wide the words
   are, so the swap from the fallback font to the site's moves nothing */
@media (max-width: 839px), (max-width: 899px) and (min-height: 500px) { .st-controls { flex-basis: 100%; } }
/* min-width: "Pause updates" is as wide as "Resume updates", so nothing moves when it is pressed */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 11.2em; padding: 0 18px 0 15px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: #fff; color: var(--ocean-700); font: 600 15px/1 var(--f-ui); box-shadow: inset 0 0 0 1.5px #cfe3f5, var(--lift-1); transition: transform var(--t-fast) var(--ease-out); }
.st-btn:hover { transform: translateY(-1px); }
.st-btn svg { flex: none; }
.st-btn .i-play, .st-btn[data-paused] .i-pause { display: none; }
.st-btn[data-paused] .i-play { display: block; }
.st-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.st-seg button { min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer;
  font: 600 14.5px/1 var(--f-ui); color: #35516f; white-space: nowrap; }
.st-seg button { position: relative; }
.st-seg button::before { content: ""; position: absolute; inset: -3px 0; }   /* the hit area reaches the pill's edge: 44 px */
.st-seg button:hover { color: var(--ocean-700); }
.st-older { min-height: 44px; }
.feeds a { padding-block: 12px; }
.st-seg button[aria-pressed="true"] { background: #fff; color: var(--ocean-900); box-shadow: 0 1px 0 rgba(6,33,63,.14), 0 2px 8px rgba(6,33,63,.12); }

/* status.js draws the page and is deferred, so the browser may paint once before it runs. With scripting on, that first
   paint already has the drawn page's shape and nothing jumps when the script draws it: the no-script list stays out of
   the card, the controls and the sign keep their room, the puffle has its usual size, and the body waits unseen (shown
   after 4 s anyway, should the script never come). Without scripting none of this applies. */
@media (scripting: enabled) {
  .st-card:not([data-js]) .st-fallback { display: none; }
  .st-card:not([data-js]) .st-controls[hidden] { display: flex !important; visibility: hidden; }
  .st-card:not([data-js]) :is(.st-headline, .st-subline) { margin-right: var(--sign-room); }
  .st-card:not([data-js]) .st-mood__puffle { --pw: .879; }
  main:has(.st-card:not([data-js])) .st-body { min-height: 100vh; }
  main:has(.st-card:not([data-js])) .st-stack { visibility: hidden; animation: st-show 0s 4s forwards; }
}
@keyframes st-show { to { visibility: visible; } }

/* ------------------------------------------------------------------ the body: cards on ice */
.st-body { padding: 30px 0 128px; }   /* the footer's peeking penguin stands clear of the last card */
.st-stack { --gap: 26px; display: grid; gap: var(--gap); }   /* one rhythm: between cards, and between incident frames */
.st-sec { min-width: 0; padding: 32px 38px 34px; border-radius: 28px; background: #fff; color: var(--prose);
  box-shadow: 0 18px 40px rgba(6,33,63,.08), inset 0 0 0 1.5px #dcecf8; }
.st-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 22px; }
.st-sec h2 { display: flex; align-items: center; gap: 12px; font: 400 clamp(25px, 2.6vw, 31px)/1.1 var(--f-display); color: var(--ocean-900); letter-spacing: .005em; }
.st-sec h2 img { width: 40px; height: 40px; object-fit: contain; }
.st-sec h3 { font: 600 13px/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.st-sec__note { font: 600 14.5px/1.4 var(--f-ui); color: var(--muted); }
.w60, .w30 { display: none; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font: 600 13.5px/1.25 var(--f-ui); white-space: nowrap;
  background: var(--ice-50); color: var(--ocean-700); box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.st-chip[data-tone="good"] { background: #e7f6e9; color: #1f6e33; box-shadow: inset 0 0 0 1.5px #b9e2c1; }
.st-chip[data-tone="warn"] { background: #fff4d6; color: #6b4600; box-shadow: inset 0 0 0 1.5px #f1d98a; }
.st-chip[data-tone="bad"] { background: #fdeaea; color: #9e1b14; box-shadow: inset 0 0 0 1.5px #f2bcbc; }
.st-chip[data-tone="plan"] { background: #e6f1fc; color: #0b4f9c; box-shadow: inset 0 0 0 1.5px #bcd8f4; }

/* ------------------------------------------------------------------ incidents and maintenance: the game's prompt frames */
.st-active, .st-focus { display: grid; gap: var(--gap, 22px); }
.frame { position: relative; min-width: 0; border: 22px solid transparent; padding: 2px 4px 4px;
  border-image: url(/site/home/art/status/frame-orange.svg) 50 fill / 22px stretch; background: #ff6600 padding-box; color: var(--ocean-900); }
.frame--blue { border-image-source: url(/site/home/art/status/frame-blue.svg); background-color: #0280cd; color: #fff; }
.frame__top { display: flex; align-items: center; gap: 14px; }
.frame__ico { flex: none; width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.frame__head { min-width: 0; }
.frame__kicker { display: inline-flex; padding: 4px 10px 3px; border-radius: var(--r-pill); background: rgba(255,255,255,.95); color: #8a2c00;
  font: 600 12.5px/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 2px 0 rgba(120,40,0,.25); }
.frame--blue .frame__kicker { color: #0b4f9c; box-shadow: 0 2px 0 rgba(0,40,90,.3); }
.frame__title { margin-top: 6px; font: 400 clamp(22px, 2.4vw, 28px)/1.12 var(--f-display); letter-spacing: .005em; overflow-wrap: anywhere; }
.frame--blue .frame__title { text-shadow: 0 2px 0 rgba(0,51,102,.45); }
.frame__title a { color: inherit; text-decoration: none; }
.frame__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.frame__panel { position: relative; margin-top: 14px; padding: 18px 20px 18px; border-radius: 14px; background: #fff; color: var(--prose);
  box-shadow: inset 0 0 0 2px rgba(152,57,1,.22), 0 3px 0 rgba(120,40,0,.18); }
.frame--blue .frame__panel { box-shadow: inset 0 0 0 2px rgba(0,51,102,.2), 0 3px 0 rgba(0,40,90,.25); }
.frame__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 15px/1.4 var(--f-ui); color: var(--ocean-900); }
.facts { min-width: 0; }
.frame__affects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font: 600 14px/1.3 var(--f-ui); color: var(--muted); }
.frame__art { position: absolute; right: 8px; bottom: calc(100% - 26px); display: flex; align-items: end; gap: 4px; pointer-events: none; }
.frame__art img { height: auto; filter: drop-shadow(0 4px 4px rgba(0,30,60,.25)); }
.frame__art .a-barrier { width: 74px; } .frame__art .a-sign { width: 52px; margin-bottom: 4px; } .frame__art .a-pylon { width: 30px; }
.st-gone { padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px #dcecf8; font-size: 16px; }
.frame__back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 4px; font: 600 16px/1 var(--f-ui); color: var(--ocean-700); text-decoration: none; }
.frame__back:hover { text-decoration: underline; text-underline-offset: 4px; }
.frame__back svg { width: 18px; height: 18px; }

/* updates, newest first: a status word, the words, the time */
.ups { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.ups li { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 18px; padding: 12px 0; border-top: 1.5px solid var(--hair); }
.ups li:first-child { border-top: 0; padding-top: 4px; }
.ups__st { font: 600 15.5px/1.45 var(--f-ui); color: var(--ocean-900); }
.ups__body > p { font-size: 16px; line-height: 1.55; }
.ups__body > p + p { margin-top: 6px; }
.ups__when { display: block; margin-top: 4px; font: 600 13.5px/1.4 var(--f-ui); color: var(--muted); }

/* ------------------------------------------------------------------ penguins online */
.pop { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 34px; align-items: start; }
.picker { position: relative; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 23px 0 26px; border-radius: var(--r-pill);
  background: #00529b; color: #fff; box-shadow: inset 0 0 0 3px #0280cd, 0 4px 0 rgba(6,33,63,.22), 0 10px 20px rgba(6,33,63,.16); }
.picker__name { flex: 1; min-width: 0; padding-block: 4px; font: 500 22px/1 var(--f-ui); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* room for a name's descenders */
.picker__meter { position: relative; flex: none; display: flex; }
.picker__bars { display: flex; align-items: center; gap: 4.86px; }
.picker__bars img { width: 18.36px; height: 29.07px; }
.picker__bars img.e { width: 15.12px; height: 24.84px; margin: 2.12px 1.62px; }
.picker__full { position: absolute; left: -13.6px; top: -8.2px; width: 148.5px; height: 57.6px; max-width: none; display: none; pointer-events: none; }
.picker[data-full="1"] .picker__full { display: block; }
.picker__off { display: none; font: 600 15px/1 var(--f-ui); color: #cfe3f5; letter-spacing: .04em; text-transform: uppercase; }
.picker[data-off="1"] .picker__meter { display: none; }
.picker + .picker { margin-top: 12px; }   /* one row per world (Blizzard, Sleet), as the 2017 server list */
.picker[data-off="1"] .picker__off { display: inline; }
.picker[data-off="1"] { background: #3c5876; box-shadow: inset 0 0 0 3px #6a87a6, 0 4px 0 rgba(6,33,63,.22); }
/* the number and its words stay side by side; when space runs out the words take two lines, ending on the number's
   baseline, so the block keeps its height whatever the count */
.pop__count { display: flex; align-items: baseline; align-items: last baseline; gap: 12px; margin-top: 22px; }
.pop__count b { flex: none; font: 400 68px/1.02 var(--f-display); font-variant-numeric: tabular-nums; color: var(--ocean-900); letter-spacing: .01em; }
.pop__count span { min-width: 0; font: 600 19px/1.25 var(--f-ui); color: #35516f; }
.picker[data-off="1"] ~ .pop__count b { display: none; }
.pop__badge { display: inline-flex; margin-top: 10px; padding: 5px 13px; border-radius: var(--r-pill); background: linear-gradient(180deg, #FFF3A6, var(--gold-400) 40%, var(--gold-600));
  box-shadow: inset 0 0 0 1.5px #E8A21C, 0 2px 0 #C47F0E; color: #5a2e00; font: 600 14px/1.2 var(--f-ui); }
.pop__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 0; }
.pop__facts div { padding: 12px 14px; border-radius: 16px; background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.pop__facts dt { font: 600 12.5px/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pop__facts dd { margin: 5px 0 0; font: 600 14.5px/1.3 var(--f-ui); color: #35516f; }
.pop__facts dd b { display: block; margin-bottom: 3px; font: 400 26px/1 var(--f-display); color: var(--ocean-900); font-variant-numeric: tabular-nums; }

.chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.chart-cap { font: 600 15px/1.35 var(--f-ui); color: #35516f; }
.chart-cap b { color: var(--ocean-900); }
.chart { position: relative; height: 196px; margin-top: 12px; border-radius: 14px; outline-offset: 4px; touch-action: pan-y; cursor: crosshair; }
.chart:focus-visible { outline: 3px solid var(--sky-300); outline-offset: 6px; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart text { font: 600 11.5px var(--f-ui); fill: #6a85a1; }
.chart .c-peak { font: 600 12.5px var(--f-ui); fill: var(--ocean-900); }
.chart[data-busy] svg { opacity: .45; transition: opacity var(--t-fast); }
.chart__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 20px; font: 600 15px/1.4 var(--f-ui); color: var(--muted); }
.chart__tip { position: absolute; z-index: 3; left: 0; top: 0; translate: var(--tx, 0) var(--ty, 0); pointer-events: none; min-width: 120px; padding: 8px 11px; border-radius: 12px;
  background: var(--ocean-900); color: #fff; box-shadow: 0 8px 20px rgba(6,33,63,.28); white-space: nowrap; }
.chart__tip b { display: block; font: 400 20px/1 var(--f-display); letter-spacing: .01em; }
.chart__tip span { display: block; margin-top: 4px; font: 600 12.5px/1.2 var(--f-ui); color: #bcd6ef; }

.pop__more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; margin-top: 30px; padding-top: 26px; border-top: 1.5px solid var(--hair); }
.rooms__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.rooms__list li { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 2.6em; align-items: center; column-gap: 12px; }
.rooms__name { font: 600 16px/1.25 var(--f-ui); word-spacing: .08em; color: var(--ocean-900); overflow-wrap: anywhere; }
.rooms__bar { height: 12px; border-radius: var(--r-pill); background: #e3eef8; overflow: hidden; }
.rooms__bar i { display: block; height: 100%; width: calc(var(--w, 0) * 100%); min-width: 12px; border-radius: inherit; background: linear-gradient(90deg, #3cc3f0, var(--ocean-700)); }
.rooms__n { font: 800 16px/1 var(--f-body); color: var(--ocean-900); text-align: right; }
.rooms__totals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rooms__totals:empty { display: none; }
.rooms__note { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.rooms__wait { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; font-size: 15.5px; line-height: 1.5; }
.tiles { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tiles li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px;
  background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.tiles img { grid-row: span 2; width: 44px; height: 44px; object-fit: contain; }
.tiles b { font: 400 24px/1.05 var(--f-display); color: var(--ocean-900); letter-spacing: .01em; overflow-wrap: anywhere; }
.tiles span { font: 600 13.5px/1.3 var(--f-ui); color: #35516f; }
.tiles li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }   /* an odd count: the total penguins made leads, full width */
.tiles__at { margin-top: 10px; font: 600 13px/1.3 var(--f-ui); color: var(--muted); }

/* ------------------------------------------------------------------ components and their 90-day strips */
.groups { display: grid; gap: 26px; }
.grp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid #d4e6f6; }
.grp__sum { font: 600 14px/1.3 var(--f-ui); color: var(--muted); text-align: right; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { --lv: var(--t-nd); padding: 18px 0 14px; border-top: 1.5px solid var(--hair); }
.row:first-child { border-top: 0; }
.row[data-status="operational"] { --lv: var(--t-ok); }
.row[data-status="degraded_performance"] { --lv: var(--t-dg); }
.row[data-status="partial_outage"] { --lv: var(--t-pt); }
.row[data-status="major_outage"] { --lv: var(--t-mj); }
.row[data-status="under_maintenance"] { --lv: var(--t-mt); }
.row__top { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.row__ico { flex: none; width: 28px; height: 24px; }
.row__name { min-width: 0; font: 600 18px/1.2 var(--f-ui); color: var(--ocean-900); }
.row__q { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ice-50); color: var(--ocean-700); font: 700 14px/1 var(--f-body); box-shadow: inset 0 0 0 1.5px #cfe3f5; }
.row__q::before { content: ""; position: absolute; inset: -10px; }   /* a 44 px target around the small mark */
.row__q:hover, .row__q[aria-expanded="true"] { background: var(--ocean-700); color: #fff; box-shadow: none; }
.row__state { margin-left: auto; padding-left: 12px; font: 600 15.5px/1.2 var(--f-ui); color: var(--lv); text-align: right; }
.strip { display: flex; gap: 2px; height: 36px; margin-top: 12px; padding: 0; border-radius: 6px; touch-action: pan-y; }
.strip:focus-within { outline: 0; }
.d { flex: 1 1 0; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 2px; cursor: pointer; background: var(--b-ok); transform-origin: 50% 100%;
  transition: transform var(--t-fast) var(--ease-out); }
.d[data-b="minor"] { background: var(--b-minor); }
.d[data-b="partial"] { background: var(--b-partial); }
.d[data-b="major"] { background: var(--b-major); }
.d[data-b="maintenance"] { background: var(--b-maintenance); }
.d[data-b="nodata"] { background: var(--b-nodata); }
.d[data-b="loading"] { background: #e8eff6; cursor: default; }
.d:hover, .d.is-on { filter: brightness(.82) saturate(1.1); transform: scaleY(1.08); }
.d:focus-visible { outline: 2.5px solid var(--ocean-900); outline-offset: 2px; border-radius: 2px; }
.strip__legend { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 600 13.5px/1.2 var(--f-ui); color: var(--muted); white-space: nowrap; }
.strip__legend i { flex: 1; height: 1.5px; background: #dce8f3; }
.strip__legend b { font-weight: 600; color: #35516f; }
.legend { margin-top: 26px; padding-top: 20px; border-top: 1.5px solid var(--hair); }
.legend__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; font: 600 14.5px/1.3 var(--f-ui); color: #35516f; }
@media (max-width: 1023px) { .legend__list { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 10px 26px; } }
@media (max-width: 599px) { .legend__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } }
.legend__list li { display: inline-flex; align-items: center; gap: 8px; }
.sw { flex: none; width: 12px; height: 22px; border-radius: 3px; background: var(--b-ok); }
.sw[data-b="minor"] { background: var(--b-minor); } .sw[data-b="partial"] { background: var(--b-partial); } .sw[data-b="major"] { background: var(--b-major); }
.sw[data-b="maintenance"] { background: var(--b-maintenance); } .sw[data-b="nodata"] { background: var(--b-nodata); }
.legend__note { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* ------------------------------------------------------------------ how fast the island answers */
.speed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.speed figure { margin: 0; padding: 16px 18px 12px; border-radius: 18px; background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; min-width: 0; }
.speed figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.speed figcaption b { font: 600 17px/1.2 var(--f-ui); color: var(--ocean-900); }
.speed figcaption span { font: 600 14px/1.3 var(--f-ui); color: #35516f; }
.speed .chart { height: 110px; margin-top: 8px; }

/* ------------------------------------------------------------------ past incidents */
.day { display: grid; grid-template-columns: 158px minmax(0, 1fr); column-gap: 24px; padding: 16px 0; border-top: 1.5px solid var(--hair); }
.day:first-child { border-top: 0; padding-top: 4px; }
.st-sec .day__date { font: 600 15.5px/1.4 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ocean-900); }
.day__date small { display: block; font: 600 12.5px/1.3 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.day__none { font-size: 15.5px; line-height: 1.4; color: var(--muted); }
.day__list { display: grid; gap: 18px; }
.inc { --imp: #9fb3c8; position: relative; padding-left: 18px; }
.inc::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 4px; background: var(--imp); }
.inc[data-impact="critical"] { --imp: #CC0000; } .inc[data-impact="major"] { --imp: #E0600A; } .inc[data-impact="minor"] { --imp: #DDA700; }
.inc[data-impact="maintenance"] { --imp: #2F80D8; } .inc[data-impact="none"] { --imp: #5a7290; }
.inc__title { font: 600 18px/1.3 var(--f-ui); color: var(--ocean-900); }
.inc__title a { color: inherit; text-decoration: none; }
.inc__title a:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--ocean-700); }
.inc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font: 600 14px/1.4 var(--f-ui); color: var(--muted); }
.inc .ups { margin-top: 8px; }
.inc .ups li { grid-template-columns: 110px minmax(0, 1fr); padding: 8px 0; border-top: 0; }
.inc .ups__body > p { font-size: 15.5px; }
.quiet { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 14px 16px; border-radius: 18px; background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.quiet img { flex: none; width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 3px 8px rgba(6,33,63,.18); }
.quiet p { font: 600 16px/1.4 var(--f-ui); color: var(--ocean-900); }
.quiet p span { display: block; font: 400 15px/1.45 var(--f-body); color: #35516f; }
.st-older { margin-top: 18px; }
.older { margin-top: 18px; }
.older h3 { margin: 18px 0 4px; }
.older h3:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ follow updates, how we measure */
.st-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.st-sec--small { padding: 28px 30px 30px; }
.st-sec--small h2 { margin-bottom: 12px; }
.st-sec--small > p { font-size: 16px; line-height: 1.55; }
.feeds { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.feeds li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kind link btn"; align-items: center; gap: 10px; min-width: 0; padding: 6px 6px 6px 8px; border-radius: 16px; background: var(--ice-50); box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.feeds__kind { grid-area: kind; justify-self: start; min-width: 52px; padding-inline: 8px; padding: 5px 0; border-radius: 10px; background: var(--ocean-700); color: #fff; text-align: center; font: 600 13px/1 var(--f-ui); letter-spacing: .06em; }
.feeds a { grid-area: link; min-width: 0; font: 600 15px/1.35 var(--f-ui); color: var(--ocean-700); overflow-wrap: anywhere; text-underline-offset: 3px; }
.feeds button { grid-area: btn; min-height: 44px; min-width: 76px; padding: 0 14px; border: 0; border-radius: 12px; cursor: pointer; background: #fff; color: var(--ocean-700);
  font: 600 14px/1 var(--f-ui); box-shadow: inset 0 0 0 1.5px #cfe3f5, var(--lift-1); }
.feeds button[data-done] { color: var(--t-ok); }
.measure { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 16px; line-height: 1.55; }

/* ------------------------------------------------------------------ the popover: a day of a strip, a part's description */
.st-tip { position: fixed; z-index: 45; left: 0; top: 0; translate: var(--tx, 0) var(--ty, 0); width: min(330px, calc(100vw - 24px)); padding: 16px 18px 16px;
  border-radius: 18px; background: #fff; color: var(--prose); box-shadow: 0 18px 44px rgba(6,33,63,.28), inset 0 0 0 1.5px #d4e6f6; }
.st-tip::after { content: ""; position: absolute; left: var(--ax, 50%); width: 14px; height: 14px; translate: -50% 0; rotate: 45deg; background: #fff; }
.st-tip[data-side="above"]::after { top: calc(100% - 7px); box-shadow: 1.5px 1.5px 0 #d4e6f6; }
.st-tip[data-side="below"]::after { bottom: calc(100% - 7px); box-shadow: -1.5px -1.5px 0 #d4e6f6; }
.st-tip__title { padding-right: 44px; font: 600 16px/1.3 var(--f-ui); color: var(--ocean-900); }
.st-tip__sub { margin-top: 2px; padding-right: 44px; font: 600 13.5px/1.3 var(--f-ui); color: var(--muted); }
.st-tip__close { position: absolute; right: 6px; top: 6px; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--ocean-900); }
.st-tip__close svg { width: 18px; height: 18px; }
.st-tip[data-pinned] .st-tip__close { display: grid; }
.st-tip__rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.st-tip__rows li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f4f8fc; font: 600 14.5px/1.3 var(--f-ui); color: var(--ocean-900); }
.st-tip__rows li b { margin-left: auto; font-weight: 600; color: #35516f; }
.st-tip__rows .sw { height: 16px; width: 8px; }
.st-tip__msg { margin-top: 12px; font-size: 15px; line-height: 1.45; }
.st-tip__msg + .st-tip__msg { margin-top: 6px; }
.st-tip__incs { margin-top: 12px; padding-top: 10px; border-top: 1.5px solid var(--hair); }
.st-tip__incs p { font: 600 12.5px/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.st-tip__incs ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.st-tip__incs a { display: block; padding: 4px 0; font: 600 15px/1.35 var(--f-ui); color: var(--ocean-700); text-underline-offset: 3px; }
.st-tip__text { margin-top: 6px; font-size: 15.5px; line-height: 1.5; }

/* ------------------------------------------------------------------ layout modes */
@media (max-width: 1023px) {
  .w90, .w30 { display: none; } .w60 { display: inline; }
  .d:nth-child(-n+30) { display: none; }
  .pop { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pop__now { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); column-gap: 30px; align-items: center; }
  .pop__count { margin-top: 0; }
  .pop__now .picker { grid-column: 1; grid-row: auto; }
  .pop__now .pop__count { grid-column: 2; grid-row: 1 / span 2; }
  .pop__now .pop__badge { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 4px; }
  .pop__now .pop__facts { grid-column: 1 / -1; }
}
@media (max-width: 859px) {
  .pop__more { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .st-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .st-card { grid-template-columns: 124px minmax(0, 1fr); column-gap: 20px; padding: 32px 26px 22px 20px; }
  .st-mood { width: 100px; margin: 50px 0 4px 6px; }
  .st-sign { width: 96px; right: 22px; }
  .st-card { --sign-room: 104px; }
  .pop__now { grid-template-columns: minmax(0, 1fr); }
  .pop__now .pop__count, .pop__now .pop__badge { grid-column: 1; grid-row: auto; }
  .pop__now .pop__count { margin-top: 20px; }
  .day { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .ups li, .inc .ups li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}
@media (max-width: 599px) {
  .w90, .w60 { display: none; } .w30 { display: inline; }
  .d:nth-child(-n+60) { display: none; }
  .st-hero { padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 22px); }
  .st-sky { bottom: 150px; }
  .st-hero h1 { font-size: 30px; }
  .st-eyebrow { font-size: 13px; }
  .st-card { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 18px; margin-top: 22px; border-radius: 24px; box-shadow: inset 0 8px 0 var(--state), 0 5px 0 rgba(6,33,63,.08), 0 18px 40px rgba(6,33,63,.2); }
  .st-mood { width: 78px; margin: 46px 0 6px 2px; }
  .st-mood .say { left: 104%; bottom: 30%; width: 128px; }
  .st-mood .say span { font-size: 18px; }
  .st-sign { width: 78px; right: 16px; }   /* beside the speech bubble, above the headline */
  .st-card { --sign-room: 0px; }
  .st-headline { margin-top: 10px; font-size: 28px; }
  .st-subline { font-size: 16.5px; }
  .st-fallback__list { grid-template-columns: minmax(0, 1fr); }
  .st-meta { gap: 8px 10px; }
  .st-controls { width: 100%; }
  .st-btn { flex: 1 1 auto; justify-content: center; }
  .st-controls .st-seg { flex: 1 1 auto; }   /* a row of its own fills it, as the button above does */
  .st-controls .st-seg button { flex: 1 1 0; }
  .st-body { padding: 24px 0 96px; }
  .st-stack { --gap: 20px; }
  .st-sec { padding: 24px 18px 26px; border-radius: 22px; }
  .st-sec--small { padding: 24px 18px 26px; }
  .st-sec__head { margin-bottom: 16px; }
  .frame { border-width: 16px; border-image-width: 16px; padding: 0; }
  .frame__ico { width: 44px; height: 44px; }
  .frame__panel { padding: 14px 14px 16px; }
  .frame__art { display: none; }
  .picker { height: 52px; padding: 0 23px 0 18px; }   /* the FULL stamp ends where the pill ends, as in the game */
  .picker__name { font-size: 19px; }
  .pop__count b { font-size: 56px; }
  .pop__facts { gap: 8px; }
  .chart { height: 168px; }
  .tiles li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; padding: 10px 12px; }
  .tiles img { width: 36px; height: 36px; }
  .tiles b { font-size: 21px; }
  .strip { height: 34px; gap: 2px; }
  .row__name { font-size: 17px; }
  .row__state { font-size: 14.5px; }
  .speed { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* the link gets a line of its own under the kind and the copy button */
  .feeds li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind btn" "link link"; row-gap: 6px; padding: 8px 8px 12px 12px; }
}
@media (orientation: landscape) and (max-height: 499px) {
  .st-hero { padding-top: calc(var(--header-h) + 18px); }
  .st-hero h1 { font-size: 30px; }
  .st-card { margin-top: 16px; padding-top: 26px; }
}
@media (orientation: landscape) and (max-height: 499px) and (min-width: 600px) {
  /* a lower card: a smaller puffle, still low enough in its column that the speech bubble stays inside the card */
  .st-card { grid-template-columns: 124px minmax(0, 1fr); column-gap: 20px; }
  .st-mood { width: 100px; margin: 60px 0 4px 6px; }
}
@media (max-width: 399px) {
  .st-sign { width: 66px; right: 10px; }   /* a little smaller, so the speech bubble beside it keeps clear */
}
@media (max-width: 359px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .st-card { padding-left: 16px; padding-right: 16px; }
  .pop__facts { grid-template-columns: minmax(0, 1fr); }
  .rooms__list li { grid-template-columns: minmax(0, 7em) minmax(0, 1fr) 2.4em; column-gap: 8px; }
  .st-seg button { padding: 0 11px; }
  .st-sign { display: none; }   /* no room beside the speech bubble: the headline says it */
  .frame__top { gap: 10px; }
  .frame__ico { width: 36px; height: 36px; }
  .frame__kicker { font-size: 11.5px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .d:hover, .d.is-on { transform: none; }
}
@media (forced-colors: active) {
  .d, .sw { forced-color-adjust: none; }
}

/* ------------------------------------------------------------------ old or missing news: the 2017 site's oops cards */
.st-oops { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px 30px 18px 18px; border-radius: 28px;
  background: #fff; color: var(--prose); box-shadow: 0 18px 40px rgba(6,33,63,.08), inset 0 0 0 1.5px #dcecf8, inset 0 6px 0 #5A7290; }
.st-oops__art { width: 150px; height: auto; aspect-ratio: 480 / 543; object-fit: cover; object-position: left center; }   /* the art's left part, its shadow whole */
.st-oops h2 { font: 400 clamp(22px, 2.4vw, 27px)/1.15 var(--f-display); color: var(--ocean-900); letter-spacing: .005em; }
.st-oops p { margin-top: 8px; font-size: 16.5px; line-height: 1.55; }
@media (max-width: 599px) {
  .st-oops { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 14px 18px 14px 12px; border-radius: 22px; }
  .st-oops__art { width: 92px; }
  .st-oops p { font-size: 15.5px; }
}
@media (max-width: 479px) {
  /* phones: the state label goes under the name, so no name breaks mid-phrase and every row reads the same way */
  .row__top { flex-wrap: wrap; row-gap: 3px; }
  .row__state { flex: 1 0 calc(100% - 38px); margin-left: 38px; padding-left: 0; text-align: left; }
}