/* Hours grid and heatmap (PRD section 10). */

.hint { font-size: 13px; line-height: 1.4; margin-bottom: 12px; }
@media (min-width: 768px) { .hint { font-size: 14px; } }
.textlink-inline { display: inline-block; min-width: 44px; padding: 14px 8px; margin: -14px -8px; text-align: center; text-decoration: underline; }

/* Editable grid: 44px row labels, cells at least 44px square. Narrow screens scroll in the box. */
.hgrid-wrap { overflow-x: auto; padding: 0 1px 1px 0; }
.hgrid { min-width: 352px; touch-action: none; user-select: none; -webkit-user-select: none; }
.hgrid__row { display: grid; grid-template-columns: 44px repeat(7, minmax(44px, 1fr)); }
.hgrid__colhead, .hgrid__corner { min-height: 32px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--ink-secondary); }
.hgrid__colhead abbr { text-decoration: none; }
.hgrid__rowhead { display: flex; align-items: center; font-size: 12px; color: var(--ink-secondary); }
.hcell {
  min-height: 44px; border: 1px solid var(--rule); border-radius: 1px; background: var(--bg);
  margin: 0 -1px -1px 0; cursor: pointer;
}
.hcell[aria-selected="true"] { background: var(--ink); border-color: var(--ink); }
.hcell:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; position: relative; z-index: 1; }
.hcell[aria-selected="true"]:focus-visible { outline-color: var(--focus); outline-offset: 2px; }

.figures { display: flex; gap: 32px; margin: 24px 0 0; }
.figure { display: flex; flex-direction: column; }
.figure__num { font-size: 28px; line-height: 1.1; font-weight: 800; }
.figure__label { font-size: 13px; color: var(--ink-secondary); }

.checks--2col { display: block; }
@media (min-width: 480px) { .checks--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* Read-only heatmap: four states told apart by fill and outline, not colour alone. */
.heatmap { margin-top: 12px; padding: 0 1px 1px 0; }
.heatmap__row { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
.heatmap__head { font-size: 12px; color: var(--ink-secondary); text-align: center; min-height: 24px; }
.heatmap__rowhead { font-size: 12px; color: var(--ink-secondary); display: flex; align-items: center; }
.hm { height: 28px; margin: 0 -1px -1px 0; border: 1px solid var(--rule); border-radius: 1px; background: var(--bg); }
.hm--both { background: var(--accent); border-color: var(--accent); }
.hm--squad { background: var(--strip-off); border-color: var(--strip-off); }
.hm--you { background: var(--bg); border-color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 12px; line-height: 1.4; color: var(--ink-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 14px; border: 1px solid var(--rule); border-radius: 1px; display: inline-block; }
.legend .hm--both { border-color: var(--accent); }
.legend .hm--you { border-color: var(--ink); }