/* status.tama.now: tokens and layout from the StatusPage design board (dark first, light by system preference). */
:root{--bg:#0D0F12;--surface:#14171B;--surface-2:#1A1E23;--sunken:#121519;--line:#242930;--line-soft:#20252B;--line-strong:#333A42;--text:#E7E9EC;--text-2:#A6AEB7;--text-3:#848D97;--mint:#74D1AC;--mint-hover:#A4E4CA;--on-mint:#0B1A14;--mint-dim:#3B5A4E;--blue:#7AB8FF;--amber:#E8B562;--red:#F2878A;--gray:#6B747E;--red-soft:#1A1416;--red-line:#3D2629;--amber-soft:#1E1A12;--amber-line:#4A3B22;--blue-soft:#121A24;--blue-line:#24364D;color-scheme:dark}
@media (prefers-color-scheme: light){:root{--bg:#F6F7F9;--surface:#FFFFFF;--surface-2:#F3F4F6;--sunken:#F3F5F7;--line:#E1E4E8;--line-soft:#EAEDF0;--line-strong:#CDD2D8;--text:#14171B;--text-2:#4A525C;--text-3:#5E6872;--mint:#0B7A55;--mint-hover:#08623F;--on-mint:#FFFFFF;--mint-dim:#A7DFC6;--blue:#1F6FD1;--amber:#94600A;--red:#C2373D;--gray:#8A939D;--red-soft:#FDECEC;--red-line:#F2C4C6;--amber-soft:#FDF3E1;--amber-line:#EED9B0;--blue-soft:#EAF2FD;--blue-line:#BCD5F5;color-scheme:light}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
a{color:var(--mint);text-decoration:none}a:hover{color:var(--mint-hover);text-decoration:underline}
.sp{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);font-size:14px;line-height:1.5;min-height:100vh}
.wrap{max-width:980px;margin:0 auto;padding:28px 24px 56px;display:flex;flex-direction:column;gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
.dim{color:var(--text-2)}.faint{color:var(--text-3)}.small{font-size:12px}
h1{font-size:22px;font-weight:650;margin:0;letter-spacing:-.01em}
h2{font-size:16px;font-weight:600;margin:0}
p{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--gray);background:var(--surface-2);color:var(--text);font:500 13px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none;color:var(--text);border-color:var(--text-3)}
.btn.primary{background:var(--mint);border-color:var(--mint);color:var(--on-mint);font-weight:600}
.btn.primary:hover{color:var(--on-mint);background:var(--mint-hover)}
.input{min-height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--gray);background:var(--sunken);color:var(--text);font:13px Inter,system-ui,sans-serif;min-width:0}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.grow{flex:1}

/* header */
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text);font-weight:650;font-size:17px}
.brand:hover{color:var(--text);text-decoration:none}
.logo{color:var(--mint);flex:none}
.tz{display:inline-flex;align-items:center;gap:8px;font-size:13px}

/* state words: a glyph and a word as well as a colour */
.word{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.s-operational{color:var(--mint)}.s-degraded,.s-partial{color:var(--amber)}.s-down{color:var(--red)}.s-maintenance{color:var(--blue)}.s-unknown{color:var(--text-3)}

/* overall */
.overall{padding:22px;display:flex;flex-direction:column;gap:12px;border-color:var(--mint-dim)}
.overall.o-degraded,.overall.o-partial{border-color:var(--amber-line)}
.overall.o-down{border-color:var(--red-line)}
.overall.o-maintenance{border-color:var(--blue-line)}
.overall-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.overall-row .meta{font-size:13px;margin-left:auto}
.disc{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none;color:var(--on-mint)}
.disc.s-operational{background:var(--mint)}.disc.s-degraded,.disc.s-partial{background:var(--amber);color:#1E1508}.disc.s-down{background:var(--red);color:#1A0B0C}.disc.s-maintenance{background:var(--blue);color:#0B1220}.disc.s-unknown{background:var(--line-strong);color:var(--text)}
.note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:var(--amber-soft);border:1px solid var(--amber-line);font-size:13px}
.note-mark{color:var(--amber);font-weight:700}

/* incidents */
.incident{padding:18px;display:flex;flex-direction:column;gap:14px}
.incident .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.incident .head h2 a{color:var(--text)}
.incident .meta{font-size:13px;margin-left:auto}
.incident.i-critical,.incident.i-major{border-color:var(--red-line)}
.incident.i-minor{border-color:var(--amber-line)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.timeline li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px}
.timeline li>div:first-child{display:flex;flex-direction:column;font-size:13px}
.timeline li>div:first-child .faint{font-size:12px}
.timeline p+p{margin-top:8px}
.affected{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.affected li{display:flex;gap:10px;align-items:center}

/* components */
.components{overflow:hidden}
.components .head{display:flex;align-items:center;gap:12px;padding:16px 18px;flex-wrap:wrap}
.components .head>.faint{font-size:13px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-3);margin-left:auto}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;border-radius:2px;display:inline-block}
.comp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:16px 18px;border-top:1px solid var(--line-soft)}
.comp .name{display:flex;flex-direction:column;min-width:0}
.comp .name>span:first-child{font-weight:600}
.comp .name .faint{font-size:12px}
.bars{grid-column:1/-1;display:flex;gap:2px;height:28px;align-items:stretch}
.bars span{flex:1 1 0;border-radius:2px;min-width:2px}
.b-operational{background:var(--mint)}.b-degraded,.b-partial{background:var(--amber)}.b-down{background:var(--red)}.b-maintenance{background:var(--blue)}.b-unknown{background:var(--line-strong)}
.axis{grid-column:1/-1;display:flex;justify-content:space-between;font-size:12px}
.d-short{display:none}

/* lists */
.list{padding:18px;display:flex;flex-direction:column;gap:10px}
.entry{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid var(--line-soft)}
.entry .title{font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.entry .dim,.entry .faint{font-size:13px}
.past{display:flex;flex-direction:column;gap:10px}
.past .head{display:flex;align-items:baseline;gap:10px}
.past .head a{font-size:13px;margin-left:auto}
.past-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.past-row .day{font-weight:600}

/* subscribe */
.subscribe{padding:18px;display:flex;flex-direction:column;gap:14px}
.sub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.inline{display:flex;gap:8px}.inline .input{flex:1}
.feeds{display:flex;gap:12px;min-height:36px;align-items:center}
.slack>summary{list-style:none;align-self:flex-start}
.slack>summary::-webkit-details-marker{display:none}
.slack[open]{display:flex;flex-direction:column;gap:8px}
.check{display:flex;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line-soft)}
.manage{display:flex;flex-direction:column;gap:6px}
.actions{display:flex;gap:10px;margin-top:10px}

.foot{font-size:12px;display:flex;gap:16px;flex-wrap:wrap}
.foot .grow-text{margin-left:auto}

@media (max-width:640px){
  .wrap{padding:20px 16px 40px}
  .bars{gap:1px}
  .comp{grid-template-columns:1fr}
  .timeline li,.past-row{grid-template-columns:1fr;gap:2px}
  .overall-row .meta,.incident .meta,.legend,.foot .grow-text{margin-left:0}
  .bars span:nth-child(-n+60){display:none}
  .d-long{display:none}.d-short{display:inline}
}