/* Zones & repair — page frame. Matches calendar.css / activity.css so the
   screen sits inside the same fixed desktop canvas as every other office page
   rather than reflowing at extreme zoom. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.zwrap {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  width: 1100px;
  height: 760px;
  margin: 14px auto;
  padding: 0 14px;
}

/* ------------------------------- panel ------------------------------- */

.zpanel {
  background: var(--panel);
  border: 1px solid var(--line, #244635);
  border-radius: 14px;
  padding: 16px 16px 20px;
  overflow-y: auto;
}

.zpanel-head h2 { margin: 0 0 4px; font-size: 20px; }
.zpanel-head p { margin: 0; color: var(--dim, #9fb8ac); font-size: 13px; line-height: 1.5; }

.zsection { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line, #244635); }
.zsection:first-of-type { border-top: 0; }

.zsection-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent, #7fd3ac); font-weight: 700; margin-bottom: 10px;
}

.zcount {
  background: var(--panel-2, #16291f); border: 1px solid var(--line, #244635);
  border-radius: 20px; padding: 1px 9px; letter-spacing: 0; font-size: 11px;
}

.zhint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--dim, #9fb8ac); }
.zhint b { color: var(--ink); }

/* ------------------------------ buttons ------------------------------ */

.zbtns { display: flex; flex-wrap: wrap; gap: 8px; }

.zbtn {
  appearance: none; cursor: pointer;
  background: var(--panel-2, #16291f); color: var(--ink);
  border: 1px solid var(--line, #244635); border-radius: 9px;
  padding: 8px 12px; font: inherit; font-size: 13px;
  transition: border-color .12s, background .12s, transform .06s;
}
.zbtn:hover { border-color: var(--accent, #7fd3ac); }
.zbtn:active { transform: translateY(1px); }
.zbtn:focus-visible { outline: 2px solid var(--accent, #7fd3ac); outline-offset: 2px; }
.zbtn.on { background: var(--accent, #7fd3ac); color: var(--accent-on, #06241a); border-color: transparent; font-weight: 600; }
.zbtn.primary { background: var(--accent, #7fd3ac); color: var(--accent-on, #06241a); border-color: transparent; font-weight: 600; }
.zbtn.primary:disabled { opacity: .45; cursor: not-allowed; }
.zbtn.ghost { background: transparent; }
.zbtn.warn { background: #f5c451; color: #2a1d00; border-color: transparent; font-weight: 600; margin-top: 10px; }

/* "Apply this repair" — the only control on this screen that changes the live
   book and publishes to the crews. It is styled as the obvious next step
   because until you press it the repair is only a proposal, and an operator who
   cannot find it will conclude the reroute did nothing. */
.zbtn.go {
  display: block; width: 100%; margin: 12px 0 4px;
  background: var(--cc, #00482e); color: #fff;
  border-color: transparent; font-weight: 700; font-size: 13.5px; padding: 11px 12px;
}
.zbtn.go:hover { filter: brightness(1.12); }
.zbtn.go:disabled { opacity: .5; cursor: default; filter: none; }

.zsave { display: flex; gap: 8px; margin-top: 12px; }
.zsave input {
  flex: 1 1 auto; min-width: 0;
  background: var(--input, var(--panel-2, #16291f)); color: var(--ink);
  border: 1px solid var(--line, #244635); border-radius: 9px;
  padding: 8px 10px; font: inherit; font-size: 13px;
}
.zsave input:focus-visible { outline: 2px solid var(--accent, #7fd3ac); outline-offset: 1px; }

.zcheck { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.zcheck input { width: 16px; height: 16px; accent-color: var(--accent, #7fd3ac); }

.zlegend { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--dim, #9fb8ac); }
.zramp {
  flex: 1 1 auto; height: 8px; border-radius: 5px;
  background: linear-gradient(90deg, #123726, #1c5a3c, #2f8f57, #7fd3ac, #f5c451);
}

/* ------------------------------- zones ------------------------------- */

.zone-list { display: flex; flex-direction: column; gap: 6px; }

.zone-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--panel-2, #16291f); border: 1px solid var(--line, #244635);
  border-radius: 10px; padding: 9px 10px;
  transition: border-color .12s;
}
.zone-row:hover { border-color: var(--accent, #7fd3ac); }
.zone-row.on { border-color: var(--accent, #7fd3ac); box-shadow: inset 0 0 0 1px var(--accent, #7fd3ac); }
.zone-dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.zone-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.zone-body strong { font-size: 14px; }
.zone-body span { font-size: 11.5px; color: var(--dim, #9fb8ac); }
.zone-del {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--dim, #9fb8ac); font-size: 14px; padding: 4px 6px; border-radius: 6px;
}
.zone-del:hover { color: #f38b7c; background: rgba(243,139,124,.12); }

/* ------------------------------ results ------------------------------ */

.zresult { margin-top: 12px; }
.zresult h4 {
  margin: 16px 0 6px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent, #7fd3ac);
}
.zgood {
  margin: 0 0 10px; padding: 9px 11px; border-radius: 9px; font-size: 13px;
  background: rgba(127,211,172,.12); border: 1px solid rgba(127,211,172,.35);
}
.zbad {
  margin: 0 0 10px; padding: 9px 11px; border-radius: 9px; font-size: 13px;
  background: rgba(243,139,124,.12); border: 1px solid rgba(243,139,124,.4);
}

.zstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 5px; margin: 10px 0; }
.zstat {
  background: var(--panel-2, #16291f); border: 1px solid var(--line, #244635);
  border-radius: 9px; padding: 8px 6px; text-align: center;
}
.zstat b { display: block; font-size: 19px; line-height: 1.1; }
.zstat span { font-size: 10px; color: var(--dim, #9fb8ac); }

.zlist { margin: 0; padding-left: 18px; font-size: 12.5px; }
.zlist li { margin: 4px 0; }
.zlist.bad li b { color: #f5c451; }

.ztable { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.ztable th, .ztable td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line, #244635); }
.ztable th { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim, #9fb8ac); }
.ztable td.warn { color: #f5c451; font-weight: 600; }

/* -------------------------------- map -------------------------------- */

.zmapwrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line, #244635); }
.zmap { position: absolute; inset: 0; }

.zmap-badge {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--accent, #7fd3ac); color: var(--accent-on, #06241a);
  border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 5; max-width: 80%;
}
.zmap-badge.bad { background: #f38b7c; color: #2a0d08; }

/* No narrow-width breakpoint on purpose. Every office screen uses a FIXED
   1100px canvas and lets the page scroll at extreme zoom, rather than reflowing
   and crushing the controls (see PROGRESS.md §9). Going fluid here collapsed the
   map to ~128px in a narrow window — worse than a scrollbar. */

/* Repair results, 2026-09-22 — hours per day, the number a supervisor reads.
   Five day columns have to fit a 330px side panel, so the cells are tight and
   the changed days carry the weight rather than a colour key. */
.zstat.warn b { color: var(--warn-ink, #f5c451); }
.ztable.zdays th, .ztable.zdays td { padding: 4px 3px; font-variant-numeric: tabular-nums; }
.ztable.zdays td:first-child { white-space: nowrap; }
.ztable.zdays td.chg { font-weight: 800; color: var(--ink, inherit); background: rgba(95, 200, 140, .16); border-radius: 4px; }
.ztable.zdays td.off { color: var(--dim, #9fb8ac); }

/* Repair controls, 2026-09-23: the disruption budget and the crew picker. */
.zknob { margin: 8px 0; font-size: 12.5px; }
.zknob label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.zknob input[type=range] { width: 100%; }
.zcrews { margin: 6px 0 10px; font-size: 12.5px; }
.zcrews summary { cursor: pointer; font-weight: 700; }
.zcrews summary span { font-weight: 400; color: var(--dim, #9fb8ac); }
.zchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.zchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line, #244635); font-size: 11.5px; cursor: pointer; user-select: none; }
.zchip input { margin: 0; }
.zchip.on { border-color: var(--cc-lt, #5fc88c); background: rgba(95, 200, 140, .14); font-weight: 700; }
.zlist .why { display: block; font-size: 11.5px; color: var(--dim, #9fb8ac); }