:root{
  --bg:#14161a;
  --card:#191c21;
  --card2:#1e2229;
  --grid:#2a2f37;
  --grid-soft:rgba(42,47,55,.5);
  --txt:#e8eaed;
  --dim:#8b939e;
  --g:#3ba55d;
  --y:#d9a012;
  --r:#d83b3b;
  --n:#23272e;
  --now:#ff4d6d;
  /* eilutės aukštis prisitaiko prie ekrano aukščio: visa para telpa be slinkimo */
  --row:clamp(12px, calc((100vh - 220px) / 96), 15px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* turinys centruojamas ir neleidžiamas per visą 27" plotį */
.page{
  max-width:780px;margin:0 auto;
  padding:calc(10px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
}

/* ---------- header ---------- */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 2px 10px}
h1{font-size:17px;font-weight:600;margin:0;letter-spacing:.2px}
.sub{font-size:11px;color:var(--dim);margin-top:2px}
.status{font-size:11px;color:var(--dim);white-space:nowrap}
.status.stale{color:var(--y)}

/* ---------- legenda ---------- */
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--dim);margin:0 2px 12px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.sw{width:10px;height:10px;border-radius:2px;display:inline-block}

/* ---------- dienų išdėstymas ---------- */
.days{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:center}
.day-card{
  flex:0 1 350px;min-width:280px;max-width:350px;background:var(--card);
  border:1px solid var(--grid);border-radius:12px;overflow:hidden;
}
.day-head{padding:9px 12px 8px;background:var(--card2);border-bottom:1px solid var(--grid)}
.day-head .dow{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--dim)}
.day-head .line{display:flex;align-items:baseline;gap:8px;margin-top:1px}
.day-head .num{font-size:19px;font-weight:600}
.day-head .sum{font-size:11px;color:var(--dim);margin-top:3px}
.day-head .sum b{font-weight:600;color:#c8ced6}
.badge{font-size:10px;padding:1px 6px;border-radius:20px;background:#2b3a2f;color:#8ede9f;font-weight:600}
.badge.tomorrow{background:#2b3340;color:#9fc2e8}

.body{display:grid;grid-template-columns:40px 1fr;padding:6px 8px 8px 0}
.axis{position:relative}
.axis .t{position:absolute;right:5px;transform:translateY(-50%);font-size:9px;color:var(--dim);font-variant-numeric:tabular-nums}
.grid{position:relative;border-left:1px solid var(--grid)}
.row{display:flex;height:var(--row);border-top:1px solid var(--grid-soft)}
.row:hover{outline:1px solid rgba(255,255,255,.4);outline-offset:-1px;z-index:4}
.row.first{border-top:none}
.row.hour{border-top-color:var(--grid)}
.half{flex:1 1 50%;min-width:0}
.half:first-child{margin-right:2px}
.half.g{background:var(--g)} .half.y{background:var(--y)} .half.r{background:var(--r)} .half.n{background:var(--n)}
/* dešinė pusė: absoliutaus lygio spalva + smulkus to sloto kainos skaičius */
.half.abs{
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:5px;overflow:hidden;
  font-size:clamp(7px, calc(var(--row) * .68), 10px);
  font-weight:600;letter-spacing:-.2px;
  font-variant-numeric:tabular-nums;
  color:rgba(0,0,0,.78);
}
.half.abs.n{color:transparent}
.now{position:absolute;left:0;right:0;height:2px;background:var(--now);z-index:6;pointer-events:none}
.now::after{content:"";position:absolute;right:-6px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--now)}
.unpub{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#c8ced6;background:rgba(20,22,26,.82);text-align:center;padding:10px;
  line-height:1.45;
}

/* ---------- poraštė ---------- */
.foot{margin:12px 2px 0;font-size:10.5px;color:var(--dim);line-height:1.5}
.loading{font-size:12px;color:var(--dim);padding:20px}

/* ---------- telefonas: dvi dienos greta, kompaktiška ---------- */
@media (max-width:640px){
  :root{--row:clamp(9px, calc((100vh - 250px) / 96), 11px)}
  .page{padding:8px 8px calc(10px + env(safe-area-inset-bottom))}
  h1{font-size:15px}
  .sub{font-size:9.5px}
  .legend{font-size:9.5px;gap:4px 8px;margin-bottom:8px}
  .days{flex-direction:row;flex-wrap:nowrap;gap:6px}
  .day-card{flex:1 1 0;min-width:0;border-radius:9px}
  .day-head{padding:6px 7px}
  .day-head .dow{font-size:8px;letter-spacing:.4px}
  .day-head .num{font-size:14px}
  .day-head .sum{font-size:8.5px;line-height:1.35;margin-top:2px}
  .badge{font-size:8px;padding:0 4px}
  .body{grid-template-columns:20px 1fr;padding:4px 4px 6px 0}
  .axis .t{font-size:7px;right:2px}
  .axis .t .mm{display:none}
  .axis .t:nth-child(even){display:none}
  .foot{font-size:9px}
  .unpub{font-size:10px}
}