/* The day band's skin — see components/day-band.js for what it draws and why.
 *
 * Every selector starts `band-` (the same rule ui.css keeps: nothing here is
 * global), state rides on the block (`.band-block.is-premium`), never a bare
 * `.is-*`, and every colour and size is a token. Block geometry — left and
 * width percentages — is inline from the component, because the numbers are
 * the data. */

.band {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-slot);
  background: var(--panel);
}

.band--hero { height: var(--band-hero); }
.band--compact { height: var(--band-compact); }
.band--editor { height: var(--band-editor); }

.band-block {
  position: absolute;
  top: var(--space-1);
  bottom: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  padding: 0 var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-slot);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--size-micro);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
}

/* Only a block that answers a press may look pressable; compact bands render
 * spans, so this can only ever reach hero and editor blocks — both of which
 * fill a band that clears the tap floor. */
button.band-block { cursor: pointer; }
button.band-block:hover { border-color: var(--ink); }

.band--compact .band-block { font-size: var(--size-kicker); }

/* The editor block stacks its label over whatever the admin pass puts under
 * it (seat counts); 72px is the room that costs. */
.band--editor .band-block { flex-direction: column; }

.band-block-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- tier tint: how staffed the block is, in the app's one vocabulary ------
 * Keys are coverage.js's levelKey — the server decides the level, coverage.js
 * names it, this only paints it. `none` is a block with no coverage to speak
 * of (the editor's, a closed day's): neutral, so absence never reads as
 * alarm. */

.band-level--none { background: var(--card); border-color: var(--line); color: var(--soft); }
.band-level--strong,
.band-level--covered { background: var(--live-bg); border-color: var(--live); color: var(--live); }
.band-level--thin { background: var(--soon-bg); border-color: var(--soon); color: var(--soon); }
.band-level--critical,
.band-level--empty { background: var(--gap-bg); border-color: var(--gap); color: var(--gap); }

/* The 2× mark stays in the premium family whatever tier colours the block, so
 * "counts double" and "how staffed" read as two facts, not one. */
.band-block.is-premium .band-prem {
  flex: none;
  color: var(--t-prem-deep);
  font-weight: var(--weight-bold);
  font-size: var(--size-kicker);
}

/* A block cut at midnight: the flat edge says "continues past the end of this
 * drawing" — both halves share one shift_id in the data. */
.band-block--cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.band-block--cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Where "now" is, when the band shows today. Overhangs the frame so it reads
 * as a tick against the whole day, not a stripe inside one block; drawn last,
 * so it needs no ladder rung to win. */
.band-now {
  position: absolute;
  top: calc(-1 * var(--space-1));
  bottom: calc(-1 * var(--space-1));
  width: 2px;
  background: var(--ink);
  pointer-events: none;
}

/* The clock ruler under hero and editor bands — five ticks, ends anchored,
 * middle three centred over their hours. Compact never carries it (the phone
 * day header already names the day and the band is 34px). */
.band-framed { display: block; }

.band-ruler {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-size: var(--size-kicker);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

.band-ruler-tick { flex: none; }