/* ==========================================================================
   f-groups.css — CAT-11 only. Tokens only: no colours, no radii, no fonts
   declared here that are not already in tokens.css.
   ========================================================================== */

.gr-head { padding: var(--s-6) var(--gutter) var(--s-4); }
.gr-head h1 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  font-weight: var(--w-regular);
}
.gr-head p { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure); }

.gr-block { padding: var(--s-5) var(--gutter); border-top: 1px solid var(--hairline); }
.gr-block > * + * { margin-top: var(--s-4); }
.gr-foot { padding: var(--s-5) var(--gutter) var(--s-8); }
.gr-foot > * + * { margin-top: var(--s-3); }

.gr-frame {
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: var(--s-4);
}
.gr-frame > * + * { margin-top: var(--s-3); }
.gr-alarm { border-color: var(--ink-alarm); }
.gr-alarm .t-label { color: var(--ink-alarm); }

.gr-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.gr-num { font-variant-numeric: tabular-nums; }

/* The shared chip is 36px tall, which is under the 48px floor this category
   holds itself to. Raised inside our own blocks only. */
.gr-block .chip { min-height: var(--tap); padding-inline: var(--s-4); }

/* ---- key/value rows -------------------------------------------------------- */

.gr-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  min-height: var(--tap);
}
.gr-kv-t { display: flex; flex-direction: column; gap: 2px; }
.gr-kv-v { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---- the working ----------------------------------------------------------- */

.gr-working { border: 1px solid var(--hairline); padding: var(--s-3) var(--s-4); }
.gr-working-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
}
.gr-working-row + .gr-working-row { border-top: 1px solid var(--hairline); }
.gr-working-total { border-top: 1px solid var(--ink); }
.gr-working .gr-num { font-variant-numeric: tabular-nums; }

/* ---- progress bar ---------------------------------------------------------- */

.gr-bar-wrap > * + * { margin-top: var(--s-2); }
.gr-bar {
  height: 10px;
  border: 1px solid var(--ink);
  background: transparent;
  overflow: hidden;
}
.gr-bar-fill { display: block; height: 100%; background: var(--ink); }

/* ---- tray rows ------------------------------------------------------------- */

.gr-tray {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.gr-tray-main { flex: 1 1 auto; min-width: 0; }
.gr-tray-name { font-size: var(--t-body); }
.gr-tray-gloss { color: var(--ink-muted); font-size: var(--t-small); display: block; margin-top: 2px; }
.gr-tray-meta { color: var(--ink-muted); font-size: var(--t-small); display: block; margin-top: var(--s-2); }
.gr-tray-side { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-end; }
.gr-tray[data-off="true"] .gr-tray-main { opacity: 0.5; }
.gr-tray-price { font-variant-numeric: tabular-nums; }

/* ---- stepper --------------------------------------------------------------- */

.gr-step { display: flex; align-items: stretch; border: 1px solid var(--hairline); }
.gr-step button {
  min-width: var(--tap);
  min-height: var(--tap);
  border: 0;
  background: transparent;
  font-size: var(--t-body);
  color: var(--ink);
}
.gr-step button[disabled] { opacity: 0.35; }
.gr-step input {
  width: 56px;
  min-height: var(--tap);
  border: 0;
  border-inline: 1px solid var(--hairline);
  background: transparent;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
}

/* ---- stage tracker --------------------------------------------------------- */

.gr-stages { list-style: none; margin: 0; padding: 0; }
.gr-stage {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-3) 0;
  position: relative;
}
.gr-stage + .gr-stage { border-top: 1px solid var(--hairline); }
.gr-stage-dot {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-top: 6px;
  border: 1px solid var(--ink);
  background: transparent;
}
.gr-stage[data-state="done"] .gr-stage-dot { background: var(--ink); }
.gr-stage[data-state="now"] .gr-stage-dot { box-shadow: 0 0 0 3px var(--scrim-soft); background: var(--ink); }
.gr-stage[data-state="ahead"] { opacity: 0.55; }
.gr-stage-body { display: flex; flex-direction: column; gap: 2px; }

/* ---- coordinator strip ------------------------------------------------------ */

.gr-coord {
  margin: var(--s-5) var(--gutter) var(--s-8);
  padding: var(--s-4);
  border: 1px solid var(--hairline);
  border-left: var(--frame) solid var(--ink);
}
.gr-coord > * + * { margin-top: var(--s-2); }

/* ---- checkboxes ------------------------------------------------------------- */

.gr-check {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  min-height: var(--tap);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.gr-check input { margin-top: 5px; width: 20px; height: 20px; accent-color: var(--ink); }
.gr-check > span { display: flex; flex-direction: column; gap: 2px; }

/* ---- copy block --------------------------------------------------------------- */

.gr-copy {
  border: 1px solid var(--hairline);
  padding: var(--s-3);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-label);
  line-height: 1.6;
  white-space: pre;
}

/* ---- the big number ------------------------------------------------------------ */

.gr-count {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  font-variant-numeric: tabular-nums;
}

/* ---- tables (statement, accounting rows) ---------------------------------------- */

.gr-scroll { overflow-x: auto; }
.gr-table { border-collapse: collapse; width: 100%; font-size: var(--t-small); }
.gr-table th, .gr-table td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.gr-table th {
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--w-regular);
}
.gr-table td.gr-num, .gr-table th.gr-num { text-align: right; font-variant-numeric: tabular-nums; }
.gr-table tr[data-state="overdue"] td { color: var(--ink-alarm); }
.gr-table tr[data-state="superseded"] td { text-decoration: line-through; opacity: 0.6; }

/* ---- struck lines ---------------------------------------------------------------- */

.gr-struck { text-decoration: line-through; opacity: 0.6; }

/* ---- the BEO / fatura sheet, one A4 page ------------------------------------------ */

.gr-sheet { border: 1px solid var(--hairline); padding: var(--s-5); }
.gr-sheet h3 { font-family: var(--font-display); font-weight: var(--w-regular); font-size: var(--t-sub); }
.gr-sheet-head {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink);
}
.gr-sheet-sec { padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
.gr-sheet-sec ul { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.gr-sheet-sec li { font-size: var(--t-small); line-height: var(--lh-body); }

@media print {
  .gr-sheet { border: 0; padding: 0; font-size: 10pt; page-break-inside: avoid; }
  .gr-head, .gr-coord, .gr-foot, .gr-block:not(.gr-printable) { display: none; }
  .gr-sheet-sec { padding: 2mm 0; }
}

/* ---- signature pad ----------------------------------------------------------------- */

.gr-sign { border: 1px solid var(--ink); touch-action: none; display: block; width: 100%; height: 160px; }
.gr-sign-done { border: 1px solid var(--hairline); padding: var(--s-3); }
.gr-sign-done img { display: block; max-width: 100%; }

/* ---- territory map (a list, honestly) ------------------------------------------------ */

.gr-terr { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); min-height: var(--tap); align-items: baseline; }
.gr-terr[data-status="closed"] { opacity: 0.6; }
.gr-terr-status { font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }