/* hours.css - styles of the working-hours views (hours.js). Own classes carry the h- prefix.
   Colors come from tokens only. The report sheet (.rv) redefines the tokens to paper colors, so nothing here needs a report variant
   except hiding the controls. */

/* ---------- shared bits ---------- */
.h-view { min-width: 0; }
.h-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h-empty { padding-block: 32px; }
.h-k { display: block; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.h-v { display: block; font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.h-s { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted); }
.h-lab { display: block; margin: 16px 0 6px; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.h-fine { font-size: 12px; line-height: 16px; color: var(--muted); }
.h-main { display: block; }
.h-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted); }
.h-sub .mono, .h-main .mono { font-size: 12px; }
.h-note { color: var(--muted); }
.h-n { color: var(--muted); }
.h-tot { font-weight: 600; }
.h-over { color: var(--crit); font-weight: 500; }
.h-slot { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 14px; margin-right: 6px; vertical-align: middle; }
.h-bar { min-width: 72px; max-width: 140px; }
.h-grp { font-weight: 600; }
.h-ind { display: inline-block; padding-left: 16px; }
.h-scope { font-size: 12px; line-height: 16px; color: var(--muted); }
.h-fn { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--fg); overflow-wrap: anywhere; }
.h-view tr, .h-view li, .h-stat, .h-fig, .h-chart, .h-code, .h-ep, .h-bill, .h-sign { break-inside: avoid; }
.h-view .tbl tbody tr:has(.h-grp) > td { background: var(--surface-2); }
.h-view .tbl tbody tr:has(.h-tot) > td { background: var(--surface-2); border-top: 2px solid var(--line); }

/* ---------- filters and buttons ---------- */
.h-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 20px; }
.h-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; min-width: 0; }
.h-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.h-f > span { font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.h-sel {
  height: 34px; min-width: 150px; max-width: 100%; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; line-height: 18px; cursor: pointer;
}
.h-sel:hover { background: var(--surface-2); }
.h-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.h-tb-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.h-applied { display: none; margin-bottom: 16px; font-size: 13px; line-height: 18px; color: var(--muted); }
.rv .h-toolbar { display: none; }
.rv .h-applied { display: block; }
@media (max-width: 599px) {
  .h-filters { width: 100%; }
  .h-f { flex: 1 1 140px; }
  .h-sel { width: 100%; min-width: 0; }
}

/* ---------- figures ---------- */
.h-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.h-stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
.h-stat .h-v { overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .h-stats { gap: 8px; }
  .h-stat { padding: 10px; }
  .h-stat .h-v { font-size: 16px; line-height: 24px; }
}
.h-sum .h-stats { margin-bottom: 16px; }

/* ---------- burn-up chart ---------- */
.h-chart { overflow-x: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.h-c { display: block; width: 100%; min-width: 560px; height: auto; }
.rv .h-chart { overflow: visible; }
.rv .h-c { min-width: 0; }
.h-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--muted); }
.h-legend span { display: inline-flex; align-items: center; gap: 8px; }
.h-sw { display: inline-block; flex: none; width: 20px; height: 0; border-top: 3px solid var(--accent); }
.h-sw.h-sw-plan { border-top: 2px dashed var(--muted); }
.h-cap { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--muted); }

/* ---------- overview card ---------- */
.h-card .card-h h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.card > .h-card { border: 0; border-radius: 0; background: none; }
.h-card-b { padding: 16px; }
.h-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.h-fig { min-width: 0; }
.h-fig .h-v { font-size: 28px; line-height: 34px; letter-spacing: -.01em; }
.h-meter { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.h-card-t { margin-top: 16px; margin-inline: -16px; }
.h-card-t .tbl th, .h-card-t .tbl td { padding-inline: 12px; }
.h-card-t .tbl th:first-child, .h-card-t .tbl td:first-child { padding-left: 16px; }
.h-card-t .tbl th:last-child, .h-card-t .tbl td:last-child { padding-right: 16px; }
.h-card-b > .h-lab { margin-top: 16px; }
.h-recent > li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.h-recent > li:first-child { border-top: 0; padding-top: 2px; }
.h-r-t { min-width: 0; overflow-wrap: anywhere; }
.h-r-h { flex: none; font-weight: 500; white-space: nowrap; }
.h-card-f { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }

/* ---------- monthly report ---------- */
.h-head { margin-bottom: 20px; }
.h-bill { margin-top: 24px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.h-bill .h-v { font-size: 28px; line-height: 34px; }
.h-sign { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--line); }
.h-sign-t { font-size: 14px; line-height: 20px; font-weight: 500; }

/* ---------- API reference ---------- */
.h-lead { margin-bottom: 14px; font-size: 14px; line-height: 22px; }
.h-api .note-box { margin-bottom: 24px; }
.h-ep { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.h-ep + .h-ep { margin-top: 12px; }
.h-ep-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.h-path { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--fg); overflow-wrap: anywhere; min-width: 0; }
.h-ep-d { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--muted); }
.h-auth { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 10px; }
.h-auth .h-lab { margin: 0; }
.h-hd { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--fg); overflow-wrap: anywhere; }
.h-ep .h-fine { margin-top: 8px; }
.h-ep .tbl-wrap { border: 1px solid var(--line); border-radius: var(--r-sm); }
.h-code {
  margin: 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--fg); font-family: var(--font-mono); font-size: 12px; line-height: 18px; white-space: pre; tab-size: 2; user-select: text;
}
.rv .h-code { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
.h-curl-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 16px 0 6px; }
.h-curl-h .h-lab { margin: 0; }
.btn.h-copied { border-color: var(--ok); color: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .btn.h-copied, .h-sel { transition: none; }
}
@media print {
  .h-code { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
  .h-chart { overflow: visible; }
  .h-c { min-width: 0; }
  .h-toolbar { display: none; }
  .h-applied { display: block; }
}