/* digotech/tz-planner: city buttons + board (two clocks, 24-hour band, legend, best meeting time). */
.dg-tz{
  --dg-tz-clock: clamp(34px, 4.4vw, 52px);
  --dg-tz-track: -0.03em;
  --dg-tz-cell-h: 40px;
  --dg-tz-cell-r: 3px;
  --dg-tz-cell-gap: 2px;
  --dg-tz-now-over: 6px;
  --dg-tz-lbl: 10px;
  --dg-tz-key: 12px;
  --dg-tz-key-gap: 6px;
  --dg-tz-diff-pad: 6px 10px;
  --dg-tz-theirs: color-mix(in oklch, var(--ink-3) 40%, var(--paper-3));
  display:grid;gap:var(--s-4);min-width:0
}
.dg-tz > *,.dg-tz__board > *{margin:0}
.dg-tz__cities{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.dg-tz__city{min-height:var(--ctl-s);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--r);background:transparent;color:var(--ink);cursor:pointer;font:500 var(--t-s)/1 var(--font-body);
  transition:border-color var(--dur) var(--ease-press),background-color var(--dur) var(--ease-press),color var(--dur) var(--ease-press)}
.dg-tz__city:hover{border-color:var(--ink-2)}
.dg-tz__city[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent-fill);color:var(--accent)}

.dg-tz__board{display:grid;gap:var(--s-5);padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card);container-type:inline-size}
.dg-tz__clocks{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s-4);align-items:center}
.dg-tz__clock{display:grid;gap:var(--dg-tz-cell-gap)}
.dg-tz__clock b{align-self:end;font:800 var(--dg-tz-clock)/1 var(--font-display);letter-spacing:var(--dg-tz-track);font-variant-numeric:tabular-nums;color:var(--ink)}
.dg-tz__clock span{font-size:var(--t-s);color:var(--ink-2)}
.dg-tz__you{text-align:right}
.dg-tz__diff{padding:var(--dg-tz-diff-pad);border:1px solid var(--accent-fill);border-radius:var(--wp--preset--border-radius--radius-full);font:500 var(--t-xs)/1 var(--font-mono);color:var(--accent);white-space:nowrap}
.dg-tz__diff:empty{visibility:hidden}

.dg-tz__hours,.dg-tz__lbl{display:grid;grid-template-columns:repeat(24,minmax(0,1fr))}
.dg-tz__hours{gap:var(--dg-tz-cell-gap)}
.dg-tz__hours i{position:relative;height:var(--dg-tz-cell-h);border-radius:var(--dg-tz-cell-r);background:var(--paper-3)}
.dg-tz__hours i.is-theirs,.dg-tz__legend i.is-theirs{background:var(--dg-tz-theirs)}
.dg-tz__hours i.is-ours,.dg-tz__legend i.is-ours{background:var(--accent-tint)}
.dg-tz__hours i.is-both,.dg-tz__legend i.is-both{background:var(--accent-fill)}
.dg-tz__hours i.is-now::after{content:"";position:absolute;left:50%;top:calc(var(--dg-tz-now-over) * -1);bottom:calc(var(--dg-tz-now-over) * -1);width:var(--dg-tz-cell-gap);background:var(--ink);transform:translateX(-50%)}
.dg-tz__lbl{margin-top:var(--s-2);font:500 var(--dg-tz-lbl)/1 var(--font-mono);color:var(--ink-3)}
.dg-tz__lbl span:nth-child(odd){visibility:hidden}

.dg-tz__legend{display:flex;flex-wrap:wrap;gap:var(--s-4);font-size:var(--t-xs);color:var(--ink-2)}
.dg-tz__legend span{display:inline-flex;align-items:center;gap:var(--dg-tz-key-gap)}
.dg-tz__legend i{display:inline-block;width:var(--dg-tz-key);height:var(--dg-tz-key);border-radius:var(--dg-tz-cell-r)}
.dg-tz__best{padding:var(--s-4);border-radius:var(--r-pill);background:var(--accent-tint);font-size:var(--t-s);color:var(--ink-2)}
.dg-tz__best:empty{display:none}
.dg-tz__best b{color:var(--accent)}

@container (max-width: 440px){
  .dg-tz__clocks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-tz__diff{grid-column:1 / -1;justify-self:start;order:3}
}
@media (max-width: 767px){
  .dg-tz{--dg-tz-cell-h:28px}
  .dg-tz__clocks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-tz__diff{grid-column:1 / -1;justify-self:start;order:3}
}
@media (max-width: 374px){
  .dg-tz__board{padding:var(--s-4)}
}
@media (prefers-reduced-motion: reduce){
  .dg-tz__city{transition:none}
}