/* Light only: this is read outdoors, and a light page holds up best in direct sun.
   Colors follow site safety signage, and status fills are the ones the procurement workbook used,
   so buyers recognize them. */
:root {
  color-scheme: light;
  --asphalt: #23272b;
  --steel: #565d63;
  --concrete: #e7e8e4;
  --rule: #c9cbc6;
  --white: #ffffff;
  --safety-yellow: #ffc400;
  --danger-red: #b3121a;
  --notice-blue: #0b5cad;
  --safe-green: #1e7b34;

  --font-sign: "Bahnschrift", "DIN Alternate", "DIN Next", "Roboto Condensed", "Arial Narrow",
    "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans CJK TC", "Noto Sans TC", sans-serif;
  --font-body: "Segoe UI", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC",
    "Noto Sans CJK TC", "Noto Sans TC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--concrete);
  color: var(--asphalt);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--notice-blue); }
:focus-visible { outline: 3px solid var(--notice-blue); outline-offset: 2px; }
/* Only paper still pairs the languages. Bare, this would also match <html lang="en">. */
.print-sheet [lang="en"] { color: var(--steel); }
.print-sheet .flag [lang="en"] { color: inherit; }

/* --- Frame --- */
.skip-link { position: absolute; left: 0.5rem; top: -4rem; z-index: 30; padding: 0.75rem 1rem; background: var(--white); color: var(--asphalt); font-weight: 600; }
.skip-link:focus { top: 0.5rem; }
.site-head :focus-visible { outline-color: var(--safety-yellow); }
main:focus { outline: none; }
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--asphalt);
}
.brand {
  color: var(--white);
  font-family: var(--font-sign);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}
.language { display: flex; gap: 2px; margin-left: auto; }
.language a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--white); font-weight: 600; text-decoration: none; }
.language a[aria-current="true"] { background: var(--white); color: var(--asphalt); }
.site-nav { display: flex; gap: 0.25rem; }
.site-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  min-height: 3rem;
  padding: 0.25rem 0.75rem;
  color: var(--white);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.site-nav a[aria-current="page"] { background: var(--safety-yellow); color: var(--asphalt); }
.page { max-width: 62rem; padding: 1rem 1rem 6rem; }

/* --- Controls --- */
.button {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--asphalt);
  background: var(--white);
  color: var(--asphalt);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--concrete); }
.button-primary { background: var(--safety-yellow); }
.button-primary:hover { background: #ffd23f; }
.button[disabled] { opacity: 0.55; cursor: wait; }

.field { display: flex; flex: 1 1 12rem; flex-direction: column; gap: 0.2rem; min-width: 0; margin-bottom: 0.75rem; }
.field > span { font-size: 0.875rem; font-weight: 600; }
input, select, textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--steel);
  border-radius: 0;
  background: var(--white);
  color: var(--asphalt);
  font: inherit;
  /* Below 16px, iOS zooms the whole page on focus. */
  font-size: max(1rem, 16px);
}
input[type="checkbox"] { width: 1.5rem; min-height: 1.5rem; height: 1.5rem; }
.field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 0.75rem; }
.field-row > .button { margin-bottom: 0.75rem; }
.check { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-bottom: 0.75rem; font-weight: 600; }
.hint { margin-bottom: 0.75rem; color: var(--steel); font-size: 0.9rem; }
code { padding: 0 0.25rem; background: var(--concrete); font-family: inherit; }
.flag { color: var(--danger-red); font-weight: 600; }
.empty { padding: 1rem; background: var(--white); }

/* --- Today --- */
.day { margin-bottom: 1rem; }
.day-date { color: var(--steel); font-family: var(--font-sign); font-size: 1.0625rem; }
.day h1, .page > h1 { font-family: var(--font-sign); font-size: 1.75rem; line-height: 1.2; }
.ticks { display: flex; flex-wrap: wrap; gap: 3px; margin: 0.75rem 0; }
.ticks i { width: 0.6rem; height: 1rem; border: 2px solid var(--asphalt); background: var(--white); }
.ticks i.tick-done { background: var(--asphalt); }
.day-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* The one loud element: a hazard edge on what needs someone's attention today. */
.attention {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem 0.5rem 1.75rem;
  background: var(--white);
}
.attention::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.875rem;
  background: repeating-linear-gradient(-45deg, var(--safety-yellow) 0 10px, var(--asphalt) 10px 20px);
}
.attention h2 { margin-bottom: 0.25rem; font-family: var(--font-sign); font-size: 1.25rem; }
.attention dl > div { padding: 0.35rem 0; border-top: 1px solid var(--rule); }
.attention dt { font-size: 0.9rem; font-weight: 600; }
.attention dd { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.code-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  font-family: var(--font-sign);
  font-size: 1.0625rem;
  font-weight: 700;
}

.update, .changes { margin-bottom: 1rem; padding: 0 1rem; background: var(--white); }
.update[open], .changes[open] { padding-bottom: 1rem; }
summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-height: 3rem; font-weight: 600; cursor: pointer; }
summary::before { content: "+"; width: 1rem; font-family: var(--font-sign); font-size: 1.25rem; }
details[open] > summary::before { content: "\2212"; }
#parse-preview { margin-top: 1rem; }
#parse-preview h3 { margin-bottom: 0.5rem; font-size: 1.0625rem; }
.parse-row { margin-bottom: 0.75rem; padding: 0.75rem; border: 2px solid var(--rule); }
.parse-row.is-skip { background: var(--concrete); }
.parse-source { margin-bottom: 0.5rem; color: var(--steel); font-size: 0.9rem; }

.project { margin-bottom: 1.25rem; }
.project > h2 { margin-bottom: 0.4rem; font-family: var(--font-sign); font-size: 1.375rem; }
.count { color: var(--steel); font-family: var(--font-sign); font-weight: 400; }

.line, .pickups > li {
  margin-bottom: 3px;
  padding: 0.75rem 1rem;
  border-left: 6px solid var(--rule);
  background: var(--white);
}
.line:target, .pickups > li:target { outline: 3px solid var(--notice-blue); outline-offset: -3px; }
.line.is-blocking { border-left-color: var(--danger-red); }
.line-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; margin-bottom: 0.25rem; }
.line-code { font-family: var(--font-sign); font-size: 1.125rem; font-weight: 700; }
.line-team { color: var(--steel); font-weight: 600; }
.status-chip { margin-left: auto; padding: 0.05rem 0.5rem; font-size: 0.875rem; font-weight: 600; }
.status-reported .status-chip { background: #fff2cc; }
.status-in-procurement .status-chip { background: #ddebf7; }
.status-ordered .status-chip { background: #fce4d6; }
.status-shipped .status-chip { background: #e4dfec; }
.status-tba .status-chip, .status-on-hold .status-chip { background: #ededed; }
.line-body { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.line-names { flex: 1 1 16rem; min-width: 0; }
.name { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.line-qty { flex: 0 0 auto; }
.qty { font-family: var(--font-sign); font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.line-facts { display: flex; flex-wrap: wrap; gap: 0.1rem 1rem; margin-top: 0.35rem; font-size: 0.9375rem; }
.line-note { margin-top: 0.35rem; font-size: 0.9375rem; }
.line-question { margin-top: 0.35rem; font-weight: 600; }
.line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.6rem; }
.reviewed { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; min-height: 2.75rem; padding: 0 0.5rem; color: var(--safe-green); font-weight: 600; }
.pickups > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; border-left-color: var(--safe-green); }
.changes ul { font-size: 0.9375rem; }
.changes li { padding: 0.15rem 0; }
.actor { max-width: 24rem; margin-top: 1.5rem; }

/* --- Shipments --- */
.shipments { margin-top: 0.75rem; }
.shipment { margin-bottom: 3px; padding: 0.75rem 1rem; background: var(--white); }
.tracking { margin: 0.25rem 0 0.5rem; overflow-wrap: anywhere; font-family: var(--font-sign); }
.tracking span { margin-right: 0.5rem; }
.shipment-field { max-width: 20rem; margin-bottom: 0; }

/* --- Moving stock --- */
.panel { margin-bottom: 1rem; padding: 1rem; background: var(--white); }
.panel h2 { margin-bottom: 0.5rem; font-family: var(--font-sign); font-size: 1.25rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.75rem 0; }
.tabs a {
  display: inline-flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.6rem;
  background: var(--white);
  color: var(--asphalt);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.tabs a[aria-current="page"] { background: var(--asphalt); color: var(--white); }
.results { margin-bottom: 0.75rem; border: 2px solid var(--steel); }
.results li + li { border-top: 1px solid var(--rule); }
.results .hint { margin: 0; padding: 0.6rem; }
.result { width: 100%; min-height: 2.75rem; padding: 0.5rem 0.6rem; border: 0; background: var(--white); color: var(--asphalt); font: inherit; text-align: left; cursor: pointer; }
.result:hover { background: var(--concrete); }
.move-line { margin-bottom: 0.75rem; padding: 0.75rem; border: 2px solid var(--asphalt); }
.move-line-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.move-on-hand { font-size: 0.9375rem; }
.move-photo { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.pickup-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.later { margin-bottom: 0.75rem; }
.button-wide { width: 100%; }
.button-small { min-height: 2.75rem; padding: 0.25rem 0.6rem; font-size: 0.9375rem; }
.movements > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-bottom: 3px;
  padding: 0.5rem 1rem;
  background: var(--white);
  font-size: 0.9375rem;
}
.movements > li > div { display: flex; flex-wrap: wrap; gap: 0.1rem 0.6rem; }
.movement-when { color: var(--steel); }
.movement-kind { font-weight: 600; }

/* --- Stock --- */
.count-list ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding: 0.25rem 0;
  border-top: 1px solid var(--rule);
}
.stock-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 0.5rem; }
.stock-search .button { margin-bottom: 0.75rem; }
.stock-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
  margin-bottom: 3px;
  padding: 0.5rem 1rem;
  background: var(--white);
  color: var(--asphalt);
  text-decoration: none;
}
.stock-list a:hover { background: #fafafa; }
.stock-names { display: flex; flex-direction: column; min-width: 0; }
.stock-where { color: var(--steel); font-size: 0.875rem; }
.stock-total { flex: 0 0 auto; font-family: var(--font-sign); font-size: 1.25rem; font-weight: 700; }
.material-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1rem; }
.where { margin: 0.25rem 0 0.5rem; }
.photo-panel { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.material-photo { display: block; width: 100%; max-height: 22rem; object-fit: contain; background: var(--concrete); }
.photo-button { cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.photo-button:focus-within { outline: 3px solid var(--notice-blue); outline-offset: 2px; }
.menu a { display: flex; flex-direction: column; gap: 0.1rem; min-height: 3.5rem; margin-bottom: 3px; padding: 0.6rem 1rem; background: var(--white); color: var(--asphalt); text-decoration: none; }
.menu a:hover { background: #fafafa; }
.menu .hint { margin: 0; }
.menu-title { font-size: 1.0625rem; font-weight: 600; }

/* --- Winter --- */
.freeze-banner { margin-bottom: 1rem; padding: 0.75rem 1rem; border-left: 6px solid var(--notice-blue); background: var(--white); }
.freeze-banner a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.forecast { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 3px; }
.forecast li { display: flex; flex-direction: column; padding: 0.4rem 0.5rem; background: var(--concrete); }
.forecast-short { font-size: 0.8125rem; line-height: 1.25; }
.forecast .tick-freeze { background: #dcebfa; outline: 2px solid var(--notice-blue); outline-offset: -2px; }
.pickups > li.is-urgent { border-left-color: var(--danger-red); }
/* --- Paper sign-out sheet --- */
.signout td { height: 1.9rem; }
.signout table { min-width: 0; }

/* --- Dialogs --- */
.sheet { width: min(40rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); padding: 1rem; border: 3px solid var(--asphalt); background: var(--white); color: var(--asphalt); }
.sheet::backdrop { background: rgb(35 39 43 / 0.6); }
.sheet h2 { margin-bottom: 0.75rem; font-family: var(--font-sign); font-size: 1.375rem; }
.sheet-actions { position: sticky; bottom: -1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 0; background: var(--white); }

/* --- Toast --- */
.toast {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  max-width: 36rem;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  background: var(--asphalt);
  color: var(--white);
  font-weight: 600;
}
.toast[hidden] { display: none; }
.toast.is-error { background: var(--danger-red); }
.toast-text { flex: 1 1 14rem; white-space: pre-line; }
.toast-close { min-height: 2.75rem; padding: 0 0.6rem; border: 2px solid var(--white); background: transparent; color: var(--white); font: inherit; cursor: pointer; }
.toast :focus-visible { outline-color: var(--white); }

/* --- Reports --- */
.report-list { margin-top: 1rem; }
.report-list a { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; min-height: 3rem; margin-bottom: 3px; padding: 0.5rem 1rem; background: var(--white); color: var(--asphalt); text-decoration: none; }
.report-list a:hover { background: #fafafa; }
.report-date { color: var(--notice-blue); font-family: var(--font-sign); font-size: 1.125rem; font-weight: 700; text-decoration: underline; }
.report-head { margin-bottom: 1rem; }
.report-text {
  margin: 0 0 1.5rem;
  padding: 1rem;
  overflow-wrap: anywhere;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.print-sheet { padding: 1rem; background: var(--white); }
.print-title { font-family: var(--font-sign); font-size: 1.25rem; }
.print-meta { margin: 0.25rem 0 0.75rem; font-size: 0.9375rem; }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 48rem; border-collapse: collapse; font-size: 0.875rem; }
th, td { padding: 0.35rem 0.5rem; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
thead th { background: var(--concrete); }
.table-section th { background: var(--asphalt); color: var(--white); font-family: var(--font-sign); font-size: 0.9375rem; }
.print-sheet .table-section [lang="en"] { color: #c8ccd0; }
.cell-code { font-family: var(--font-sign); font-weight: 700; white-space: nowrap; }
.row-alert { box-shadow: inset 4px 0 0 var(--danger-red); }

/* --- Settings --- */
.settings-group { margin-top: 1rem; padding: 1rem; background: var(--white); }
.settings-group h2 { margin-bottom: 0.5rem; font-family: var(--font-sign); font-size: 1.25rem; }
.plain-list { margin-bottom: 0.75rem; }
.plain-list li { padding: 0.2rem 0; border-bottom: 1px solid var(--rule); }

/* --- Login --- */
.login { max-width: 24rem; margin: 15vh auto 0; }
.login h1 { margin-bottom: 1rem; font-family: var(--font-sign); font-size: 1.75rem; }
.login .flag { margin-bottom: 0.75rem; }
.login .language { justify-content: flex-end; margin-bottom: 0.5rem; }
.login .language a { color: var(--asphalt); }
.login .language a[aria-current="true"] { background: var(--asphalt); color: var(--white); }

/* --- Phones: navigation moves within thumb reach --- */
@media (max-width: 40rem) {
  .site-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--asphalt);
  }
  .site-nav a { flex: 1; min-width: 0; min-height: 3.25rem; padding: 0.25rem 0.1rem; font-size: 0.875rem; white-space: nowrap; }
  .toast { bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .day h1, .page > h1 { font-size: 1.5rem; }
  .status-chip { margin-left: 0; }
}

/* --- Paper: the one-page Letter sheet --- */
@media print {
  @page { size: letter landscape; margin: 10mm; }
  body { background: var(--white); font-size: 10pt; }
  .no-print { display: none !important; }
  .page { max-width: none; padding: 0; }
  .print-sheet { padding: 0; }
  .table-scroll { overflow: visible; }
  .print-title { font-size: 12pt; }
  .print-meta { margin: 1pt 0 3pt; font-size: 8.5pt; }
  table { min-width: 0; font-size: 7.5pt; line-height: 1.2; }
  th, td { padding: 1.5pt 3pt; }
  .table-section th { font-size: 8pt; }
  tr { break-inside: avoid; }
  .print-sheet [lang="en"] { color: #333333; }
}