/* ============================================================
   Lifeguard Tracking System
   Visual direction: "lane lines and deck tile"

   The reference points are physical and old: a painted-steel
   natatorium, a mid-century POOL RULES sign, and a ruled paper
   duty ledger on a clipboard. Franklin-gothic body type, bold
   condensed signage type, typewriter figures, square corners,
   ruled rows, no gradients, no floating cards.

   Guard red is reserved exclusively for urgency -- an expired
   certification or an uncovered shift -- so it never goes soft.
   ============================================================ */

:root {
  /* Water and deck */
  --deep: #0a3742; /* painted steel, natatorium trim */
  --deep-2: #082b34;
  --pool: #0f6b72; /* mid-lane water */
  --pool-dark: #0b5157;
  --shallow: #d3e5e7;
  --shallow-2: #edf4f4;
  --tile: #f2f5f5; /* cool tile, not cream */
  --deck: #ffffff;
  --ledger: #faf9f5; /* ruled-paper tint, zebra rows only */

  /* Ink */
  --ink: #14262b;
  --muted: #56696e;
  --faint: #86989c;
  --line: #d9e1e2;
  --line-strong: #a9babd;
  --rule: #7d9296; /* heavy rule under table heads */

  /* Signal -- these three colours carry meaning, nothing else does */
  --rescue: #b3202f; /* wrong right now */
  --rescue-bg: #fbeced;
  --sun: #9a6708; /* wrong soon */
  --sun-bg: #fbf3e2;
  --go: #10645a; /* covered, current, compliant */
  --go-bg: #e4f0ed;

  --radius: 2px;
  --radius-lg: 3px;
  --shadow-pop: 0 10px 30px rgba(10, 55, 66, 0.22);

  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Libre Franklin", "Franklin Gothic Book", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell-w: 232px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tile);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.08;
  margin: 0;
}

h1 {
  font-size: 2.1rem;
}
h2 {
  font-size: 1.45rem;
}
h3 {
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

a {
  color: var(--pool-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--deep);
}

/* Signage label: small, uppercase, condensed. Every column head,
   eyebrow, and field label in the app uses it, which is what
   holds the pool-sign character together. */
.label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--muted);
}

/* Anything countable -- clock times, hours, shift totals -- is set
   in typewriter figures with tabular spacing so columns align. */
.num,
time,
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}

/* --- Lane line -------------------------------------------------
   The signature rule of the interface, drawn as the segmented
   pattern of a floating lane rope. Separates sections, and in the
   schedule bounds each tag's lane. */
.lane-line {
  height: 5px;
  border: 0;
  margin: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--line-strong) 0 13px,
    var(--shallow) 13px 21px
  );
}

/* ============================================================
   App shell
   ============================================================ */

.shell {
  display: grid;
  grid-template-columns: var(--shell-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--deep);
  color: #c5dade;
  padding: 1.15rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  border-right: 1px solid var(--deep-2);
}

.brand {
  display: block;
  padding: 0 1.15rem 0.9rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #16505c;
}
.brand-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-sub {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.62rem;
  color: #6ea3ac;
  margin-top: 0.25rem;
}

.facility-switch {
  padding: 0 1.15rem;
}
.facility-switch select {
  width: 100%;
  background: var(--deep-2);
  color: #fff;
  border: 1px solid #17505c;
  border-radius: var(--radius);
  padding: 0.42rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
}

.nav-group {
  display: flex;
  flex-direction: column;
}
.nav-group .label {
  color: #6ea3ac;
  padding: 0 1.15rem 0.3rem;
  font-size: 0.72rem;
}
.nav-link {
  display: block;
  padding: 0.42rem 1.15rem;
  color: #c5dade;
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 0.93rem;
}
.nav-link:hover {
  background: var(--deep-2);
  color: #fff;
}
.nav-link.is-active {
  background: var(--deep-2);
  color: #fff;
  border-left-color: var(--pool);
  font-weight: 600;
}

.sidebar-foot {
  margin-top: auto;
  padding: 0 1.15rem;
  font-size: 0.83rem;
  color: #85aeb5;
  border-top: 1px solid #16505c;
  padding-top: 0.9rem;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.6rem;
  background: var(--deck);
  border-bottom: 2px solid var(--rule);
}
.topbar .eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--muted);
}

.content {
  padding: 1.4rem 1.6rem 4rem;
  max-width: 1500px;
  width: 100%;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 1.2rem;
}
.page-head p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.93rem;
}

@media (max-width: 860px) {
  .shell {
    grid-template-columns: 1fr;
    /* Header band hugs its content; the page body takes the rest. Without
       this the stretched auto row leaves a tall slab of empty navy. */
    grid-template-rows: auto 1fr;
  }
  .sidebar {
    padding: 0.8rem 0 0;
    gap: 0.7rem;
    /* Grid items default to min-width:auto, which lets the scrolling nav
       rows push the whole page wider than the screen. */
    min-width: 0;
  }
  .brand {
    border-bottom: 0;
    padding-bottom: 0.5rem;
  }
  .sidebar .nav-group .label,
  .sidebar-foot {
    display: none;
  }
  .nav-group {
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    padding: 0 0.85rem;
    scrollbar-width: none;
    border-top: 1px solid #16505c;
  }
  .nav-group::-webkit-scrollbar {
    display: none;
  }
  .nav-link {
    border-left: 0;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
  }
  .nav-link.is-active {
    border-left: 0;
    border-bottom-color: var(--pool);
  }
  .brand,
  .facility-switch {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  .content,
  .topbar {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  h1 {
    font-size: 1.7rem;
  }
}

/* ============================================================
   Surfaces -- panels are ruled boxes, not floating cards
   ============================================================ */

.card {
  background: var(--deck);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}
.card + .card {
  margin-top: 1rem;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.card-head h2,
.card-head h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.grid {
  display: grid;
  gap: 1rem;
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.row-tight {
  gap: 0.35rem;
}
.push-right {
  margin-left: auto;
}

/* Readout: one number that matters, ruled off like a gauge panel. */
.readout {
  background: var(--deck);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--pool);
  border-radius: var(--radius);
  padding: 0.8rem 0.95rem;
}
.readout-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.readout-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 0.4rem;
}
.readout-note {
  font-size: 0.81rem;
  color: var(--faint);
  margin-top: 0.1rem;
}
.readout.is-urgent {
  border-left-color: var(--rescue);
}
.readout.is-urgent .readout-value {
  color: var(--rescue);
}
.readout.is-warn {
  border-left-color: var(--sun);
}
.readout.is-warn .readout-value {
  color: var(--sun);
}
.readout.is-good {
  border-left-color: var(--go);
}

/* ============================================================
   Controls -- stamped, square, signage-lettered
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.34rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--deck);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s linear, border-color 0.1s linear;
}
.btn:hover {
  background: var(--shallow-2);
  border-color: var(--pool);
  color: var(--ink);
}
.btn:disabled,
.btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--pool);
  border-color: var(--pool-dark);
  color: #fff;
}
.btn-primary:hover {
  background: var(--pool-dark);
  border-color: var(--deep);
  color: #fff;
}
.btn-danger {
  background: var(--deck);
  border-color: var(--rescue);
  color: var(--rescue);
}
.btn-danger:hover {
  background: var(--rescue-bg);
  color: var(--rescue);
}
.btn-sm {
  font-size: 0.82rem;
  padding: 0.2rem 0.5rem;
  letter-spacing: 0.06em;
}
.btn-ghost {
  border-color: transparent;
  background: transparent;
}
.btn-ghost:hover {
  background: var(--shallow-2);
  border-color: transparent;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pool);
  outline-offset: 2px;
}

/* Forms -- ruled, label above, like a paper intake form */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-bottom: 0.85rem;
}
.field > label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--deck);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.4rem 0.5rem;
  width: 100%;
}
input[type="date"],
input[type="time"],
input[type="number"] {
  font-family: var(--font-mono);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--pool);
  outline: 2px solid rgba(15, 107, 114, 0.22);
}
.help {
  font-size: 0.8rem;
  color: var(--faint);
}
.errorlist {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  color: var(--rescue);
  font-size: 0.85rem;
}
fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
}
legend {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0 0.35rem;
}

/* ============================================================
   Tags, badges, notices
   ============================================================ */

/* Shift tag chip. Colour comes from the tag record, so a tag a
   manager invents looks native without a code change. */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.08rem 0.38rem;
  border-radius: 2px;
  background: var(--tag-color, var(--muted));
  color: #fff;
  white-space: nowrap;
}
.tag-outline {
  background: transparent;
  color: var(--tag-color, var(--muted));
  border: 1px solid currentColor;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.77rem;
  font-weight: 600;
  padding: 0.08rem 0.42rem;
  border-radius: 2px;
  background: var(--shallow);
  color: var(--deep);
  white-space: nowrap;
}
.badge-danger {
  background: var(--rescue-bg);
  color: var(--rescue);
}
.badge-warn {
  background: var(--sun-bg);
  color: var(--sun);
}
.badge-good {
  background: var(--go-bg);
  color: var(--go);
}
.badge-muted {
  background: var(--tile);
  color: var(--muted);
  border: 1px solid var(--line);
}

.alert {
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--pool);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  background: var(--shallow-2);
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
}
.alert-error {
  border-left-color: var(--rescue);
  background: var(--rescue-bg);
  border-color: #e8c2c6;
}
.alert-warning {
  border-left-color: var(--sun);
  background: var(--sun-bg);
  border-color: #e6d3a8;
}
.alert-success {
  border-left-color: var(--go);
  background: var(--go-bg);
  border-color: #b9d8d1;
}

.messages {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

/* ============================================================
   Tables -- ruled duty ledger
   ============================================================ */

.table-wrap {
  overflow-x: auto;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.data th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  padding: 0.35rem 0.6rem;
  border-bottom: 2px solid var(--rule);
  white-space: nowrap;
}
table.data td {
  padding: 0.44rem 0.6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.data tbody tr:nth-child(even) {
  background: var(--ledger);
}
table.data tbody tr:hover {
  background: var(--shallow-2);
}
table.data td.num,
table.data th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
table.data tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--rule);
  border-bottom: 0;
  background: var(--deck);
}

.empty {
  text-align: center;
  padding: 2.4rem 1rem;
  color: var(--muted);
}
.empty h3 {
  color: var(--ink);
  margin-bottom: 0.3rem;
}

/* ============================================================
   The week grid -- lanes

   Shifts are grouped into lanes by tag and time, the way a pool is
   divided into lanes by ropes. A slot nobody is on renders as a
   visible gap in its lane, so a coverage hole is something you see
   rather than something you have to count.
   ============================================================ */

.week-grid {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--deck);
  overflow-x: auto;
}

/* Seven days plus a label column have to fit without horizontal scrolling on
   a laptop, otherwise Sunday quietly disappears. */
.week-head,
.lane {
  display: grid;
  grid-template-columns: 122px repeat(7, minmax(88px, 1fr));
  min-width: 738px;
}

/* The grid takes the full width until there is genuinely room for the
   assignment panel beside it. */
.week-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1360px) {
  .week-layout {
    grid-template-columns: minmax(0, 1fr) 296px;
  }
}

.week-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--deck);
  border-bottom: 2px solid var(--rule);
}
.week-head > div {
  padding: 0.45rem 0.6rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  border-left: 1px solid var(--line);
}
.week-head > div:first-child {
  border-left: 0;
}
.week-head .day-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 400;
}
.week-head .is-today {
  color: var(--pool);
}
.week-head .is-today .day-num {
  color: var(--pool);
  font-weight: 600;
}

/* The rope between lanes. */
.lane + .lane {
  border-top: 5px solid transparent;
  background-image: repeating-linear-gradient(
    90deg,
    var(--line-strong) 0 13px,
    var(--shallow) 13px 21px
  );
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: top left;
}

.lane-head {
  padding: 0.5rem 0.6rem;
  border-left: 4px solid var(--lane-color, var(--muted));
  background: var(--tile);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.lane-time {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lane-cell {
  border-left: 1px solid var(--line);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 54px;
}
.lane-cell.is-today {
  background: var(--shallow-2);
}

/* One person-slot. */
.slot {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.25;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--slot-color, var(--pool));
  border-radius: 2px;
  background: var(--deck);
  color: var(--ink);
  cursor: pointer;
}
.slot:hover {
  background: var(--shallow-2);
  border-color: var(--pool);
}
.slot-name {
  display: block;
  font-weight: 500;
}
.slot-meta {
  display: block;
  font-size: 0.74rem;
  color: var(--faint);
}

/* A gap in the lane: nobody is on this slot. */
.slot.is-open {
  border: 1px dashed var(--line-strong);
  border-left: 3px dashed var(--sun);
  background: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    rgba(154, 103, 8, 0.06) 6px 12px
  );
  color: var(--sun);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.8rem;
}
.slot.is-open:hover {
  border-color: var(--sun);
  background: var(--sun-bg);
}

.slot.has-error {
  border-color: var(--rescue);
  border-left-color: var(--rescue);
  background: var(--rescue-bg);
}
.slot.has-warning {
  border-left-color: var(--sun);
}
.slot-flag {
  display: block;
  font-size: 0.72rem;
  color: var(--rescue);
  margin-top: 0.1rem;
}

.week-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  color: var(--muted);
}

/* Assignment picker, shown beside the grid. */
.picker {
  position: sticky;
  top: 1rem;
}
.picker-list {
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.candidate {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--deck);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink);
}
.candidate:hover {
  background: var(--shallow-2);
}
.candidate:last-child {
  border-bottom: 0;
}
.candidate.is-blocked {
  background: var(--tile);
  color: var(--muted);
}
.candidate-hours {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--faint);
  white-space: nowrap;
}
.candidate-reason {
  display: block;
  font-size: 0.75rem;
  color: var(--rescue);
}

@media (max-width: 860px) {
  .week-head,
  .lane {
    grid-template-columns: 104px repeat(7, minmax(84px, 1fr));
  }
  .lane-head {
    padding: 0.4rem 0.35rem;
  }
}

/* ============================================================
   Motion -- sparing; this is a tool, not a showcase
   ============================================================ */

.htmx-swapping {
  opacity: 0;
  transition: opacity 0.09s linear;
}
.htmx-request .btn {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Charts

   Every mark is direct-labelled with its tag code, because managers can
   recolour tags and invent their own -- colour reinforces identity here,
   it never carries it alone. Bars are separated by a surface gap rather
   than a border so adjacent fills never blend.
   ============================================================ */

.chart {
  display: flex;
  flex-direction: column;
  gap: 2px; /* surface gap between bars */
}

.chart-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 78px;
  align-items: center;
  gap: 0.5rem;
  padding: 1px 0;
}
/* Wider labels, for charts whose categories are sentences rather than codes. */
.chart-wide .chart-row {
  grid-template-columns: minmax(0, 1fr) 40% 62px;
}
.chart-wide .chart-label span:last-child {
  white-space: normal;
}

.chart-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--ink);
  min-width: 0;
}
.chart-label span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart-track {
  display: block;
  background: var(--tile);
  border-radius: 2px;
  height: 18px;
  overflow: hidden;
}
.chart-bar {
  /* Must be block: a span defaults to inline, which silently ignores width
     and collapses every bar to nothing. */
  display: block;
  height: 100%;
  background: var(--bar-color, var(--pool));
  /* Rounded only at the data end, anchored to the baseline. */
  border-radius: 0 4px 4px 0;
  min-width: 2px;
  transition: filter 0.1s linear;
}
.chart-row:hover .chart-bar {
  filter: brightness(1.08);
}
.chart-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  text-align: right;
  color: var(--muted);
}

/* Column chart, for change over time. Single series, so no legend. */
.chart-columns {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 130px;
  padding-top: 0.4rem;
  border-bottom: 2px solid var(--rule);
}
.chart-column {
  flex: 1 1 0;
  /* Capped so a period with one or two weeks in it does not render as a
     single slab the width of the card. */
  max-width: 84px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 100%;
}
.chart-column-bar {
  background: var(--pool);
  border-radius: 4px 4px 0 0; /* rounded at the data end only */
  min-height: 2px;
}
.chart-column:hover .chart-column-bar {
  background: var(--deep);
}
.chart-axis {
  display: flex;
  gap: 2px;
  margin-top: 0.3rem;
}
.chart-axis > span {
  flex: 1 1 0;
  max-width: 84px; /* keep the labels under their columns */
  min-width: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--faint);
  overflow: hidden;
  white-space: nowrap;
}

.chart-empty {
  padding: 1.5rem 0;
  text-align: center;
  color: var(--faint);
  font-size: 0.9rem;
}

/* A stacked proportion bar, for "how shifts got filled". */
.chart-stack {
  display: flex;
  gap: 2px;
  height: 18px;
  margin-bottom: 0.5rem;
}
.chart-stack > span {
  background: var(--seg-color, var(--pool));
  border-radius: 2px;
}
.chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.82rem;
}
.chart-key-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
}
.chart-key-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--seg-color, var(--pool));
  flex: none;
}

@media (max-width: 620px) {
  .chart-row {
    grid-template-columns: 88px minmax(0, 1fr) 62px;
  }
}

/* ============================================================
   The time clock

   This is the one screen used standing up, one-handed, on a phone,
   by someone whose shift starts in thirty seconds. So it gets a
   target far bigger than any other control in the app, the running
   total in typewriter figures large enough to read at arm's length,
   and no second thing competing for the thumb.
   ============================================================ */

.clock-face {
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--deep);
  background: var(--deck);
  padding: 1.25rem;
  text-align: center;
}
.clock-face.is-running {
  border-top-color: var(--go);
  background: var(--go-bg);
}

.clock-state {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  color: var(--muted);
}
.clock-elapsed {
  font-family: var(--font-mono);
  font-size: 3rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin: 0.15rem 0 0.1rem;
}
.clock-since {
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.btn-clock {
  display: block;
  width: 100%;
  padding: 1.15rem 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--deep);
  border-radius: var(--radius);
  background: var(--pool);
  color: #fff;
  cursor: pointer;
}
.btn-clock:hover {
  background: var(--pool-dark);
}
.btn-clock.is-out {
  background: var(--deep);
}
.btn-clock[disabled] {
  background: var(--line);
  border-color: var(--line-strong);
  color: var(--muted);
  cursor: not-allowed;
}

/* Where the phone says you are. Muted on purpose: it is a note about
   the reading, not a verdict on the person. */
.clock-where {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 1.2rem;
}
.clock-where.is-inside {
  color: var(--go);
}
.clock-where.is-outside {
  color: var(--sun);
}
.clock-where.is-blocked {
  color: var(--rescue);
}

/* Flags on a time entry -- why a manager is being asked to look. */
.entry-flag {
  display: inline-block;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--sun);
  color: var(--sun);
  background: var(--sun-bg);
  border-radius: 2px;
  margin: 0 0.2rem 0.2rem 0;
}
.entry-flag.is-urgent {
  border-color: var(--rescue);
  color: var(--rescue);
  background: var(--rescue-bg);
}

/* ============================================================
   Utilities -- last in the file on purpose. These have to beat
   component rules like .btn that also set `display`, and source
   order is what decides that between equal-specificity selectors.
   ============================================================ */

.mobile-only {
  display: none !important;
}

@media (max-width: 860px) {
  .mobile-only {
    display: inline-flex !important;
  }
  .desktop-only {
    display: none !important;
  }
}

@media print {
  .sidebar,
  .topbar,
  .no-print {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .shell {
    grid-template-columns: 1fr;
  }
  .content {
    padding: 0;
  }
  .card {
    border: 0;
    padding: 0;
  }
  table.data tbody tr:nth-child(even) {
    background: #fff;
  }
}