/* Hours across chosen dates (js/ui/day-hours-grid.js, 2026-10-18). Same grid
   as "Choose times": a name column, one cell per hour, every hour labelled. */
.dhg { --dhg-name: 56px; --dhg-gap: 8px; display: flex; flex-direction: column; gap: 10px; }
.dhg-seg { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dhg-seg-label { font-size: 13px; font-weight: 700; color: var(--text-primary, #0f172a); margin-right: 6px; }
.dhg-seg-btn { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--slate-300, #cbd5e1);
  background: var(--surface-primary, #ffffff); color: var(--text-secondary, #475569); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.dhg-seg-btn.is-on { background: var(--primary-50, #f0fdfa); border-color: var(--primary-600, #0d9488); color: var(--primary-700, #0f766e); }
.dhg-hint, .dhg-empty { margin: 0; font-size: 12.5px; color: var(--text-secondary, #475569); }
/* ONE HOURS PICKER (owner 2026-10-21, board E3): each date is an AM row over
   a PM row, the whole day on screen, a line between dates, hour lines kept;
   the same layout as My booking page's week (css/booking-board.css .whg-*). */
.dhg-grid { display: flex; flex-direction: column; }
.dhg-head, .dhg-date { display: grid; grid-template-columns: var(--dhg-name) 1.7rem repeat(12, minmax(0, 1fr)); column-gap: 0; align-items: stretch; }
.dhg-head { padding-bottom: 4px; }
.dhg-hrs { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dhg-date { row-gap: 3px; padding: 6px 0; }
.dhg-date + .dhg-date { border-top: 1px solid var(--border-color, #cbd5e1); }
.dhg-date > .dhg-name { grid-row: span 2; align-self: center; }
.dhg-tag { display: flex; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--text-secondary, #64748b); }
.dhg-row { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dhg-hrs span { text-align: center; font-size: 10px; letter-spacing: -0.2px; font-weight: 600; color: var(--text-secondary, #475569); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dhg-hrs small { font-size: 7px; font-weight: 800; margin-left: 1px; }
.dhg-name { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 700; color: var(--text-primary, #334155); white-space: nowrap; }
.dhg-name small { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary, #94a3b8); }
.dhg-row { height: 34px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.25); }
.dhg .dhg-cell { min-width: 0 !important; min-height: 0 !important; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer;
  border-left: 1px solid rgba(15, 23, 42, 0.3); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--level-possible-ink, #0f172a); }
.dhg-cell:first-child { border-left: 0; }
/* Offered hours wear the booking editors' open-hours colour (owner 2026-10-21,
   UI rule 1: one colour for "open"; was a board-status green). */
.dhg-cell.dhg-on { background: var(--level-possible, #99f6e4); }
.dhg-cell.dhg-busy { background: #e55e5e; }
.dhg-cell.dhg-off { background: #f1f5f9; }
/* A changed hour is outlined (no dot). */
.dhg-cell.is-pinned { box-shadow: inset 0 0 0 2px var(--primary-700, #0f766e); }
.dhg-cell:focus-visible { outline: 2px solid var(--primary-600, #0d9488); outline-offset: -2px; }
.dhg-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-secondary, #475569); }
.dhg-key span { display: inline-flex; align-items: center; gap: 5px; }
.dhg-k { width: 14px; height: 10px; border-radius: 3px; flex: none; font-style: normal; font-size: 12px; line-height: 10px; text-align: center; }
.dhg-k-on { background: var(--level-possible, #99f6e4); } .dhg-k-busy { background: #e55e5e; }
.dhg-k-off { background: #f1f5f9; border: 1px solid #cbd5e1; } .dhg-k-pin { background: var(--level-possible, #99f6e4); color: var(--level-possible-ink, #0f172a); box-shadow: inset 0 0 0 2px var(--primary-700, #0f766e); }
.dhg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dhg-sync { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--slate-200, #e2e8f0); border-radius: 12px; cursor: pointer; }
.dhg-sync input { width: var(--checkbox-size, 20px); height: var(--checkbox-size, 20px); margin-top: 2px; flex: none; accent-color: var(--primary-600, #0d9488); }
.dhg-sync > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.dhg-sync > span > span { font-size: 12px; color: var(--text-secondary, #475569); }
body.dark-mode .dhg-cell.dhg-off { background: #334155; }
body.dark-mode .dhg-cell.is-pinned, body.dark-mode .dhg-k-pin { box-shadow: inset 0 0 0 2px #5eead4; }
body.dark-mode .dhg-date + .dhg-date { border-top-color: #334155; }
body.dark-mode .dhg-k-off { background: #334155; border-color: #475569; }
body.dark-mode .dhg-cell.dhg-on, body.dark-mode .dhg-k-on, body.dark-mode .dhg-k-pin { color: #f0fdfa; }
body.dark-mode .dhg-seg-btn { background: var(--slate-800, #1e293b); border-color: var(--slate-600, #475569); color: var(--slate-300, #cbd5e1); }
body.dark-mode .dhg-seg-btn.is-on { background: rgba(20, 184, 166, 0.14); color: #5eead4; border-color: #2dd4bf; }
/* Tight rows: am/pm on its own line under the number (no two numbers touch). */
.dhg-hrs.is-stacked span { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.dhg-hrs.is-stacked small { margin-left: 0; }

/* ONE WAY TO SET TIMES (owner 2026-10-28, canvas 6ryLAsvK7aeFuRmfVUgEww): each
   date a row you open, one at a time, drawn as Choose times' day rows; the
   open date holds the shared 24-hour track (css/meeting-times-step.css). */
.dhg-days { display: flex; flex-direction: column; gap: 8px; }
.dhg-drow { border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; background: var(--white, #fff); }
.dhg-drow.is-open { border: 2px solid var(--primary-700, #0f766e); }
.dhg-drow-main { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dhg-dtile { flex: 0 0 40px; height: 40px; border-radius: 10px; background: var(--surface-hover, #f1f5f9); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #475569; text-transform: uppercase; line-height: 1.05; }
.dhg-dtile b { font-size: 15px; color: var(--text-primary, #0f172a); }
.dhg-dname { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dhg-dname b { font-size: 15px; color: var(--text-primary, #1e293b); }
.dhg-dname span { font-size: 12.5px; color: var(--text-secondary, #64748b); }
.dhg-chev { color: #94a3b8; font-size: 12px; }
.dhg-drow-b { border-top: 1px solid var(--border-color, #e2e8f0); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
body.dark-mode .dhg-drow { background: var(--slate-800, #1e293b); border-color: var(--slate-600, #475569); }
body.dark-mode .dhg-drow.is-open { border-color: #14b8a6; }
body.dark-mode .dhg-dtile { background: #0f172a; color: #cbd5e1; }
body.dark-mode .dhg-dtile b, body.dark-mode .dhg-dname b { color: #f1f5f9; }