/* ==========================================================================
   Time zone converter
   The controls read as one sentence across the top — "when it is [time] on
   [date] in [place]" — and everything below is the answer. One row per place,
   with the hour large enough to read at a glance and the offset, the daylight
   saving and the difference sitting quietly underneath the city.
   ========================================================================== */

.tz-panel{padding:22px 20px;}

/* The sentence. It wraps rather than shrinking: a time field squeezed to
   nothing is worse than one on its own line. */
.tz-top{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;
}
.tz-top .ci{margin-bottom:0;}
.tz-top .ci-when{flex:1 1 260px;min-width:220px;}
.tz-top .ci-where{flex:2 1 300px;min-width:220px;}
/* Level with the bottom of the fields beside it, not with their labels. */
.tz-top .btn{margin-bottom:1px;}

.tz-note{margin:12px 0 0;}

/* ---------- the answer ---------- */

.tz-rows{display:flex;flex-direction:column;gap:10px;margin:20px 0 0;}

.tz-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:16px;
  padding:13px 15px;
  background:var(--surface-2);
  border:1px solid var(--rule);border-radius:var(--radius-sm);
}
/* The place they typed the time into. Tinted rather than labelled twice --
   though it carries the words as well, because colour alone is not a label. */
.tz-row.is-base{background:var(--accent-soft);border-color:transparent;}

.tz-place{min-width:0;}
.tz-place strong{
  display:block;font-size:1rem;font-weight:600;color:var(--ink);
  line-height:1.3;overflow-wrap:anywhere;
}
.tz-place span{
  display:block;margin-top:3px;
  font-size:.8rem;color:var(--ink-3);line-height:1.45;
}

.tz-time{text-align:right;}
.tz-time strong{
  display:block;
  font-family:var(--f-mono);font-size:1.5rem;font-weight:600;
  color:var(--ink);line-height:1.1;letter-spacing:-.01em;
}
.tz-row.is-base .tz-time strong{color:var(--accent);}
.tz-time span{
  display:block;margin-top:4px;
  font-size:.8rem;color:var(--ink-3);white-space:nowrap;
}
/* A row that lands on another date is the thing people miss, so it is the one
   piece of this that is allowed to shout. */
.tz-time span.shift{color:var(--accent);font-weight:600;}

/* The clock-change warning, on its own line under both columns. It only
   appears when the change is within a month of the date being asked about,
   which is the window in which it is the reason something goes wrong. */
.tz-warn{
  grid-column:1 / -1;margin:2px 0 0;
  font-size:.8rem;font-weight:600;color:var(--warn);line-height:1.45;
}
.tz-row.is-base .tz-warn{color:var(--ink-2);}

/* Keeps the hours in a straight line down the page: every row ends in the
   same 28px, whether or not it has a button in it. */
.tz-gap{display:block;width:28px;}

.tz-drop{
  width:28px;height:28px;flex-shrink:0;
  display:grid;place-items:center;
  background:transparent;border:1px solid transparent;border-radius:50%;
  color:var(--ink-3);font-size:1.15rem;line-height:1;cursor:pointer;
}
.tz-drop:hover{background:var(--surface-3);color:var(--ink);}
.tz-drop:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

/* ---------- adding another ---------- */

.tz-add{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--rule);
}
.tz-add select{
  flex:1 1 240px;min-width:0;
  padding:11px 12px;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink);
  font-family:var(--f-ui);font-size:.94rem;
}
.tz-add select:focus{outline:none;border-color:var(--accent);}

#msgArea:not(:empty){margin-top:16px;}

@media (max-width:560px){
  .tz-panel{padding:18px 15px;}
  /* One control per line, and the button full width rather than a phrase
     floating below the fields with nothing to say where it starts. */
  .tz-top{gap:12px;}
  .tz-top .ci-when,.tz-top .ci-where{flex:1 1 100%;min-width:0;}
  .tz-top .btn{width:100%;justify-content:center;margin-bottom:0;}
  /* The date needs more room than the hour: ten characters against five, and
     a picker icon of its own to sit beside. An even split puts the calendar
     glyph on top of the year. */
  .tz-top .ci-pair{grid-template-columns:1fr 1.2fr;gap:8px;}
  .tz-top .ci-pair input{font-size:.96rem;padding-left:10px;padding-right:10px;}
  .tz-row{gap:12px;padding:12px;}
  .tz-time strong{font-size:1.35rem;}
}

/* Below this the two fields cannot both keep their digits: the time input has
   a wide intrinsic minimum of its own ("09:55 p. m."), and what gives way is
   the year on the date. One per line rather than a date reading "07/09". */
@media (max-width:400px){
  .tz-top .ci-pair{grid-template-columns:1fr;gap:10px;}
}