/* The weekly schedule grid.
   Reading order is the point: a day is scanned down a column, so the column is
   what carries the state (quiet, today), and the cell carries only the detail. */

.schedule-weeknav { display: flex; gap: .4rem; align-items: center; }

.schedule-toolbar {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 1rem; padding: .85rem 1rem;
  background: var(--surface-muted, #f4f7f6); border-radius: .6rem;
}
.schedule-toolbar p { font-size: .84rem; max-width: 62ch; }

.zone-finding {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  padding: .5rem 0; border-top: 1px solid rgba(0, 0, 0, .07);
}
.zone-finding:first-of-type { border-top: 0; }
.zone-finding > span:first-child { flex: 1 1 22rem; }
.zone-change code { font-size: .8rem; }

/* Horizontal scroll lives on the wrapper, never on the page body. */
.schedule-scroll { overflow-x: auto; }

.schedule-grid { width: 100%; min-width: 62rem; border-collapse: collapse; }
.schedule-grid th, .schedule-grid td {
  border: 1px solid rgba(0, 0, 0, .09); padding: .55rem .6rem; vertical-align: top;
}
.schedule-grid thead th { text-align: center; background: #fbfcfc; }
.schedule-grid .office-column { text-align: left; width: 13rem; background: #fbfcfc; }
.schedule-grid .office-column a { font-weight: 600; }
.schedule-grid .office-column small { display: block; font-weight: 400; color: #6b7a75; font-size: .76rem; }
.office-sample { opacity: .75; }

.day-name { font-weight: 700; }
.day-date { font-size: .78rem; color: #6b7a75; font-weight: 400; }
.day-tally { margin-top: .3rem; font-size: .72rem; font-weight: 400; display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; }
.tally-open { color: #1c6b46; }
.tally-closed { color: #8a6d3b; }
.tally-unknown { color: #8b8b8b; }
.day-flag {
  margin-top: .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: #8a5a1b;
}

/* A day nobody is open is the whole reason this page exists, so it is the one
   state allowed to shade an entire column. */
.schedule-grid thead th.day-quiet { background: #fdf6e8; }
.schedule-grid thead th.day-today { box-shadow: inset 0 3px 0 #1c6b46; }

.cell-open { background: #ffffff; }
.cell-closed { background: #f7f7f7; color: #7b7b7b; }
.cell-unknown { background: repeating-linear-gradient(135deg, #fafafa, #fafafa 6px, #f2f2f2 6px, #f2f2f2 12px); color: #9a9a9a; }
.cell-today { box-shadow: inset 3px 0 0 rgba(28, 107, 70, .25); }

.cell-local { display: block; font-size: .84rem; font-variant-numeric: tabular-nums; }
.cell-viewer { display: block; font-size: .76rem; color: #4a6f8a; font-variant-numeric: tabular-nums; }
.cell-viewer::before { content: "your time "; opacity: .7; }
.cell-label { font-size: .84rem; }
.cell-hours-missing { color: #8a6d3b; }
.cell-source {
  display: inline-block; margin-top: .25rem; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .04em; color: #8b8b8b; border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .5rem; padding: 0 .3rem;
}
.cell-source-office { color: #1c6b46; border-color: rgba(28, 107, 70, .35); }
.zone-warn { color: #b3771a; cursor: help; }

.schedule-footnote { margin-top: .9rem; font-size: .8rem; color: #6b7a75; }

.hours-editor { width: 100%; margin-top: 1rem; border-collapse: collapse; }
.hours-editor th, .hours-editor td { padding: .4rem .5rem; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.hours-editor thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7a75; }
.hours-editor tbody th { font-weight: 600; width: 8rem; }
.hours-editor .evidence { font-size: .78rem; color: #6b7a75; }
.verdict { margin-left: .35rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.verdict-open { color: #1c6b46; }
.verdict-closed { color: #8a6d3b; }

@media (max-width: 720px) {
  .schedule-grid { min-width: 48rem; }
  .schedule-grid .office-column { width: 9rem; }
}

/* Looking a week up somewhere else. A disputed day is shaded and starts
   unticked, so accepting one is a decision rather than the default. */
.lookup-match { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.lookup-table tbody th { width: 8rem; }
.row-disputed { background: #fdf1f0; }
.row-disputed td, .row-disputed th { border-bottom-color: rgba(180, 35, 24, .2); }
.cell-source-lookup { color: #4a6f8a; border-color: rgba(74, 111, 138, .35); }