/* Desk dashboard. The page is a fixed-height design (576px tall, scaled to the window height)
   whose width stretches to fill the screen: app.js sets #stage's size and scale, and the
   columns below share the available width with flexbox. */

/* Inter (latin subset, self-hosted). "bold" maps to the SemiBold file. */
@font-face { font-family: Inter; font-weight: 400; src: url(fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; src: url(fonts/inter-600.woff2) format("woff2"); }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #0B0F14;
}
body {
  font-family: Inter, system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: #F4F6F8;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
* { box-sizing: border-box; }
button { font-family: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

#stage { position: absolute; left: 0; top: 0; width: 1024px; height: 576px; overflow: hidden; transform-origin: 0 0; }
#app { position: absolute; left: 14px; right: 14px; top: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 10px; }

.view { display: none; flex: 1; min-height: 0; }
.view.on { display: flex; flex-direction: column; gap: 10px; }

.card { position: relative; overflow: hidden; background: #121821; border: 1px solid #252C36; border-radius: 14px; }

/* ---------- dashboard header ---------- */
#hdr { flex: none; height: 128px; display: flex; gap: 10px; }
#clockbox { flex: 340 1 0; min-width: 300px; }
.clock { position: absolute; left: 20px; top: 6px; white-space: nowrap; }
#clk { font-size: 86px; line-height: 92px; font-weight: bold; letter-spacing: -2px; }
#ampm { font-size: 28px; font-weight: bold; color: #C9D1DB; margin-left: 8px; }
.date { position: absolute; left: 22px; top: 90px; font-size: 21px; line-height: 26px; color: #929CAA; white-space: nowrap; }

#wx { flex: 646 1 0; min-width: 0; }
.wxn { position: absolute; left: 16px; top: 8px; width: 188px; height: 110px; overflow: hidden; }
.wx-l { position: absolute; left: 0; top: 0; font-size: 15px; line-height: 18px; color: #929CAA; white-space: nowrap; }
.wx-l svg { width: 16px; height: 16px; vertical-align: middle; margin: -3px 5px 0 0; fill: none; stroke: #929CAA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wx-ic { position: absolute; left: 0; top: 20px; width: 58px; height: 58px; }
.wx-ic svg { width: 58px; height: 58px; display: block; }
.wx-t { position: absolute; left: 70px; top: 16px; font-size: 62px; line-height: 66px; font-weight: bold; letter-spacing: -1px; white-space: nowrap; }
.wx-c { position: absolute; left: 0; top: 76px; font-size: 17px; line-height: 20px; color: #C9D1DB; white-space: nowrap; }
.wx-m { position: absolute; left: 0; top: 96px; font-size: 14px; line-height: 18px; color: #929CAA; white-space: nowrap; }
.wxh { position: absolute; left: 212px; right: 8px; top: 8px; height: 110px; display: flex; border-left: 1px solid #252C36; padding-left: 4px; }
.fd { flex: 1; min-width: 0; height: 100%; text-align: center; padding-top: 5px; border-radius: 10px; }
.fd.first { background: #1A2330; }
.fd .dn { font-size: 15px; line-height: 20px; color: #929CAA; }
.fd svg { width: 32px; height: 32px; display: block; margin: 3px auto; }
.fd .dh2 { font-size: 22px; line-height: 24px; font-weight: bold; }
.fd .dl2 { font-size: 17px; line-height: 20px; color: #929CAA; }
.ht { font-size: 15px; line-height: 20px; color: #929CAA; }
.hv { font-size: 24px; line-height: 28px; font-weight: bold; }

/* ---------- dashboard columns ---------- */
#main { flex: 1; min-height: 0; display: flex; gap: 10px; }
.c1, .c2 { flex: 312 1 0; min-width: 0; }
.c3 { flex: 352 1 0; min-width: 0; }

.ch { position: absolute; left: 14px; right: 14px; top: 12px; height: 30px; line-height: 30px; white-space: nowrap; }
.ch svg { width: 26px; height: 26px; vertical-align: middle; margin: -3px 8px 0 0; }
.cn { font-size: 23px; font-weight: bold; }
.cr { float: right; font-size: 15px; color: #929CAA; }
.btn {
  float: right; height: 30px; padding: 0 14px; margin: 0;
  font-size: 15px; line-height: 28px; color: #F4F6F8;
  background: #1A222D; border: 1px solid #323C49; border-radius: 8px;
}

/* ---------- usage gauges ---------- */
.gauge { position: absolute; left: 50%; margin-left: -96px; top: 44px; width: 192px; height: 192px; }
.gauge svg { display: block; width: 100%; height: 100%; margin: 0; }
.gauge .trk { stroke: #1F2833; }
.gauge .gl { fill: #929CAA; font-size: 15px; font-weight: bold; letter-spacing: 1px; }
.gauge .gv { fill: #F4F6F8; font-size: 40px; font-weight: bold; }

.u-claude .rs { stroke: #F47A4A; }
.u-claude .rw { stroke: #D9A07C; }
.u-codex .rs { stroke: #6676FF; }
.u-codex .rw { stroke: #A58CFF; }

.sw { display: inline-block; vertical-align: middle; border-radius: 8px; }
.sws { width: 16px; height: 16px; margin: -3px 8px 0 0; }
.sww { width: 12px; height: 12px; margin: -3px 10px 0 2px; }
.u-claude .sws { background: #F47A4A; }
.u-claude .sww { background: #D9A07C; }
.u-codex .sws { background: #6676FF; }
.u-codex .sww { background: #A58CFF; }

.lg { position: absolute; left: 14px; right: 14px; top: 244px; }
.lr { height: 36px; line-height: 36px; white-space: nowrap; }
.ln { display: inline-block; width: 76px; font-size: 18px; color: #C9D1DB; }
.lp { display: inline-block; width: 64px; font-size: 26px; font-weight: bold; }
.lx { float: right; font-size: 15px; color: #929CAA; }

/* ---------- next up (dashboard) ---------- */
.tl { position: absolute; left: 14px; right: 14px; top: 50px; bottom: 10px; overflow: hidden; }
.ev { position: relative; padding: 5px 8px 5px 30px; margin-bottom: 2px; border: 1px solid transparent; }
.ev:before { content: ""; position: absolute; left: 11px; top: 20px; bottom: -8px; width: 2px; background: #252C36; }
.ev.last:before { display: none; }
.ev .dot { position: absolute; left: 6px; top: 12px; width: 12px; height: 12px; border-radius: 6px; }
.et { font-size: 14px; line-height: 17px; color: #929CAA; white-space: nowrap; }
.rel { float: right; font-size: 15px; font-weight: bold; }
.eti { font-size: 19px; line-height: 22px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eloc { font-size: 14px; line-height: 16px; color: #929CAA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.first { background: #1A2330; border-color: #2B3645; border-radius: 10px; padding-top: 7px; padding-bottom: 7px; }
.ev.first .dot { top: 14px; width: 14px; height: 14px; left: 5px; border-radius: 7px; }
.ev.first .et { color: #C9D1DB; }
.ev.first .eti { font-size: 22px; line-height: 26px; }
.ev.first .rel { font-size: 17px; }
.none { padding: 24px 4px; font-size: 18px; color: #929CAA; }

/* ---------- secondary views ---------- */
.vbar { flex: none; position: relative; height: 36px; }
.vt { font-size: 24px; line-height: 36px; font-weight: bold; padding-left: 4px; }
.vclk { position: absolute; right: 4px; top: 0; font-size: 20px; line-height: 36px; color: #929CAA; white-space: nowrap; }
.vbody { flex: 1; min-height: 0; display: flex; gap: 10px; }

/* nextcal */
.hero { flex: 330 1 0; min-width: 0; }
.hl { position: absolute; left: 20px; top: 20px; font-size: 15px; letter-spacing: 1px; color: #929CAA; font-weight: bold; }
.hti { position: absolute; left: 20px; right: 20px; top: 48px; height: 80px; font-size: 32px; line-height: 38px; font-weight: bold; overflow: hidden; }
.htm { position: absolute; left: 20px; right: 20px; top: 134px; font-size: 19px; color: #C9D1DB; }
.hrel { position: absolute; left: 20px; right: 20px; top: 186px; font-size: 60px; line-height: 66px; font-weight: bold; color: #4CC38A; white-space: nowrap; }
.hloc { position: absolute; left: 20px; right: 20px; top: 262px; font-size: 20px; color: #C9D1DB; }
.hcnt { position: absolute; left: 20px; right: 20px; bottom: 20px; font-size: 17px; color: #929CAA; }
.agenda { flex: 656 1 0; min-width: 0; }
.ag { position: absolute; left: 12px; right: 12px; top: 8px; bottom: 8px; overflow: hidden; }
.dh { height: 30px; line-height: 38px; font-size: 14px; letter-spacing: 1px; font-weight: bold; color: #929CAA; text-transform: uppercase; padding-left: 10px; }
.ar { position: relative; height: 54px; border-radius: 10px; border: 1px solid transparent; }
.ar.first { background: #1A2330; border-color: #2B3645; }
.at { position: absolute; left: 10px; top: 6px; width: 130px; }
.at b { display: block; font-size: 20px; line-height: 24px; }
.at span { display: block; font-size: 14px; line-height: 17px; color: #929CAA; }
.ar .dot { position: absolute; left: 150px; top: 19px; width: 12px; height: 12px; border-radius: 6px; }
.ai { position: absolute; left: 178px; right: 110px; top: 6px; }
.ati { font-size: 20px; line-height: 24px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aloc { font-size: 14px; line-height: 17px; color: #929CAA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arel { position: absolute; right: 12px; top: 14px; font-size: 20px; font-weight: bold; }

/* usage (large) */
.ucard { flex: 1; min-width: 0; }
.ucard .ch { top: 14px; }
.ucard .cn { font-size: 26px; }
.ugrp { position: absolute; left: 14px; right: 14px; top: 64px; display: flex; justify-content: center; align-items: flex-start; gap: 22px; }
.gauge.big { position: relative; left: auto; top: auto; margin: 6px 0 0; flex: 0 1 310px; width: 310px; height: auto; aspect-ratio: 1; min-width: 0; }
.gauge.big .gl { font-size: 14px; }
.ud { flex: none; width: 134px; }
.ub { height: 160px; margin-bottom: 16px; }
.ul { font-size: 15px; line-height: 20px; font-weight: bold; letter-spacing: 1px; color: #C9D1DB; white-space: nowrap; }
.uv { font-size: 42px; line-height: 50px; font-weight: bold; }
.us { font-size: 15px; line-height: 20px; color: #929CAA; white-space: nowrap; }
.ut { font-size: 22px; line-height: 26px; font-weight: bold; white-space: nowrap; }

/* weather (large) */
.wnow { flex: 320 1 0; min-width: 0; }
.wn-ic { position: absolute; left: 20px; top: 22px; width: 96px; height: 96px; }
.wn-ic svg { width: 96px; height: 96px; display: block; }
.wn-t { position: absolute; left: 130px; top: 22px; font-size: 90px; line-height: 96px; font-weight: bold; }
.wn-c { position: absolute; left: 20px; top: 134px; font-size: 26px; line-height: 30px; font-weight: bold; }
.wn-l { position: absolute; left: 20px; top: 168px; font-size: 18px; color: #929CAA; }
.wn-h { position: absolute; left: 20px; top: 200px; font-size: 22px; font-weight: bold; }
.wn-d { position: absolute; left: 20px; right: 20px; top: 252px; }
.wn-r { height: 44px; line-height: 44px; border-top: 1px solid #252C36; font-size: 18px; color: #929CAA; }
.wn-r b { float: right; color: #F4F6F8; font-size: 20px; }
.wcol { flex: 666 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.whr { flex: none; height: 196px; }
.wdy { flex: 1; min-height: 0; }
.wh { position: absolute; left: 16px; top: 12px; font-size: 18px; line-height: 24px; font-weight: bold; color: #C9D1DB; }
.whl { position: absolute; left: 8px; right: 8px; top: 48px; bottom: 6px; }
.wdl { position: absolute; left: 8px; right: 8px; top: 48px; bottom: 6px; }
.wc { float: left; width: 12.5%; text-align: center; }
.wc .ht { font-size: 16px; }
.wc svg { width: 46px; height: 46px; display: block; margin: 8px auto 6px; }
.wc .hv { font-size: 25px; }
.wd { float: left; width: 14.28%; text-align: center; padding-top: 4px; }
.wd .dn { font-size: 18px; line-height: 26px; font-weight: bold; }
.wd svg { width: 50px; height: 50px; display: block; margin: 8px auto; }
.wd .dh2 { font-size: 24px; line-height: 30px; font-weight: bold; }
.wd .dl2 { font-size: 19px; line-height: 26px; color: #929CAA; }

/* "tap for fullscreen" hint (touch screens only; app.js toggles .off) */
#fs {
  position: absolute; left: 50%; top: 0; z-index: 5; transform: translateX(-50%);
  padding: 0 12px; line-height: 17px; font-size: 12px; color: #C9D1DB; white-space: nowrap;
  background: #222C3A; border: 1px solid #34414F; border-top: 0; border-radius: 0 0 8px 8px; pointer-events: none;
}
#fs.off { display: none; }

/* ---------- bottom nav ---------- */
#nav { flex: none; height: 62px; display: flex; background: #121821; border: 1px solid #252C36; border-radius: 14px; padding: 5px; }
.tab {
  flex: 1; height: 50px; margin: 0; padding: 0;
  font-size: 19px; line-height: 48px; color: #929CAA; text-align: center;
  background: transparent; border: 1px solid transparent; border-radius: 10px; outline: none;
}
.tab svg {
  width: 26px; height: 26px; vertical-align: middle; margin: -3px 8px 0 0;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tab.on { color: #F4F6F8; background: #222C3A; border-color: #34414F; font-weight: bold; }