/* Layout for every page; the colours come from theme.css. The look is the
   Magic site's: one ground, hairlines instead of cards, no shadows, a
   translucent blurred bar on top and, on a phone, tabs at the bottom. */
:root{--mtabs-h:64px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--ground);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.45}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- top bar --------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:6px;height:54px;
  padding:0 max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left));
  background:var(--nav-bg);border-bottom:.5px solid var(--hair);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.brand{display:flex;align-items:center;gap:8px;margin-right:18px;
  font-size:16px;font-weight:700;white-space:nowrap}
/* The glow is Magic's brand mark, not a surface shadow. */
.brand .dot{width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 10px var(--accent)}
.tabs{display:flex;align-self:stretch}
/* The top padding matches the underline, so the label sits in the middle of the bar. */
.tab{display:flex;align-items:center;padding:3px 14px 0;border-bottom:3px solid transparent;
  color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;
  transition:color .15s,background-color .15s}
.tab:hover{color:var(--text);background:var(--nav-hover)}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}
.tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.round{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:38px;
  border:1px solid var(--nav-border);border-radius:50%;background:var(--nav-hover);color:var(--text);
  font:inherit;font-size:16px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s}
.round:hover{color:var(--accent);border-color:var(--accent)}
.round svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* The button shows the theme it switches to. */
html[data-theme="dark"] .round .moon,
html:not([data-theme="dark"]) .round .sun{display:none}

/* ---- page ------------------------------------------------------------ */
.page{max-width:1500px;margin:0 auto;
  padding:22px max(22px,env(safe-area-inset-right)) 40px max(22px,env(safe-area-inset-left))}
.title{font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.3px}
.muted{color:var(--muted)}
.title + .muted{margin-top:6px}

/* ---- home ------------------------------------------------------------ */
/* One column, as a Telegram list: on a wide screen the eye stays on the
   labels at the left instead of travelling to values at the far edge. */
.home{max-width:720px}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* In the title row, so its coming and going never moves the rows below. */
.offline{color:var(--red);font-weight:600;white-space:nowrap}
.sec{padding:16px 0 6px;border-bottom:.5px solid var(--hair)}
.sec h2{font-size:16px;font-weight:700;line-height:1.3;margin-bottom:2px}
.row{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 0}
.row + .row,.bars + .row{border-top:.5px solid var(--hair)}
.row .name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .val{flex:0 0 auto;white-space:nowrap;text-align:right}
.row .sub{margin-left:12px;color:var(--muted)}
.home .dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--dim)}
.home .dot.on{background:var(--green)}
.home .dot.off{background:var(--red)}
.home .bad,.home .bad .sub{color:var(--red)}
.val,.bar,.alerts .when{font-variant-numeric:tabular-nums}

/* The bars share one grid, so every track starts and ends at the same place
   whatever the labels and values; the minimum widths hold the usual values,
   so a number gaining a digit does not shift the tracks. */
.bars{display:grid;grid-template-columns:minmax(4em,max-content) minmax(0,1fr) minmax(7.5em,max-content) minmax(3.2em,max-content);
  align-items:center;column-gap:12px;padding:6px 0 10px}
.bar{display:contents;--c:var(--accent)}
.bar.amber{--c:var(--amber)}
.bar.red{--c:var(--red)}
.bar .label,.bar .detail,.bar .pct{min-height:30px;display:flex;align-items:center;white-space:nowrap}
.bar .detail,.bar .pct{justify-content:flex-end}
.bar .detail{color:var(--muted)}
/* The plain hairline is for browsers without color-mix. */
.track{height:8px;border-radius:4px;overflow:hidden;background:var(--hair);
  background:color-mix(in srgb,var(--c) 18%,transparent)}
/* A little under the 1 s between readings, so each slide ends before the next. */
.fill{display:block;width:0;height:100%;border-radius:4px;background:var(--c);transition:width .8s ease-out}

.alerts{width:100%;border-collapse:collapse}
.alerts td{padding:9px 0;vertical-align:top;border-top:.5px solid var(--hair)}
.alerts tr:first-child td{border-top:0}
/* The time keeps its width; a long alert wraps in its own cell instead. */
.alerts .when{width:1%;padding-right:14px;white-space:nowrap;color:var(--muted)}
.alerts .what{overflow-wrap:anywhere}

/* ---- sign-in, setup and "not set up" -------------------------------- */
.gate,.notice{width:100%;max-width:340px;margin:14vh auto 0}
.gate{display:flex;flex-direction:column;gap:12px}
.notice{text-align:center;color:var(--muted)}
/* 16px keeps iOS from zooming into the field. */
.gate input{height:46px;padding:0 14px;border:1px solid var(--input-border);border-radius:12px;
  background:var(--input-bg);color:var(--text);font:inherit;font-size:16px}
.gate input::placeholder{color:var(--dim)}
.gate input:focus-visible{border-color:var(--accent);outline-offset:0}
.btn{height:46px;border:0;border-radius:12px;background:var(--accent);color:#fff;
  font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.07)}
/* Under the button, so a message never moves the controls. */
.err{color:var(--red);text-align:center}

/* ---- phone: tabs move to a bar at the bottom ------------------------- */
.mtabs{display:none}
@media (max-width:1000px){
  .nav{padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
  .brand{font-size:17px}
  .tabs{display:none}
  .page{padding:16px max(16px,env(safe-area-inset-right)) 32px max(16px,env(safe-area-inset-left))}
  .framed .page{padding-bottom:calc(var(--mtabs-h) + env(safe-area-inset-bottom) + 24px)}
  .bars{column-gap:10px}
  .mtabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
    height:calc(var(--mtabs-h) + env(safe-area-inset-bottom));
    padding:9px max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left));
    background:var(--nav-bg);border-top:.5px solid var(--hair);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  .mtabs a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--muted);font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap}
  .mtabs a.on{color:var(--accent)}
  .mtabs .ic{font-size:26px;line-height:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}