/* ACSGuide design bench.
   Palette is the PASGR/Mastercard Foundation system already used by the AYPS
   consent form and identity cards, so the tooling and the paperwork look like
   one programme. */
:root {
  --pasgr-green: #4A5E1A;
  --pasgr-green-d: #33420F;
  --pasgr-orange: #FF4221;
  --mcf-red: #EB011A;
  --mcf-amber: #F79E1C;
  --ink: #2B2728;
  --muted: #6f6f64;
  --faint: #9a9a8e;
  --line: #e2e2d8;
  --panel: #ffffff;
  --bg: #f7f7f1;
  --radius: 6px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 "Avenir Next", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
a { color: var(--pasgr-green); }

/* ---- chrome ---- */
header.top {
  background: var(--pasgr-green); color: #fff; padding: 0 20px;
  display: flex; align-items: center; gap: 18px; height: 54px;
}
header.top .brand {
  font-weight: 700; font-size: 17px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px;
  color: #fff; text-decoration: none;
}
header.top .brand:hover { color: #fff; }
/* The mark is chalk-and-clay on a transparent ground; on the olive bar it needs
   its own disc or the outlined cells vanish into the green. */
header.top .brand__mark {
  width: 30px; height: 30px; display: block; flex: 0 0 auto;
  background: var(--panel); border-radius: 7px; padding: 3px;
}
@media (max-width: 620px) { header.top .brand__mark { display: none; } }
header.top .brand small {
  display: block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  opacity: .72; font-weight: 600; margin-top: -3px;
}
header.top nav { display: flex; gap: 14px; margin-left: auto; font-size: 13.5px; }
/* DIRECT children only. `header.top nav a` also matched the links inside the
   account dropdown, and at higher specificity than .account__item — so the menu
   rendered white text on a white card and read as empty. */
header.top nav > a { color: rgba(255,255,255,.9); text-decoration: none; }
header.top nav > a:hover { color: #fff; text-decoration: underline; }
/* Sign out is a POST (Django 5 refuses a GET logout) but must read as a nav
   link, not a button sitting in the header. */
header.top nav form.signout { display: inline; margin: 0; }
header.top nav form.signout button {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; color: rgba(255,255,255,.9);
}
header.top nav form.signout button:hover { color: #fff; text-decoration: underline; }

.rule { display: flex; height: 4px; }
.rule i { flex: 1; }
.rule i:nth-child(1) { background: var(--pasgr-green); flex: 3.2; }
.rule i:nth-child(2) { background: var(--pasgr-orange); }
.rule i:nth-child(3) { background: var(--mcf-red); }
.rule i:nth-child(4) { background: var(--mcf-amber); }

main { max-width: 1440px; margin: 0 auto; padding: 22px 20px 60px; }
h1 { font-size: 22px; margin: 0 0 3px; color: var(--pasgr-green-d); letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 10px; color: var(--pasgr-green); }
h3 { font-size: 12.5px; margin: 0 0 7px; text-transform: uppercase;
     letter-spacing: .1em; color: var(--faint); }
.sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }

/* ---- layout ---- */
.split { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px; margin-bottom: 14px;
}
.panel.tight { padding: 12px 14px; }

/* ---- map ---- */
/* The map sizes to the viewport rather than to a fixed 620px.
   The side column runs out of content long before a 620px map does, which left a
   large empty gap beside it. Tying the map to the window means the two columns
   end at roughly the same place on a normal screen, and the column scrolls
   independently when it does have more to show. */
#map {
  height: min(620px, calc(100vh - 260px));
  min-height: 380px;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.split > div:last-child {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  /* Room for the scrollbar so panel borders are not clipped by it. */
  padding-right: 4px;
}
@media (max-width: 1100px) {
  /* Stacked: nothing to align to, and a scrolling inner column on a phone traps
     the page. */
  .split > div:last-child { max-height: none; overflow-y: visible; padding-right: 0; }
  #map { height: 60vh; }
}
.maptools {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap;
  font-size: 13px;
}
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block;
            border: 1px solid rgba(0,0,0,.15); }

/* ---- forms ---- */
label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
        color: var(--faint); font-weight: 700; margin: 10px 0 3px; }
input, select, textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px;
  font: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pasgr-green); border-color: transparent; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.hint { font-size: 11.5px; color: var(--faint); margin-top: 3px; }

button, .btn {
  display: inline-block; padding: 8px 14px; border: 0; border-radius: 4px;
  background: var(--pasgr-green); color: #fff; font: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer; text-decoration: none; margin-top: 12px;
}
button:hover, .btn:hover { background: var(--pasgr-green-d); }
button.alt, .btn.alt { background: #fff; color: var(--pasgr-green); border: 1px solid var(--line); }
button.warn, .btn.warn { background: var(--pasgr-orange); }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
     color: var(--faint); border-bottom: 1.5px solid var(--line); padding: 6px 8px; }
td { padding: 6px 8px; border-bottom: 1px solid #f0f0e8; }
tr:last-child td { border-bottom: 0; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }

/* ---- account menu ----
   After the training platform's, so the two products feel like one system. */
.account { position: relative; margin-left: 4px; }
.account__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin: 0; border-radius: 50%;
  background: var(--panel); border: 2px solid rgba(255,255,255,.55);
  cursor: pointer; overflow: hidden;
}
.account__avatar:hover { background: var(--panel); border-color: #fff; }
.account__avatar img { width: 100%; height: 100%; object-fit: cover; }
.account__initials {
  color: var(--pasgr-green-d); font-weight: 700; font-size: 12.5px;
  letter-spacing: .02em; line-height: 1;
}
.account__menu {
  position: absolute; top: calc(100% + 9px); right: 0; min-width: 232px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16); padding: 6px; z-index: 60;
}
.account__menu[hidden] { display: none; }
.account__who {
  padding: 9px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 5px;
  display: flex; flex-direction: column; gap: 1px;
}
.account__who strong { font-size: 13.5px; color: var(--ink); }
.account__who span { font-size: 11.5px; color: var(--faint); }
.account__email { word-break: break-all; }
.account__item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 5px; color: var(--ink); text-decoration: none; font-size: 13.5px;
}
.account__item:hover { background: #f4f4ed; color: var(--pasgr-green); }
/* The icon follows the text colour, so it picks up the hover and the danger
   state without a second rule per item. */
.account__icon { flex: 0 0 auto; color: var(--faint); }
.account__item:hover .account__icon { color: var(--pasgr-green); }

.account__item--form { padding: 0; }
.account__item--form button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: none; border: 0; margin: 0;
  padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--mcf-red);
  cursor: pointer; border-radius: 5px;
}
.account__item--form button .account__icon { color: var(--mcf-red); }
.account__item--form button:hover { background: #fdeeee; color: var(--mcf-red); }

/* Sign out is separated from the navigation items: it is a different kind of
   action and should not sit flush against 'Mobile app'. */
.account__item--alert { color: var(--mcf-amber); font-weight: 600; }
.account__item--danger { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 5px; }

/* ---- statistics cards ----
   Same treatment as the training platform's .kpi: accent top border, soft tint,
   accent-coloured number. The palette auto-cycles by position, so a card needs
   no per-card markup; --kpi-accent set inline still wins. */
.statrow { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--kpi-bg, var(--panel));
  border: 1px solid var(--line);
  border-top: 4px solid var(--kpi-accent, var(--pasgr-green));
  border-radius: var(--radius);
  padding: 11px 18px; min-width: 112px;
}
.stat b {
  display: block; font-size: 26px; line-height: 1.15; font-weight: 700;
  color: var(--kpi-accent, var(--pasgr-green-d));
}
.stat span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); text-align: center;
}
.statrow .stat:nth-child(6n+1) { --kpi-accent:#4A5E1A; --kpi-bg:#eef1e6; }
.statrow .stat:nth-child(6n+2) { --kpi-accent:#178f7d; --kpi-bg:#e4f2ef; }
.statrow .stat:nth-child(6n+3) { --kpi-accent:#e58a00; --kpi-bg:#fdf3e2; }
.statrow .stat:nth-child(6n+4) { --kpi-accent:#2563eb; --kpi-bg:#eaf0fd; }
.statrow .stat:nth-child(6n+5) { --kpi-accent:#7c3aed; --kpi-bg:#f2ecfd; }
.statrow .stat:nth-child(6n+6) { --kpi-accent:#006838; --kpi-bg:#e9f4ee; }
/* A warning always overrides the cycling palette — a number that needs
   attention must not be tinted whatever colour its position happens to give. */
.stat--warn { --kpi-accent: var(--mcf-red); --kpi-bg: #fdeeee; }

.bar {
  display: inline-block; width: 84px; height: 7px; background: #eceae3;
  border-radius: 4px; overflow: hidden; vertical-align: middle;
}
.bar i { display: block; height: 100%; background: var(--pasgr-green); }

/* ---- assignment workspace ---- */
button.tiny, .btn.tiny {
  padding: 3px 8px; font-size: 12px; margin-top: 0; line-height: 1.4;
}
td.nowrap, .nowrap { white-space: nowrap; }
.assign-table td { vertical-align: middle; }
.assign-table td form { display: inline; margin: 0; }
.assign-table .hint { display: block; font-size: 11px; margin-top: 1px; }

.split-issue { display: grid; grid-template-columns: 1fr 1.35fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .split-issue { grid-template-columns: 1fr; } }

/* search + filter toolbar, ported alongside table_tools.js.
   A search field stretched across 1400px of screen is a target, not a control —
   capped here, and only allowed to fill the row on a narrow one. */
.table-tools { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.table-tools__search { width: auto; flex: 0 1 320px; min-width: 200px; max-width: 360px; }
.table-tools__select { width: auto; flex: 0 0 auto; max-width: 200px; }
.table-tools__count { white-space: nowrap; margin-left: 2px; }
@media (max-width: 620px) {
  .table-tools__search, .table-tools__select { flex: 1 1 100%; max-width: none; }
}

th.is-sortable { cursor: pointer; user-select: none; }
th.is-sortable:hover { color: var(--pasgr-green); }
th .sort-ind { font-size: 9px; }

.rowhead { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; }
.rowhead h3 { margin: 0; }

.person-scroll { max-height: 340px; overflow-y: auto; }
.person-scroll input[type=checkbox] { width: auto; margin: 0; }
#stage-table tbody:empty { display: none; }

/* A wide table inside a narrow side panel must scroll in its own box, not spill
   past the panel edge — a clipped action button cannot be clicked. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap table { min-width: 100%; }
.tablewrap td, .tablewrap th { white-space: nowrap; }

/* ---- status chips ---- */
.chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
        font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.chip.draft { background: #eceae3; color: var(--muted); }
.chip.frozen { background: var(--pasgr-green); color: #fff; }
.chip.active { background: var(--mcf-amber); color: var(--ink); }
.chip.closed { background: #d8d5cc; color: var(--muted); }
.chip.purposive { background: var(--mcf-red); color: #fff; }
.chip.initial { background: var(--pasgr-orange); color: #fff; }
.chip.adaptive { background: var(--pasgr-green); color: #fff; }

/* A panel whose actions are hard to undo should not look like the others. */
.panel.danger { border-color: #f0c9c9; }
.panel.danger h2 { color: var(--mcf-red); }

/* ---- modal ----
   A browser confirm() is indistinguishable from the browser's own warnings, so
   people dismiss it the way they dismiss a cookie banner. A destructive action
   needs a dialog that reads as part of this application and can carry context. */
.modal { position: fixed; inset: 0; z-index: 200; display: flex;
         align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20,26,36,.55); }
.modal__card {
  position: relative; background: #fff; border-radius: 10px; padding: 22px 24px 18px;
  width: min(460px, 100%); box-shadow: 0 18px 48px rgba(0,0,0,.28);
  border-top: 4px solid var(--pasgr-green);
}
.modal__title { font-size: 17px; margin: 0 0 6px; color: var(--pasgr-green-d); }
.modal__detail { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.modal__detail[hidden] { display: none; }
.modal__extra:empty { display: none; }
.modal__extra { margin-top: 10px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal__actions button { margin-top: 0; }
.modal__ok.warn { background: var(--mcf-red); }
.modal__ok.warn:hover { background: #b80014; }
.modal__ok[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- notices ---- */
.notice { border-left: 4px solid var(--pasgr-green); background: #f6f6f0;
          padding: 10px 13px; border-radius: 0 4px 4px 0; font-size: 13.5px; margin: 10px 0; }
.notice.warn { border-left-color: var(--mcf-amber); background: #fdf7ea; }
.notice.stop { border-left-color: var(--mcf-red); background: #fdeeee; }
.notice strong { color: var(--ink); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13.5px; }
.kv dt { color: var(--faint); font-size: 11.5px; text-transform: uppercase;
         letter-spacing: .07em; font-weight: 700; align-self: center; }
.kv dd { margin: 0; }

.htmx-request { opacity: .55; transition: opacity .15s; }

/* ---- footer ---- */
footer.foot { margin-top: 40px; background: #fff; border-top: 1px solid var(--line); }
footer.foot .inner {
  max-width: 1440px; margin: 0 auto; padding: 16px 20px 24px;
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
footer.foot .muted { color: var(--faint); }
footer.foot nav { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
footer.foot nav a { color: var(--pasgr-green); text-decoration: none; font-weight: 600; }
footer.foot nav a:hover { text-decoration: underline; }

/* ---- notification badge ---- */
header.top .badge {
  display: inline-block; min-width: 17px; padding: 1px 5px; margin-left: 3px;
  background: var(--pasgr-orange); color: #fff; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; text-align: center; vertical-align: 1px;
}


/* The block card on the area map (T-29). The handset's block card, on a laptop:
   a supervisor teaching the app can now demonstrate the loop rather than
   describe it. */
#blockcard {
  margin-top: 10px; padding: 12px 14px;
  border: 1.5px solid var(--pasgr-green); border-radius: 5px;
  background: #fbfbf7;
}
.blockcard__head { display: flex; align-items: center; gap: 10px; }
.blockcard__head strong { font-size: 15px; }
.blockcard__head button { margin-left: auto; }
.blockcard__next {
  color: #0277BD; font-weight: 600; font-size: 12.5px; margin: 6px 0 0;
}
.blockcard__form { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.blockcard__form label { margin-top: 8px; }
.blockcard__form input[type=number], .blockcard__form select { max-width: 16em; }

/* The action popup and the record dialog (T-59) ---------------------------
   The handset's block card, on a laptop. Both sit OVER the map on purpose:
   the block being acted on stays under the cursor while you act on it, and
   recording against the wrong block is the one mistake here that cannot be
   spotted afterwards from the data. */
.popup__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.popup__head strong { font-size: 14px; }
.popup__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.popup__actions .btn { margin: 0; }
.maplibregl-popup-content { padding: 12px 14px; border-radius: 4px; }

dialog.dlg {
  border: none;
  border-top: 4px solid var(--green);
  padding: 20px 22px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
dialog.dlg::backdrop { background: rgba(0, 0, 0, .35); }
dialog.dlg h3 { margin: 0 0 12px; font-size: 16px; }
dialog.dlg label { display: block; margin-top: 10px; }
dialog.dlg .row { margin-top: 16px; display: flex; gap: 8px; }