/* ══════════════════════════════════════════════════════════════════════════
   floor.css — the production floor terminal.

   A genuinely different surface, not the back office in dark mode. It is
   read at arm's length, on a wall-mounted screen, under warehouse lighting,
   by someone wearing gloves who has both hands busy. So:

     · dark always, regardless of the user's theme — it sits opposite a
       roller door and a light screen is a mirror
     · 56px minimum targets; a gloved fingertip is not a mouse pointer
     · type one step up throughout, and every number in the mono face
     · no hover states — there is no pointer
     · one action per card, and it is the action they need

   Everything else on this platform is designed to disappear into the task.
   This one has to be readable from three metres away.
   ══════════════════════════════════════════════════════════════════════════ */

[data-surface='floor'] {
  font-size: var(--t-16);
}

[data-surface='floor'] .app-main { padding: var(--s-5) var(--s-6); }
[data-surface='floor'] .page-head h1 { font-size: var(--t-32); letter-spacing: -0.02em; }
[data-surface='floor'] .app-topbar { height: 4rem; }
[data-surface='floor'] .app-topbar h1,
[data-surface='floor'] .app-topbar .topbar-h1 { font-size: var(--t-18); }

/* No hover anywhere: there is no pointer on this screen, and a hover style
   that only fires on a stray mouse is a lie about what is interactive. */
[data-surface='floor'] .btn { min-height: 3.5rem; padding: 0 var(--s-6); font-size: var(--t-16); }
[data-surface='floor'] .btn-sm { min-height: 2.75rem; font-size: var(--t-14); }
[data-surface='floor'] .btn svg { width: 1.35rem; height: 1.35rem; }

.floor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: var(--s-4);
}

.jobcard {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-5);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-4);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t-fast) ease, transform var(--t-press) var(--ease-out);
}
.jobcard:active { transform: scale(0.985); }
 /* Citron marks the job to run NEXT, not every job that could be run.
    Outlining all of them in the accent colour tells the operator nothing. */
.jobcard.is-next { border-color: var(--citron); }
.jobcard.is-late { border-color: var(--danger); background: var(--danger-bg); }

.jobcard .ref {
  font-family: var(--font-mono);
  font-size: var(--t-26);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.jobcard .cust { font-size: var(--t-14); color: var(--ink-2); margin-top: 0.1rem; }
.jobcard .what { font-size: var(--t-18); font-weight: 600; margin-top: var(--s-3); }
.jobcard .facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.jobcard .facts b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-21);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.jobcard .facts span {
  display: block;
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.1rem;
}

/* The spec a machine operator actually reads: large, mono, one fact a line. */
.floor-spec { display: grid; gap: 0; }
.floor-spec > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.floor-spec dt {
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.floor-spec dd { font-family: var(--font-mono); font-size: var(--t-21); letter-spacing: -0.02em; text-align: right; }

/* The name list, at a size that can be checked against a garment in hand. */
.floor-names { width: 100%; border-collapse: collapse; font-size: var(--t-16); }
.floor-names th {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  font-size: var(--t-12);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid var(--line);
}
.floor-names td { padding: var(--s-3); border-bottom: 1px solid var(--line); }
.floor-names .num { font-family: var(--font-mono); text-align: right; }
.floor-names tr[data-done='true'] td { color: var(--ink-3); text-decoration: line-through; }

.floor-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  background: linear-gradient(to top, var(--bg) 65%, transparent);
}
.floor-actions .btn { flex: 1 1 0; }

@media (max-width: 60rem) {
  [data-surface='floor'] .app-main { padding: var(--s-4); }
  .floor-grid { grid-template-columns: minmax(0, 1fr); }
}