/* maker-console.css - the StacKitt Portal - live test (accounts/LOCAL-FIRST.md, 'Maker console').
   Written fresh for this page, in the neutral portal look (navy #1b2a4a, brand orange #e8762d):
   a left rail, a top bar, chips, plain tables and a drawer for one order or one request. No code
   or data is copied from the sales demo, and neither portal demo is touched. Served with
   style-src 'self', so there is no inline style anywhere - every look lives here. */

:root {
  --navy: #1b2a4a;
  --navy-2: #26395f;
  --brand: #e8762d;
  --brand-soft: #fdf0e6;
  --ink: #1d2433;
  --ink-2: #4a5468;
  --ink-3: #6b7486;
  --line: #dde2ea;
  --line-2: #eef1f5;
  --paper: #ffffff;
  --page: #f5f7fa;
  --ok: #1f7a4d;
  --ok-soft: #e6f4ec;
  --warn: #9a5b00;
  --warn-soft: #fff4dc;
  --bad: #b3261e;
  --bad-soft: #fdeceb;
  --test: #7a3db8;
  --test-soft: #f3ecfb;
  --radius: 8px;
  --gap: 16px;
  font-size: 15px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
}

[hidden] { display: none !important; }

a { color: var(--navy-2); }
a:hover { color: var(--brand); }

/* ---------------------------------------------------------------- shell: rail + main */
.shell { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; }

.rail {
  flex: 0 0 210px;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  position: sticky;
  top: 0;
  height: 100vh;
}

.rail .brand { font-weight: 700; font-size: 1.15rem; padding: 0 20px 4px; letter-spacing: 0.01em; }
.rail .brand span { color: var(--brand); }
.rail .maker { padding: 0 20px 16px; color: #d9e1f0; font-size: 0.9rem; }

.rail nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #d9e1f0;
  text-decoration: none;
  padding: 9px 20px;
  border-left: 4px solid transparent;
}
.rail nav a:hover { background: var(--navy-2); color: #fff; }
.rail nav a.on { background: var(--navy-2); color: #fff; border-left-color: var(--brand); font-weight: 600; }

.pip {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.rail .foot { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid var(--navy-2); }
.rail .foot p { margin: 0 0 8px; font-size: 0.85rem; color: #b9c4da; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- top bar */
.top { background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 28px; }
.top p { margin: 2px 0; }
.top .title { font-weight: 700; font-size: 1.1rem; color: var(--navy); }
.top .title .cc-test-badge { margin-left: 8px; }
.top .who { font-weight: 600; color: var(--ink-2); }
.top .testnote { color: var(--ink-2); font-size: 0.92rem; }

.testline {
  display: inline-block;
  background: var(--test-soft);
  color: var(--test);
  border: 1px solid #dccbf3;
  border-radius: 6px;
  padding: 2px 10px;
  font-weight: 600;
  font-size: 0.92rem;
}

.cc-test-badge {
  display: inline-block;
  background: var(--test);
  color: #fff;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.banner { margin: 12px 28px 0; padding: 8px 12px; border-radius: var(--radius); background: var(--warn-soft);
  color: var(--warn); border: 1px solid #f0dcb0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.banner.bad { background: var(--bad-soft); color: var(--bad); border-color: #f3c9c6; }

/* ---------------------------------------------------------------- page body */
.page { padding: 22px 28px 60px; max-width: 1240px; }
.page h1 { margin: 0 0 14px; font-size: 1.5rem; color: var(--navy); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page h2 { margin: 24px 0 10px; font-size: 1.15rem; color: var(--navy); }
.page h3 { margin: 16px 0 8px; font-size: 1rem; color: var(--navy-2); }
.lede { color: var(--ink-2); margin: -6px 0 16px; }
.muted { color: var(--ink-3); }
.small { font-size: 0.88rem; }
.back { display: inline-block; margin-bottom: 10px; }

.state { padding: 18px 0; color: var(--ink-2); }
.state.bad { color: var(--bad); }
.cc-notfound { padding: 18px 0; }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 var(--gap);
}
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }

/* the drawer: one order, one request */
.drawer { border-left: 6px solid var(--brand); }

dl.facts { display: grid; grid-template-columns: 13rem 1fr; gap: 6px 14px; margin: 0; }
dl.facts dt { color: var(--ink-3); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

/* sign in */
.signin { max-width: 36rem; margin: 6vh auto 0; }
.signin .panel { border-left: 6px solid var(--navy); }
.signin input[type=email] { min-width: 20rem; }
.demo { margin-top: 18px; }
.demo .demobuttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* tables */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--paper); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); background: #fafbfc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
td { overflow-wrap: break-word; }
td button, td .btn { white-space: nowrap; }
.extra { display: block; }
.reason { color: var(--ink-2); }
tr.click { cursor: pointer; }
tr.click:hover td { background: #fafcff; }
tr.formrow td { background: var(--page); }
tfoot td { font-weight: 600; border-bottom: 0; }
tfoot tr.total td { border-top: 2px solid var(--line); }
.flag { display: block; font-size: 0.82rem; color: var(--warn); font-weight: 600; }

/* pills and chips */
.pill {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--line-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill.new { background: var(--brand-soft); color: #9a4a12; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.test { background: var(--test-soft); color: var(--test); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chips a {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.chips a.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.toolbar input[type=search] { min-width: 24rem; }

/* forms and buttons */
button, .btn {
  font: inherit;
  font-size: 0.92rem;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}
button:hover, .btn:hover { background: var(--navy-2); color: #fff; }
button.quiet { background: var(--paper); color: var(--navy); }
button.quiet:hover { background: var(--line-2); color: var(--navy); }
button.warn { background: var(--paper); color: var(--bad); border-color: var(--bad); }
button.warn:hover { background: var(--bad-soft); color: var(--bad); }
button.brand { background: var(--brand); border-color: var(--brand); }
button.brand:hover { background: #cf6320; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.rail button { width: 100%; background: transparent; border-color: #8795b3; }
.rail button:hover { background: var(--navy-2); }

input[type=text], input[type=email], input[type=date], input[type=search], input[type=number], select, textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 5px 8px;
  border: 1px solid #c4ccd8;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
input:disabled, select:disabled, textarea:disabled { background: var(--line-2); color: var(--ink-2); }
input[type=text], input[type=email] { min-width: 14rem; }
input[type=number] { width: 7rem; }
textarea { width: 100%; min-height: 3.2em; }
td input[type=text] { min-width: 8rem; width: 100%; }

label.field { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; font-size: 0.9rem; color: var(--ink-2); }
label.field > span.hint { font-size: 0.82rem; color: var(--ink-3); }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 16px; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
td .actions { margin-top: 0; }
.inlineform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; padding: 10px 12px;
  background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); }
.inlineform label.field { margin: 0; }

.msg { margin: 8px 0; padding: 6px 10px; border-radius: 6px; font-size: 0.92rem; white-space: pre-wrap; }
.msg:empty { display: none; }
.msg.ok { background: var(--ok-soft); color: var(--ok); }
.msg.bad { background: var(--bad-soft); color: var(--bad); }
.msg.info { background: var(--line-2); color: var(--ink-2); }
.msg.warn { background: var(--warn-soft); color: var(--warn); }

ul.found { margin: 6px 0; padding-left: 20px; }
ul.found.bad li { color: var(--bad); }
ul.found.warn li { color: var(--warn); }

.floor { color: var(--bad); font-weight: 600; font-size: 0.85rem; }
.note { color: var(--ink-2); font-size: 0.9rem; border-left: 3px solid var(--line); padding-left: 10px; margin: 10px 0; }
.notyet { color: var(--ink-3); font-size: 0.82rem; }

.history { list-style: none; margin: 0; padding: 0; }
.history.panel { padding: 4px 18px; }
.history li { padding: 7px 0; border-bottom: 1px solid var(--line-2); overflow-wrap: break-word; }
.history li:last-child { border-bottom: 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 8px 0 8px 14px; border-left: 3px solid var(--line); margin-left: 4px; }
.timeline li .when { color: var(--ink-3); font-size: 0.88rem; }
.timeline li .extra { display: block; color: var(--ink-2); font-size: 0.92rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.pager { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--ink-2); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .rail { position: static; height: auto; flex-basis: auto; }
  .columns { grid-template-columns: 1fr; }
  dl.facts { grid-template-columns: 1fr; }
  .toolbar input[type=search] { min-width: 0; width: 100%; }
}

@media print {
  .rail, .top, .banner, .actions, .inlineform, .back, .noprint { display: none !important; }
  .page { padding: 0; max-width: none; }
  .panel { border: 0; padding: 0; }
  body { background: #fff; }
}

/* 29 September 2026: a request waiting five working days or more - the reminder has gone and it sits at
   the top of Applications. */
tr[data-overdue] td:first-child { border-left: 4px solid var(--warn); }
.extra.waiting { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn); font-size: 0.85rem; font-weight: 600; }
/* 29 September 2026: a trading name StacKitt proposed, with Accept / Don't accept */
.extra.nameprop { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: var(--warn-soft);
  color: var(--ink); font-size: 0.88rem; }
.extra.nameprop button { font-size: 0.82rem; padding: 2px 8px; margin-top: 4px; }


/* ---------------------------------------------------------------- Map (29 September 2026, geo-tag stage 4)
   Colours as the sales demo: grey land, blue for a dealer's shadow, grey dashed for another StacKitt user, orange for
   a gap. No inline style anywhere (the CSP forbids it): every look is a class here.
   LIKE THE SALES DEMO MAP - 4 October 2026. Adam, 3 Oct 2026, with a screenshot of the role-play Mi-Flues map: "lets
   make this work like the other demo map" - then on 4 Oct: "start now and ill buy extra credit so we get this done
   asap". The map fills its card: one screen tall beside the panel on a computer (the card stays put while the figures
   scroll), three quarters of the screen above the panel on a narrower one; the drawing takes the card's shape. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { display: inline-block; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  text-decoration: none; font-size: 13px; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.page:has(> .mapview) { max-width: 1560px; }
.mapgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); grid-template-areas: "map head" "map panel";
  grid-template-rows: auto 1fr; gap: 0 18px; align-items: start; margin: 0 0 16px; }
.mapgrid > .mapcard { grid-area: map; }
.mapgrid > .maphead { grid-area: head; }
.mapgrid > .mappanel { grid-area: panel; }
.maphead h1 { margin: 0 0 8px; }
.maphead .lede { margin: 0 0 8px; }
.maphead .msg { margin: 0 0 8px; }
.maphead p.small { margin: 0 0 10px; }
.mapcard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px; position: sticky; top: 10px;
  display: flex; flex-direction: column; height: calc(100vh - 170px); min-height: 460px; }
/* the role-play demo's copy of this page (accounts/role-play/portal.html) has its 'Play as' bar above the top bar */
@media (min-width: 1101px) { body:has(> .rp-bar) .mapcard { height: calc(100vh - 215px); } }
.maptools { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 8px; }
.plabel { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.seg { display: inline-flex; background: #e8ecf2; border-radius: 999px; padding: 3px; gap: 2px; }
.seg button, .seg a { border: 0; background: transparent; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 800;
  font-size: 13.5px; color: #3b4557; text-decoration: none; cursor: pointer; }
.seg button.on, .seg a.on { background: var(--navy); color: #fff; }
.seg.period a { padding: 5px 11px; font-size: 13px; }
.ghost { border: 1.5px solid var(--navy); background: var(--paper); color: var(--navy); border-radius: 999px; padding: 4px 12px;
  font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; text-decoration: none; }
.ghost.othersbtn { border-color: #b9c2d0; color: var(--ink-2); }
.ghost.othersbtn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.mapcard .mapbox { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 10px; background: #eef3f8; }
.livemap { display: block; width: 100%; height: 100%; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.livemap.zoomedIn { touch-action: none; cursor: grab; }
.livemap.dragging, .livemap.dragging * { cursor: grabbing; }
body.mapDragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }
.livemap .sea { fill: #eef3f8; }
.livemap .area { cursor: pointer; stroke: #fff; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.livemap .area:focus { outline: none; }
.livemap .area:focus-visible { stroke: var(--navy); stroke-width: 2.5px; }
.livemap .area.county { stroke-width: 0.8; fill: #e6e9ee; }
.livemap .area.county.shown { fill: #cfdbe8; }
.livemap .area.county.gap { fill: #f5b886; }
.livemap .area.county.off { display: none; }
.livemap .area.county.dim { opacity: 0.55; }
.livemap .area.region { stroke-width: 1.6; fill: #e6e9ee; }
.livemap .area.region.outline { fill: none; stroke-width: 2.4; pointer-events: none; }
.livemap .lock { fill: url(#mclock); fill-opacity: 0.85; stroke: none; pointer-events: none; }
.livemap .district { fill: #26395f; pointer-events: none; }
.livemap .selline { fill: none; stroke: var(--navy); stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.livemap .reach, .mapkey .reach { fill: #0072B2; fill-opacity: 0.13; stroke: #0072B2; stroke-opacity: 0.55; stroke-width: 1;
  vector-effect: non-scaling-stroke; pointer-events: none; }
.livemap .reach.picked { stroke: #D62828; stroke-opacity: 1; stroke-width: 2.5; }
.livemap .other, .mapkey .other { fill: #8a94a6; fill-opacity: 0.08; stroke: #6b7486; stroke-width: 1.2; stroke-dasharray: 3 2.5;
  vector-effect: non-scaling-stroke; pointer-events: none; }
.livemap .leadc, .mapkey .leadc { fill: #7a3db8; fill-opacity: 0.07; stroke: #7a3db8; stroke-width: 1.3; stroke-dasharray: 3 2.5;
  vector-effect: non-scaling-stroke; pointer-events: none; }
.pin { cursor: pointer; }
.pin .pinbody { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.pin .pindot { fill: var(--navy); }
.pin.sharing .pinbody { fill: var(--navy); stroke: #fff; stroke-width: 1.4; }
.pin.sharing .pindot { fill: #fff; }
.pin.picked .pinbody { fill: #D62828; stroke: #fff; stroke-width: 2; }
.pin.picked .pindot { fill: #fff; }
.livemap .lab { fill: var(--navy); stroke: rgba(255, 255, 255, 0.92); paint-order: stroke; pointer-events: none;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
.livemap circle.town { fill: #2f3746; stroke: #fff; pointer-events: none; }
.livemap text.town { fill: #4a5262; stroke: rgba(255, 255, 255, 0.9); stroke-linejoin: round; paint-order: stroke; font-weight: 500;
  pointer-events: none; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
/* the SVG laid over the map: the hover box, the scale bar and the dealer's box (no style attribute) */
.mapover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
.mapover .tipbg { fill: var(--navy); }
.mapover .tipt { fill: #fff; font-size: 12.5px; font-weight: 700; }
.mapover .tips { fill: #c9d3e0; font-size: 12px; font-weight: 600; }
.mapover .scalebg { fill: rgba(255, 255, 255, 0.9); }
.mapover .scalet { fill: var(--navy); font-size: 11.5px; font-weight: 800; }
.mapover .scalebar { fill: none; stroke: var(--navy); stroke-width: 2; }
/* 29 September 2026 (the demo): the picked dealer - a red pin and a see-through box of details beside it */
.mapover .cardbg { fill: rgba(27, 42, 74, 0.8); }
.mapover .cardbar { fill: #D62828; }
.mapover .cardt { fill: #fff; font-size: 14.5px; font-weight: 800; }
.mapover .cardl { fill: #eef2f8; font-size: 12.5px; font-weight: 700; }
.mapover .x { pointer-events: all; cursor: pointer; }
.mapover .xbg { fill: rgba(255, 255, 255, 0.16); }
.mapover .xt { fill: #fff; font-size: 17px; font-weight: 800; text-anchor: middle; }
.zoombtns { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.zoombtns button { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid #b9c2d0; background: #fff; color: var(--navy);
  font: inherit; font-size: 22px; font-weight: 800; line-height: 1; padding: 0; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.zoombtns button:disabled { opacity: 0.4; cursor: default; }
.zoombtns button.fit { font-size: 11px; }
.mapcard .hint { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin: 6px 0 0; }
.seebelow { display: none; margin-top: 8px; width: 100%; border: 0; background: var(--navy); color: #fff; border-radius: 10px;
  padding: 10px; font: inherit; font-weight: 800; cursor: pointer; }
.mapkey { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
.mapkey li { display: flex; align-items: center; gap: 6px; }
.mapkey .sw { width: 26px; height: 21px; flex: 0 0 26px; }
.mapkey .lockkey { fill: url(#mclockkey); stroke: #7d8799; stroke-width: 1.5; }
/* the panel beside the map: one card per figure, one plain line under each (the demo's PLAIN ENGLISH, 4 October 2026) */
.mappanel { margin: 0; }
.mappanel .backbtn { margin: 0 0 8px; }
.mappanel .phead { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; }
.mappanel .phead > button { margin-left: auto; flex: 0 0 auto; }
.mappanel .pname { margin: 0; font-size: 1.45rem; font-weight: 900; color: var(--navy); line-height: 1.15; }
.mappanel .psub { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.mappanel .block { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-top: 10px; }
.mappanel .block h3 { margin: 0 0 4px; font-size: 14px; font-weight: 900; color: var(--navy); }
.mappanel .big { font-size: 30px; font-weight: 900; color: var(--navy); line-height: 1.05; }
.mappanel .big small { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.mappanel .plain { font-size: 13.5px; color: #2d3545; font-weight: 600; margin: 6px 0 0; line-height: 1.45; }
.mappanel .callout { border-radius: 10px; padding: 9px 12px; margin-top: 10px; font-weight: 700; font-size: 14px; }
.mappanel .callout.miss { background: #fff1e8; border: 2px solid #D55E00; color: #6a2a00; }
.mappanel .callout.win { background: #e9f3fa; border: 2px solid #0072B2; color: #08395c; }
.mappanel .callout.lock { background: #eef0f4; border: 2px solid #7d8799; color: #2d3545; }
.mappanel .callout.lock div { font-weight: 600; }
.areachips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.areachip { border: 1.5px solid var(--line); background: var(--paper); color: var(--navy); border-radius: 999px; padding: 3px 10px;
  font: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer; }
.areachip:hover { border-color: var(--navy); background: var(--line-2); color: var(--navy); }
.mappanel .list { margin-top: 6px; }
.mappanel .item { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line-2); }
.mappanel .item:first-child { border-top: 0; }
.mappanel .item .ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; border: 1.5px solid #b9c2d0; background: #fff; padding: 0; cursor: pointer; }
.mappanel .item .ic svg { width: 18px; height: 22px; }
.mappanel .item .ic:hover { outline: 3px solid #9cc3e4; }
.mappanel .item .ic:disabled { opacity: 0.45; cursor: default; outline: 0; }
.mappanel .item .ic.hl { background: #D62828; border-color: #D62828; }
.mappanel .item .ic.hl .pinbody { fill: #D62828; stroke: #fff; }
.mappanel .item .ic.hl .pindot { fill: #fff; }
.mappanel .item .ic.lead { cursor: default; border: 1.5px dashed #7a3db8; background: #f3ecfb; }
.mappanel .item .tx { min-width: 0; flex: 1; }
.mappanel .item .nm { font-weight: 800; font-size: 14px; overflow-wrap: anywhere; }
.mappanel .item .dt { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.mappanel .tag { font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.mappanel .tag.yes { background: #e3f0f9; color: #0b4a78; }
.mappanel .tag.no { background: #eceef2; color: #4b5363; }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--navy-2); text-decoration: underline; cursor: pointer;
  text-align: left; }
.linkish:hover { background: none; color: var(--brand); }
.panel .lead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line-2); }
.panel .lead input { flex: 1 1 200px; min-width: 0; }
.credit { margin-top: 12px; }
/* a narrower window: the map on top, three quarters of the screen tall, and the panel under it */
@media (max-width: 1100px) {
  .mapgrid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "panel"; grid-template-rows: auto auto auto; }
  .mapcard { position: static; height: auto; min-height: 0; }
  .mapcard .mapbox { flex: none; height: 75vh; min-height: 340px; }
  .mappanel { margin-top: 12px; }
  .seebelow { display: block; }
  .seebelow[hidden] { display: none; }
}
@media (max-width: 480px) {
  .mapcard { padding: 8px; }
  .seg button, .seg a { padding: 6px 10px; }
  .mappanel .big { font-size: 26px; }
}

/* ---------------------------------------------------------------- Who sees what (29 September 2026) */
.panel.access .patch { display: grid; gap: 4px; margin: 4px 0 10px; }
.panel.access details.region summary { cursor: pointer; padding: 4px 0; }
.panel.access .counties { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px;
  padding: 4px 0 8px 22px; font-size: 13px; }
.panel.access fieldset.sees { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; }
.panel.access fieldset.sees label { display: block; padding: 3px 0; }
.panel.access .label { font-weight: 600; margin: 8px 0 2px; }

/* 8 Oct 2026: the order notifications (a new order arrives; Acknowledge pressed) - a calm strip at the top */
.toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex;
  flex-direction: column; gap: 8px; width: min(560px, calc(100% - 32px)); pointer-events: none; }
.toast { background: var(--navy); color: #fff; border-left: 5px solid var(--ok); border-radius: 8px; padding: 12px 16px;
  font-weight: 700; font-size: 15px; box-shadow: 0 6px 20px rgba(27, 42, 74, .25); }
.toast.neworder { border-left-color: var(--brand); }
@media print { .toasts { display: none; } }

/* 20 October 2026: Messages - one conversation with StacKitt */
.thread { list-style: none; margin: 0 0 16px; padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.thread .say { max-width: 78%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); }
.thread .say.ours { align-self: flex-end; background: var(--brand-soft); }
.thread .say.theirs { align-self: flex-start; }
.thread .who { font-size: 12px; color: var(--ink-3); margin-bottom: 3px; }
.thread .words { white-space: pre-wrap; overflow-wrap: break-word; }
.thread textarea, .panel textarea { width: 100%; box-sizing: border-box; }
td.strong { font-weight: 600; }

/* 20 October 2026: Acknowledge from the order email (order-ack.html) */
body.ackpage { background: var(--page); }
.ackcard { max-width: 520px; margin: 40px auto; padding: 22px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ackcard .brand { font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.ackcard .brand span { color: var(--brand); }
.ackcard h1 { margin: 0 0 10px; }
button.big { font-size: 17px; padding: 12px 22px; margin: 6px 0 10px; }
@media (max-width: 560px) { .ackcard { margin: 16px; padding: 18px 16px; } }

/* 20 October 2026: Change the order (orderchanges.py) */
.changeform input[type="number"] { width: 6em; }
.changeform input[type="text"] { width: 100%; min-width: 8em; box-sizing: border-box; }
.changeform textarea { width: 100%; box-sizing: border-box; }

/* 21 October 2026: an order waiting 3 working days or more */
.red { color: var(--bad); }