/* score screens. Owned by workstream F; shared rules live in css/components.css and css/screens.css. */

/* ------------------------------------------------------------- the register */
.reg-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
               gap: var(--s-4); margin: var(--s-5) 0 var(--s-5); }
.reg-toolbar-left, .reg-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.reg-unit { min-width: 14rem; max-width: 100%; }
.reg-dates { display: flex; align-items: center; gap: var(--s-1); }
.reg-dates input[type="date"] { width: 10.5rem; }
.reg-dates .flip { transform: rotate(180deg); }

.reg-scroll { margin-bottom: var(--s-5); }
.reg-table th { white-space: nowrap; vertical-align: bottom; }
.reg-th { display: block; }
.reg-range { display: block; font-weight: 400; color: var(--c-text-2); font-size: 0.8em; letter-spacing: 0; }
.reg-row td { vertical-align: middle; }
.reg-row[data-state="dirty"] td:first-child { box-shadow: inset 3px 0 0 var(--c-accent); }
.reg-row[data-state="saved"] td:first-child { box-shadow: inset 3px 0 0 var(--c-success); }
.reg-row[data-state="error"] td:first-child { box-shadow: inset 3px 0 0 var(--c-danger); }
.reg-person { min-width: 13rem; }
.reg-person .person { text-decoration: none; color: inherit; }
.reg-marks { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.reg-attcell { min-width: 11rem; }
.reg-att { max-width: 12rem; }
.reg-notified { display: block; margin-top: var(--s-1); width: 12rem; font-size: 0.85em; }
.reg-cell { width: 6.5rem; }
.reg-num { width: 4.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.reg-num:disabled { background: transparent; border-color: transparent; color: var(--c-text-3); }
.reg-day, .reg-cycle { white-space: nowrap; }
.reg-figure { display: inline-flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.reg-figure-value { font-weight: 600; }
.reg-figure[data-tone="bad"] .reg-figure-value { color: var(--c-danger); }
.reg-figure[data-tone="good"] .reg-figure-value { color: var(--c-success); }
.reg-figure[data-tone="none"] .reg-figure-value { color: var(--c-text-3); }
.reg-figure-of { color: var(--c-text-2); font-size: 0.85em; }
.reg-actions { white-space: nowrap; }
.reg-actions > * + * { margin-left: var(--s-2); }
.reg-actions input[type="text"] { width: 11rem; }
.reg-status { display: block; max-width: 16rem; white-space: normal; font-size: 0.82em; color: var(--c-text-2); margin-top: var(--s-1); }
.reg-row[data-state="error"] .reg-status { color: var(--c-danger); }
.reg-row[data-state="saved"] .reg-status { color: var(--c-success); }
.reg-note-row td { background: var(--c-surface-2); }
.reg-note { display: grid; grid-template-columns: 2fr 1.2fr 1fr; gap: var(--s-4); padding: var(--s-2) 0; }
.reg-note textarea { width: 100%; }
.reg-scorecell { min-width: 12rem; }
.reg-score { display: flex; flex-direction: column; gap: 2px; }

.reg-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.reg-task { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4);
            border: var(--bw) solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.reg-task-body { flex: 1 1 auto; min-width: 0; }

/* -------------------------------------------------------------- coverage */
.cov { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); }
.cov-days { display: flex; gap: 2px; flex: 1 1 auto; max-width: 24rem; }
.cov-day { flex: 1 1 0; height: 8px; border-radius: 2px; background: var(--c-border); }
.cov-day[data-tone="good"] { background: var(--c-success); }
.cov-day[data-tone="warn"] { background: var(--c-warn, var(--c-accent)); }
.cov-day[data-tone="bad"] { background: var(--c-danger); }

/* ------------------------------------------------------------------ leads */
.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: var(--s-5); }
.lead-card .card-head { display: flex; align-items: center; gap: var(--s-3); }
.scorecard { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.sc-cell { padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface-2); }
.sc-label { font-size: 0.75em; color: var(--c-text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.lead-rate { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-3) var(--s-4); }
.lead-rate .field-wide { grid-column: 1 / -1; }
.lead-rate .form-actions { grid-column: 1 / -1; align-items: center; }

/* ---------------------------------------------------------------- conduct */
.conduct > .section + .section { margin-top: var(--s-7); }
/* Four sections on one tab means four empty states on a person with a clean
   record, and four unbounded blocks of centred grey read as a broken screen
   rather than as four true answers. Bounding and shortening them keeps each
   one legible as "this section, nothing in it". */
.conduct .empty-inline { padding: var(--s-6) var(--s-5); border: var(--bw) dashed var(--c-border);
                         border-radius: var(--r-md); gap: var(--s-2); }
.conduct .empty-inline .empty-mark { width: 26px; height: 26px; margin-bottom: 0; }
/* A closing line under a section: the note about leads, the pointer at the
   documents tab. Constrained so it reads as prose rather than as a full width
   band of grey text at 1920. */
.section-foot { margin: var(--s-4) 0 0; max-width: 72ch; line-height: var(--t-body); }
/* A link in a closing line is still a touch target. Padded to clear the 24px
   floor the geometry audit enforces, with the padding pulled back out by an
   equal negative margin so the line keeps its rhythm. */
.section-foot a { display: inline-block; padding: 5px 4px; margin: -5px -4px; }
.conduct-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.conduct-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.flag-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.appeal-row { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4); border: var(--bw) solid var(--c-border);
              border-radius: var(--r-md); background: var(--c-surface); }
.appeal-body { flex: 1 1 auto; min-width: 0; }
.appeal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.kudos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.kudos-row { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4);
             border: var(--bw) solid var(--c-border); border-radius: var(--r-md); }
.kudos-body { flex: 1 1 auto; min-width: 0; }
.sessions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.session-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
               border: var(--bw) solid var(--c-border); border-radius: var(--r-md); }
.session-body { flex: 1 1 12rem; min-width: 0; }
/* A withdrawn flag stays on the record and has to look like a withdrawn flag,
   not like a live one. Muted rather than hidden: the row is the evidence that
   somebody raised it and somebody else took it back. */
.flag-row[data-voided="1"] { opacity: 0.72; border-left-color: var(--c-border); }
.flag-row[data-voided="1"] .flag-mark { color: var(--c-text-3); }
.flag-meeting { margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
                border-left: 2px solid var(--c-border); background: var(--c-surface-2);
                border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.flag-meeting .flag-detail { margin-top: var(--s-2); }

.evidence-table td, .evidence-table th { font-size: 0.9em; }
/* Scroll rather than squeeze. Without a floor the note column compresses to
   one word per line at 390 and a scorer's sentence becomes a vertical strip;
   the table sits in a scrollX wrapper that already paints its edge hints. */
.evidence-table { min-width: 34rem; }
/* An evidence link is a real link somebody taps on a phone, and at 0.9em it is
   19 by 14 with no help. Padded out to clear the 24px floor, pulled back with
   an equal negative margin so the table cells keep their height. */
.evidence-table a, .flag-detail a { display: inline-block; padding: 5px 6px; margin: -5px -6px; }
.evidence-block { margin-top: var(--s-4); }
.evidence-block:empty { margin-top: 0; }
.evidence-block > * + * { margin-top: var(--s-4); }
.evidence-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
                 padding-top: var(--s-4); border-top: var(--bw) solid var(--c-border); }
.evidence-title { font-size: var(--t-sm); font-weight: var(--t-semibold); margin: 0; }
/* The facts grid inside an evidence bundle is denser than a profile's, because
   it sits inside a list row rather than owning a card. */
.evidence-block .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
                         gap: var(--s-3); margin: 0; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 760px) {
  .reg-note { grid-template-columns: 1fr; }
  .reg-actions input[type="text"] { width: 100%; margin-left: 0; margin-top: var(--s-2); }
  .lead-rate { grid-template-columns: 1fr; }
  .reg-unit { min-width: 0; width: 100%; }
  /* align-items: stretch, and it is load bearing. Both rows set flex-start for
     the wide layout, and flex-start on the cross axis of a COLUMN flex box
     sizes every child to max-content - so the narrative paragraph stopped
     wrapping and the row ran 157px past the screen at 390. Stretch puts the
     children back on the container's width and the text wraps again. */
  .appeal-row, .kudos-row { flex-direction: column; align-items: stretch; }
}

/* "Open profile" on a review task. It measured 73 by 21 against the 24px floor
   the geometry audit enforces: a.btn.ghost inherits the button padding but not a
   minimum height, and at the small type of this row that lands just under. A
   floor rather than a bigger font, so the row still reads as a quiet link. */
.reg-task a.btn { min-height: 24px; display: inline-flex; align-items: center; }