/*
 * Find a time: the results page, times first (2026-10-05 redesign), and its
 * hierarchy pass (2026-10-08, canvas "Find a time results: hierarchy
 * options", option B): ONE filled thing on the page, the answer card's
 * Schedule. The card says the time; the picker under it and the board under
 * that are outlined and quiet. Markup: js/ui/results-tab.js
 * (buildBestCardHtml, buildDayGridHtml and the rest of the "TIMES FIRST"
 * section).
 */

.vm-bt { display: flex; flex-direction: column; }

/* Section label: a plain heading, an optional grey note after it. */
.vm-bt-sec {
  display: flex; align-items: baseline; gap: 8px;
  margin: 26px 2px 10px;
  font-size: 14px; font-weight: 700; color: #0f172a;
}
.vm-bt > .vm-bt-sec:first-child { margin-top: 4px; }
.vm-bt-sec em { font-style: normal; font-size: 12px; font-weight: 500; color: #94a3b8; }

/* The answer: a white card with the date tile, the time, why in one line,
   everyone's own start as faces, a quiet note, and Schedule. */
.vm-bt-best {
  display: flex; flex-direction: column; gap: 14px; margin: 0;
  padding: 18px; border-radius: 18px; border: 1px solid #e2e8f0;
  background: #ffffff; color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .07);
}
.vm-bt-best-top { display: flex; align-items: center; gap: 14px; }
.vm-bt-best-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 56px; height: 60px; border-radius: 12px;
  border: 1px solid #99f6e4; background: #f0fdfa;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: #0f766e;
}
.vm-bt-best-day b { font-size: 23px; line-height: 1.05; color: #0f766e; }
.vm-bt-best-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vm-bt-best-head { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #0f766e; }
.vm-bt-best-main strong {
  display: block; font-size: 28px; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.vm-bt-best-main > span { font-size: 13px; line-height: 1.4; color: #475569; }
.vm-bt-best-note { margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: #475569; }
.vm-bt-best-note b { font-weight: 700; color: #0f766e; }
/* A closest fit is not a winner: an amber edge, no teal. */
.vm-bt-best[data-fallback="true"] { border: 1.5px solid #fcd34d; }
.vm-bt-best[data-fallback="true"] .vm-bt-best-head { color: #b45309; }
.vm-bt-best[data-fallback="true"] .vm-bt-best-day { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.vm-bt-best[data-fallback="true"] .vm-bt-best-day b { color: #0f172a; }

/* Everyone's own start: one face each. */
.vm-bt-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.vm-bt-face {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 12px; border-radius: 12px; background: #f8fafc;
}
.vm-bt-face-txt { display: flex; flex-direction: column; min-width: 0; }
.vm-bt-face small { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-bt-face b { font-size: 15px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vm-bt-face.is-off .vm-bt-pin, .vm-bt-face.is-off .vm-bt-av { opacity: .45; }
.vm-bt-face.is-off b { color: #b45309; font-size: 13px; }
.vm-bt-face.is-more { justify-content: center; color: #475569; }

/* The days of the search, a week grid in date order. */
.vm-bt-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.vm-bt-day {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-width: 0; min-height: 58px; padding: 7px 0 6px; margin: 0;
  border-radius: 12px; border: 1px solid #e2e8f0; background: #ffffff;
  font: inherit; font-size: 11px; font-weight: 600; color: #64748b; cursor: pointer;
}
.vm-bt-day em { font-style: normal; font-size: 16px; font-weight: 800; line-height: 1.2; color: #0f172a; }
.vm-bt-day::after { content: ''; width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; background: transparent; }
.vm-bt-day.is-ok::after { background: #14b8a6; }
.vm-bt-day.is-part { border-color: #fcd34d; }
.vm-bt-day.is-part::after { background: #f59e0b; }
.vm-bt-day.is-na { opacity: .4; background: #f8fafc; cursor: default; }
.vm-bt-day.is-active { background: #f0fdfa; border-color: #14b8a6; box-shadow: inset 0 0 0 .5px #14b8a6; color: #0f766e; }
.vm-bt-day.is-active em { color: #0f766e; }
.vm-bt-days.is-uniform .vm-bt-day::after { display: none; }
.vm-bt-days.is-uniform .vm-bt-day { justify-content: center; min-height: 52px; }
.vm-bt-day:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }

.vm-bt-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 7px 4px 0; font-size: 11px; color: #64748b; }
.vm-bt-key span { display: inline-flex; align-items: center; gap: 5px; }
.vm-bt-key i { width: 6px; height: 6px; border-radius: 50%; }
.vm-bt-key i.is-ok { background: #14b8a6; }
.vm-bt-key i.is-part { background: #f59e0b; }
.vm-bt-key i.is-na { background: #e2e8f0; }

/* Time of day: a four-way switch, the chosen option raised in white. */
.vm-bt-tod {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  margin-top: 10px; padding: 4px; border-radius: 14px; background: #f1f5f9;
}
.vm-bt-tod-opt {
  display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 40px; margin: 0; padding: 0 4px;
  border: 0; border-radius: 11px; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #475569; cursor: pointer; white-space: nowrap;
}
.vm-bt-tod-opt.is-active { background: #ffffff; color: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 2px 8px rgba(15, 23, 42, .06); }
.vm-bt-tod-opt:focus-visible { outline: 2px solid #0f766e; outline-offset: 1px; }

/* No time fits everyone that day: who is missing. */
.vm-bt-note {
  display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  font-size: 13px; line-height: 1.45;
}
.vm-bt-note svg { flex: none; margin-top: 1px; }
.vm-bt-note strong { display: block; color: #0f172a; }
.vm-bt-note { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.vm-bt-note svg { color: #1d4ed8; }

/* The day's times: four to a row (three on a phone), the chosen one
   outlined in teal, never filled: Schedule is the page's one filled thing. */
.vm-bt-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; align-content: start; }
@media (max-width: 640px) { .vm-bt-times { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vm-bt-time {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; min-height: 56px; margin: 0; padding: 6px 4px;
  border-radius: 12px; border: 1px solid #e2e8f0; background: #ffffff;
  font: inherit; color: #0f172a; cursor: pointer;
}
.vm-bt-time-clock { font-size: 16px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vm-bt-tag {
  display: flex; align-items: center; gap: 3px; max-width: 100%;
  font-size: 10px; font-weight: 800; line-height: 1.25; color: #0f766e;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vm-bt-tag.is-mut { color: #64748b; font-weight: 600; }
.vm-bt-tag.is-out { color: #b45309; }
.vm-bt-time.is-active { background: #f0fdfa; border-color: #14b8a6; box-shadow: inset 0 0 0 .5px #14b8a6; color: #0f766e; }
.vm-bt-time.is-ghost { border-style: dashed; border-color: #cbd5e1; color: #334155; }
.vm-bt-time.is-ghost .vm-bt-time-clock { font-size: 13.5px; }
.vm-bt-time:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.vm-bt-empty { margin: 0 4px 8px; font-size: 13px; color: #64748b; }

/* The team board: everyone at the chosen time, in their own clock. One
   row per person, name on the left and their strip on the right; on a
   phone the name sits above the strip. No card, no sky tint. */
.vm-bt-board { position: relative; display: flex; flex-direction: column; }
.vm-bt-person {
  position: relative; display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: center; column-gap: 14px;
  padding: 10px 0 22px; border-top: 1px solid #f1f5f9; color: #0f172a;
}
.vm-bt-person-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.vm-bt-pin, .vm-bt-av { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; }
.vm-bt-pin { border-radius: 8px; background: linear-gradient(135deg, #22d3ee, #0ea5e9); }
.vm-bt-av { width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #ffffff; }
.vm-bt-person-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.vm-bt-person-name small { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; color: #64748b; }
/* Desktop: the strip's own label says their time; only a status that is
   not plain "working" shows, under the name. */
.vm-bt-person-at { flex-basis: 100%; padding-left: 36px; }
.vm-bt-stat {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid #cbd5e1; background: #ffffff;
  font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #64748b; white-space: nowrap;
}
.vm-bt-stat i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.vm-bt-stat.is-working { display: none; }
.vm-bt-stat.is-off { border-color: #fcd34d; color: #92400e; }
.vm-bt-stat.is-off i { background: #f59e0b; }
.vm-bt-big { display: none; font-size: 14px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vm-bt-big small { margin-left: 1px; font-size: 11px; font-weight: 600; color: #64748b; }
.vm-bt-big.is-off { color: #94a3b8; }
@media (max-width: 560px) {
  .vm-bt-person { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .vm-bt-person-head { flex-wrap: nowrap; }
  .vm-bt-person-at { flex-basis: auto; padding-left: 0; margin-left: auto; text-align: right; }
  .vm-bt-big { display: block; }
}

.vm-bt-strip { position: relative; height: 34px; }
.vm-bt-cells {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr));
  border-radius: 4px; overflow: hidden;
}
.vm-bt-cells i { position: relative; border-right: 1px solid rgba(255, 255, 255, .35); background: #e2e8f0; }
.vm-bt-cells b { position: absolute; z-index: 1; left: 2px; bottom: 2px; font-size: 8.5px; font-weight: 600; font-style: normal; color: rgba(15, 23, 42, .6); }
.vm-bt-cells i.is-dk b { color: rgba(255, 255, 255, .7); }
.vm-bt-person.is-off .vm-bt-cells i { filter: saturate(.15) brightness(1.08); opacity: .45; }
.vm-bt-ovs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(96, minmax(0, 1fr)); pointer-events: none; }
.vm-bt-wb { border: 3.5px solid rgba(59, 130, 246, .85); border-radius: 5px; }
.vm-bt-wb.is-own { border-color: rgba(20, 184, 166, .9); }
/* Events, in the timeline's own vocabulary (style.css .timeline-event-marker,
   one chip look 2026-09-07 and the visibility edges 2026-09-18): the BODY is
   the category colour, the SIDES are who can see it (green shared, slate
   busy, violet private), a white hairline rings it (dashed = tentative), and
   a masked teammate event is the slate hatched "Busy" block. A copy, not the
   class itself: comparison-column.js walks every .timeline-event-marker on
   the page for its scan-column overlap pass. Edges are 2px here, the strip's
   hours being a quarter of the timeline's width. */
.vm-bt-ev {
  position: absolute; top: 3px; bottom: 16px; z-index: 2; box-sizing: border-box; pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 4px;
  background: rgb(120, 130, 150);
  --bt-vis: var(--visibility-shared, #059669);
  box-shadow: inset 2px 0 0 var(--bt-vis), inset -2px 0 0 var(--bt-vis), 0 1px 4px rgba(0, 0, 0, .25);
}
.vm-bt-ev[data-event-type="work"], .vm-bt-ev[data-event-type="shift"], .vm-bt-ev[data-event-type="other"] { background: var(--event-work, #3b82f6); }
.vm-bt-ev[data-event-type="personal"] { background: var(--event-personal, #f472b6); }
.vm-bt-ev[data-event-type="external"] { background: var(--event-external, #14b8a6); }
.vm-bt-ev[data-event-type="timeoff"] { background: var(--status-away-scan, #d97706); }
.vm-bt-ev[data-event-type="meeting"] { background: var(--category-meeting, #8b5cf6); }
.vm-bt-ev[data-event-type="task"] { background: var(--event-task, #6366f1); }
.vm-bt-ev[data-shared-as="busy"] { --bt-vis: var(--visibility-blocked, rgb(120, 130, 150)); }
.vm-bt-ev[data-shared-as="hidden"] { --bt-vis: var(--visibility-private, #8b5cf6); }
.vm-bt-ev[data-status="proposed"], .vm-bt-ev[data-status="tentative"] { border-style: dashed; }
.vm-bt-ev.is-busy, .vm-bt-ev[data-event-type="busy"] {
  border: none;
  background:
    repeating-linear-gradient(-45deg, rgba(120, 130, 150, .45) 0 3px, rgba(148, 163, 184, .7) 3px 7px),
    linear-gradient(#64748b, #64748b);
}
.vm-bt-ev.is-cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.vm-bt-ev.is-cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.dark-mode .vm-bt-ev.is-busy, body.dark-mode .vm-bt-ev[data-event-type="busy"] {
  background: repeating-linear-gradient(-45deg, rgba(51, 65, 85, .6) 0 3px, rgba(71, 85, 105, .65) 3px 7px);
}

/* What the strip marks mean, once, under the board. */
.vm-bt-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 12px; font-size: 11px; color: #64748b; }
.vm-bt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vm-bt-legend i { display: inline-block; width: 16px; height: 10px; border-radius: 3px; }
.vm-bt-legend i.is-work { border: 2.5px solid rgba(59, 130, 246, .85); }
.vm-bt-legend i.is-busy {
  background: repeating-linear-gradient(-45deg, rgba(120, 130, 150, .45) 0 3px, rgba(148, 163, 184, .7) 3px 7px), linear-gradient(#64748b, #64748b);
}
.vm-bt-legend i.is-meet { border: 2.5px solid #f59e0b; background: rgba(250, 204, 21, .18); }
.vm-bt-ech {
  position: absolute; z-index: 4; bottom: -15px; transform: translateX(-50%);
  padding: 0 4px; border-radius: 5px; background: #0f172a; color: #ffffff;
  font-size: 9.5px; font-weight: 700; line-height: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The meeting on every strip: an amber mark over the same hours, so the
   marks line up down the board without crossing any name. */
.vm-bt-mark {
  position: absolute; top: -4px; bottom: -4px; z-index: 3; pointer-events: none;
  border: 3px solid #f59e0b; border-radius: 7px; background: rgba(250, 204, 21, .18);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .16);
}
/* More than six people: the first five and a "+N more" row. */
.vm-bt-more {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 8px 0 0;
  border: 1px dashed #cbd5e1; border-radius: 14px; background: #ffffff;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #0f766e; cursor: pointer;
}
.vm-bt-more span { font-weight: 500; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-bt-more:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }

/* Schedule, and the way back to a day everyone can make: inside the
   answer card. */
.vm-bt-go, .vm-bt-back {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0;
  border-radius: 14px; font: inherit; cursor: pointer;
}
.vm-bt-go {
  min-height: 52px; border: 0; background: #0f766e; color: #ffffff;
  font-size: 15px; font-weight: 800; box-shadow: 0 6px 16px rgba(15, 118, 110, .25);
}
.vm-bt-back {
  min-height: 46px; margin-top: -6px; border: 1px solid #cbd5e1; background: #ffffff; color: #334155;
  font-size: 14px; font-weight: 700;
}
.vm-bt-go:focus-visible, .vm-bt-back:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }

@media (max-width: 560px) {
  .vm-bt-best { padding: 16px; }
  .vm-bt-best-main strong { font-size: 25px; }
  .vm-bt-faces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .vm-bt-face { flex-direction: column; gap: 4px; padding: 10px 4px; text-align: center; }
  .vm-bt-face-txt { align-items: center; max-width: 100%; }
}

/* "Other options" (folded) stays desktop-only, as before: its cards are
   laid out for wide screens; on a phone the day grid is the way to browse. */
.vm-results-ranking-list .vm-results-others { margin-top: 20px; }


/* Dark mode */
body.dark-mode .vm-bt-sec { color: #f1f5f9; }
body.dark-mode .vm-bt-sec em { color: #94a3b8; }
body.dark-mode .vm-bt-best { background: #1e293b; border-color: #334155; color: #f1f5f9; box-shadow: none; }
body.dark-mode .vm-bt-best-day { background: #042f2e; border-color: #134e4a; color: #5eead4; }
body.dark-mode .vm-bt-best-day b, body.dark-mode .vm-bt-best-head { color: #5eead4; }
body.dark-mode .vm-bt-best-main > span, body.dark-mode .vm-bt-best-note { color: #cbd5e1; }
body.dark-mode .vm-bt-best-note b { color: #5eead4; }
body.dark-mode .vm-bt-best[data-fallback="true"] { border-color: #b45309; }
body.dark-mode .vm-bt-best[data-fallback="true"] .vm-bt-best-head { color: #fcd34d; }
body.dark-mode .vm-bt-best[data-fallback="true"] .vm-bt-best-day { background: #0f172a; border-color: #78350f; color: #fcd34d; }
body.dark-mode .vm-bt-best[data-fallback="true"] .vm-bt-best-day b { color: #f1f5f9; }
body.dark-mode .vm-bt-face { background: #0f172a; }
body.dark-mode .vm-bt-face small { color: #94a3b8; }
body.dark-mode .vm-bt-face.is-off b { color: #fcd34d; }
body.dark-mode .vm-bt-day { background: #1e293b; border-color: #334155; color: #94a3b8; }
body.dark-mode .vm-bt-day em { color: #f1f5f9; }
body.dark-mode .vm-bt-day.is-part { border-color: #b45309; }
body.dark-mode .vm-bt-day.is-na { background: #0f172a; }
body.dark-mode .vm-bt-day.is-active { background: #042f2e; border-color: #14b8a6; color: #5eead4; }
body.dark-mode .vm-bt-day.is-active em { color: #5eead4; }
body.dark-mode .vm-bt-key { color: #94a3b8; }
body.dark-mode .vm-bt-key i.is-na { background: #475569; }
body.dark-mode .vm-bt-tod { background: #0f172a; }
body.dark-mode .vm-bt-tod-opt { color: #94a3b8; }
body.dark-mode .vm-bt-tod-opt.is-active { background: #334155; color: #f1f5f9; box-shadow: none; }
body.dark-mode .vm-bt-note { background: #172554; border-color: #1e3a8a; color: #bfdbfe; }
body.dark-mode .vm-bt-note strong { color: #f1f5f9; }
body.dark-mode .vm-bt-time { background: #1e293b; border-color: #334155; color: #f1f5f9; }
body.dark-mode .vm-bt-tag { color: #5eead4; }
body.dark-mode .vm-bt-tag.is-mut { color: #94a3b8; }
body.dark-mode .vm-bt-tag.is-out { color: var(--status-off); } /* outside their hours */
body.dark-mode .vm-bt-time.is-active { background: #042f2e; border-color: #14b8a6; color: #5eead4; }
body.dark-mode .vm-bt-time.is-ghost { border-color: #475569; color: #cbd5e1; }
body.dark-mode .vm-bt-person { border-top-color: #334155; color: #f1f5f9; }
body.dark-mode .vm-bt-person-name small, body.dark-mode .vm-bt-big small { color: #94a3b8; }
body.dark-mode .vm-bt-stat { background: #0f172a; border-color: #475569; color: #cbd5e1; }
body.dark-mode .vm-bt-stat.is-off { border-color: #b45309; color: #fcd34d; }
body.dark-mode .vm-bt-back { background: #1e293b; border-color: #475569; color: #e2e8f0; }
body.dark-mode .vm-bt-more { background: #1e293b; border-color: #475569; color: #5eead4; }
body.dark-mode .vm-bt-more span { color: #94a3b8; }
body.dark-mode .vm-bt-legend { color: #94a3b8; }

/* FAIRNESS GUARDRAILS (Business, 2026-10-08): a time that breaks a limit the
   group set says who for (amber, the same "outside their hours" tone as
   .vm-bt-tag.is-out); the best card says when it is inside every one. A
   chip has no room for the sentence: amber edge, sentence in its title. */
.vm-guardrail { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; font-weight: 600; color: #b45309; }
.vm-guardrail i { font-size: 10px; }
.vm-bt-best-main > .vm-guardrail { color: #b45309; }
.vm-bt-best-main > .vm-guardrail.is-inside { color: #0f766e; font-weight: 500; }
.vm-bt-time.has-guardrail { border-color: #f59e0b; }
.vm-bt-time.has-guardrail.is-active { border-color: #fbbf24; }
body.dark-mode .vm-guardrail { color: #fcd34d; }
body.dark-mode .vm-bt-best-main > .vm-guardrail.is-inside { color: #5eead4; }