:root {
  --text-caption: .8125rem;
  --text-small: .875rem;
  --text-body: .9375rem;
  --text-control: .875rem;
  --text-section: 1rem;
  --text-chart: .75rem;
  --ink: #131a26;
  --cream: #f2ede3;
  --orange: #ff6e3b;
  --deep: #a83510;
  --canvas: oklch(96.5% .006 85);
  --surface: #fff;
  --soft: oklch(98% .003 85);
  --hover: oklch(95% .006 85);
  --line: oklch(87% .005 85);
  --control: oklch(60% .01 260);
  --muted: oklch(43% .012 260);
  --nav-hover: oklch(27% .025 260);
  --nav-muted: oklch(78% .01 260);
  --nav-line: oklch(35% .02 260);
  --success: #286749;
  --priority-critical: #a52717;
  --priority-high: #f2b63f;
  --priority-standard: #24578b;
  --priority-unclassified: #737780;
  --priority-monitor: var(--ink);
  --priority-resolved: #16804a;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
#startup-status { margin:0;min-height:100svh;display:grid;place-content:center;color:var(--muted); }
#view-loading { min-height:calc(100svh - 180px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted); }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--text-body)/1.5 Archivo,system-ui,sans-serif; }
button,input,select,textarea { font: inherit; }
button,a,input,select,textarea { touch-action: manipulation; }
button { cursor: pointer; background: var(--surface); color: var(--ink); border: 1px solid var(--control); padding: 10px 16px; font-weight: 700; min-height: 44px; }
button:hover { background: var(--hover); }
button:disabled { cursor: default; opacity: .5; }
button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
button.primary:hover { background: var(--nav-hover); }
a { color: var(--deep); }
:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
[hidden] { display: none!important; }
h1 { font-family: 'Bebas Neue',Impact,sans-serif; font-weight: 400; font-size: 44px; line-height: 1.05; margin: 4px 0 8px; }
h2 { font-size: 19px; margin: 0 0 18px; }
p { margin: 0 0 16px; }
input,select,textarea { border: 1px solid var(--control); padding: 11px 12px; width: 100%; min-width: 0; background: var(--surface); color: var(--ink); border-radius: 0; }
input::placeholder,textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { resize: vertical; }
label { display: block; font-weight: 600; }
label input,label select { margin-top: 7px; }
dl { margin: 0; }
dt { font-size: 12px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
dd { margin: 0; overflow-wrap: anywhere; }
dl>div { margin-bottom: 22px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--deep); margin-bottom: 12px; }
.small { font-size: 12px; color: var(--muted); margin: 10px 0; }
.skip { position: absolute; left: 10px; top: -80px; background: #fff; padding: 12px; z-index: 2; }
.skip:focus { top: 8px; }
#message { position:fixed;right:24px;bottom:24px;z-index:80;max-width:min(420px,calc(100vw - 32px));margin:0;padding:14px 18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 20px #131a261a;overflow-wrap:anywhere; }
/* One dark navigation frame, with the campaign orange reserved for selection. */
.topbar { min-height: 84px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 24px; color: #fff; text-decoration: none; }
.brand img { object-fit: contain; filter: brightness(0) invert(1); }
.account-controls { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.header-action { color: #fff; background: transparent; border-color: var(--nav-muted); }
.header-action:hover { background: var(--nav-hover); }
.topbar :focus-visible,aside :focus-visible { outline-color: var(--orange); }
.menu-toggle { display: none; }
.shell { display: grid; grid-template-columns: 224px minmax(0,1fr); min-height: calc(100vh - 84px); }
aside { background: var(--ink); color: #fff; padding: 30px 16px; display: flex; flex-direction: column; }
aside nav { display: grid; gap: 6px; }
aside button { text-align: left; background: transparent; color: #fff; border-color: transparent; width: 100%; }
aside button:hover { background: var(--nav-hover); }
aside nav a { display:block;min-height:44px;padding:10px 16px;border:1px solid transparent;color:#fff;font-weight:700;text-align:left;text-decoration:none; }
aside nav a:hover { background:var(--nav-hover); }
aside [aria-current=page],aside [aria-current=page]:hover { background: var(--orange); color: var(--ink); border-color: var(--orange); }
aside .eyebrow { color: var(--nav-muted); padding-left: 16px; font-size: 11px; }
.nav-section + .nav-section { border-top: 1px solid var(--nav-line); margin-top: 28px; padding-top: 24px; }
.sidebar-foot { margin-top: 0; padding: 60px 16px 0; font-size: 12px; color: var(--nav-muted); }
#main { padding: 38px clamp(24px,3vw,56px); min-width: 0; width: 100%; max-width: 1720px; margin-inline: auto; }
.page-heading { padding-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.page-heading p:last-child { margin-bottom: 0; color: var(--muted); }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Tabs, filters and records form a single continuous work surface. */
.submission-workspace { background: var(--surface); border: 1px solid var(--line); }
.tabs { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; padding-inline: 8px; }
.tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 16px; white-space: nowrap; }
.tabs [aria-current=page] { border-bottom-color: var(--orange); }
.tabs button:hover { background: var(--hover); }
.tabs span { margin-left: 8px; font-size: 12px; color: var(--muted); }
.filters { display: grid; grid-template-columns: minmax(220px,1fr) minmax(275px,.85fr) auto auto; align-items: end; gap: 12px; padding: 22px; border-bottom: 1px solid var(--line); }
.filters label { font-size: var(--text-caption); min-width: 0; }
.filters input { font-size: var(--text-control); min-height:48px; }
.filters>button { min-height:48px; }
.table-wrap { overflow-x: auto; min-height: 240px; }
table { background: var(--surface); border-collapse: collapse; width: 100%; text-align: left; }
th { font-size: 12px; color: var(--muted); padding: 15px 22px; background: var(--soft); border-bottom: 1px solid var(--line); }
td { padding: 22px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td strong { font-weight: 700; }
td small { display: block; color: var(--muted); margin-top: 5px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--hover); }
.row-title { background: none; border: 0; text-align: left; padding: 0; min-height: 0; }
a.row-title { display:inline-block;color:var(--ink);font-weight:700;text-decoration:none; }
.row-title:hover { background: transparent; text-decoration: underline; }
.status { font-size: 12px; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.status::before { content: ''; display: inline-block; width: 7px; height: 7px; background: currentColor; margin-right: 8px; }
.status[data-status=unread] { color: var(--deep); }
.empty { text-align: center; padding: 64px 20px; color: var(--muted); }
.empty h2 { color: var(--ink); }
.pagination { padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--muted); font-size: 13px; }
.pagination>div { display: flex; align-items: center; gap: 14px; }
.reference { font: 13px ui-monospace,monospace; margin-top: 26px; color: var(--muted); }
.text-button { background: transparent; border: 0; text-decoration: underline; padding-left: 0; }
#detail>.page-heading { border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 32px; }
#details-content { background: var(--surface); padding: 8px 28px; align-self: start; border: 1px solid var(--line); }
.detail-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.detail-section:last-child { border-bottom: 0; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.fields .wide { grid-column: 1/-1; white-space: pre-wrap; }
.cards { display: grid; align-content: start; gap: 20px; }
.card { background: var(--surface); padding: 24px; border: 1px solid var(--line); }
.contact h2 { overflow-wrap: anywhere; }
#contact-fields>div:last-child { margin-bottom: 0; }
.submission-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); }
.submission-meta p { margin: 0; }
.control-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 8px; }
#status-control { flex-shrink: 0; }
#status-actions { display: flex; gap: 6px; }
#status-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
#status-actions button::before { content: ''; width: 12px; flex: 0 0 12px; }
#status-actions button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
#status-actions button[aria-pressed=true]::before { content: '✓'; }
#status-actions button:disabled { opacity: 1; cursor: wait; }
.danger { border-color: var(--deep); color: var(--deep); }
.management button { width: 100%; }
.management p { font-size: 14px; color: var(--muted); }
.activity summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; }
.activity summary::-webkit-details-marker { display: none; }
.activity-heading strong { display: block; font-size: 19px; }
#event-count { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.activity-chevron { width: 10px; height: 10px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -5px 5px 0 0; flex-shrink: 0; }
.activity[open] .activity-chevron { transform: rotate(225deg); margin-top: 5px; }
#events { padding-left: 18px; font-size: 13px; }
#events li { margin-top: 16px; }
#events small { display: block; color: var(--muted); }
#attachments { padding-left: 18px; }
#attachments li { margin-bottom: 14px; overflow-wrap: anywhere; }
.trash-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.trash-bar p { margin: 0; max-width: 520px; color: var(--muted); }
.user-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.users-table { min-height: 0; border: 1px solid var(--line); }
.users-table tr:last-child td { border-bottom: 0; }
.saving { opacity: .6; pointer-events: none; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { background: var(--surface); border: 1px solid var(--line); padding: 40px; width: min(100%,480px); }
.login-card>img { object-fit: contain; object-position: left; margin-bottom: 30px; }
.login-card form { display: grid; gap: 20px; }
.login-card h1 { font-size: 48px; }
/* User creation stays in a compact, keyboard-accessible dialog. */
.user-dialog { color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 28px; width: min(520px,calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; }
.user-dialog::backdrop { background: rgba(19,26,38,.65); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.dialog-heading h2 { font-size: 24px; margin: 0; }
.icon-button { font-size: 26px; line-height: 1; min-width: 44px; padding: 6px; border-color: transparent; background: transparent; }
.user-dialog form { display: grid; gap: 18px; }
.user-dialog .small { margin: 8px 0 0; }
.role-options { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.role-options legend { font-weight: 600; margin-bottom: 9px; padding: 0; }
.role-option { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); padding: 12px; cursor: pointer; font-weight: 400; }
.role-option:hover { background: var(--hover); }
.role-option:has(input:checked) { background: var(--soft); border-color: var(--ink); }
.role-option:has(input:focus-visible) { outline: 3px solid var(--deep); outline-offset: 2px; }
.role-option input { appearance: none; flex: 0 0 18px; width: 18px; height: 18px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--control); background: #fff; }
.role-option input:checked { border: 5px solid var(--ink); }
.role-option input:focus-visible { outline: none; }
.role-option strong { display: block; font-size: 14px; }
.role-option small { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 3px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 4px; }
.form-error { color: var(--deep); font-size: 14px; margin: 0; }
@media(max-width:1200px) {
  .detail-grid { grid-template-columns: minmax(0,1fr) 300px; gap: 24px; }
  .shell { grid-template-columns: 200px minmax(0,1fr); }
  #main { padding: 28px 24px; }
  .page-heading { flex-wrap: wrap; }
}
@media(max-width:800px) {
  .topbar { min-height: 76px; padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .brand { gap: 12px; }
  .brand img { width: 92px; height: 42px; }
  .menu-toggle { display: block; margin-left: auto; }
  .account-controls { display: none; width: 100%; justify-content: space-between; border-top: 1px solid var(--nav-line); padding-top: 12px; }
  #account { overflow-wrap: anywhere; min-width: 0; }
  .shell { display: block; min-height: calc(100vh - 76px); }
  aside { display: none; padding: 12px 16px 20px; border-top: 1px solid var(--nav-line); }
  .navigation-open aside,.navigation-open .account-controls { display: flex; }
  aside nav { grid-template-columns: 1fr; }
  .sidebar-foot { display: none; }
  .nav-section + .nav-section { padding-top: 16px; margin-top: 16px; }
  #main { padding: 28px 16px; }
  h1 { font-size: 38px; }
  .page-heading { gap: 16px; padding-bottom: 20px; }
  .page-heading p:last-child { font-size: 14px; }
  .page-heading .eyebrow { margin-bottom: 8px; }
  #users>.page-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px; }
  #users>.page-heading>div { display: contents; }
  #users>.page-heading .eyebrow { grid-column: 1; margin-bottom: 0; }
  #users>.page-heading h1 { grid-column: 1; margin-bottom: 0; }
  #users>.page-heading p:last-child { grid-column: 1/-1; margin-top: 8px; }
  #add-user { grid-column: 2; grid-row: 1/3; align-self: center; }
  .actions { gap: 8px; }
  .tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding-inline: 0; overflow: visible; }
  .tabs button { padding: 12px 2px; font-size: 12px; min-width: 0; }
  .tabs span { display: block; margin: 3px 0 0; font-size: 11px; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; padding: 16px; gap: 12px; }
  .filters .search { grid-column: 1/-1; }
  .filters input { font-size: 16px; min-height: 44px; }
  .filters button { width: 100%; }
  .table-wrap { min-height: 0; overflow: visible; }
  table,tbody { display: block; width: 100%; min-width: 0; }
  thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; padding: 20px 16px; border-bottom: 1px solid var(--line); }
  td { display: block; border: 0; padding: 0; overflow-wrap: anywhere; min-width: 0; font-size: 14px; }
  td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
  #rows td:nth-child(2) { grid-column: 1/-1; grid-row: 1; }
  #rows td:nth-child(2)::before { display: none; }
  #rows td:first-child { grid-column: 1/-1; grid-row: 3; }
  #rows td:last-child { grid-column: 1/-1; }
  #rows td:last-child::before { display: none; }
  .row-title { min-height: 44px; font-size: 16px; }
  td small { margin-top: 2px; font-size: 12px; }
  .pagination { padding: 16px; align-items: stretch; flex-direction: column; gap: 12px; }
  .pagination>div { justify-content: space-between; gap: 8px; }
  .pagination button { padding: 10px 12px; }
  #status-control { width: 100%; }
  #status-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  #status-actions button { padding: 10px 6px; gap: 4px; font-size: 13px; }
  .detail-grid { display: flex; flex-direction: column; }
  .fields { grid-template-columns: 1fr; }
  #details-content,.card { padding: 20px; }
  #details-content { padding-block: 0; }
  .cards { width: 100%; }
  .trash-bar { align-items: start; flex-direction: column; padding: 16px; }
  .users-table td:first-child { grid-column: 1/-1; font-weight: 700; font-size: 16px; }
  .users-table td:first-child::before { font-weight: 400; }
  .users-table tr:last-child { border-bottom: 0; }
  .user-actions { display: block; }
  .user-actions button { display: block; margin-top: 8px; }
  .login-card { padding: 26px; }
  .user-dialog { padding: 22px; }
  .user-dialog input,.user-dialog textarea { font-size: 16px; }
}

#attachments{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;}
#attachments li{min-width:0;margin:0;overflow-wrap:anywhere;}
.attachment-tile{display:grid;gap:5px;padding:0 0 8px;width:100%;border:0;text-align:left;background:transparent;}
.attachment-tile strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere;font-weight:600;}
.attachment-tile small{font-size:12px;font-weight:400;color:var(--muted);}
.attachment-preview{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--soft);border:1px solid var(--line);}
.attachment-preview img,.attachment-preview video{width:100%;height:100%;object-fit:contain;display:block;position:absolute;inset:0;}
.attachment-photo{background:#fff;}
.attachment-preview svg{width:32px;height:32px;}
.attachment-file{align-content:center;gap:6px;color:var(--muted);font-size:12px;}
.attachment-play{display:grid;place-items:center;background:var(--ink);color:white;width:44px;height:44px;border-radius:50%;z-index:1;}
.attachment-play svg{width:24px;height:24px;}
.attachment-tile:hover .attachment-preview{border-color:var(--ink);}
.image-dialog{border:1px solid var(--line);padding:24px;width:min(1440px,calc(100vw - 48px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);color:var(--ink);}
.image-dialog::backdrop{background:rgba(0,0,0,.8);}
.image-dialog .dialog-heading{gap:16px;align-items:flex-start;}
.image-dialog .dialog-heading>div{min-width:0;}
.image-dialog h2{font-size:18px;overflow-wrap:anywhere;}
.image-dialog .small{margin:4px 0 0;}
.gallery-stage{position:relative;padding:0 64px;margin:20px 0;}
.gallery-content{position:relative;display:grid;place-items:center;height:min(72dvh,calc(100dvh - 210px));min-height:180px;background:var(--ink);color:white;overflow:hidden;}
.gallery-content[data-kind="image"]{background:#fff;color:var(--ink);}
.gallery-content[data-kind="image"] .gallery-loading{background:#fff;}
.gallery-content>img,.gallery-content>video{display:block;width:100%;height:100%;min-height:0;object-fit:contain;}
.gallery-loading{position:absolute;padding:16px;background:var(--ink);text-align:center;pointer-events:none;}
.gallery-file{display:grid;justify-items:center;gap:20px;padding:32px;text-align:center;color:white;text-decoration:none;}
.gallery-file svg{width:64px;height:64px;}
.gallery-file strong{font-size:24px;}
.gallery-file-action{text-decoration:underline;text-underline-offset:4px;font-size:15px;}
.gallery-file:hover .gallery-file-action{text-decoration-thickness:2px;}
.gallery-file:focus-visible{outline-color:white;}
.gallery-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);padding:8px;width:48px;height:48px;display:grid;place-items:center;z-index:1;}
.gallery-previous{left:0;}.gallery-next{right:0;}
.gallery-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;}
#gallery-count{font-size:14px;text-align:center;min-width:64px;}
@media(max-width:600px){.image-dialog{padding:14px;width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);}.gallery-stage{padding:0;margin:16px 0;}.gallery-content{height:min(64dvh,calc(100dvh - 190px));}.gallery-arrow{width:44px;height:44px;}.gallery-previous{left:6px;}.gallery-next{right:6px;}.gallery-footer>a{font-size:14px;}.gallery-file{max-width:calc(100% - 104px);padding:16px 0;}}

/* Incident workflow: preserve the existing volunteer layout. */
.details-main { min-width: 0; width: 100%; display: grid; align-content: start; gap: 24px; }
.tabs[data-kind=report] { flex-wrap: wrap; overflow: visible; }
.tabs[data-kind=report] button { padding-inline: 12px; }
#detail[data-kind=report]>.page-heading { flex-wrap: wrap; }
#detail[data-kind=report] #status-control { flex: 1 0 100%; }
#detail[data-kind=report] #status-actions { display: flex; flex-wrap: wrap; }
#detail[data-kind=report] #status-actions button { min-width: 110px; }
.status[data-status=new] { color: var(--deep); }
.status[data-status=resolved],.status[data-status=closed] { color: var(--success); }
#reading-filter { min-width: 140px; }
.incident-notes textarea { margin-top: 10px; }
.note-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.note-history { list-style: none; padding: 0; margin: 24px 0 0; }
.note-history li { border-top: 1px solid var(--line); padding: 20px 0; }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 10px; }
.note-history small { color: var(--muted); overflow-wrap: anywhere; }
@media(max-width:800px) {
 .tabs[data-kind=report] { display: flex; }
 .tabs[data-kind=report] button { flex: 1 0 30%; padding: 12px 8px; }
 #detail[data-kind=report] #status-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
 #detail[data-kind=report] #status-actions button { min-width: 0; }
 .note-actions { align-items: start; flex-direction: column; }
 .note-actions button { width: 100%; }
 .filters select { font-size: 16px; }
 #reading-filter { grid-column: 1/-1; }
}

/* Priority is independent of reading; the case workflow stays below the heading. */
.priority-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.priority-toolbar h2 { margin:0; font-size:18px; }
.priority-blocks { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.priority-block { display:flex; justify-content:space-between; align-items:center; text-align:left; gap:12px; padding:14px 16px; min-height:116px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.priority-block strong { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:16px; font-weight:600; }
.priority-code { display:inline-block; padding:4px 8px; font-size:14px; line-height:22px; background:var(--priority-color); color:var(--priority-text); }
.priority-block small { display:block; margin-top:6px; font-size:12px; font-weight:400; }
.priority-count { font-size:30px;font-weight:700;color:var(--priority-count-color,var(--priority-color)); }
.priority-block[data-priority=P1] { --priority-color:var(--priority-critical); --priority-text:#fff; }
.priority-block[data-priority=P2] { --priority-color:var(--priority-high); --priority-text:#141b26; --priority-count-color:#b58100; }
.priority-block[data-priority=P3] { --priority-color:var(--priority-standard); --priority-text:#fff; }
.priority-block[data-priority=P4] { --priority-color:var(--priority-monitor); --priority-text:#fff; }
.priority-block[data-priority=P5] { --priority-color:var(--priority-resolved); --priority-text:#fff; }
.priority-block:hover { background:var(--soft); border-color:var(--control); }
.priority-block[aria-pressed=true] { background:var(--priority-color); border-color:var(--priority-color); color:var(--priority-text); }
.priority-block[aria-pressed=true] .priority-code { background:var(--priority-text); color:var(--priority-color); }
.priority-block[aria-pressed=true] .priority-count { color:var(--priority-text); }
.priority-block:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
@media(forced-colors:active){.priority-block[aria-pressed=true]{border-color:Highlight;}.priority-block:focus-visible{outline-color:Highlight;}}
#priority-overview { margin-bottom:24px; }
#priority-overview>p { margin:14px 0 0; }
.priority-badge { display:inline-block;padding:5px 8px;font-size:12px;font-weight:700;background:#eee;color:#394350;white-space:nowrap; }
.priority-badge[data-level=P1] { background:#fbe6e1;color:#9c2417; }
.priority-badge[data-level=P2] { background:#fff0c9;color:#745000; }
.priority-badge[data-level=P3] { background:#e4edf8;color:var(--priority-standard); }
.priority-badge[data-level=P4] { background:var(--priority-monitor);color:#fff; }
.priority-badge[data-level=P5] { background:var(--priority-resolved);color:#fff; }
.priority-card { width:340px;flex-shrink:0; border-top:5px solid var(--line); }
.priority-card[data-level=P1] { border-top-color:var(--priority-critical); }
.priority-card[data-level=P2] { border-top-color:var(--priority-high); }
.priority-card[data-level=P3] { border-top-color:var(--priority-standard); }
.priority-card[data-level=P4] { border-top-color:var(--priority-monitor); }
.priority-card[data-level=P5] { border-top-color:var(--priority-resolved); }
.priority-card h2 { font-size:24px;margin-bottom:8px; }
.priority-card label { display:block; margin-bottom:8px; }
.priority-card select { width:100%; }
.priority-card button { width:100%; }
.priority-card form { margin-top:16px; }
.priority-card .small { margin-bottom:12px; }
#priority-help { margin-top:10px; }
@media(max-width:1200px){ .priority-blocks { gap:10px; }.priority-block { padding:16px 10px;flex-wrap:wrap; }.priority-count { font-size:24px; } }
@media(max-width:800px){
 .priority-toolbar { align-items:start;flex-direction:column; }
 .priority-blocks { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
 .priority-block { min-height:100px;padding:14px; }
 .priority-block:last-child { grid-column:1/-1; }
 .priority-card { width:100%; }
}

/* Native select behavior with an inset, consistent chevron. */
#app select {
 appearance:none;-webkit-appearance:none;
 background-color:var(--surface);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23131a26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-size:18px 18px;background-position:right 16px center;
 padding:12px 48px 12px 16px;min-height:48px;border:1px solid var(--control);border-radius:0;
 color:var(--ink);line-height:1.4;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;
}
#app select:hover { border-color:var(--ink); }
#app select:focus-visible { outline:2px solid var(--deep);outline-offset:3px; }
#app select:disabled { opacity:.55;cursor:default; }
@media(forced-colors:active){#app select{appearance:auto;background-image:none;padding-right:16px;}}
@media(prefers-reduced-motion:reduce){#app select{transition:none;}}

#detail[data-kind=report]>.page-heading { align-items:flex-start; }

/* Compact incident heading with the reference-style priority stamp. */
.detail-toolbar { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px; }
.detail-toolbar #back { margin:0; }
.detail-toolbar #refresh-incident { margin:0;font-size:13px; }
#detail[data-kind=report]>.page-heading { display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto 1fr;gap:20px 32px;align-items:start; }
#detail[data-kind=report] #detail-heading { grid-column:1;grid-row:1; }
#detail[data-kind=report] #status-control { grid-column:1;grid-row:2; }
#detail[data-kind=report] #priority-card { grid-column:2;grid-row:1 / 3; }
#detail[data-kind=report] #status-actions button { min-width:0;padding-inline:12px; }
.priority-card { padding:0;border:1px solid var(--line);width:100%; }
.priority-card-heading { display:flex;align-items:center;gap:16px; }
.priority-card .priority-stamp { flex:0 0 116px;min-height:110px;margin:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;background:#e5e3dc;color:var(--ink); }
#priority-code { display:block;font-family:'Bebas Neue',sans-serif;font-size:56px;line-height:1; }
#priority-name { display:block;font:700 12px/1.4 Archivo,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.07em;margin-top:4px; }
.priority-card[data-level=''] .priority-stamp { flex-basis:154px; }
.priority-card[data-level=''] #priority-code { font:700 19px/1.3 Archivo,system-ui,sans-serif; }
.priority-card[data-level=P1] .priority-stamp { background:var(--priority-critical);color:#fff; }
.priority-card[data-level=P2] .priority-stamp { background:var(--priority-high);color:var(--ink); }
.priority-card[data-level=P3] .priority-stamp { background:var(--priority-standard);color:#fff; }
.priority-card[data-level=P4] .priority-stamp { background:var(--priority-monitor);color:#fff; }
.priority-card[data-level=P5] .priority-stamp { background:var(--priority-resolved);color:#fff; }
.priority-card #priority-description { margin:0;padding:12px 16px 12px 0;font-size:12px; }
.priority-card form { margin:0;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end; }
.priority-card form label { grid-column:1/-1;margin:0;font-size:13px; }
.priority-card form select { min-width:0; }
.priority-card form button { min-height:48px; }
.priority-card #priority-help { grid-column:1/-1;margin:0;font-size:12px; }
@media(min-width:801px) and (max-width:1200px){
 #detail[data-kind=report]>.page-heading { grid-template-columns:minmax(0,1fr) 300px;gap:20px 24px; }
 .priority-card[data-level=''] .priority-stamp { flex-basis:144px; }
}
@media(max-width:800px){
 #detail[data-kind=report]>.page-heading { grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:20px; }
 #detail[data-kind=report] #detail-heading { grid-column:1;grid-row:1; }
 #detail[data-kind=report] #priority-card { grid-column:1;grid-row:2; }
 #detail[data-kind=report] #status-control { grid-column:1;grid-row:3; }
 .detail-toolbar { gap:8px;align-items:start; }
 .detail-toolbar #back { font-size:13px; }
}

.priority-card #priority-pending { grid-column:1/-1;margin:0;color:#9c3411;font-size:12px;font-weight:700; }

/* Incident queue follows the operational report columns. */
#list[data-kind=report] .queue-priority { font-size:16px;padding:8px 10px; }
.priority-badge.queue-priority[data-level=P1] { background:var(--priority-critical);color:#fff; }
.priority-badge.queue-priority[data-level=P2] { background:var(--priority-high);color:#141b26; }
.priority-badge.queue-priority[data-level=P3] { background:var(--priority-standard);color:#fff; }
.priority-badge.queue-priority[data-level=P4] { background:var(--priority-monitor);color:#fff; }
.priority-badge.queue-priority[data-level=P5] { background:var(--priority-resolved);color:#fff; }
#list[data-kind=report] .queue-priority[data-level=''] { font-size:12px; }
.answer-negative { color:var(--priority-critical);font-weight:700; }
@media(min-width:801px){
 #list[data-kind=report] table { min-width:1120px; }
 #list[data-kind=report] th,#list[data-kind=report] td { padding:18px 16px; }
}
@media(max-width:800px){
 #list[data-kind=report] #rows td:first-child { grid-column:auto;grid-row:auto; }
 #list[data-kind=report] #rows td:last-child { grid-column:auto; }
 #list[data-kind=report] #rows td:last-child::before { display:block; }
}

/* Branded dropdown panels, shared by filters and priority selection. */
.custom-select { position:relative;min-width:0;width:100%; }
label>.custom-select { margin-top:7px; }
.select-trigger { display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:48px;padding:12px 16px;text-align:left;font-weight:600;line-height:1.4;background:var(--surface); }
.select-trigger>span:first-child { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.select-chevron { flex:0 0 8px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);margin:0 5px 0 8px; }
.select-trigger[aria-expanded=true] { border-color:var(--deep); }
.select-trigger[aria-expanded=true] .select-chevron { transform:translateY(2px) rotate(225deg); }
.select-options { position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:100%;min-width:160px;max-height:320px;overflow:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--control);box-shadow:0 8px 24px #131a261f;padding:5px;font-size:14px;font-weight:500; }
.select-options.opens-up { top:auto;bottom:calc(100% + 6px); }
.select-option { position:relative;padding:10px 34px 10px 12px;min-height:40px;line-height:1.4;cursor:pointer;border-left:3px solid transparent; }
.select-option:hover,.select-option.is-active { background:var(--hover); }
.select-option[aria-selected=true] { color:var(--deep);font-weight:700;border-left-color:var(--deep);background:#fff1e9; }
.select-option[aria-selected=true]::after { content:'✓';position:absolute;right:12px;top:10px; }
.select-option.is-active { outline:1px solid var(--control);outline-offset:-1px; }
.select-option[aria-disabled=true] { opacity:.5;cursor:default; }
@media(min-width:801px){.filters select,.filters .select-trigger{font-size:14px;}}
@media(max-width:800px){.select-trigger{font-size:16px;}.select-option{min-height:44px;}}
@media(forced-colors:active){.select-option[aria-selected=true]{border-color:Highlight;color:Highlight;}.select-options{border:1px solid CanvasText;}}

/* Compact filters share one date range; controls wrap before they become cramped. */
#list[data-kind=report] .filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:1350px) and (min-width:801px){
 #list[data-kind=report] .filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
 #list[data-kind=report] .filters .search,#list[data-kind=report] .list-date-field { grid-column:auto; }
}
@media(max-width:1100px) and (min-width:801px){
 #list[data-kind=volunteer] .filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:800px){
 #list[data-kind] .filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #list .filters .search,#list .list-date-field { grid-column:1/-1; }
 #list .filters label { font-size:var(--text-small); }
 #list .filters .select-trigger { padding-inline:12px;gap:8px; }
 #list .filters .select-chevron { margin-left:0; }
 .tabs[data-kind=report] { display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); }
 .tabs[data-kind=report] button { padding:12px 4px; }
}
@media(max-width:380px){
 #list .filters>label { grid-column:1/-1; }
}

/* Independent task checklists follow the report's existing card and type styles. */
.incident-checklist { margin:0; }
.checklist-heading { display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap; }
.checklist-heading h2 { margin:0; }
#checklist-count { white-space:nowrap; }
#checklist-help { margin:12px 0; }
#checklist-feedback:empty { display:none; }
#checklist-feedback { color:var(--deep); }
.checklist-items { list-style:none;padding:0;margin:0; }
.checklist-items li { border-top:1px solid var(--line); }
.checklist-items label { display:flex;gap:14px;align-items:flex-start;margin:0;padding:16px;font-weight:400;cursor:pointer; }
.checklist-items input[type=checkbox] { appearance:auto;flex:0 0 20px;width:20px;height:20px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--deep);cursor:pointer; }
.checklist-items label>span { min-width:0;max-width:78ch;line-height:1.6; }
.checklist-items small { display:block;font-size:12px;color:var(--muted);margin-top:6px;overflow-wrap:anywhere; }
.checklist-items .is-complete { background:var(--soft); }
.checklist-items input:disabled { cursor:default; }
@media(max-width:800px){.checklist-items label{gap:12px;padding-inline:12px;}.checklist-heading{gap:4px;}}



/* Reserve one short feedback line so selecting and saving do not shift the header. */
.priority-card #priority-pending { min-height:1.5em;white-space:nowrap; }
.priority-card #priority-pending[hidden] { display:block!important;visibility:hidden; }
.priority-card #priority-help { min-height:1.5em; }
@media(max-width:800px){#message{right:16px;bottom:16px;}}

/* Lead with the reporter's account, followed by supporting classifications. */
.incident-description { margin:0 0 22px;font-size:18px;font-weight:600;line-height:1.65;max-width:78ch;white-space:pre-wrap;overflow-wrap:anywhere; }
.incident-summary-fields { border-top:1px solid var(--line);padding-top:20px;grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:800px){.incident-description{font-size:17px;}.incident-summary-fields{grid-template-columns:minmax(0,1fr);}}

/* Contact shortcuts use only information supplied with the incident. */
.contact-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.contact-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;max-width:100%;}
.contact-action svg{width:17px;height:17px;flex:none;}
.contact-action:hover{background:#f3eee8;border-color:currentColor;}
.contact-action:focus-visible{outline:2px solid var(--deep);outline-offset:3px;}
.contact-call{background:#131a26;color:#fff;border-color:#131a26;}
.contact-call:hover{background:#293443;}
#attachments-empty{margin-bottom:0;}

.assignment h2{margin-bottom:8px;}
#assignment-name{overflow-wrap:anywhere;margin:0;font-weight:600;}
#assignment-name.unassigned{color:var(--deep);}
#assignment-form{display:grid;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
#assignment-form label{font-size:13px;}
#assignment-form button[type=submit]{width:100%;}

/* Keep the page width and column geometry stable while navigating and filtering. */
html { scrollbar-gutter:stable; }
/* Fixed feedback never changes the layout. It indicates activity, not a percentage. */
#navigation-loading { position:fixed;inset:0 0 auto;height:3px;z-index:90;overflow:hidden;background:var(--ink);pointer-events:none; }
#navigation-loading::after { content:"";display:block;width:35%;height:100%;background:var(--orange);animation:navigation-progress 1.25s ease-in-out infinite; }
@keyframes navigation-progress { from { transform:translateX(-35%); } to { transform:translateX(286%); } }
#navigation-announcement { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
@media(prefers-reduced-motion:reduce){#navigation-loading::after{animation:none;width:100%;}}
@media(min-width:801px){
 #table-region table,.users-table table { table-layout:fixed; }
 #table-region td,.users-table td { overflow-wrap:anywhere; }
 #list[data-kind=report] th:nth-child(1) { width:8%; }
 #list[data-kind=report] th:nth-child(2) { width:19%; }
 #list[data-kind=report] th:nth-child(3) { width:17%; }
 #list[data-kind=report] th:nth-child(4) { width:16%; }
 #list[data-kind=report] th:nth-child(5) { width:9%; }
 #list[data-kind=report] th:nth-child(6) { width:7%; }
 #list[data-kind=report] th:nth-child(7) { width:11%; }
 #list[data-kind=report] th:nth-child(8) { width:13%; }
 #list[data-kind=volunteer] th:nth-child(1) { width:24%; }
 #list[data-kind=volunteer] th:nth-child(2) { width:32%; }
 #list[data-kind=volunteer] th:nth-child(3) { width:16%; }
 #list[data-kind=volunteer] th:nth-child(4) { width:12%; }
 #list[data-kind=volunteer] th:nth-child(5) { width:16%; }
 .users-table th:nth-child(1) { width:50%; }
 .users-table th:nth-child(2) { width:18%; }
 .users-table th:nth-child(3) { width:32%; }
}

.translation-settings-form{display:grid;gap:16px}.translation-settings-form label{display:grid;gap:8px}.translation-settings-form .translation-check{display:flex;align-items:center;gap:10px}.translation-check input,.translation-select input{width:18px;height:18px;flex:none}.translation-select{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:400}.translation-settings-form .actions{flex-wrap:wrap}#settings .card{min-width:0}#translation-metrics,#translation-load{line-height:1.7}#translation-result{overflow-wrap:anywhere}#translation-result h3{font-size:14px;margin-top:20px}#translation-key{width:100%}

#settings .detail-grid{gap:24px;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);align-items:start}@media(max-width:900px){#settings .detail-grid{grid-template-columns:1fr}}
.translation-key-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.translation-key-summary .key-saved{color:var(--success)}#translation-key-help{margin:0}#translation-key-editor{display:grid;gap:12px}#translation-cancel-key{justify-self:start}
.translation-tabs{padding:0;margin:0 0 20px}.translation-tabs [aria-selected=true]{border-bottom-color:var(--orange)}#incident-story h3{font-size:var(--text-control);margin:20px 0 8px}#incident-story-meta{border-top:1px solid var(--line);padding-top:20px;margin-top:24px}#incident-story-meta>div{margin-bottom:0}#incident-story [role=tabpanel]{overflow-wrap:anywhere}#incident-story [role=tabpanel]>:last-child{margin-bottom:0}

.incident-language-content>:last-child{margin-bottom:0}

.translation-toolbar{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}.translation-toolbar .translation-tabs{margin:0;border-bottom:0;flex:1}.translation-toolbar .translation-request{font-size:var(--text-control);font-weight:500;padding:10px 0;min-height:44px}.translation-toolbar #translation-progress{margin:0}.translation-toolbar [hidden]{display:none!important}

/* Keep layout dimensions stable while concealing the previous view. */
#main[aria-busy="true"] > section:not(#view-loading):not(#export-progress) { visibility:hidden; }
#main[aria-busy="true"] #view-loading { position:fixed;inset:84px 0 0 224px;min-height:0;z-index:40;background:var(--canvas);gap:16px; }
.view-loading-spinner { display:block;width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--deep);border-radius:50%;animation:view-loading-spin .8s linear infinite; }
#view-loading.has-error .view-loading-spinner { display:none; }
#view-loading-label { margin:0;font-weight:600; }
@keyframes view-loading-spin { to { transform:rotate(360deg); } }
@media(max-width:800px) { #main[aria-busy="true"] #view-loading { left:0; } }
@media(prefers-reduced-motion:reduce) { .view-loading-spinner { animation:none; } }

.export-progress{margin:0 0 24px;padding:8px 12px;border:1px solid var(--line);background:var(--white,#fff);display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:var(--text-small,14px)}
.export-progress[hidden]{display:none}
.export-progress p{margin:0;min-width:0;flex:1 1 200px;font-variant-numeric:tabular-nums}
.export-progress a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#a9340d;text-decoration:underline}
.export-progress button{font-size:inherit;min-height:44px;padding:8px 12px}
@media(max-width:560px){.export-progress{gap:4px 12px}.export-progress p{flex-basis:100%}}