/* 2.0.4 — compact world clocks, isolated from the dashboard's existing widgets. */
.masthead { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:20px; padding-bottom:0; }
.world-clocks { display:grid; grid-template-columns:1.5fr repeat(4,1fr); align-items:center; width:clamp(600px,calc(65vw - 260px),980px); font-variant-numeric:tabular-nums; }
.world-clock { min-width:0; text-align:center; padding:0 12px; }
.world-clock + .world-clock { border-left:1px solid var(--stroke); }
.world-clock-city { display:block; color:var(--muted); font-size:10px; line-height:1.2; font-weight:650; letter-spacing:1px; text-transform:uppercase; white-space:nowrap; }
.world-clock-local { font-size:8px; letter-spacing:.5px; margin-left:4px; opacity:.8; }
.world-clock time { display:block; font-size:26px; line-height:1.1; font-weight:500; letter-spacing:.6px; margin:2px 0; white-space:nowrap; }
.world-clock p { color:var(--muted); font-size:10px; line-height:1.2; white-space:nowrap; }
.world-clock-primary .world-clock-city, .world-clock-primary time { color:var(--teal); }
.world-clock-primary time { font-size:32px; }
.header-actions { min-width:0; }
@media (min-width:1321px) and (max-height:850px) {
  .world-clock time { font-size:23px; margin:1px 0; }
  .world-clock-primary time { font-size:28px; }
  .world-clock-city { font-size:9px; }
  .world-clock p { font-size:9px; }
}
@media (min-width:1600px) and (min-height:950px) {
  .world-clock time { font-size:30px; }
  .world-clock-primary time { font-size:37px; }
  .world-clock-city, .world-clock p { font-size:11px; }
}
/* Give the clocks their own row before branding and controls become cramped. */
@media (max-width:1320px) {
  .masthead { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand actions" "clocks clocks"; gap:16px; }
  .brand { grid-area:brand; min-width:0; }
  .header-actions { grid-area:actions; justify-content:flex-end; }
  .world-clocks { grid-area:clocks; width:min(100%,920px); justify-self:center; }
}
/* The original desktop grid fixes the header height; let this two-row range grow. */
@media (min-width:1121px) and (max-width:1320px) {
  .dashboard { height:auto; grid-template-rows:auto minmax(820px,1fr) 22px; }
  .dashboard:has(.network-notice:not([hidden])) { height:auto; grid-template-rows:auto auto minmax(820px,1fr) 22px; }
}
@media (max-width:740px) {
  .masthead { grid-template-columns:minmax(0,1fr); grid-template-areas:"brand" "clocks" "actions"; gap:16px; }
  .header-actions { justify-content:flex-start; flex-wrap:wrap; }
  .world-clocks { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:12px; }
  .world-clock-primary { grid-column:1/-1; padding-bottom:10px; border-bottom:1px solid var(--stroke); }
  .world-clock-primary + .world-clock { border-left:0; }
  .world-clock { padding:0 5px; }
  .world-clock-city { font-size:9px; letter-spacing:.4px; }
  .world-clock-local { font-size:8px; }
  .world-clock time { font-size:21px; letter-spacing:0; }
  .world-clock-primary time { font-size:32px; }
  .world-clock p { font-size:8px; white-space:normal; min-height:2.8em; }
  .world-clock-primary p { font-size:10px; min-height:0; }
}
@media (max-width:359px) {
  .world-clock { padding:0 3px; }
  .world-clock time { font-size:18px; }
  .world-clock-primary time { font-size:21px; }
}