/* jobs.css — Phase 4 design-system port for /jobs (Dispatcher).
 *
 * Loaded globally via head_components but only the Jobs page applies
 * these classes. Production's calendar is structurally different from
 * the static design (window-rows × driver-columns vs. absolute-
 * positioned blocks by minute), so this layer re-skins the existing
 * components to *feel* like the design — status-driven left borders,
 * tighter chrome, segmented toggle, sticky right-rail polish — without
 * restructuring the grid logic.
 *
 * All tokens come from tokens.css. `jobs-` prefix avoids collision
 * with classes used by the static design HTMLs in assets/design/.
 */

/* ---- Page header strip ---------------------------------------------- */
.jobs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.jobs-head .ttl {
  font: var(--fw-bold) 26px/1.05 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0;
}
.jobs-head .sub {
  margin-top: 6px;
  font: var(--fw-regular) var(--fs-sm)/1.4 var(--font-body);
  color: var(--fg-3);
}
.jobs-head .toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Segmented view toggle (List / Month / Week / Day) -------------- */
.jobs-seg {
  display: inline-flex;
  padding: 2px;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
}
.jobs-seg-btn {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  padding: 6px 12px;
  border-radius: 4px;
  font: var(--fw-semi) var(--fs-xs)/1 var(--font-body);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.jobs-seg-btn:hover { color: var(--fg-1); }
.jobs-seg-btn.active {
  background: var(--bg-card);
  color: var(--fg-1);
}

.jobs-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-cta);
  color: var(--brand-cta-fg);
  font: var(--fw-semi) var(--fs-sm)/1 var(--font-body);
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 0;
  cursor: pointer;
  transition: background 120ms ease;
}
.jobs-create-btn:hover { background: var(--brand-cta-hover); }

/* ---- Calendar wrapper ---------------------------------------------- */
.jobs-grid-shell {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: 12px;
}

/* ---- Driver lane header (column head) ------------------------------ */
.jobs-lane-head {
  background: var(--bg-card-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.jobs-lane-head .name {
  font: var(--fw-semi) 14px/1.2 var(--font-display);
  color: var(--fg-1);
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jobs-lane-head .truck {
  font: var(--fw-medium) 11px/1.2 var(--font-mono);
  color: var(--accent-300);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jobs-lane-head .phone {
  font: var(--fw-regular) 11px/1.2 var(--font-body);
  color: var(--fg-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Time-window row label (left of each row) ---------------------- */
.jobs-window-label {
  font: var(--fw-semi) var(--fs-micro)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent-300);
  background: var(--bg-card-2);
  padding: 8px 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* ---- Empty cell placeholder ---------------------------------------- */
.jobs-cell-empty {
  width: 100%;
  height: 100%;
  min-height: 80px;
  border: 1px dashed var(--border-2);
  background: color-mix(in srgb, var(--bg-card-2) 50%, transparent);
  border-radius: var(--r-sm);
}

/* ---- Job tile (status-driven) -------------------------------------- *
 * Layered into _tile_tone_class via the constants in pages.py. Each
 * variant shifts the left-border accent + bg tint. */
.jobs-tile {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 8px 6px 0;
  border-radius: var(--r-md);
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent-500);
  color: var(--fg-1);
  cursor: grab;
  transition: background 120ms ease, border-color 120ms ease;
}
.jobs-tile:hover { background: var(--bg-hover); }
.jobs-tile:active { cursor: grabbing; }

.jobs-tile.scheduled {
  border-left-color: var(--accent-500);
  background: var(--bg-input);
}
.jobs-tile.scheduled:hover { background: var(--bg-hover); }
.jobs-tile.enroute {
  border-left-color: var(--status-enroute-fg);
  background: var(--status-enroute-bg);
  border-color: var(--status-enroute-bd);
  color: var(--status-enroute-fg);
}
.jobs-tile.onsite {
  border-left-color: var(--status-onsite-fg);
  background: var(--status-onsite-bg);
  border-color: var(--status-onsite-bd);
  color: var(--status-onsite-fg);
}
.jobs-tile.complete {
  border-left-color: var(--status-complete-fg);
  background: var(--status-complete-bg);
  border-color: var(--status-complete-bd);
  color: var(--status-complete-fg);
  opacity: 0.78;
}
.jobs-tile.issue {
  border-left-color: var(--status-issue-fg);
  background: var(--status-issue-bg);
  border-color: var(--status-issue-bd);
  color: var(--status-issue-fg);
}
.jobs-tile.invoiced {
  border-left-color: var(--status-invoiced-fg);
  background: var(--status-invoiced-bg);
  border-color: var(--status-invoiced-bd);
  color: var(--status-invoiced-fg);
}

/* ---- Right rail (Unassigned panel) --------------------------------- */
.jobs-rail {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  width: 300px;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.jobs-rail-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
}
.jobs-rail-head .row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.jobs-rail-head h3 {
  margin: 0;
  font: var(--fw-semi) var(--fs-sm)/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-1);
}
.jobs-rail-head .count {
  margin-left: auto;
  font: var(--fw-medium) var(--fs-xs)/1 var(--font-mono);
  color: var(--accent-300);
  background: var(--link-active-bg);
  border: 1px solid var(--link-active-bd);
  border-radius: var(--r-sm);
  padding: 3px 7px;
}
.jobs-rail-help {
  font: var(--fw-regular) var(--fs-xs)/1.4 var(--font-body);
  color: var(--fg-3);
}

.jobs-rail-list {
  padding: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jobs-rail-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--fg-4);
  font-size: var(--fs-xs);
  font-style: italic;
}

/* ---- Unassigned card (draggable) ----------------------------------- */
.jobs-unassigned-card {
  background: var(--bg-card-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 10px 12px;
  cursor: grab;
  transition: border-color 120ms ease, background 120ms ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.jobs-unassigned-card:hover {
  border-color: var(--accent-500);
  background: var(--bg-hover);
}
.jobs-unassigned-card:active { cursor: grabbing; }
.jobs-unassigned-card .cust-name {
  font: var(--fw-semi) var(--fs-sm)/1.2 var(--font-display);
  color: var(--fg-1);
}
.jobs-unassigned-card .meta {
  font: var(--fw-regular) var(--fs-xs)/1.3 var(--font-body);
  color: var(--fg-3);
}
.jobs-unassigned-card .meta .mono { font-family: var(--font-mono); color: var(--fg-2); }
.jobs-unassigned-card .actions {
  display: flex; justify-content: flex-end; padding-top: 4px;
}
.jobs-unassigned-card .actions a {
  font: var(--fw-medium) 11px/1 var(--font-body);
  color: var(--fg-4);
  text-decoration: none;
}
.jobs-unassigned-card .actions a:hover { color: var(--accent-400); }

/* ---- Zoom toolbar (above the dispatch grid) ------------------------ */
.jobs-zoom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.jobs-print-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  font: var(--fw-semi) var(--fs-xs)/1 var(--font-body);
  padding: 7px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.jobs-print-btn:hover { background: var(--bg-hover); color: var(--fg-1); }

.jobs-zoom-cluster {
  display: inline-flex; align-items: center; gap: 6px;
}
.jobs-zoom-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  padding: 6px 8px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.jobs-zoom-btn:hover { background: var(--bg-hover); color: var(--fg-1); }
.jobs-zoom-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jobs-zoom-label {
  font: var(--fw-medium) var(--fs-xs)/1 var(--font-mono);
  color: var(--fg-3);
  min-width: 64px;
  text-align: center;
}

/* ---- Phase 7: page-top KPI strip ----------------------------------- */
/* Strip layout: a small scope chip on the left ("Today" / "This week"
 * / etc) so dispatchers know what the counts cover, then a grid of
 * cards. Hides the chip below 700px to keep cards readable. */
.jobs-kpi-strip {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}
.jobs-kpi-scope {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 8px 14px;
  min-width: 130px;
}
.jobs-kpi-scope .lbl {
  font: var(--fw-semi) 9px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-4);
  margin-bottom: 4px;
}
.jobs-kpi-scope .val {
  font: var(--fw-bold) 13px/1 var(--font-display);
  color: var(--accent-300);
}
@media (max-width: 700px) { .jobs-kpi-scope { display: none; } }

.jobs-kpi-cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  min-width: 0;
}
@media (max-width: 1100px) { .jobs-kpi-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .jobs-kpi-cards { grid-template-columns: repeat(2, 1fr); } }
.jobs-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.jobs-kpi-card .lbl {
  font: var(--fw-semi) 10px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-3);
}
.jobs-kpi-card .val {
  font: var(--fw-bold) 22px/1 var(--font-display);
  color: var(--fg-1);
  letter-spacing: -0.015em;
}
.jobs-kpi-card.scheduled { border-left-color: var(--accent-500); }
.jobs-kpi-card.enroute   { border-left-color: var(--status-enroute-fg); }
.jobs-kpi-card.onsite    { border-left-color: var(--status-onsite-fg); }
.jobs-kpi-card.complete  { border-left-color: var(--status-complete-fg); }
.jobs-kpi-card.issue     { border-left-color: var(--status-issue-fg); }
.jobs-kpi-card.neutral   { border-left-color: var(--fg-4); }

/* ---- Phase 7: by-minute Day grid (v2) ------------------------------ *
 * Layout:
 *   .jobs-day-shell        flex row: hour-axis | columns
 *   .jobs-day-axis         left rail with hour labels (sticky)
 *   .jobs-day-cols         flex of driver columns, scrolls horizontally
 *   .jobs-day-col          one driver column (head + timeline + footer)
 *   .jobs-day-col-timeline relative-positioned inner box, fixed height,
 *                          contains absolute tiles + hour grid lines
 *   .jobs-day-tile         absolute-positioned tile, top + height = %
 */

.jobs-day-shell {
  display: flex;
  align-items: flex-start;          /* don't force stretch — let columns
                                       size to natural content height,
                                       which lets overflow-y: auto kick
                                       in only when content exceeds
                                       the shell's own bounds */
  flex: 1;                           /* fill the parent grid-shell */
  min-height: 0;                     /* required for nested flex scrolling */
  overflow-x: auto;
  overflow-y: auto;
  background: var(--bg-card-2);
  border-radius: var(--r-md);
}

/* Hour axis on the left — sticky so it stays put when scrolling across drivers. */
.jobs-day-axis {
  flex-shrink: 0;
  width: 60px;
  position: sticky;
  left: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border-1);
  z-index: 5;
  display: flex;
  flex-direction: column;
}
.jobs-day-axis-spacer {
  height: 56px;             /* matches .jobs-day-col-head height */
  border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
  background: var(--bg-card);
  /* Pin the top-left corner alongside the sticky driver headers so
     the header row reads as one band when scrolling down. z-index 7
     keeps the corner above the headers (6) at the intersection. */
  position: sticky;
  top: 0;
  z-index: 7;
}
.jobs-day-axis-track {
  position: relative;
  height: 2520px;            /* 180px per hour × 14 hours.
                                 Tiles are positioned by their
                                 service-window BAND (so a 6AM-8AM
                                 stop sits in the 6-8 AM region of
                                 the timeline) and equally subdivided
                                 within their band. Taller scale gives
                                 each card room for the multi-line
                                 itinerary (on-site + drive/at/drive
                                 legs with start–end times). Hour axis
                                 is an accurate visual reference. */
  flex-shrink: 0;
}
.jobs-day-axis-hour {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: right;
  padding-right: 8px;
}
.jobs-day-axis-hour .lbl {
  font: var(--fw-semi) 10px/1 var(--font-mono);
  color: var(--fg-4);
}

/* Columns container — each driver gets a column. */
.jobs-day-cols {
  display: flex;
  flex-direction: row;
  gap: 0;
  flex: 1;
  min-width: 0;
}
.jobs-day-col {
  /* flex-basis + min-width are inline-styled from
     `dispatch_day_col_width` (zoom-aware) so the column shrinks /
     grows on Zoom Out / Zoom In. Default fallback when style isn't
     present: 200px. */
  flex: 0 0 200px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-1);
  background: var(--bg-card);
}
.jobs-day-col-head {
  height: 56px;
  flex-shrink: 0;
  padding: 8px 10px;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--border-1);
  /* Pin the driver name + truck to the top of the scroll viewport
     (.jobs-day-shell) so they stay visible while scrolling down a
     long route. z-index 6 keeps it above tiles (1) / hovered tiles
     (4) / the sticky-left hour axis (5). Solid bg so tiles scroll
     cleanly underneath. */
  position: sticky;
  top: 0;
  z-index: 6;
}
.jobs-day-col-head .name {
  font: var(--fw-semi) 13px/1.2 var(--font-display);
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jobs-day-col-head .truck {
  font: var(--fw-medium) 10px/1.2 var(--font-mono);
  color: var(--accent-300);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Timeline body — relative so absolute tiles position inside it.
   Height MUST match .jobs-day-axis-track so hour labels line up
   with grid lines. 2520px = 180px per hour × 14 hours. */
.jobs-day-col-timeline {
  position: relative;
  height: 2520px;
  background: var(--bg-card);
}

/* Hour grid lines (background reference, non-interactive). */
.jobs-day-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--border-2);
  opacity: 0.45;
  pointer-events: none;
}

/* Window-band drop zones — absolutely positioned per parsed
 * ServiceWindow inside each column's timeline. Sit BENEATH tiles
 * (z-index 0 vs tile's 1) so a drop on a tile cascades up to the
 * band, but visible enough on hover to show drop intent. */
.jobs-day-band {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-500) 14%, transparent);
  background: color-mix(in srgb, var(--accent-500) 3%, transparent);
  transition: background 120ms ease, border-color 120ms ease;
}
.jobs-day-band .lbl {
  position: absolute;
  top: 2px;
  right: 4px;
  font: var(--fw-medium) 9px/1 var(--font-mono);
  color: var(--fg-4);
  pointer-events: none;
  letter-spacing: 0.02em;
  opacity: 0.55;
}
.jobs-day-band:hover .lbl,
.jobs-day-band.drop-target-hover .lbl { opacity: 1; }
.jobs-day-band.drop-target-hover {
  background: color-mix(in srgb, var(--accent-500) 16%, transparent);
  border-top-color: var(--accent-500);
  outline: 1px dashed var(--accent-500);
  outline-offset: -1px;
}

/* Absolute-positioned tile inside the timeline. Height set inline
   from state's `height_pct`, top from `top_pct`. `left` / `width`
   are inline-styled too when the state's lane-stack pass detected
   overlapping arrivals — defaults via the rule below are full-
   width (left:4px right:4px) for the single-tile-at-time case. */
.jobs-day-tile {
  position: absolute;
  left: 4px;
  right: 4px;
  /* CRITICAL: no min-height clamp. The state-side height is the
     job's actual on-site dwell in pixels (e.g. 30px = 10 min at
     180px/hr). Adding a min-height here would force short tiles
     to take more vertical space than their dwell, making them
     visually overlap the next stop on the route. If a tile is
     too small to read, the cure is a taller timeline (px/hr),
     never a min-height. */
  padding: 3px 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  cursor: grab;
  z-index: 1;
  transition: transform 100ms ease, box-shadow 100ms ease;
}
/* When the lane-stacking pass assigned a `--lane-width` custom
   property (e.g. 50% for two-wide), use it instead of left:4 /
   right:4. The state code sets --lane-left + --lane-width inline. */
.jobs-day-tile[style*="--lane-width"] {
  left: var(--lane-left);
  right: auto;
  width: calc(var(--lane-width) - 6px);
  margin-left: 3px;
}
.jobs-day-tile:hover {
  z-index: 4;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
/* Customer name first — the most-scanned identifier at a glance. */
.jobs-day-tile .c {
  font: var(--fw-semi) 11px/1.15 var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Equipment / action descriptor — secondary, smaller. */
.jobs-day-tile .t {
  font: var(--fw-medium) 9px/1.1 var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-3);
  margin-top: 1px;
}
/* Window + arrival → departure clock. Smallest text; hidden when
   the tile is too short to fit it (CSS overflow handles that). */
.jobs-day-tile .w {
  font: var(--fw-regular) 9px/1.1 var(--font-mono);
  color: var(--fg-4);
  letter-spacing: 0.02em;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "On site  7:11 AM – 7:21 AM" — the jobsite time, brighter than
   the move lines since it's the core of the stop. */
.jobs-day-tile .onsite {
  font: var(--fw-semi) 9.5px/1.15 var(--font-mono);
  color: var(--accent-300);
  letter-spacing: 0.01em;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jobs-day-tile .onsite .lbl {
  color: var(--fg-4);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 8px;
}
/* "Drive to North Weld County Landfill · 8:40 AM" etc. — one line
   per move after leaving the jobsite. Dimmer than the on-site line;
   each prefixed with a small arrow so the itinerary reads as steps. */
.jobs-day-tile .mv {
  display: block;
  font: var(--fw-regular) 9px/1.25 var(--font-body);
  color: var(--fg-3);
  margin-top: 2px;
  /* Wrap (don't clip) so the destination + its arrival time stay
     visible on roomy tiles even when the support-location name is
     long ("North Weld County Landfill · 8:40 AM"). Tiles too short
     to fit it clip from the bottom via the tile's overflow:hidden,
     same as every other line. */
  white-space: normal;
  overflow-wrap: anywhere;
  padding-left: 10px;
  text-indent: -10px;   /* hang the arrow in the left gutter */
}
.jobs-day-tile .mv::before {
  content: "→ ";
  color: var(--accent-400);
}

/* ---- Phase 7c: shared untimed row above all columns ----------------- *
 * One amber-tinted strip at the top of the Day grid showing every job
 * that doesn't have a precise hour-range window. Independent of the
 * per-column timeline y-axis so dispatchers don't read the cards as
 * "scheduled at 6 AM". Cards are draggable; each carries its assigned
 * driver's name in a small chip since they're not visually grouped by
 * column. */
.jobs-day-untimed-row {
  flex-shrink: 0;
  background: rgba(245, 158, 11, 0.07);
  border-bottom: 1px solid rgba(245, 158, 11, 0.30);
  padding: 8px 12px 10px;
}
.jobs-day-untimed-row .head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font: var(--fw-semi) 10px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent-300);
}
.jobs-day-untimed-row .head .count {
  background: var(--bg-card);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  font-family: var(--font-mono);
  color: var(--accent-300);
}
.jobs-day-untimed-row .head .hint {
  margin-left: auto;
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-4);
  font-size: 11px;
}
.jobs-day-untimed-row .cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.jobs-day-untimed-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  min-width: 180px;
  max-width: 260px;
  cursor: grab;
}
.jobs-day-untimed-card .who {
  font: var(--fw-semi) 9px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent-300);
  margin-bottom: 2px;
}
.jobs-day-untimed-card .t {
  font: var(--fw-semi) 11px/1.2 var(--font-mono);
}
.jobs-day-untimed-card .c {
  font: var(--fw-medium) 11px/1.2 var(--font-body);
}
.jobs-day-untimed-card .w {
  font: var(--fw-regular) 9px/1 var(--font-mono);
  color: var(--fg-4);
  margin-top: 2px;
}