/* PIECE F — the OFFICE screen's stylesheet. rc-2026-09-25-0630, branch wt-f.

   tokens.css rule 1: NO PER-SCREEN COLOUR, EVER. Nothing in this file
   declares a colour value; every rule names which token applies where.
   tokens.css is imported by office.html and is NOT edited here - it is
   shared and byte-pinned.

   tokens.css rule 2: colour never carries meaning alone. A refusal is the
   inverse alert block (.warn) - a background, a border and the words - not
   red text.

   A DESK, NOT A TRUCK. The office person is at a computer, so this screen
   does not need a glove's target on every control. It keeps the --tap floor
   anyway (a mis-tap on "cancel this code" costs a man his set-up) and it
   keeps --fs-number for the code and the temporary PIN, because those two
   figures are READ OUT LOUD off this glass and a misread 8 for a B is a
   phone call that fails. */

* { box-sizing: border-box; }

body {
  padding: var(--sp-2);
  max-width: 44rem;
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-ui);
}

h1, h2 {
  font-size: var(--fs-head);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
}

label {
  display: block;
  margin: var(--sp-2) 0 6px;
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
}

input {
  width: 100%;
  min-height: var(--tap);
  font-size: var(--fs-number);
  font-weight: var(--fw-label);
  padding: 12px;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
}

/* P4-4: the fixed "B" beside a B-number box - drawn, not typed, not
   selectable; the box holds the four digits (office.js bNumberDigits). */
.bnum { display: flex; align-items: stretch; }
.bnum-prefix {
  display: flex; align-items: center; justify-content: center;
  min-width: var(--tap); padding: 0 12px;
  font-size: var(--fs-number); font-weight: var(--fw-label);
  border: var(--bw) solid var(--c-border); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  -webkit-user-select: none; user-select: none; pointer-events: none;
}
.bnum input { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--radius) var(--radius) 0; }

button {
  min-height: var(--tap);
  min-width: var(--tap);
  margin-top: var(--tap-gap);
  padding: 0 var(--sp-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
}

/* The ONE primary action per screen. No filled control anywhere: white on
   Bacco Blue measures 3.96:1 and fails AA at 18px/700, which is why three
   tests on the login screen forbid one. Weight and height carry it. */
.primary {
  min-height: var(--tap-primary);
  font-weight: var(--fw-head);
}

a { color: var(--c-accent); }

:focus-visible {
  outline: var(--bw-focus) solid var(--c-accent);
  outline-offset: 2px;
}

hr.rule { border: 0; border-top: var(--bw-rule) solid var(--c-rule); }

.muted {
  color: var(--c-text-2);
  font-weight: var(--fw-body);
  font-size: var(--fs-min);
}

/* the inverse alert block — NOT a colour on text */
.warn {
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  border: var(--bw) solid var(--c-alert-text);
  border-radius: var(--radius);
  padding: 12px;
  font-weight: var(--fw-label);
}
.warn .muted { color: var(--c-alert-text); }

.bar {
  display: flex;
  gap: var(--tap-gap);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* The code and the temporary PIN, read out loud. Biggest type on the screen,
   inside a ruled block so the eye lands on the right line on the first try. */
.code-block {
  border: var(--bw) solid var(--c-rule);
  border-radius: var(--radius);
  padding: var(--sp-2);
  margin: var(--sp-2) 0;
}
.code-label {
  margin: 0 0 4px;
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  color: var(--c-text-2);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}
.code-value {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-number);
  font-weight: var(--fw-head);
  line-height: var(--lh-tight);
  /* A code is read a character at a time. Wide spacing so O and 0, and 8 and
     B, are read as one character each and not as a word. */
  letter-spacing: 0.12em;
}
.code-value:last-child { margin-bottom: 0; }

.office-list { list-style: none; margin: 0; padding: 0; }
.office-list-row {
  display: flex;
  gap: var(--tap-gap);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: var(--bw) solid var(--c-border);
  padding: var(--sp-1) 0;
}

[hidden] { display: none !important; }

/* E-53e: the job upload's dry-run report (web/office-jobs.html shares this
   sheet). No colour of its own: a refused row is marked with the inverse
   alert block's tokens AND the words "Problem - not saved" in its cell. */
.jobs-report { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0; }
.jobs-report th, .jobs-report td {
  text-align: left; vertical-align: top; padding: 6px;
  border-bottom: var(--bw-rule) solid var(--c-rule);
  font-size: var(--fs-label);
}
.jobs-row-error td { background: var(--c-alert-bg); color: var(--c-alert-text); }
input[type="file"] { font-size: var(--fs-label); }