/*
 * PremierOne Records - the smart client's look, after the screenshots in the PremierOne Records
 * User Guide v4.6.22: a Windows client in Segoe UI, a light title and menu bar, the dark navy
 * toolbar and document tab strip, a lavender-grey search pane beside a white "Search Results"
 * grid, and tan folders with coloured alert chips.
 */
:root {
  --navy: #2e3a50;
  --navy-2: #3d4a63;
  --navy-3: #56627a;
  --tab: #c4ccd8;
  --tab-text: #1d1d1d;
  --pane: #e4e7ee;
  --pane-line: #c9ced8;
  --blue: #1e7ac2;
  --blue-dark: #145a91;
  --select: #3a7bd5;
  --grid-line: #d4d4d4;
  --grid-alt: #f4f4f4;
  --tan: #e8dcc2;
  --tan-2: #efe6d3;
  --tan-line: #b9a98a;
  --text: #1d1d1d;
  --muted: #666;
  --req: #d0021b;
  --ok: #1d8a3a;
  --bg: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 13px "Segoe UI", Tahoma, Arial, sans-serif; }
button { font: inherit; }
.p1r { display: grid; grid-template-rows: auto auto auto auto 1fr auto; grid-template-columns: minmax(0, 1fr); height: calc(100 * var(--vh, 1vh)); min-width: 720px; overflow: hidden; }
.p1r.embedded { grid-template-rows: auto auto auto 1fr auto; }
.p1r.embedded .titlebar { display: none; }

/* title and menu bar */
.titlebar { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; background: #f5f6f8;
  border-bottom: 1px solid #d9dce2; }
.tb-logo img { width: 18px; height: 18px; display: block; border-radius: 50%; }
.tb-name { font-size: 12.5px; }
.menubar { display: flex; align-items: center; gap: 18px; height: 34px; padding: 0 8px; background: #f0f1f4; }
.menus { display: flex; gap: 2px; background: #e5e7ec; padding: 1px 4px; }
.mb { border: 0; background: none; padding: 2px 8px; cursor: default; }
.mb:hover, .mb.open { background: #cfd8e6; }
.working { font-size: 13px; }
.working b { font-weight: 400; }
.gsearch { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.gsearch input { width: 200px; height: 24px; border: 1px solid #b7bcc6; padding: 0 6px; font: inherit; }
.gs-go, .gs-adv { height: 26px; border: 1px solid #aeb4bf; background: linear-gradient(#fbfbfc, #e6e8ec); padding: 0 10px; }
.gs-go { width: 42px; padding: 0; }
.gs-go:hover, .gs-adv:hover { background: #dde6f3; }

/* toolbar */
.toolbar { display: flex; background: linear-gradient(#3f4b61, #28334a); border-top: 1px solid #111a2b; height: 36px; }
.toolbar button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff;
  background: none; border: 0; border-right: 1px solid #1c2537; border-left: 1px solid #4b5770; font-weight: 600; font-size: 12.5px; }
.toolbar button:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.toolbar button:disabled { color: #7b8497; }
.ico { width: 16px; height: 16px; display: inline-block; background: center/contain no-repeat; opacity: .95; }
.ico-home { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f3f3f3' d='M8 1 1 7h2v7h4V10h2v4h4V7h2z'/%3E%3C/svg%3E"); }
.ico-back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23c7ccd6' d='M9 2 3 8l6 6V10h5V6H9z'/%3E%3C/svg%3E"); }
.ico-fwd { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23c7ccd6' d='M7 2l6 6-6 6V10H2V6h5z'/%3E%3C/svg%3E"); }
.ico-msg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f3f3f3' d='M1 3h14v9H5l-4 3z'/%3E%3C/svg%3E"); }
.ico-key { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237b8497' d='M5 7a4 4 0 1 1 3 3.9V13H6v2H3v-3.5z'/%3E%3C/svg%3E"); }
.ico-query { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%23f3f3f3' stroke-width='2'/%3E%3Cpath stroke='%23f3f3f3' stroke-width='2.5' d='m10 10 4.5 4.5'/%3E%3C/svg%3E"); }
.ico-exit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23e2574c' d='M2 2h7v3H7V4H4v8h3v-1h2v3H2z'/%3E%3Cpath fill='%23f3f3f3' d='M9 5l4 3-4 3V9H6V7h3z'/%3E%3C/svg%3E"); }

/* document tabs */
.tabstrip { display: flex; align-items: flex-end; gap: 2px; background: var(--navy-2); padding: 6px 8px 0; min-height: 38px; min-width: 0; overflow: hidden; }
.tab { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px; background: var(--tab); color: var(--tab-text);
  border: 1px solid #93a0b4; border-bottom: 0; cursor: default; white-space: nowrap; max-width: 280px; min-width: 70px; flex: 0 1 auto; }
.tab .x { flex: none; }
.tab span { overflow: hidden; text-overflow: ellipsis; }
.tab.on { background: #fff; }
.tab .x { font-size: 17px; line-height: 1; color: #555; padding: 0 2px; }
.tab .x:hover { color: #c00; }
.tab-add { flex: none; width: 34px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 22px;
  color: #cfd6e2; background: #6a7690; border: 1px solid #93a0b4; border-bottom: 0; }
.doc { position: relative; overflow: hidden; border: 1px solid #93a0b4; border-top: 0; background: #fff; }
.pagebox { position: absolute; inset: 0; overflow: auto; }

/* status bar */
.statusbar { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; height: 28px;
  background: #f3f4f6; border-top: 1px solid #cfd3da; padding: 0 0 0 8px; font-size: 12.5px; }
.sb-conn { color: var(--ok); }
.sb-conn.bad { color: var(--req); }
.sb-count { min-width: 50px; height: 22px; text-align: center; line-height: 22px; background: #e1e3e8; border: 1px solid #c3c7cf; }
.sb-user { text-align: center; }
.sb-cts { height: 100%; display: flex; align-items: center; padding: 0 10px; background: #d9eadb; color: var(--ok); font-weight: 600; }
.sb-cts.bad { background: #f3d9d9; color: var(--req); }

/* Lobby */
.lobby { padding: 16px 40px 40px; }
.lobby-top { display: flex; justify-content: flex-end; align-items: flex-end; gap: 24px; margin-bottom: 8px; }
.lobby-top label { display: flex; flex-direction: column; font-size: 10px; color: #444; }
.lobby-top input { border: 0; border-bottom: 1px solid #2b5c9a; width: 170px; font: inherit; padding: 2px 0; outline: none; }
.lobby-top button { border: 0; background: none; color: #1a4f9a; font-size: 12px; }
.l-sec { border-top: 2px solid #2b3a55; box-shadow: 0 1px 3px rgba(0,0,0,.25); margin-bottom: 10px; padding: 6px 18px 12px 64px; position: relative; }
.l-sec h2 { margin: 0 0 4px; font-size: 26px; font-weight: 400; color: #111; }
.l-sec .l-ico { position: absolute; left: 18px; top: 10px; width: 32px; height: 30px; }
.l-sec .l-caret { position: absolute; right: 18px; top: 10px; color: #777; border: 0; background: none; font-size: 14px; }
.l-sec.shut .l-items { display: none; }
.l-items { display: grid; grid-template-columns: repeat(auto-fill, 154px); row-gap: 8px; }
.l-items a { color: #111; text-decoration: none; font-size: 14.5px; cursor: pointer; }
.l-items a:hover { color: var(--blue); text-decoration: underline; }
.l-items a.off { color: #999; cursor: default; text-decoration: none; }
.ic-folder { background: linear-gradient(#35a7e6, #1d86c9); border-radius: 2px 6px 2px 2px; }
.ic-ops { border: 2px solid #3b8ed0; border-radius: 3px; background: repeating-linear-gradient(#fff 0 5px, #3b8ed0 5px 7px); }
.ic-find { border: 4px solid #3b8ed0; border-radius: 50%; width: 26px !important; height: 26px !important; }

/* module: search pane + results */
.module { position: absolute; inset: 0; display: grid; grid-template-columns: 340px 1fr; }
.module.collapsed { grid-template-columns: 34px 1fr; }
.spane { display: flex; flex-direction: column; background: var(--pane); border-right: 1px solid var(--pane-line); min-height: 0; }
.spane-top { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 10px;
  border-bottom: 4px solid #cfd3db; }
.spane-top .view { display: flex; align-items: center; gap: 8px; }
.spane-top .view::before { content: ""; width: 18px; height: 16px; background: #fff; border: 1px solid #c33; box-shadow: inset 0 3px 0 #c33; }
.collapse-btn { width: 22px; height: 18px; background: #111; color: #fff; border: 0; font-size: 11px; line-height: 18px; padding: 0; }
.module.collapsed .spane > :not(.spane-top), .module.collapsed .spane-top .view { display: none; }
.sbtns { display: flex; gap: 14px; padding: 10px 10px 6px; }
.btn { height: 26px; min-width: 84px; padding: 0 12px; border: 1px solid #8c96a8; background: linear-gradient(#fcfcfd, #e3e6eb); color: #111; }
.btn:hover:not(:disabled) { background: linear-gradient(#eef4fc, #d3e1f3); border-color: #5f86bd; }
.btn:disabled { color: #999; }
.sfields { flex: 1; overflow: auto; padding: 4px 10px 12px; }
.sf { display: grid; grid-template-columns: 150px 1fr; align-items: end; min-height: 28px; margin-top: 6px; }
.sf label { color: #333; padding-bottom: 3px; }
.sf input, .sf select { width: 100%; height: 22px; border: 0; border-bottom: 1px solid #b5bac4; background: transparent; font: inherit; outline: none; }
.sf input:focus, .sf select:focus { background: #fffbe0; border-bottom-color: #5f86bd; }
.sf .req { color: var(--req); }
.adv { margin-top: auto; height: 60px; display: flex; align-items: center; justify-content: center; border-top: 4px solid #cfd3db; background: #eff1f4; }

.results { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rbar { display: flex; height: 38px; background: #f1f2f4; border-bottom: 1px solid #d3d6dc; }
.rbar button { display: flex; align-items: center; gap: 6px; border: 0; border-right: 1px solid #d3d6dc; background: none; padding: 0 14px; color: #111; }
.rbar button:disabled { color: #aaa; }
.rbar button:hover:not(:disabled) { background: #e2e9f4; }
.rbar .plus { width: 18px; height: 18px; border-radius: 50%; background: #2a9d46; color: #fff; font-weight: 700; line-height: 18px; text-align: center; font-size: 15px; }
.rhead { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px 6px; }
.rhead h3 { margin: 0; font-weight: 400; font-size: 17px; color: var(--blue); }
.rhead .count { font-size: 13px; }
/* "12 AI records hidden - Show": a filter never hides anything silently. */
.rhead .ai-hidden { margin-left: auto; padding-left: 14px; font-size: 12px; color: #7a5a00; }
html.dark .rhead .ai-hidden { color: #e0c070; }
.gridwrap { flex: 1; overflow: auto; margin: 0 10px 10px; border: 1px solid #c8cbd1; }
table.grid { border-collapse: collapse; width: max-content; min-width: 100%; }
.grid th { position: sticky; top: 0; background: #fff; font-weight: 400; text-align: left; padding: 4px 8px; border: 1px solid var(--grid-line);
  border-top: 0; white-space: nowrap; }
.grid td { padding: 2px 8px; border-right: 1px solid transparent; white-space: nowrap; height: 22px; }
.grid tbody tr:nth-child(even) { background: var(--grid-alt); }
.grid tbody tr:hover { background: #e3edf9; }
.grid tbody tr.sel { background: var(--select); color: #fff; }
.grid td.chk::before { content: "\2714"; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #2a9d46;
  color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.grid .empty td { color: var(--muted); font-style: italic; height: 40px; }
.hint { padding: 20px; color: var(--muted); }
.note { margin: 0 10px 8px; padding: 6px 10px; background: #fff8dc; border: 1px solid #e6d58a; font-size: 12.5px; }
.err { margin: 0 10px 8px; padding: 6px 10px; background: #fdecec; border: 1px solid #e5a3a3; color: #8d1b1b; font-size: 12.5px; }

/* person preview above results (Find People) */
.preview { display: grid; grid-template-columns: 130px 1.2fr 1fr 1fr 1fr; gap: 6px 16px; padding: 10px 12px; border-bottom: 1px solid #ddd; background: #fafafa; min-height: 150px; }

/* folders */
.folder { position: absolute; inset: 0; display: grid; grid-template-columns: 210px 1fr; background: #fff; }
.facts { background: #fff; padding: 36px 6px 6px; overflow: auto; border-right: 6px solid #d6d6d6; }
.facts button { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; margin-bottom: 7px; padding: 0 12px; text-align: left;
  border: 1px solid #c7c7c7; background: linear-gradient(#f3f3f3, #dadada); color: #222; }
.facts button:hover:not(:disabled) { background: linear-gradient(#f4f8fd, #d5e2f3); }
.facts button:disabled { color: #999; }
.facts .fi { width: 18px; height: 16px; border: 1px solid #7a8aa6; background: #dde6f3; }
.fbody { display: flex; flex-direction: column; min-width: 0; background: var(--tan); }
.fhead { display: flex; align-items: flex-end; gap: 20px; height: 36px; padding: 0 12px 0 34px; background: #fff; }
.ftab { position: relative; padding: 7px 24px 6px; background: var(--tan); border: 1px solid #cdbf9f; border-bottom: 0; border-radius: 10px 10px 0 0; }
.fhead .found { margin-left: auto; padding-bottom: 6px; }
.fhead .ci { padding: 2px 10px; margin-bottom: 5px; border: 1px solid #bbb; background: #f4f4f4; color: #aaa; }
.flist { flex: 1; overflow: auto; }
.frow { display: grid; grid-template-columns: 110px 1fr 1fr 1.4fr 130px; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--tan-line); cursor: default; }
.frow:hover { background: var(--tan-2); }
.frow.sel { background: var(--select); color: #fff; }
.frow .ft { font-weight: 700; align-self: center; }
.frow b { display: block; font-weight: 700; }
.frow .acts b { margin-bottom: 2px; }
.acts span { display: inline-flex; gap: 3px; }
.acts i { display: inline-block; width: 20px; height: 20px; border: 1px solid #8f8f8f; border-radius: 3px; background: linear-gradient(#fff, #dcdcdc);
  font-style: normal; font-size: 11px; line-height: 18px; text-align: center; color: #1b5a9e; cursor: pointer; }
.acts i:hover { border-color: #5f86bd; background: #e5eefa; }

/* master record header in a folder */
.master { display: grid; grid-template-columns: 150px 1.3fr 1.1fr 1.1fr 1.1fr; gap: 4px 14px; padding: 10px 10px 14px; border-bottom: 1px solid var(--tan-line); }
.master .mname { grid-column: 1 / -2; font-weight: 700; }
.master .macts { justify-self: end; }
.photo { grid-row: 2 / span 3; width: 98px; height: 132px; border: 4px solid #1e8a37; background: #d9d9d9 center/cover no-repeat; align-self: start; }
.photo.none { border: 2px dashed #555; background: transparent; }
.photo.hot { border-color: #e41b1b; }
.photo.warn { border-color: #e7c300; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 6px; align-content: start; }
.kv dt { font-weight: 700; }
.kv dd { margin: 0; }
.alerts { display: flex; flex-direction: column; gap: 6px; align-content: start; }
.alerts .ah { font-weight: 700; margin-bottom: 4px; }
.chip { display: inline-flex; align-items: center; gap: 8px; }
.chip b { display: inline-block; min-width: 30px; padding: 2px 5px; text-align: center; color: #fff; font-weight: 700; }
.chip.red b { background: #e41b1b; }
.chip.yellow b { background: #ffe800; color: #111; }
.chip.green b { background: #1e8a37; }
.chip.grey b { background: #787878; }
.chip.black b { background: #111; }
.chip.orange b { background: #f08a00; }
.alerts-btn { margin-top: 10px; width: 92px; height: 24px; border: 1px solid #9a9a9a; background: linear-gradient(#fff, #e0e0e0); }
.alerts-btn::before { content: "\26A0"; color: #d99a00; margin-right: 6px; }

/* documents (case report, warrant, citation) */
.document { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 250px; background: #fff; }
.document.solo { grid-template-columns: 1fr; }
.dmain { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #a9b1bf; }
.dtabs { display: flex; gap: 2px; padding: 6px 8px 0; background: #dfe3ea; border-bottom: 1px solid #a9b1bf; }
.dtabs button { padding: 5px 16px; border: 1px solid #a9b1bf; border-bottom: 0; background: #e9ecf1; }
.dtabs button.on { background: #fff; position: relative; top: 1px; }
.dbody { flex: 1; overflow: auto; padding: 8px 14px 20px; }
.dbody h4 { margin: 8px 0 8px; font-weight: 400; font-size: 17px; color: var(--blue); }
.dbody h5 { margin: 16px 0 6px 12px; font-weight: 400; font-size: 14.5px; color: var(--blue); }
.form2 { display: grid; grid-template-columns: repeat(3, max-content minmax(110px, 1fr)); gap: 10px 12px; align-items: end; }
.form2 label { white-space: nowrap; }
.form2 label.r::after { content: " *"; color: var(--req); }
.form2 .v { min-width: 110px; min-height: 20px; border-bottom: 1px solid #c6cad2; padding: 0 2px 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form2 .v.w2 { grid-column: span 3; }
.form2 .v.w5 { grid-column: span 5; white-space: normal; }
.dgrid { margin: 0 12px; border: 1px solid #b9bec8; max-width: 760px; }
.dgrid table { border-collapse: collapse; width: 100%; }
.dgrid th { font-weight: 400; background: #f3f4f6; border: 1px solid #d0d3d9; padding: 3px 8px; text-align: center; }
.dgrid td { border: 1px solid #e0e2e6; padding: 3px 8px; }
.dgrid td:first-child { width: 18px; color: #555; }
.notesbox { margin: 0 12px; min-height: 60px; max-width: 520px; border: 1px solid #b9bec8; padding: 6px; white-space: pre-wrap; }
.dstatus { display: flex; height: 26px; align-items: center; border-top: 1px solid #c6cad2; font-size: 12.5px; }
.dstatus span { padding: 0 10px; border-right: 1px solid #c6cad2; }
.dstatus span:first-child::before { content: "?"; display: inline-block; width: 14px; height: 14px; margin-right: 6px; border: 1px solid #777; border-radius: 2px; font-size: 10px; text-align: center; line-height: 12px; }
.waa { display: flex; flex-direction: column; background: #f3f4f6; }
.waa-tabs { display: flex; gap: 2px; padding: 6px 4px 0; }
.waa-tabs .cl { width: 22px; height: 22px; background: #111; color: #fff; border: 0; font-size: 11px; }
.waa-tabs button:not(.cl) { flex: 1; padding: 4px 6px; border: 1px solid #a9b1bf; border-bottom: 0; background: #e9ecf1; }
.waa-tabs button.on { background: #fff; }
.waa-list { flex: 1; margin: 0 4px 4px; background: #fff; border: 1px solid #a9b1bf; padding: 8px; overflow: auto; }
.waa-list div { padding: 3px 0 3px 22px; position: relative; }
.waa-list div::before { content: ""; position: absolute; left: 2px; top: 5px; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #777; background: #eee; }
.waa-list div.w::before { border-radius: 0; border: 0; background: none; content: "\25B2"; color: #d33; top: 2px; font-size: 13px; }

/* query */
.query { position: absolute; inset: 0; display: flex; flex-direction: column; background: #d6d6d6; }
.qtabs { display: flex; gap: 2px; padding: 4px 6px 0; background: linear-gradient(#5a6d8e, #aebbd0); }
.qtabs button { padding: 4px 18px; border: 0; background: #dcdcdc; color: #333; }
.qtabs button.on { background: #efefef; }
.qcrit { padding: 16px; display: grid; grid-template-columns: 170px 1fr; gap: 10px 12px; max-width: 620px; background: #efefef; }
.qcrit select, .qcrit input { height: 24px; border: 1px solid #aaa; font: inherit; padding: 0 4px; }
.qresp { flex: 1; display: grid; grid-template-rows: auto 170px auto 1fr; gap: 6px; padding: 8px 18px 12px; background: #d6d6d6; min-height: 0; }
.qresp .bar { display: flex; justify-content: flex-end; }
.qresp .bar button { background: #111; color: #fff; border: 1px solid #444; padding: 3px 12px; font-size: 14px; }
.qresp .bar button.on { background: #fff; color: #111; }
.qresp .list { overflow: auto; background: #fff; border: 1px solid #999; }
.qresp .list table { width: 100%; border-collapse: collapse; }
.qresp .list th { font-weight: 400; border: 1px solid #aaa; background: #ececec; padding: 1px 6px; }
.qresp .list td { padding: 1px 6px; white-space: nowrap; max-width: 520px; overflow: hidden; text-overflow: ellipsis; }
.qresp .list tr.sel td { background: var(--select); color: #fff; }
.qresp .out { overflow: auto; background: #fff; border: 1px solid #999; padding: 4px 6px; }
.qresp .out .krow { display: grid; grid-template-columns: 200px 1fr; font-size: 12px; font-family: "Segoe UI", Tahoma, sans-serif; padding: 1px 0; }
.qresp .out .krow span:last-child { word-break: break-word; }
.qresp .out pre { margin: 0; font: 12px Consolas, monospace; white-space: pre-wrap; }
.link { color: #1a3f9a; text-decoration: underline; cursor: pointer; }
.frow.sel .link, .grid tr.sel .link { color: #fff; }

/* menus */
.menu { max-width: calc(calc(100 * var(--vw, 1vw)) - 4px); max-height: calc(calc(100 * var(--vh, 1vh)) - 4px); overflow-y: auto; position: absolute; z-index: 20; min-width: 190px; background: #fff; border: 1px solid #8f98a8; box-shadow: 2px 2px 6px rgba(0,0,0,.25); padding: 2px 0; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 5px 18px; }
.menu button:hover:not(:disabled) { background: #cfdcf0; }
.menu button:disabled { color: #999; }
.menu hr { border: 0; border-top: 1px solid #ddd; margin: 2px 0; }
.signin { padding: 40px; text-align: center; color: #333; }

/* --- dark mode: the CAD's Utilities > Dark Mode (html.dark), the same palette as the CAD and the phone --- */
html.dark { color-scheme: dark;
  --tab: #3a414c; --tab-text: #e4e6e9; --pane: #23272e; --pane-line: #3c4148; --blue: #5aa7e6; --select: #2f5f9e;
  --grid-line: #3c4148; --grid-alt: #22262c; --tan: #2c2821; --tan-2: #36302a; --tan-line: #4d4536; --text: #e4e6e9;
  --muted: #9aa1a9; --req: #ff6b6b; --ok: #5fd07a; --bg: #1b1e23; }
html.dark body { background: var(--bg); }
html.dark .titlebar { background: #15171a; border-bottom-color: #2b2f35; }
html.dark .menubar { background: #1f2227; }
html.dark .menus { background: #2a2e34; }
html.dark .mb { color: var(--text); }
html.dark .mb:hover, html.dark .mb.open { background: #3a4452; }
html.dark .gsearch input, html.dark .qcrit select, html.dark .qcrit input { background: #15171a; color: var(--text); border-color: #4a5058; }
html.dark .gs-go, html.dark .gs-adv, html.dark .btn, html.dark .alerts-btn, html.dark .facts button, html.dark .acts i, html.dark .dtabs button,
html.dark .waa-tabs button:not(.cl) { background: linear-gradient(#3a3f46, #2e3238); border-color: #555b63; color: var(--text); }
html.dark .gs-go:hover, html.dark .gs-adv:hover, html.dark .btn:hover:not(:disabled), html.dark .facts button:hover:not(:disabled), html.dark .acts i:hover { background: #3a4a60; border-color: #6a8bb8; }
html.dark .btn:disabled, html.dark .facts button:disabled { color: #6c727a; }
html.dark .facts .fi { background: #2d3a4c; border-color: #56647a; }
html.dark .toolbar { background: linear-gradient(#262d3a, #171c25); border-top-color: #0b0e14; }
html.dark .tabstrip { background: #20262f; }
html.dark .tab { border-color: #4a5260; }
html.dark .tab.on { background: var(--bg); }
html.dark .tab .x { color: #aab0b8; }
html.dark .tab-add { background: #333b48; border-color: #4a5260; }
html.dark .doc { background: var(--bg); border-color: #4a5260; }
html.dark .statusbar { background: #15171a; border-top-color: #2b2f35; }
html.dark .sb-count { background: #2a2e34; border-color: #444a52; }
html.dark .sb-cts { background: #1f3a26; }
html.dark .sb-cts.bad { background: #472325; }
html.dark .lobby-top label { color: var(--muted); }
html.dark .lobby-top input { background: transparent; color: var(--text); border-bottom-color: #5aa7e6; }
html.dark .lobby-top button { color: #7fb6e8; }
html.dark .l-items a { color: var(--text); }
html.dark .l-items a.off { color: #666; }
html.dark .l-sec { border-top-color: #5a6b86; box-shadow: 0 1px 3px rgba(0,0,0,.6); background: #20242a; }
html.dark .l-sec h2 { color: var(--text); }
html.dark .ic-ops { background: repeating-linear-gradient(#20242a 0 5px, #3b8ed0 5px 7px); }
html.dark .spane-top, html.dark .adv { border-color: #333941; }
html.dark .adv { background: #1f2328; }
html.dark .sf label { color: #c7ccd3; }
html.dark .sf input, html.dark .sf select { color: var(--text); border-bottom-color: #555c66; }
html.dark .sf input:focus, html.dark .sf select:focus { background: #33301f; }
html.dark .sf select option { background: #23272e; }
html.dark .rbar { background: #22262c; border-bottom-color: #3c4148; }
html.dark .rbar button { color: var(--text); border-right-color: #3c4148; }
html.dark .rbar button:disabled { color: #666c74; }
html.dark .rbar button:hover:not(:disabled) { background: #2d3a4c; }
html.dark .gridwrap { border-color: #3c4148; }
html.dark .grid th { background: #262a31; color: var(--text); }
html.dark .grid tbody tr:hover { background: #2b3747; }
html.dark .grid tbody tr.sel { color: #fff; }
html.dark .note { background: #3a3520; border-color: #6b5e2a; color: #eee3b4; }
html.dark .err { background: #3d2224; border-color: #7a3a3e; color: #ffb4b4; }
html.dark .preview { background: #20242a; border-bottom-color: #3c4148; }
html.dark .folder, html.dark .facts { background: var(--bg); }
html.dark .facts { border-right-color: #2d3137; }
html.dark .fhead { background: var(--bg); }
html.dark .ftab { border-color: #5b523f; }
html.dark .fhead .ci { background: #2a2e34; border-color: #444a52; color: #6c727a; }
html.dark .photo.none { border-color: #8b8f96; }
html.dark .photo.none.hot { border-color: #e41b1b; }
html.dark .photo.none.warn { border-color: #e7c300; }
html.dark .document, html.dark .dbody { background: var(--bg); }
html.dark .dmain { border-right-color: #3c4148; }
html.dark .dtabs { background: #23272e; border-bottom-color: #3c4148; }
html.dark .dtabs button.on { background: var(--bg); }
html.dark .form2 .v { border-bottom-color: #4a5058; }
html.dark .dgrid, html.dark .notesbox { border-color: #4a5058; }
html.dark .dgrid th { background: #262a31; border-color: #3c4148; }
html.dark .dgrid td { border-color: #33383f; }
html.dark .dstatus { border-top-color: #3c4148; }
html.dark .dstatus span { border-right-color: #3c4148; }
html.dark .waa { background: #20242a; }
html.dark .waa-tabs button.on { background: var(--bg); }
html.dark .waa-list { background: var(--bg); border-color: #3c4148; }
html.dark .waa-list div::before { background: #33383f; border-color: #6c727a; }
html.dark .query, html.dark .qresp { background: #2a2e34; }
html.dark .qtabs { background: linear-gradient(#2c3a52, #46546b); }
html.dark .qtabs button { background: #3a3f46; color: #c7ccd3; }
html.dark .qtabs button.on { background: #23272e; color: var(--text); }
html.dark .qcrit { background: #23272e; }
html.dark .qresp .list, html.dark .qresp .out { background: var(--bg); border-color: #4a5058; }
html.dark .qresp .list th { background: #262a31; border-color: #4a5058; }
html.dark .qresp .bar button { border-color: #555b63; }
html.dark .qresp .bar button.on { background: #e4e6e9; color: #111; }
html.dark .link { color: #7fb6e8; }
html.dark .menu { background: #23272e; border-color: #4a5058; box-shadow: 2px 2px 8px rgba(0,0,0,.6); }
html.dark .menu button { color: var(--text); }
html.dark .menu button:hover:not(:disabled) { background: #2f5f9e; }
html.dark .menu button:disabled { color: #666c74; }
html.dark .menu hr { border-top-color: #3c4148; }
html.dark .signin { color: var(--text); }

/* Formatted query response: the Query Header, then records as labelled lines or a results table */
.qhead { margin: 2px 0 8px; padding: 4px 10px 8px; border: 1px solid #c3c7cf; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; font-size: 12.5px; }
.qhead legend { padding: 0 4px; color: #333; }
.qh { display: grid; grid-template-columns: 80px 1fr; }
.qh b { font-weight: 400; color: #555; }
.qh span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec { margin: 0 0 10px; }
.rec-h { font-weight: 600; margin: 6px 0 4px; color: #1e5f9a; }
.qresp .out .krow { grid-template-columns: 170px 1fr; font-size: 13px; padding: 2px 0; border-bottom: 1px dotted #e1e3e7; }
.qresp .out .krow span:first-child { color: #444; }
.hothit { margin: 4px 0 8px; padding: 5px 10px; background: #fde8e8; border: 1px solid #e38b8b; color: #9b1111; font-weight: 600; }
.hothit::before { content: "B2  "; color: #d11; }
table.rtable { border-collapse: collapse; width: 100%; font-size: 13px; }
.rtable th { text-align: left; font-weight: 400; background: #f1f2f4; border: 1px solid #d4d6db; padding: 3px 8px; }
.rtable td { border-bottom: 1px solid #e6e7ea; padding: 3px 8px; }
.rtable tr:nth-child(even) td { background: var(--grid-alt); }
.chips { display: inline-flex; gap: 3px; }
.chips .chip b { min-width: 26px; padding: 1px 4px; font-size: 11px; }
html.dark .qhead { border-color: #4a5058; }
html.dark .qhead legend, html.dark .qh b, html.dark .qresp .out .krow span:first-child { color: #aab0b8; }
html.dark .rec-h { color: #7fb6e8; }
html.dark .qresp .out .krow { border-bottom-color: #30353c; }
html.dark .hothit { background: #45201f; border-color: #8b3a3a; color: #ffb4b4; }
html.dark .rtable th { background: #262a31; border-color: #3c4148; }
html.dark .rtable td { border-bottom-color: #30353c; }