/* Officer hub: the Availability section (public/js/hub/availability*.js). Tokens and shared
   pieces come from app.css (the grid, .segmented, .legend, .you-tag) and hub.css. */

/* ---------- layout ---------- */

.av-body { display: grid; gap: 16px; align-items: start; }
.av-card { min-width: 0; }
.av-card > :last-child { margin-bottom: 0; }

@media (min-width: 980px) {
  .av-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "mine board"
      "who best"
      "poll best";
    grid-template-rows: auto auto 1fr;
    gap: 20px;
  }
  .av-mine { grid-area: mine; }
  .av-board { grid-area: board; }
  .av-who { grid-area: who; }
  .av-best { grid-area: best; }
  .av-poll { grid-area: poll; }
  /* My week sits right next to the board, so its empty state skips the button. */
  .av-board .hub-empty-action { display: none; }
}

.av-tz { margin: -6px 0 16px; }

/* Phones: one part at a time behind a switcher. */
.av-switch { display: none; }
@media (max-width: 759px) {
  .av-switch {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
    margin: 0 0 14px; padding: 4px;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  }
  .av-switch button {
    min-height: 44px; padding: 0 6px; border-radius: 9px; border: 0;
    background: transparent; color: var(--muted);
    font: inherit; font-weight: 650; font-size: 14px; cursor: pointer;
  }
  .av-switch button:hover { color: var(--text); }
  .av-switch button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
  .av-switch button:focus-visible { outline-offset: -2px; }
  .av-body > [data-view] { display: none; }
  .av-body[data-show="mine"] > [data-view="mine"],
  .av-body[data-show="board"] > [data-view="board"],
  .av-body[data-show="best"] > [data-view="best"] { display: block; }
}

/* ---------- card parts ---------- */

.av-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.av-card-head h2 { margin: 0; font-size: 19px; }
.av-intro { margin: 0 0 14px; max-width: 62ch; }
.av-count { color: var(--muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.av-pill {
  --c: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--c);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
}
.av-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.av-pill.is-saved { --c: var(--ok); }
.av-pill.is-dirty, .av-pill.is-saving { --c: var(--warn); }
.av-pill.is-problem { --c: var(--danger); }
.av-pill.is-empty { --c: var(--muted); }

/* A button that is off but keeps the focus (see setOff in availability-util.js). */
.av .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.av .btn[aria-disabled="true"]:hover { border-color: var(--line-strong); filter: none; }
.av .btn.primary[aria-disabled="true"]:hover { border-color: var(--accent); }

/* ---------- the grids (both use app.css's table.grid) ---------- */

.av table.grid { min-width: calc(46px + var(--cols, 7) * 36px); }
.av .grid th.corner { width: 46px; }
.av .grid th.time { padding-right: 6px; }
.av-grid-wrap { margin: 0 -2px; padding: 6px 2px 2px; }
/* Arrow keys move the focus down the grids, and the browser only scrolls a cell into view when it
   leaves the screen. Room at the bottom keeps the focused cell clear of the sticky save bar (My
   week) and the sticky "who is free" box (the board). The top already clears the tab bar (hub.css). */
.av-mine .grid td[data-i] { scroll-margin-bottom: 96px; }
.av-board .grid td[data-i] { scroll-margin-bottom: 160px; }

/* ---------- my week ---------- */

.av-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 8px; }
.av-tz-line { margin: 0; font-size: 13px; color: var(--muted); }
.av-tool-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.av-readout { margin: 8px 0 0; min-height: 1.5em; }

.av-savebar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  margin: 12px -22px -22px; padding: 12px 22px max(14px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}
.av-mine.is-dirty .av-savebar { box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.18); border-top-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.av-savebar-text { min-width: 0; }
.av-save-status { margin: 0; font-weight: 700; font-size: 14px; }
.av-save-status.is-dirty, .av-save-status.is-saving { color: var(--warn); }
.av-save-status.is-saved { color: var(--ok); }
.av-save-status.is-problem { color: var(--danger); }
.av-save-meta { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.av-savebar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* ---------- the board ---------- */

.av-legend { margin: 0 0 8px; flex-wrap: wrap; }
.av-legend .legend-bar { min-width: 80px; }
.av-legend-all { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.av-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--heat-max); position: relative; }
.av-dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--bg); }

.av-notes { display: grid; gap: 6px; }
.av-notes:empty { display: none; }
.av-note {
  display: flex; align-items: center; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap;
  margin: 0; padding: 6px 6px 6px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--text);
  font-size: 14px; font-weight: 600;
}
.av-note.is-outline { border-left-color: var(--hl); }
.av-note.is-warn { border-left-color: var(--warn); padding: 8px 12px; font-weight: 500; color: var(--muted); }
.av-note .btn { min-height: 32px; }

.av-detail {
  position: sticky; bottom: 10px; z-index: 3;
  margin: 12px 0 0; padding: 10px 14px;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 14px; min-height: 48px;
}
.av-detail p { margin: 0; }
.av-detail p + p { margin-top: 4px; }
.av-detail-hint { color: var(--muted); }
.av-detail-when { display: flex; align-items: baseline; justify-content: space-between; gap: 2px 12px; flex-wrap: wrap; }
.av-detail-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.av-detail-count.is-all { color: var(--ok); }
.av-detail-line { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: baseline; overflow-wrap: anywhere; }
.av-detail-line.is-waiting { display: block; }
.av-detail-label {
  font-size: 11px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.av-detail-line.is-free { color: var(--text); }
.av-detail-line.is-free .av-detail-label { color: var(--ok); }
.av-detail-line.is-busy { color: var(--muted); }
.av-detail-line.is-waiting { color: var(--muted); font-size: 13px; }

/* ---------- who has filled it in ---------- */

.av-progress { height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin: 4px 0 14px; }
.av-progress-fill { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 4px; }

.av-nudge { display: grid; gap: 10px; margin-bottom: 14px; }
.av-nudge:empty { display: none; }
.av-nudge p { margin: 0; font-size: 14px; }
.av-nudge-me, .av-nudge-others {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.av-nudge-me { border-left: 3px solid var(--accent); }
.av-nudge-others { border-left: 3px solid var(--warn); }
.av-nudge-me p, .av-nudge-others p { flex: 1 1 240px; }
.av-nudge .btn { flex: none; }
.av-nudge-done { color: var(--ok); font-weight: 650; }

.av-who-hint { margin: 0 0 6px; font-size: 13px; }
.av-who-list { list-style: none; margin: 0; padding: 0; display: grid; }
.av-who-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 4px; border-top: 1px solid var(--line);
}
.av-who-row:first-child { border-top: 0; }
.av-who-row.is-solo { background: var(--surface-2); border-radius: 10px; border-top-color: transparent; padding-left: 8px; padding-right: 8px; }
.av-who-row.is-solo + .av-who-row { border-top-color: transparent; }
.av-who-text { display: grid; min-width: 0; flex: 1; }
.av-who-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; overflow-wrap: anywhere; }
.av-who-role { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.av-who-pick {
  align-content: center; justify-items: start; min-height: 40px; padding: 2px 6px; margin: -2px -6px;
  background: none; border: 0; border-radius: 8px; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.av-who-pick:hover .av-who-name, .av-who-pick[aria-pressed="true"] .av-who-name { color: var(--accent); }
.av-who-pick:hover .av-who-name { text-decoration: underline; text-underline-offset: 3px; }
.av-card-head h2:focus { outline: none; }
.av-who-status { flex: none; max-width: 48%; text-align: right; font-size: 13px; color: var(--muted); }
.av-who-status.is-waiting {
  padding: 2px 9px; border-radius: 999px; font-weight: 700; font-size: 12px;
  color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.av-who-status.is-stale { color: var(--warn); }
.av-who-row.is-waiting .av-who-name { color: var(--muted); }

/* ---------- best times ---------- */

.av-best-controls { display: grid; gap: 14px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.av-field legend { font-size: 14px; margin-bottom: 8px; }
.av-optional { color: var(--muted); font-weight: 500; }
.segmented.av-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.av-seg label { font-size: 14px; font-weight: 650; }

.av-check { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.av-check label { margin: 0; font-size: 14px; cursor: pointer; }
.av-check input { flex: none; margin: 0; cursor: pointer; }
.av-check-hint { color: var(--muted); font-weight: 500; }

.av-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.av-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.av-chip:hover { border-color: var(--accent); }
.av-chip::before {
  content: ""; display: grid; place-items: center; flex: none;
  width: 16px; height: 16px; border-radius: 4px; box-sizing: border-box;
  border: 1.5px solid var(--line-strong);
  font-size: 11px; font-weight: 900; line-height: 1;
}
.av-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.av-chip[aria-pressed="true"]::before { content: "\2713"; border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.av-need-hint { margin: 8px 0 0; font-size: 13px; }

.av-best-summary { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.av-best-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.av-option {
  width: 100%; display: grid; align-items: center; column-gap: 12px; row-gap: 1px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "rank when score" "rank room score" "rank who score";
  padding: 12px 14px; border-radius: 12px; text-align: left;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font: inherit; cursor: pointer;
}
.av-option:hover { border-color: var(--line-strong); }
.av-option[aria-pressed="true"] { border-color: var(--hl); box-shadow: inset 0 0 0 1px var(--hl); }
.av-rank { grid-area: rank; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 750; font-size: 13px; }
.av-best-list li:first-child .av-rank { background: var(--accent); color: var(--accent-ink); }
.av-when { grid-area: when; font-weight: 700; }
.av-day-short { display: none; } /* one of the two day names shows (and is read) at a time */
.av-room { grid-area: room; font-size: 13px; color: var(--text); opacity: 0.85; }
.av-who-line { grid-area: who; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.av-who-line.is-all { color: var(--ok); }
.av-score { grid-area: score; display: grid; justify-items: end; gap: 3px; min-width: 64px; }
.av-score-num { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-score.is-all .av-score-num { color: var(--ok); }
.av-score-word { font-size: 12px; color: var(--muted); line-height: 1; }
.av-meter { display: block; width: 64px; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.av-meter-fill { display: block; height: 100%; background: var(--muted); border-radius: 3px; }
.av-score.is-all .av-meter-fill { background: var(--ok); }

.av-best-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Fewer than two officers counted: the card waits (see waitingState in availability-best.js). */
.av-best-wait { padding: 28px 18px; }
.av-best-wait-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
/* Wide screens: "Who has filled it in", with the same two buttons, sits right next to this card. */
@media (min-width: 980px) {
  .av-best-wait-actions { display: none; }
}
.av-best-none { margin: 0 0 4px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--line-strong); color: var(--muted); font-size: 14px; }

/* ---------- one-off polls ---------- */

.av-poll h2 { font-size: 17px; margin-bottom: 6px; }
.av-poll .hint { margin-bottom: 14px; }

/* ---------- phones ---------- */

@media (max-width: 759px) {
  .av-card.card { padding: 14px; }
  .av-savebar { margin: 12px -14px -14px; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); }
  .av-savebar-actions { width: 100%; }
  .av-savebar-actions .btn { min-height: 44px; }
  .av-savebar-actions .av-save { flex: 1; }
  .av-tool-buttons { width: 100%; }
  .av-tool-buttons .btn { flex: 1 1 auto; min-height: 44px; }
  .av-seg label { min-height: 44px; font-size: 13px; }
  .av-check { min-height: 44px; }
  .av-check input { width: 22px; height: 22px; }
  .av-chip { min-height: 44px; }
  .av-option { padding: 12px; column-gap: 10px; grid-template-areas: "rank when score" "rank room room" "rank who who"; }
  .av-day-long { display: none; }
  .av-day-short { display: inline; }
  .av-score { min-width: 0; grid-template-columns: auto; }
  .av-meter { width: 48px; }
  /* "can come" stays for screen readers; on a phone the number and the bar say it. */
  .av-score-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .av-who-row { padding: 6px 2px; }
  .av-who-pick { min-height: 48px; }
  .av-who-status { max-width: 42%; }
  .av-nudge .btn, .av-best-foot .btn, .av-best-wait-actions .btn, .av-poll .btn, .av-note .btn { min-height: 44px; }
  .av-detail { bottom: 8px; }
  .av-legend-all { margin-left: 0; }
  .av-mine .grid td[data-i] { scroll-margin-bottom: 140px; }
  .av-board .grid td[data-i] { scroll-margin-bottom: 190px; }
}

@media (max-width: 380px) {
  .av-who-status.is-stale { max-width: 38%; }
}