/* Intent and rules: docs/features/team-schedule-and-hours.md; on /ops/quote/: docs/features/offered-times.md; the crew suggested: docs/features/crew-suggestion.md. */
/*
 * The week card (site/team/lane-week.js): a row per cleaner, a square per day, shaded by hours. The page
 * never scrolls sideways. The same rules on the Dashboard (through team.css) and on /ops/quote/, where the
 * card sits in a `.lanes-panel` carrying the team pages' dark colours (owner, 2026-10-12: "I like the way we
 * show this on the dashboard already").
 */
.lanes-week { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.lane-week { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lane-week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2px 8px; flex-wrap: wrap; }
.lane-week-stats { font-size: 13px; color: var(--muted); }
.lane-raise { color: var(--muted); }
.lane-pct b { color: var(--ink); font-weight: 600; }
.lane-pct[data-raise] b { color: var(--gold-deep); }
/* "% full" for the week, Adriana's hours ÷ 8 per weekday, with the "raise rates" marker. */
.lane-bar { position: relative; height: 6px; border-radius: 3px; background: var(--warm); }
.lane-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--gold); max-width: 100%; }
.lane-bar-mark { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ink); }
.lane-week-foot { margin: 0; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.lane-week-foot b { color: var(--ink); font-weight: 600; }
/* The tapped day's cleanings, under its week. */
.lane-jobs { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.lane-jobs-head { margin: 0; font-size: 13px; font-weight: 600; }
.lanes {
  display: grid;
  grid-template-columns: 62px repeat(6, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.lane-day { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; }
.lane-day span { display: block; }
.lane-day.closed { color: #7C8592; }
.lane-day.today { color: var(--gold-deep); font-weight: 600; }
.lane-name { font-size: 12px; font-weight: 500; align-self: center; line-height: 1.2; min-width: 0; }
.lane-name small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.lane-cell {
  height: 40px; min-width: 0; padding: 0; border-radius: 8px; border: 1px solid transparent; color: var(--ink);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.lane-cell[aria-pressed="true"] { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.lane-cell.free, .sw.free { background: var(--paper); border: 1px solid var(--line-strong); }
.lane-cell.light, .sw.light { background: rgba(191, 155, 48, 0.22); color: #F2D88A; }
.lane-cell.mid, .sw.mid { background: #BF9B30; color: var(--on-gold); }
.lane-cell.full, .sw.full { background: #F0CF6E; color: var(--on-gold); }
.lane-cell.over, .sw.over { background: var(--danger); color: var(--on-gold); }
.lane-cell.closed, .sw.closed { color: transparent; background: repeating-linear-gradient(135deg, #262B33 0 6px, #2E343D 6px 12px); }
/* A day not loaded has no number: an empty dashed square, and the card says "Not loaded here". */
.lane-cell.unloaded { background: transparent; border: 1px dashed var(--line-strong); }
/* A day with more cleaners needed: the first lane's square outlined in the alert red. */
.lane-cell.short { outline: 2px solid var(--danger); outline-offset: -2px; }
/* Pressed and short both (today's square is pressed while Today shows): the red outline stays as it
   is, the gold ring goes around it, so neither hides the other. */
.lane-cell.short[aria-pressed="true"] { outline: 2px solid var(--danger); outline-offset: -2px; box-shadow: 0 0 0 3px var(--gold-deep); }

.lane-cell { font-family: inherit; }

/* /ops/quote/: the card as on the Dashboard, a dark panel on the light page (team.css :root's colours). */
.lanes-panel {
  --gold: #BF9B30; --gold-deep: #D8B55A; --danger: #F06A6A; --ink: #ECEEF1; --muted: #A0A8B4; --warm: #313843;
  --paper: #272D36; --on-gold: #15191E; --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.18);
  margin-top: 12px; padding: 14px 12px; border-radius: 14px; background: #1E232A; color: var(--ink);
  display: flex; flex-direction: column; gap: 10px;
}
.lanes-panel .muted { color: var(--muted); }
.lanes-panel .ops-day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lanes-panel .ops-day-list li { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--ink); }
.lanes-panel .ops-day-time { display: block; font-weight: 600; }
.lanes-panel .ops-day-who { display: block; color: var(--muted); }
/* The customer's day: its column head in gold; a day with an open time: a gold dot under its date. */
.lane-day.asked { color: var(--gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lane-day.marked span:last-child::after { content: ''; display: block; width: 6px; height: 6px; margin: 2px auto 0; border-radius: 50%; background: var(--gold-deep); }
/* The open times as chips, under the card. */
.lanes-open { margin: 0; font-size: 13px; color: var(--muted); }
.lanes-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lanes-chip {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gold-deep); background: transparent;
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.lanes-chip:hover, .lanes-chip:focus-visible { background: rgba(191, 155, 48, 0.22); outline: none; }
.lanes-chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.lanes-chip:disabled { opacity: 0.6; cursor: wait; }
.lanes-offered { margin: 0; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 14px; }
.lanes-offered b { color: var(--gold-deep); }
.lanes-link { padding: 6px 2px; min-height: 32px; border: 0; background: none; color: var(--gold-deep); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.lanes-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(240, 106, 106, 0.15); color: #FF9F9F; font-size: 13px; }

/* Who's going on /ops/quote/ (owner, 2026-10-13): the crew, as chips, above the open times. */
.lanes-panel .lanes-crew { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 4px; }
/* A crew that can't be picked here (accepted, or fewer than its kind takes) is not loading: no wait cursor. */
.lanes-panel .lanes-crew .lanes-chip:disabled { cursor: default; }
.lanes-panel .lanes-crew-label { font-size: 13px; font-weight: 600; margin-right: 2px; }
/* The crew suggested from the square feet (owner, 2026-10-14): a dashed outline, never pressed for them. */
.lanes-panel .lanes-crew .lanes-chip[data-suggested]:not([aria-pressed="true"]) { outline: 1px dashed var(--gold-deep); outline-offset: 2px; }
.lanes-panel .crew-suggest { margin: 2px 0 6px; }