/* app.css — page glue, written by Developer.
   Loads after Designer's base.css and theme-a.css, so it only fills gaps and never
   restyles the look. Colour, type and spacing belong in Designer's files.

   Why each rule is here:
   1. [hidden] — a couple of Designer's panels set display:grid, which would beat the
      hidden attribute and show an empty picker.
   2. --night-w — base.css hard-codes the night band as 0-25% of the day. On a DST
      Sunday the axis day is not 24 h, so 06:00 no longer sits at 25%. weekgrid.js sets
      --night-w for each day column; these rules let it through.
   3. cells are clickable and keyboard-focusable: the week grid is the main control.
   4. .selectline — where the chosen time sits, next to .nowline (which means "now").
   5. chip reorder: two clear buttons instead of one drag handle, so it works by
      keyboard and by finger; Designer's own toolbar text says "↑ ↓ buttons".
   6. small tidy-ups for the detail cards, the add-city list and the day buttons. */

[hidden] { display: none !important; }

.cell::before { width: var(--night-w, 25%); }
.cell::after { left: var(--night-w, 25%); }
.track .night { width: var(--night-w, 25%); }

.cell { cursor: pointer; }
.cell:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.selectline,
.track .selectline {
  position: absolute; top: 0; bottom: 0; left: var(--at);
  border-left: 2px dashed var(--ink); opacity: .5;
}

.chip .move { min-width: 20px; min-height: 20px; text-align: center; line-height: 1.2; font-size: 11px; }
.chip .move:disabled { opacity: .3; cursor: default; }

#picker { margin-top: var(--space-2); }
#picker .btn { font-size: var(--t-13); padding: 6px 8px; }

.detail li {
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 8px 10px; font-size: var(--t-13);
}
.detail li.out { opacity: .7; }
.detail .clock { font-family: var(--font-num); }
.detail .state { color: var(--muted); font-size: var(--t-12); }

.daychips button.d { all: unset; cursor: pointer; min-width: 32px; min-height: 32px; text-align: center; }