:root {
  --bg: #f4f6f8; --card: #fff; --ink: #1c2530; --muted: #66727f; --line: #dfe4ea;
  --brand: #0b5c4a; --brand-2: #0e7a62; --accent: #f2a900;
  --red: #c62828; --red-bg: #fdecea; --amber: #b26a00; --amber-bg: #fff4e0; --green: #1b7f3b; --green-bg: #e8f5ec; --info: #2b5e9e; --info-bg: #e9f1fb;
  --radius: 10px; --shadow: 0 1px 2px rgba(20,30,40,.06), 0 4px 14px rgba(20,30,40,.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 18px; padding: 10px 22px; background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 20; }
.brand { color: #fff; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.logo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: #1c2530; font-weight: 800; }
.tag { font-size: 11px; font-weight: 500; opacity: .75; margin-left: 4px; }
.quick-search { flex: 1; display: flex; max-width: 620px; }
.quick-search input { flex: 1; padding: 8px 12px; border: 0; border-radius: 8px 0 0 8px; font-size: 14px; }
.quick-search button { padding: 8px 14px; border: 0; border-radius: 0 8px 8px 0; background: var(--accent); color: #1c2530; font-weight: 600; }
.topbar nav { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.topbar nav a { color: #fff; opacity: .9; }
.who { font-size: 13px; opacity: .95; }
.linkish { background: none; border: 0; color: #fff; text-decoration: underline; font-weight: 600; padding: 0; }

/* layout */
main { max-width: 1240px; margin: 22px auto; padding: 0 22px 60px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 18px; }
.card h2 { margin: 0 0 12px; font-size: 16px; }
.card h3 { margin: 18px 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid.two, .grid.three { grid-template-columns: 1fr; } }
.page-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.page-title h1 { margin: 0; font-size: 22px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: #fafbfc; }
tr:hover td { background: #fafcfd; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* pills */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.red { background: var(--red-bg); color: var(--red); }
.pill.amber { background: var(--amber-bg); color: var(--amber); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.grey { background: #eef1f4; color: var(--muted); }
.pill.clickable { cursor: pointer; text-decoration: underline dotted; }
.days { font-weight: 700; font-variant-numeric: tabular-nums; }
.days.ok { color: var(--green); }
.days.late { color: var(--red); }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.tile .v { font-size: 20px; font-weight: 700; }
.tile .k { font-size: 12px; color: var(--muted); }

/* forms */
label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
input[type=text], input[type=number], input[type=search], input[type=password], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #c9d1da; border-radius: 7px; font: inherit; background: #fff; }
textarea { min-height: 220px; resize: vertical; font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: 2px solid #9ed1c3; border-color: var(--brand-2); }
.field { margin-bottom: 12px; }
.field .req { color: var(--red); }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--red); background: #fff8f8; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 16px; }
.radio-row { display: flex; gap: 16px; align-items: center; padding: 6px 0; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; color: var(--ink); cursor: pointer; }
fieldset { border: 1px dashed var(--line); border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; }
legend { font-size: 12px; color: var(--muted); padding: 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.prefill { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; }
.prefill div { padding: 6px 0; border-bottom: 1px dotted var(--line); }
.prefill .k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.prefill .v { font-weight: 600; }

/* buttons */
.btn { padding: 9px 16px; border-radius: 8px; border: 1px solid #c9d1da; background: #fff; font-weight: 600; }
.btn:hover { background: #f4f6f8; }
.btn.primary { background: var(--brand-2); color: #fff; border-color: var(--brand-2); }
.btn.primary:hover { background: var(--brand); }
.btn.danger { color: var(--red); border-color: #f0b4b4; }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.actions .status { margin-left: auto; font-size: 12.5px; color: var(--muted); }

/* photos */
.dropzone { border: 2px dashed #b9c4cf; border-radius: 10px; padding: 18px; text-align: center; color: var(--muted); background: #fafbfc; transition: .15s; }
.dropzone.over, .dropzone:focus { border-color: var(--brand-2); background: #eef7f4; outline: none; }
.dropzone kbd { background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.photo { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.photo img { width: 100%; height: 120px; object-fit: cover; display: block; cursor: zoom-in; }
.photo .meta { padding: 6px 8px; display: flex; gap: 6px; align-items: center; }
.photo select { padding: 3px 4px; font-size: 12px; }
.photo .del { margin-left: auto; background: none; border: 0; color: var(--red); font-size: 16px; line-height: 1; }
.photo .dup { position: absolute; }

/* DD results */
.flag { border-left: 4px solid; border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; background: #fff; border: 1px solid var(--line); }
.flag.red { border-left-color: var(--red); background: var(--red-bg); }
.flag.amber { border-left-color: var(--amber); background: var(--amber-bg); }
.flag.info { border-left-color: var(--info); background: var(--info-bg); }
.flag .t { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.flag .d { font-size: 13px; color: #3b4753; margin: 3px 0 6px; }
.flag ul { margin: 4px 0 0; padding-left: 18px; }
.flag li { margin: 2px 0; }
.flag .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.flag pre { white-space: pre-wrap; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px; font: 12px/1.4 inherit; max-height: 260px; overflow: auto; margin: 0; }
.dd-summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.dd-summary .count { font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.dd-summary .count.red { background: var(--red-bg); color: var(--red); }
.dd-summary .count.amber { background: var(--amber-bg); color: var(--amber); }
.dd-summary .count.info { background: var(--info-bg); color: var(--info); }
.banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
.banner.warn { background: var(--amber-bg); color: var(--amber); }
.banner.ok { background: var(--green-bg); color: var(--green); }
.banner.err { background: var(--red-bg); color: var(--red); }
.banner ul { margin: 6px 0 0; padding-left: 18px; font-weight: 500; }

/* modal & toast */
.modal { position: fixed; inset: 0; background: rgba(15,25,35,.45); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal-box { background: #fff; border-radius: 12px; padding: 22px; width: min(860px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-box h2 { margin-top: 0; }
.modal-box img.full { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #1c2530; color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 60; box-shadow: var(--shadow); }
.toast.err { background: var(--red); }

/* tabs for tracks */
.track-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.track-tabs a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 13px; }
.track-tabs a.active { background: var(--brand-2); color: #fff; border-color: var(--brand-2); }
.track-tabs a:hover { text-decoration: none; }

.version-list { font-size: 13px; }
.version-list li { margin: 3px 0; }
.diff { font-size: 12.5px; }
.diff .old { color: var(--red); text-decoration: line-through; }
.diff .new { color: var(--green); }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #cbd5df; border-top-color: var(--brand-2); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.name-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.name-pick button { padding: 14px; border-radius: 8px; border: 1px solid var(--line); background: #fafbfc; font-weight: 600; font-size: 15px; }
.name-pick button:hover { background: #eef7f4; border-color: var(--brand-2); }
.help { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ---- v1.5: frozen track header, repayment cards, follow-ups ---- */
.sticky-head { position: sticky; top: 52px; z-index: 15; background: var(--bg); padding: 10px 0 8px; margin: -22px 0 12px; border-bottom: 1px solid var(--line); }
.sticky-head .crumbs { margin-bottom: 6px; }
.sticky-head .page-title { margin-bottom: 8px; }
.sticky-head .track-tabs { margin-bottom: 8px; }
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.view-toggle a { padding: 6px 16px; font-weight: 600; font-size: 13px; color: var(--ink); border-right: 1px solid var(--line); }
.view-toggle a:last-child { border-right: 0; }
.view-toggle a.active { background: var(--brand); color: #fff; }
.view-toggle a:hover { text-decoration: none; }
.pill.active-pill { outline: 2px solid var(--brand-2); outline-offset: 1px; }

.rep-cards { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .rep-cards { grid-template-columns: 1fr; } }
.rep-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.rep-card h3 { margin: 0 0 10px; font-size: 14px; text-transform: none; letter-spacing: 0; }
.rep-card.payments { background: #fafbfc; }
.rep-card.payments thead th { background: #eef1f4; }
.payments-table td:first-child, .payments-table th:first-child { width: 130px; }
.payments-table tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.payments-table tr.rollover td { font-style: italic; color: var(--muted); }
.paid { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.paid.green { background: var(--green-bg); color: var(--green); }
.paid.amber { background: var(--amber-bg); color: var(--amber); }
.paid.red { background: var(--red-bg); color: var(--red); }
.paid.grey { background: #eef1f4; color: var(--muted); }

.badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #eef1f4; color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; vertical-align: middle; }
.badge.mine { background: var(--accent); color: #1c2530; }
.topbar nav .badge { background: rgba(255,255,255,.25); color: #fff; }
.topbar nav .badge.mine { background: var(--accent); color: #1c2530; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); padding: 2px 6px; }
.btn.ghost:hover { color: var(--brand-2); }
.fu-tab { margin-left: 10px; }

/* ---- v1.6: DD photo comparison ---- */
.cmp-photos { display: flex; gap: 14px; margin: 8px 0 4px; }
.cmp-photos figure { margin: 0; text-align: center; }
.cmp-photos img { width: 160px; height: 160px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.cmp-photos figcaption { font-size: 11px; color: var(--muted); margin-top: 3px; }
.cmp-photos figure.removed img { opacity: .45; filter: grayscale(1); }
.flag .fl-toggle { margin-left: 8px; }
.thumbs { display: flex; gap: 4px; margin-top: 4px; }
.thumbs img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }

/* ---- v1.8: Oya PMO ---- */
.pmo-head .track-tabs { align-items: center; }
.pmo-search { display: flex; margin-left: auto; min-width: 320px; }
.pmo-search input { border-radius: 8px 0 0 8px; }
.pmo-search .btn { border-radius: 0 8px 8px 0; }
.pmo-progress .bar { height: 8px; background: #eef1f4; border-radius: 999px; margin-top: 6px; overflow: hidden; }
.pmo-progress .bar div { height: 100%; background: var(--brand-2); }
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-right: 10px; }
.chip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 600; }
.chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.pmo-table tr.done td { opacity: .5; }
.pmo-table td.why { max-width: 360px; }
.pmo-table tr.t1 td:first-child { box-shadow: inset 4px 0 var(--red); }
.pmo-table tr.t2 td:first-child { box-shadow: inset 4px 0 var(--amber); }
.pmo-table tr.t3 td:first-child { box-shadow: inset 4px 0 var(--info); }
.phone-big { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.phone-big .phone { font-size: 22px; }
.outcomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.outcome { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: #fafbfc; text-align: left; font-weight: 600; }
.outcome span { margin-right: 4px; }
.outcome.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.area-pick { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.area-opt { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; font-weight: 600; color: var(--ink); cursor: pointer; }
tfoot td { font-weight: 700; border-top: 2px solid var(--line); }

/* entrance role picker */
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.role-pick button { padding: 26px 18px; border-radius: 12px; border: 1px solid var(--line); background: #fafbfc; text-align: left; }
.role-pick button:hover { background: #eef7f4; border-color: var(--brand-2); }
.role-pick .big { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
#role-btn { opacity: .7; font-weight: 500; margin-left: 4px; }
details > summary { cursor: pointer; font-weight: 600; color: var(--brand-2); padding: 6px 0; list-style: none; }
details > summary::before { content: "▸ "; }
details[open] > summary::before { content: "▾ "; }
details { margin-top: 8px; }
.role-admin { text-align: center; margin-top: 16px; }
.role-back { margin-top: 14px; font-size: 13px; }
body.role-pmo .quick-search { visibility: hidden; }
/* contextual header: CA pages show My work + Switch to PMO; PMO pages show Switch to CA; admin shows both switches */
.topbar nav a.nav-ca-only, .topbar nav a.nav-pmo-only, .topbar nav a.nav-admin-only { display: none; }
body.ctx-ca .topbar nav a.nav-ca-only { display: inline; }
body.ctx-pmo .topbar nav a.nav-pmo-only { display: inline; }
body.ctx-admin .topbar nav a.nav-admin-only { display: inline; }
.bureau-box { border-style: solid; }
.bureau-box .flag { margin-bottom: 6px; }
.bureau-box tr.open-fac td { font-weight: 600; }
.alloc { display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.alloc-area { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: #fafbfc; }
.alloc-head { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--ink); cursor: pointer; }
.alloc-area .al-toggle { float: right; }
.alloc-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 14px; margin: 8px 0 2px 26px; }
.alloc-team { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: var(--ink); cursor: pointer; }

/* v2.3 — header identity, continuing strip, list sections */
.topbar .who .admin-tag { font-weight: 700; color: #fff; }
.topbar .who a { color: #d8efe6; font-size: 12.5px; text-decoration: underline dotted; }
.continuing { position: fixed; left: 50%; transform: translateX(-50%); top: 62px; z-index: 40; background: #fff8e1; border: 1px solid #f0d58a; color: #5a4200; padding: 8px 14px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: 13.5px; display: flex; gap: 10px; align-items: center; }
.continuing a { color: #7a5a00; font-weight: 600; }
.continuing .linkish { color: #7a5a00; font-size: 16px; line-height: 1; }
details.sec { margin-bottom: 14px; }
details.sec > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 2px solid var(--line); margin-bottom: 6px; flex-wrap: wrap; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before { content: '▾'; color: var(--muted); font-size: 12px; }
details.sec:not([open]) > summary::before { content: '▸'; }
details.sec > summary h2 { margin: 0; font-size: 15px; }
details.sec > summary .n { font-weight: 700; padding: 1px 9px; border-radius: 999px; font-size: 12px; }
.n.red { background: var(--red-bg); color: var(--red); } .n.green { background: var(--green-bg); color: var(--green); } .n.grey { background: #eef1f4; color: var(--muted); }
details.sec > summary .sub { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.due-td { color: var(--red); font-weight: 700; }
.pmo-table tr.added td:first-child { border-left: 3px solid var(--info); }
.list-stale { background: var(--info-bg); border: 1px solid #b9d9f0; color: #0b4a7a; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.list-stale .btn { margin-left: auto; }
.pos { display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 0; }
.pos > div { display: flex; flex-direction: column; }
.pos .k { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pos .v { font-weight: 700; font-size: 18px; }
.pos.small .v { font-size: 14px; }
.pos .tot .v { color: var(--red); }
.nudge { background: #fff3cd; border: 1px solid #f0d58a; color: #5a4200; padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.nudge .linkish { color: #7a5a00; font-size: 18px; margin-left: auto; }
/* collections review */
.rate-cell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rate-bar-bg { width: 60px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.rate-bar { height: 100%; border-radius: 3px; background: var(--green); }
.rate-bar.low { background: var(--red); } .rate-bar.mid { background: var(--amber); }
body.ctx-coll .nav-ca-only, body.ctx-coll .nav-pmo-only { display: none; }
body.ctx-coll .topbar nav a.nav-admin-only { display: inline; }   /* Collections page: offer Switch to CA / PMO like admin */
body.ctx-coll .quick-search { visibility: hidden; }

/* ---- phones (≤ 720px) ---- */
.only-m { display: none; }
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
  .topbar .quick-search { order: 3; flex: 1 1 100%; }
  .topbar nav { margin-left: auto; gap: 8px; font-size: 13px; flex-wrap: wrap; justify-content: flex-end; }
  .topbar .who { flex-basis: 100%; text-align: right; }
  main { padding: 10px; }
  .page-title { flex-wrap: wrap; gap: 6px; }
  .page-title h1 { font-size: 20px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile .v { font-size: 17px; }
  .card { padding: 12px; }
  .actions, .chips { flex-wrap: wrap; }
  .chip { padding: 5px 10px; font-size: 12.5px; }
  .grid.two { grid-template-columns: 1fr; }
  .prefill { grid-template-columns: 1fr 1fr; }
  .track-tabs { flex-wrap: wrap; }
  .pmo-search { flex-basis: 100%; }
  table { font-size: 12.5px; }
  tbody td, thead th { padding: 6px 8px; }
  .hide-m { display: none; }
  .show-m .hide-m { display: table-cell; }
  .only-m { display: inline-block; }
  .outcomes { grid-template-columns: 1fr; }
  .pmo-table .why { min-width: 160px; }
  .role-pick { grid-template-columns: 1fr; }
  .modal-box { width: 96vw; max-height: 92vh; overflow: auto; padding: 14px; }
  .nudge, .continuing { left: 8px; right: 8px; transform: none; font-size: 13px; }
  .pos { gap: 12px; }
}
.short-m { display: none; }
@media (max-width: 720px) {
  .full-m { display: none; } .short-m { display: inline; }
  .coll-main td:nth-child(2), .coll-cash td:nth-child(2) { max-width: 120px; white-space: normal; font-size: 12px; }
  .coll-main .rate-bar-bg, .coll-cash .rate-bar-bg { width: 40px; }
  .coll-main td, .coll-main th, .coll-cash td, .coll-cash th { padding: 6px 5px; }
  .coll-main td.num, .coll-cash td.num { font-size: 12px; }
}

/* snapshot board (old tracker look) */
.snap-board{background:#fff;padding:12px;min-width:1180px;width:max-content;font-family:Arial,Helvetica,sans-serif;color:#000}
.snap-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.snap-asat{background:#ff0;color:#1F497D;font-weight:700;padding:3px 6px;font-family:Cambria,Georgia,serif}
.snap-blocks{display:flex;gap:10px;align-items:flex-start}
.snap-block{border-collapse:collapse;font-size:12px}
.snap-block th,.snap-block td{border:1px solid #bfbfbf;padding:2px 5px;white-space:nowrap}
.snap-block th.band{color:#fff;font-weight:700;text-align:center;font-family:Cambria,Georgia,serif;font-size:13px;padding:4px}
.snap-block tr.cols th{background:#DCE6F1;font-size:11px;font-weight:700;text-align:center;font-family:Cambria,Georgia,serif}
.snap-block td.num{text-align:right;min-width:78px}
.snap-block td:first-child{min-width:170px;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.snap-block tr.alt td{background:#F2F2F2}
.snap-block tr.tot td{background:#FFF2CC;font-weight:700}

/* applications & approvals */
.aa-trend{display:flex;gap:3px;align-items:flex-end;height:44px;margin-top:10px}
.aa-trend div{flex:1;background:#cfe3d9;border-radius:3px 3px 0 0;min-height:2px}.aa-trend div.h{background:var(--green,#1f5f4a)}
.aa-tl{display:flex;justify-content:space-between;font-size:10px;color:#9aa39e;margin-top:2px}
.aa-tbl tr.muted td{color:#9aa39e}
@media (max-width:720px){.aa-grid{grid-template-columns:1fr}}
.aa-grid > .card{min-width:0}.aa-grid .table-wrap{overflow-x:auto;max-width:100%}
@media (max-width:720px){.aa-grid h2{flex-wrap:wrap}.aa-grid h2 .actions{margin-left:0;width:100%}}
@media (max-width:720px){.aa-tbl th:first-child,.aa-tbl td:first-child{display:none}.aa-tbl th,.aa-tbl td{padding-left:4px;padding-right:4px}}

/* reports site: only the two module links */
body.site-reports .quick-search, body.site-reports .topbar nav a[href="#/admin"], body.site-reports .topbar nav a[href="#/work"], body.site-reports #switch-pmo, body.site-reports #switch-ca { display: none !important; }
body.site-reports .topbar nav a.nav-admin-only { display: inline !important; }

/* v2.9 sign-in / roles */
.topbar .who .me{background:rgba(255,255,255,.14);border-radius:20px;padding:3px 10px;font-size:13px}.topbar .who .me i{font-style:normal;opacity:.75}
.ro-banner{max-width:1180px;margin:14px auto 0;padding:10px 14px;border-radius:8px;background:#fff6dd;border:1px solid #f2d27a;font-size:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ro-banner .btn{margin-left:auto}
body.ro.ro-lock #app :is(input,select,textarea):not(.ro-ok){pointer-events:none;background:#f3f4f2;opacity:.7}
body.ro.ro-lock #app button:not(.ro-ok):not(.chip):not(.copy):not(.al-toggle):not([data-days]):not(.linkish){pointer-events:none;opacity:.45}
body.ro.ro-lock #app .outcomes{opacity:.45;pointer-events:none}
code.otp{background:#fff3d6;border:1px solid #f2d27a;border-radius:4px;padding:1px 6px;font-weight:700;letter-spacing:.5px}
@media (max-width:720px){.ro-banner{margin:10px 12px 0}}
.ro-banner select{width:auto;max-width:260px;display:inline-block}

/* lightbox */
.lb{display:flex;align-items:center;gap:8px}.lb-stage{position:relative;flex:1;min-height:200px;display:flex;align-items:center;justify-content:center;background:#111;border-radius:8px}
.lb-stage img.full{max-height:72vh;max-width:100%;object-fit:contain;transition:opacity .15s}.lb-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff}
.lb-nav{background:#fff;border:1px solid #cfd6d2;border-radius:50%;width:40px;height:40px;font-size:26px;line-height:1;cursor:pointer;flex:none}
.lb-cap{display:flex;justify-content:space-between;margin-top:8px;font-size:13px}
@media (max-width:720px){.lb-nav{display:none}.lb-stage img.full{max-height:60vh}#lb-hint{display:none}}

/* reports site home */
.rep-home{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:900px}
.rep-tile{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;min-width:0}
.rep-tile h2{margin:0}.rep-tile p{margin:0 0 6px;color:#5c6660;font-size:14px;flex:1}.rep-tile .btn{align-self:flex-start}
.rep-tile:hover{box-shadow:0 4px 18px rgba(0,0,0,.08)}
body.site-reports .topbar nav a{display:inline}

/* v2.10 unreachable cases */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.tabs .tab{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;cursor:pointer}
.tabs .tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pill.blue{background:#e6eefb;color:#2b56a8}

/* v2.11 grouped outcomes */
.ogrp{margin-top:12px}.ogrp h4{margin:0 0 8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.ogrp h4 .ln{flex:1;height:1px;background:var(--line)}
.outcome{text-align:left;display:flex;gap:8px;align-items:flex-start;line-height:1.25}
.outcome .i{font-size:16px}.outcome small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:3px}
.outcome .tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;background:#eef1f4;color:#4b5a52;margin-left:auto;white-space:nowrap}
.outcome.warn{border-color:#f2c48a;background:#fff9f0}.outcome.bad{border-color:#e8a4a4;background:#fff5f5}.outcome.ok{border-color:#a9d7bf;background:#f2fbf6}
.outcome.on{outline:2px solid var(--brand)}

/* v2.12 hour-of-day chart */
.hrs-chart{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;height:160px;align-items:end;margin:8px 0 4px;padding-bottom:18px;position:relative}
.hrs-chart .col{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative;min-width:0}
.hrs-chart .bar{background:#4f8f7a;border-radius:3px 3px 0 0;transition:height .2s}.hrs-chart .bar.peak{background:var(--brand)}
.hrs-chart .val{font-size:10px;color:var(--muted);text-align:center;margin-bottom:2px;white-space:nowrap;overflow:hidden}
.hrs-chart .lab{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden}
@media (max-width:720px){.hrs-chart{height:120px}.hrs-chart .val{display:none}.hrs-chart .lab{font-size:9px}.hrs-chart .col:nth-child(even) .lab{visibility:hidden}}