/* E-53i - the OFFICE LISTS screen's stylesheet.

   tokens.css rule 1: NO PER-SCREEN COLOUR. Nothing here declares a colour
   value; every rule names the token that applies. tokens.css is imported by
   office-lists.html and is not edited.
   tokens.css rule 2: colour never carries meaning alone. A refusal is the
   inverse alert block (.warn) - background, border and words.

   A DESK, NOT A TRUCK: the office person is at a computer. The --tap floor
   is kept on every control anyway. */

* { box-sizing: border-box; }

body {
  padding: var(--sp-2);
  max-width: 60rem;
  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);
}

h2 { margin-top: var(--sp-4); }

.muted, .note { color: var(--c-text-2); }

fieldset {
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-2);
}

legend { font-size: var(--fs-label); font-weight: var(--fw-label); }

label.choice {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  font-size: var(--fs-label);
}

label.choice input { width: 24px; height: 24px; }

label { display: block; margin: var(--sp-1) 0; font-size: var(--fs-label); }

input[type="file"] {
  width: 100%;
  min-height: var(--tap);
  font-size: var(--fs-body);
  padding: 12px;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
}

button, a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--sp-3);
  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);
  text-decoration: none;
  cursor: pointer;
}

button.primary {
  min-height: var(--tap-primary);
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}

button:disabled { opacity: 0.5; cursor: not-allowed; }

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

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

.warn {
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
  border: var(--bw) solid var(--c-alert-text);
  border-radius: var(--radius);
  padding: var(--sp-2);
  margin: var(--sp-2) 0;
}

.warn a { color: var(--c-alert-text); }

#lists-message:empty { display: none; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-2);
  font-size: var(--fs-min);
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-1);
  border-bottom: var(--bw) solid var(--c-border);
}

tr.row-error td { font-weight: var(--fw-label); }
tr.row-error td:nth-child(3) {
  background: var(--c-alert-bg);
  color: var(--c-alert-text);
}

@media (max-width: 40rem) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { border-bottom: var(--bw) solid var(--c-border); padding: var(--sp-1) 0; }
  td { border: 0; padding: 2px 0; }
}

/* Patch #4 (lane E batch6): the way out - Office screen and Home - at the
   top and the foot of the page. Tokens only (rule 1); each link is a full
   --tap target with a border, so it reads as a control without colour. */
.lists-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tap-gap);
  padding-bottom: var(--sp-1);
  border-bottom: var(--bw-rule) solid var(--c-rule);
  margin-bottom: var(--sp-2);
}

.lists-nav--foot {
  border-bottom: 0;
  border-top: var(--bw-rule) solid var(--c-rule);
  padding-top: var(--sp-2);
  margin-top: var(--sp-4);
}

.lists-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 12px;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-accent);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  text-decoration: none;
}