/* Waka Quest status page: the Waka style (forest green, gold, cream, the faya lobi red), readable at phone width */
:root { --forest: #123f39; --forest-2: #0b2a25; --gold: #f1b748; --gold-ink: #b07d14; --faya: #b40a2d; --cream: #fffaf0; --sand: #f4ead6; --ink: #1d2b28; --muted: #58736f; --line: #ecdcbc; --ok: #1f9d55; --bad: #c0362c; --warn: #d98a00; --none: #d9d2c1; --card: #fff; }
@media (prefers-color-scheme: dark) { :root { --cream: #0e1f1c; --sand: #132925; --ink: #eef3f1; --muted: #a9bdb8; --line: #24423c; --card: #12302b; --none: #2f4a45; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 Manrope, system-ui, sans-serif; color: var(--ink); background: var(--cream); }
.band { height: 8px; background: repeating-linear-gradient(90deg, var(--faya) 0 22px, var(--gold) 22px 33px, var(--forest) 33px 55px, var(--gold) 55px 66px); }
header { background: radial-gradient(120% 140% at 85% 0%, #1e6858 0%, var(--forest) 55%, var(--forest-2) 100%); padding: 18px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
header .logo img { height: 34px; display: block; }
select { font: 700 14px Manrope, sans-serif; color: #fff; background: #ffffff1a; border: 1px solid #ffffff44; border-radius: 20px; padding: 7px 12px; }
select option { color: #000; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
main { max-width: 760px; margin: 0 auto; padding: 18px 16px 30px; }
.why { display: flex; align-items: center; gap: 9px; margin: 6px 0 14px; font: 800 12px/1.2 Manrope; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-ink); }
.why i { width: 9px; height: 9px; background: var(--faya); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--gold); flex: none; }
.hero { display: flex; gap: 16px; align-items: center; border-radius: 22px; padding: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 24px #12302b14; }
.hero .waki { width: 96px; height: auto; flex: none; }
.hero.ok { border-color: #bfe0cc; background: linear-gradient(135deg, var(--card), #e9f6ee); }
.hero.bad { border-color: #f1c2bd; background: linear-gradient(135deg, var(--card), #fbeceb); }
.hero.maint { border-color: #f0dfad; background: linear-gradient(135deg, var(--card), #fff4d9); }
@media (prefers-color-scheme: dark) { .hero.ok, .hero.bad, .hero.maint { background: var(--card); } }
.kicker { margin: 0; font: 800 12px/1 Manrope; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
h1 { margin: 6px 0 4px; font-size: 26px; line-height: 1.15; letter-spacing: -.4px; }
.hero.ok h1 { color: var(--ok); } .hero.bad h1 { color: var(--bad); } .hero.maint h1 { color: var(--warn); }
#lead { margin: 0; color: var(--muted); }
.msg { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--sand); font-weight: 600; }
.card { margin-top: 16px; border-radius: 20px; padding: 16px; background: var(--card); border: 1px solid var(--line); }
h2 { margin: 0 0 10px; font-size: 17px; }
ul { margin: 0; padding: 0; list-style: none; }
.parts li { padding: 12px 0; border-top: 1px solid var(--line); }
.parts li:first-child { border-top: 0; padding-top: 2px; }
.row { display: flex; align-items: center; gap: 10px; }
.row b { flex: 1; }
.row .st { font-size: 14px; font-weight: 700; }
.st.ok { color: var(--ok); } .st.bad { color: var(--bad); } .st.none { color: var(--muted); }
.d { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.d.ok { background: var(--ok); box-shadow: 0 0 0 4px #1f9d5522; } .d.bad { background: var(--bad); box-shadow: 0 0 0 4px #c0362c22; } .d.none { background: var(--none); }
.sub { margin: 2px 0 8px 22px; font-size: 13px; color: var(--muted); }
.bars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 1px; height: 26px; margin-left: 22px; }
.bars i { border-radius: 2px; background: var(--none); }
.bars i.ok { background: var(--ok); } .bars i.part { background: var(--warn); } .bars i.bad { background: var(--bad); }
.pct { margin: 4px 0 0 22px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.legend span { display: flex; align-items: center; gap: 5px; } .legend b { font-weight: 600; }
.small { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
#planned-list li, .past li { padding: 10px 0; border-top: 1px solid var(--line); }
#planned-list li:first-child, .past li:first-child { border-top: 0; padding-top: 0; }
.when { display: block; font-size: 13px; font-weight: 700; color: var(--gold-ink); }
a { color: var(--forest); font-weight: 700; }
@media (prefers-color-scheme: dark) { a { color: var(--gold); } }
footer { text-align: center; font-weight: 800; color: var(--forest); padding: 0 16px 28px; font-size: 14px; }
@media (prefers-color-scheme: dark) { footer { color: var(--gold); } }
@media (max-width: 480px) { .hero { flex-direction: column; text-align: center; } .hero .waki { width: 84px; } h1 { font-size: 23px; } .bars { height: 22px; } }