/* wp-U4 customer-facing service status page (/status), taken over by wp-E2 for design language v4 (restrained variant:
   same palette and type scale as the game skin, no character, no environment image or video, no gold frame).
   The 24-hour strip and the state text are the content: large, high contrast, and the strip also encodes state by shape
   (delay = shorter cell) so it does not rely on colour alone. Colours only through --v4-* (skin.css + v4.css on this page);
   motion only under prefers-reduced-motion:no-preference. The shared .st-strip / .st-cell base rules further down are also
   used by the admin page (#/status), so the public look is scoped to .st-page. */
.st-page{--st-max:960px;min-height:100vh;display:flex;flex-direction:column;overflow-x:clip;background:var(--v4-s0);color:var(--v4-fg)}
.st-skip{position:absolute;left:var(--v4-sp-4);top:-48px;z-index:20;padding:var(--v4-sp-2) var(--v4-sp-3);background:var(--v4-gold-2);border-radius:var(--v4-r-1);color:var(--v4-gold-ink);font:700 var(--v4-fs-14)/1.2 var(--v4-font)}
.st-skip:focus{top:var(--v4-sp-2);outline:2px solid var(--v4-fg);outline-offset:2px}
.st-wrap{width:100%;max-width:calc(var(--st-max) + 2 * var(--v4-gutter));margin:0 auto;padding:0 var(--v4-gutter)}

/* top bar: L2, near-opaque ink with one gold hairline */
.st-page .st-top{position:sticky;top:0;z-index:5;background:rgba(11,9,7,.94);border-bottom:1px solid var(--v4-hair);box-shadow:0 8px 24px -18px rgba(0,0,0,.9)}
.st-page .st-top .brand b{color:var(--v4-fg)}
.st-page .st-top .brand small{color:var(--v4-muted)}
.st-nav{display:flex;align-items:center;gap:var(--v4-sp-4);flex:none}
.st-navlink{font-size:var(--v4-fs-14);color:var(--v4-fg2);padding:var(--v4-sp-1) 0;border-bottom:1px solid transparent;text-decoration:none}
.st-navlink:hover{color:var(--v4-fg);border-bottom-color:var(--v4-hair-2)}
.st-navlink:focus-visible{outline:2px solid var(--v4-gold-2);outline-offset:2px}

/* hero: the overall state is the headline; a faint glow behind it takes the state colour */
.st-main{flex:1;outline:none}
.st-hero{position:relative;isolation:isolate;padding:var(--v4-sp-12) 0 var(--v4-sp-10);border-bottom:1px solid var(--v4-line);overflow:hidden}
.st-hero-art{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 120% at 12% 0%,rgba(239,230,211,.05),transparent 70%)}
.st-hero[data-state="ok"] .st-hero-art{background:radial-gradient(60% 120% at 12% 0%,var(--v4-ok-soft),transparent 70%)}
.st-hero[data-state="delay"] .st-hero-art{background:radial-gradient(60% 120% at 12% 0%,var(--v4-warn-soft),transparent 70%)}
.st-hero[data-state="down"] .st-hero-art{background:radial-gradient(60% 120% at 12% 0%,var(--v4-err-soft),transparent 70%)}
.st-eyebrow{display:flex;align-items:center;gap:var(--v4-sp-2);margin:0 0 var(--v4-sp-4);font:600 var(--v4-fs-12)/1.4 var(--v4-font);letter-spacing:.24em;color:var(--v4-fg2)}
.st-eyebrow::before{content:"";width:20px;height:1px;background:var(--v4-gold-2)}
.st-title{display:flex;align-items:center;gap:var(--v4-sp-4);margin:0;font:800 var(--v4-fs-40)/1.2 var(--v4-font);letter-spacing:.03em;color:var(--v4-fg)}
.st-dot{flex:none;width:16px;height:16px;border-radius:50%;background:var(--v4-edge);box-shadow:0 0 0 6px rgba(239,230,211,.08)}
.st-hero[data-state="ok"] .st-dot{background:var(--v4-ok);box-shadow:0 0 0 6px var(--v4-ok-soft)}
.st-hero[data-state="delay"] .st-dot{background:var(--v4-warn);box-shadow:0 0 0 6px var(--v4-warn-soft)}
.st-hero[data-state="down"] .st-dot{background:var(--v4-err);box-shadow:0 0 0 6px var(--v4-err-soft)}
.st-sub{margin:var(--v4-sp-4) 0 0;max-width:40em;font-size:var(--v4-fs-16);line-height:1.7;color:var(--v4-fg2)}
.st-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--v4-sp-2) var(--v4-sp-4);margin-top:var(--v4-sp-6)}
.st-updated{font-size:var(--v4-fs-14);color:var(--v4-muted);font-variant-numeric:tabular-nums}
.st-refresh .ic,.st-refresh svg{width:14px;height:14px}

/* body */
.st-body{display:grid;gap:var(--v4-sp-10);padding-top:var(--v4-sp-8);padding-bottom:var(--v4-sp-12)}
.st-body>[data-st-notice]:empty{display:none}
.st-h2{position:relative;margin:0;padding-left:var(--v4-sp-3);font:700 var(--v4-fs-20)/1.3 var(--v4-font);letter-spacing:.02em;color:var(--v4-fg)}
.st-h2::before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:2px;background:var(--v4-gold-2)}

/* notice: a B plate with a 2px state line on the left */
.st-notice{position:relative;padding:var(--v4-sp-5) var(--v4-sp-6);background:var(--v4-b-bg);border:1px solid var(--v4-hair);border-radius:var(--v4-r-3);box-shadow:var(--v4-hi),var(--v4-shadow-1)}
.st-notice::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;border-radius:var(--v4-r-3) 0 0 var(--v4-r-3);background:var(--v4-gold-2)}
.st-notice--warn::before{background:var(--v4-warn)}
.st-notice--ok::before{background:var(--v4-ok)}
.st-notice-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--v4-sp-2) var(--v4-sp-3)}
.st-notice-tag{font-size:var(--v4-fs-12);letter-spacing:.12em;color:var(--v4-muted)}
.st-notice-title{margin:0;font-size:var(--v4-fs-16);font-weight:700;color:var(--v4-fg)}
.st-notice-text{margin:var(--v4-sp-2) 0 0;font-size:var(--v4-fs-16);line-height:1.7;color:var(--v4-fg2);white-space:pre-line;overflow-wrap:anywhere}
.st-notice-at{display:block;margin-top:var(--v4-sp-2);font-size:var(--v4-fs-12);color:var(--v4-muted)}

/* services: one B plate, rows split by C lines */
.st-svc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--v4-sp-2) var(--v4-sp-4);margin-bottom:var(--v4-sp-4)}
.st-legend-mini{display:flex;align-items:center;flex-wrap:wrap;gap:var(--v4-sp-1) var(--v4-sp-2);margin:0;font-size:var(--v4-fs-12);color:var(--v4-fg2)}
.st-legend-mini .st-cell{width:8px;height:14px;flex:none;margin-left:var(--v4-sp-3)}
.st-legend-mini .st-cell:first-child{margin-left:0}
.st-legend-mini .st-cell--delay{height:10px}
.st-legend-span{margin-left:var(--v4-sp-4);color:var(--v4-muted)}
.st-page .st-list{padding:0 var(--v4-sp-6);background:var(--v4-b-bg);border:1px solid var(--v4-hair);border-radius:var(--v4-r-3);box-shadow:var(--v4-hi),var(--v4-shadow-1)}
.st-page .st-list[aria-busy],.st-page .st-list:has(.ui-errcard),.st-page .st-list:has(.ui-empty){padding:var(--v4-sp-5) var(--v4-sp-6)}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name state" "strip strip";gap:var(--v4-sp-3) var(--v4-sp-4);padding:var(--v4-sp-5) 0;border-top:1px solid var(--v4-line)}
.st-row:first-child{border-top:0}
.st-row-name{grid-area:name;min-width:0}
.st-row-name h3{margin:0;font-size:var(--v4-fs-16);font-weight:700;letter-spacing:.02em;color:var(--v4-fg)}
.st-row-name p{margin:var(--v4-sp-1) 0 0;font-size:var(--v4-fs-14);line-height:1.5;color:var(--v4-muted)}
.st-row-state{grid-area:state;align-self:start;padding-top:2px}
.st-row-strip{grid-area:strip;min-width:0}
.st-page .st-strip{height:32px;gap:3px}
.st-page .st-cell{border-radius:2px;background:color-mix(in srgb,var(--v4-ok) 58%,var(--v4-s1))}
.st-page .st-cell--delay{background:var(--v4-warn)}
.st-page .st-cell--down{background:var(--v4-err)}
.st-page .st-strip .st-cell--now{box-shadow:0 0 0 1px var(--v4-s1),0 0 0 2px var(--v4-gold-1)}
.st-page .st-strip-axis{margin-top:var(--v4-sp-2);font-size:var(--v4-fs-12);color:var(--v4-muted)}
.st-page .st-row-summary{margin:var(--v4-sp-2) 0 0;font-size:var(--v4-fs-14);color:var(--v4-fg2)}
@media (min-width:760px){
  .st-row{grid-template-columns:minmax(180px,220px) minmax(0,1fr) 88px;grid-template-areas:"name strip state";align-items:center;gap:var(--v4-sp-6)}
  .st-row-state{justify-self:end;padding-top:0}
}

/* explanation (C level) and help links (B plates) */
.st-defs{display:grid;gap:0;margin:var(--v4-sp-4) 0 0}
.st-def{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--v4-sp-3);align-items:baseline;padding:var(--v4-sp-3) 0;border-top:1px solid var(--v4-line)}
.st-def:first-child{border-top:0;padding-top:0}
.st-def dt,.st-def dd{margin:0}
.st-def dd{font-size:var(--v4-fs-16);line-height:1.7;color:var(--v4-fg2)}
.st-basis{margin:var(--v4-sp-4) 0 0;padding:var(--v4-sp-3) var(--v4-sp-4);border-left:2px solid var(--v4-gold-2);background:rgba(239,230,211,.04);border-radius:0 var(--v4-r-1) var(--v4-r-1) 0;font-size:var(--v4-fs-14);line-height:1.8;color:var(--v4-fg2)}
.st-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--v4-sp-4);margin:var(--v4-sp-4) 0 0;padding:0;list-style:none}
.st-link{display:flex;flex-direction:column;gap:var(--v4-sp-1);height:100%;padding:var(--v4-sp-5);border:1px solid var(--v4-hair);border-radius:var(--v4-r-3);background:var(--v4-b-bg);box-shadow:var(--v4-hi),var(--v4-shadow-1);text-decoration:none}
.st-link b{font-size:var(--v4-fs-16);color:var(--v4-fg)}
.st-link span{font-size:var(--v4-fs-14);line-height:1.6;color:var(--v4-muted)}
.st-link:hover{border-color:var(--v4-hair-2)}
.st-link:hover b{color:var(--v4-gold-1)}
.st-link:focus-visible{outline:2px solid var(--v4-gold-2);outline-offset:2px}
@media (max-width:759px){.st-links{grid-template-columns:minmax(0,1fr)}}

.st-foot{border-top:1px solid var(--v4-line);padding:var(--v4-sp-5) 0;font-size:var(--v4-fs-12);color:var(--v4-muted)}
.st-foot .st-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--v4-sp-2)}

@media (max-width:480px){
  .st-hero{padding:var(--v4-sp-8) 0}
  .st-title{font-size:var(--v4-fs-28);gap:var(--v4-sp-3)}
  .st-sub{font-size:var(--v4-fs-14)}
  .st-nav{gap:var(--v4-sp-3)}
  .st-navlink{display:none}
  .st-body{gap:var(--v4-sp-8)}
  .st-page .st-list{padding:0 var(--v4-sp-4)}
  .st-page .st-strip{gap:2px;height:28px}
  .st-def{grid-template-columns:64px minmax(0,1fr)}
  .st-def dd{font-size:var(--v4-fs-14)}
  .st-notice,.st-link{padding:var(--v4-sp-4)}
}
@media (prefers-reduced-motion:no-preference){
  .st-navlink{transition:color var(--v4-t-1) var(--v4-ease),border-color var(--v4-t-1) var(--v4-ease)}
  .st-link{transition:border-color var(--v4-t-2) var(--v4-ease),transform var(--v4-t-2) var(--v4-ease)}
  .st-link b{transition:color var(--v4-t-2) var(--v4-ease)}
  .st-link:hover{transform:translateY(-2px)}
}

/* shared strip (the admin page's #/status reuses these with its own ui tokens) */
.st-strip{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;margin:0;padding:0;list-style:none;height:28px}
.st-cell{display:block;border-radius:1px;background:color-mix(in srgb,var(--ui-ok) 46%,var(--ui-surface))}
.st-strip .st-cell{height:100%}
.st-cell--delay{background:var(--ui-warn)}
.st-cell--down{background:var(--ui-accent)}
.st-strip .st-cell--delay{height:72%;align-self:end}
.st-strip .st-cell--now{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--ui-text) 55%,transparent)}
.st-strip-axis{display:flex;justify-content:space-between;margin-top:var(--ui-s-1);font-size:var(--ui-fs-xs);color:var(--ui-text-3);font-variant-numeric:tabular-nums}
.st-row-summary{margin:var(--ui-s-2) 0 0;font-size:var(--ui-fs-xs);color:var(--ui-text-3)}

/* admin view (#/status in the dark console; admin.html loads this file too and reuses the strip) */
.u4a{display:grid;gap:var(--ui-s-5);min-width:0}
.u4a>*{min-width:0}
.u4a-overall{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-s-3);margin:var(--ui-s-1) 0 var(--ui-s-3)}
.u4a-notice-flag{display:inline-flex;align-items:center;gap:var(--ui-s-1);font-size:var(--ui-fs-sm);color:var(--ui-text-2)}
.u4a-notice-flag svg{width:14px;height:14px}
.u4a-json summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;font-size:var(--ui-fs-sm);color:var(--ui-text-3)}
.u4a-json summary::-webkit-details-marker{display:none}
.u4a-json summary svg{width:14px;height:14px}
@media (prefers-reduced-motion:no-preference){.u4a-json summary svg{transition:transform var(--ui-dur-2) var(--ui-ease)}}   /* wp-X1 A-EB-07 */
.u4a-json[open] summary svg{transform:rotate(180deg)}
.u4a-json pre{max-height:280px;overflow:auto;margin:var(--ui-s-2) 0 0}
.u4a-topup{margin:var(--ui-s-3) 0 0}
.u4a-off td{color:var(--ui-text-3)}
.u4a-stripcell{min-width:168px}
.st-strip--sm{height:18px;gap:2px}
.u4a-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--ui-s-5);align-items:start}
.u4a-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--ui-s-2) var(--ui-s-4)}
.u4a-form{display:grid;gap:var(--ui-s-3)}
.u4a-form .ui-btn-group{margin-top:var(--ui-s-1)}
@media (max-width:1100px){.u4a-cols{grid-template-columns:minmax(0,1fr)}}