/* watchtower-bolo.css — BOLO / Persons (Dispatch - BOLO.dc.html).
 * Ported value-for-value: top wordmark + count ribbon, category filter pills, safety
 * note, tier-rail subject cards, and the watermarked detail drawer. DS tokens only. */

.wtbo { display: flex; flex-direction: column; min-height: 0; height: 100%; position: relative; }

/* ---- header: wordmark + count ribbon ---- */
.wtbo-top { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 14px 24px; background: var(--bg-1, #0e1626); border-bottom: 1px solid var(--l-2, #2a3148); }
.wtbo-wm { font: 700 17px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-0, #f1f4fb); }
.wtbo-sub { font: 9px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold, #ffc72c); margin-top: 4px; }
.wtbo-ribbon { margin-left: auto; display: flex; gap: 8px; }
.wtbo-rc { display: flex; align-items: center; gap: 9px; border: 1px solid var(--l-2, #2a3148); border-radius: 7px; padding: 7px 13px; }
.wtbo-rc .d { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.wtbo-rc .n { font: 700 18px/1 var(--mono); color: var(--c); }
.wtbo-rc .l { font: 8.5px/1 var(--label); letter-spacing: 0.07em; text-transform: uppercase; color: var(--t-3, #6b768f); margin-top: 3px; }

/* ---- toolbar: category filter pills + new ---- */
.wtbo-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 12px 24px; border-bottom: 1px solid var(--l-1, #1d2840); }
.wtbo-fl { font: 10.5px/1 var(--label); letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 11px; border-radius: 6px; border: 1px solid var(--l-2, #2a3148); background: var(--bg-1, #0e1626); color: var(--t-2, #9aa6bf); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wtbo-fl .d { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); }
.wtbo-fl.on { color: var(--t-0, #f1f4fb); border-color: var(--fc); background: color-mix(in oklab, var(--fc) 13%, var(--bg-1, #0e1626)); }
.wtbo-spacer { flex: 1; }
.wtbo-new { font: 600 11px/1 var(--label); letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--sky, #41b6e6); background: color-mix(in oklab, var(--sky, #41b6e6) 14%, var(--bg-1, #0e1626)); color: var(--sky, #41b6e6); cursor: pointer; }

/* ---- safety note ---- */
.wtbo-note { flex: 0 0 auto; display: flex; gap: 10px; align-items: flex-start; margin: 14px 24px 0; padding: 12px 15px; border: 1px solid color-mix(in oklab, var(--gold, #ffc72c) 30%, var(--l-2, #2a3148)); border-radius: 8px; background: color-mix(in oklab, var(--gold, #ffc72c) 7%, var(--bg-1, #0e1626)); font: 13px/1.45 var(--sans); color: var(--t-1, #c3ccdf); }
.wtbo-note svg { color: var(--gold, #ffc72c); flex: 0 0 auto; margin-top: 1px; }
.wtbo-note b { color: var(--t-0, #f1f4fb); }

/* ---- subject card grid ---- */
.wtbo-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 24px 24px; align-content: start; }
.wtbo-empty { grid-column: 1 / -1; text-align: center; padding: 50px; font: 13px/1.5 var(--mono); color: var(--t-3, #6b768f); }
.wtbo-card { border: 1px solid var(--l-2, #2a3148); border-left: 4px solid var(--tc, var(--t-3)); border-radius: 10px; background: var(--bg-1, #0e1626); overflow: hidden; cursor: pointer; }
.wtbo-card:hover { background: var(--bg-2, #141f33); }
.wtbo-card.cleared { opacity: 0.62; }
.wtbo-ch { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 11px; border-bottom: 1px solid var(--l-1, #1d2840); }
.wtbo-cat { font: 9.5px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; }
.wtbo-subj { font-size: 16px; font-weight: 700; margin-top: 4px; color: var(--t-0, #f1f4fb); }
.wtbo-st { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font: 9.5px/1 var(--label); letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; border: 1px solid var(--sc, var(--t-3)); color: var(--sc, var(--t-3)); }
.wtbo-st .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wtbo-desc { padding: 11px 16px 4px; font: 13px/1.45 var(--sans); color: var(--t-1, #c3ccdf); }
.wtbo-nfields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 4px 16px 10px; }
.wtbo-nf { padding: 6px 0; }
.wtbo-nf .k { font: 8.5px/1 var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-3, #6b768f); }
.wtbo-nf .v { font-size: 12.5px; color: var(--t-1, #c3ccdf); margin-top: 3px; }
.wtbo-exp { padding: 0 16px 11px; font: 11px/1 var(--mono); color: var(--t-3, #6b768f); }
.wtbo-photo-tag { padding: 8px 16px; border-top: 1px solid var(--l-1, #1d2840); font: 10.5px/1 var(--mono); color: var(--sky, #41b6e6); }

/* ---- detail drawer (watermarked) + new-BOLO form ---- */
.wtbo-ov { position: absolute; inset: 0; background: color-mix(in oklab, var(--bg-0, #070b13) 72%, transparent); display: flex; justify-content: flex-end; z-index: 40; }
.wtbo-drawer { width: 480px; max-width: 92%; height: 100%; overflow: auto; background: var(--bg-1, #0e1626); border-left: 4px solid var(--tc, var(--l-2)); box-shadow: -16px 0 40px rgba(0,0,0,0.5); }
.wtbo-dwm { padding: 8px 18px; background: color-mix(in oklab, var(--red, #e51e25) 14%, var(--bg-2, #141f33)); border-bottom: 1px solid var(--l-2, #2a3148); font: 9px/1.3 var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-2, #9aa6bf); }
.wtbo-dhead { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--l-1, #1d2840); }
.wtbo-dsubj { font-size: 19px; font-weight: 700; color: var(--t-0, #f1f4fb); margin-top: 3px; }
.wtbo-dref { font: 11px/1 var(--mono); color: var(--t-3, #6b768f); margin-top: 4px; }
.wtbo-x { margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--l-2, #2a3148); background: transparent; color: var(--t-2, #9aa6bf); cursor: pointer; font-size: 14px; }
.wtbo-dphoto { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.wtbo-ddesc { padding: 14px 18px 6px; font: 14px/1.5 var(--sans); color: var(--t-1, #c3ccdf); }
.wtbo-dfields { padding-bottom: 14px; }
.wtbo-dacts { display: flex; gap: 10px; padding: 14px 18px 22px; flex-wrap: wrap; }
.wtbo-act { font: 600 12px/1 var(--label); letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 16px; border-radius: 7px; cursor: pointer; border: 1px solid currentColor; background: transparent; }
.wtbo-act.sky { color: var(--sky, #41b6e6); background: color-mix(in oklab, var(--sky, #41b6e6) 14%, var(--bg-1, #0e1626)); }
.wtbo-act.red { color: var(--red, #e51e25); }
.wtbo-form { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.wtbo-fld { display: flex; flex-direction: column; gap: 6px; }
.wtbo-fld span { font: 9px/1 var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-3, #6b768f); }
.wtbo-fld input, .wtbo-fld textarea, .wtbo-fld select { background: var(--bg-0, #070b13); border: 1px solid var(--l-2, #2a3148); border-radius: 6px; padding: 9px 12px; color: var(--t-0, #f1f4fb); font: 13px/1.4 var(--sans); }
.wtbo-fld input:focus, .wtbo-fld textarea:focus, .wtbo-fld select:focus { outline: none; border-color: var(--sky, #41b6e6); }