* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 13px/1.4 "Segoe UI", system-ui, sans-serif;
  background: #f4f5f7;
  color: #1c2733;
}
#root { height: 100%; }
button {
  font: inherit; cursor: pointer; border: 1px solid #c6ccd4; border-radius: 4px;
  background: #fff; padding: 4px 10px; color: inherit;
}
button:hover { background: #eef1f5; }
input, select { font: inherit; padding: 4px 6px; border: 1px solid #c6ccd4; border-radius: 4px; }

/* ---------- layout ---------- */
.app { display: flex; flex-direction: column; height: 100vh; }
.toolbar {
  display: flex; align-items: center; gap: 14px; padding: 6px 12px;
  background: #1e2a38; color: #eef2f7; flex-wrap: wrap;
}
.toolbar button { background: #2c3d50; border-color: #45566b; color: #eef2f7; }
.toolbar button:hover { background: #3a4e65; }
.brand { font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.nav { display: flex; align-items: center; gap: 6px; }
.range { margin-left: 8px; font-weight: 600; }
.cycle-no { opacity: .65; font-weight: 400; }
.actions { display: flex; gap: 6px; }
.status { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.me { opacity: .8; }
.ws-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #888; }
.ws-dot.live { background: #4ad06a; }
.ws-dot.offline { background: #e05252; }
.ws-dot.connecting { background: #d6b52a; }
.editor-pill {
  background: #3a4e65; border-radius: 10px; padding: 1px 8px; margin-left: 4px; font-size: 12px;
}

.main { display: flex; flex: 1; overflow: hidden; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 210px; min-width: 210px; overflow-y: auto; background: #fff;
  border-right: 1px solid #d8dde3; padding: 10px;
}
.side-title { font-weight: 700; margin: 8px 0 6px; text-transform: uppercase; font-size: 11px; color: #5a6a7a; }
.role-label { font-size: 11px; color: #8a97a5; margin: 6px 0 2px; text-transform: capitalize; }
.person {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  border: none; background: none; padding: 3px 4px; border-radius: 4px;
}
.person:hover { background: #e8eef5; }
.person .dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.pay-classes { display: flex; flex-direction: column; gap: 3px; }
.pay-classes label { cursor: pointer; }
.hints { margin-top: 14px; font-size: 11px; color: #7a8794; }
.sw { display: inline-block; width: 10px; height: 10px; margin: 0 3px; border-radius: 2px; vertical-align: -1px; }
.sw.red { background: #f6c8c8; border: 1px solid #d33; }
.sw.yellow { background: #f7e9b0; border: 1px solid #c9a227; }

/* ---------- template mode bar ---------- */
.tpl-bar {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px; flex-wrap: wrap;
  background: #fff7e0; border-bottom: 1px solid #e4d9ae;
}
.tpl-sep { flex: none; width: 1px; height: 20px; background: #d8cba0; }
button.primary { background: #1a6fd4; border-color: #1a6fd4; color: #fff; }
button.primary:hover { background: #1558ab; }

/* ---------- template mirror ---------- */
.grid-col { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.mirror { display: flex; flex-direction: column; border-top: 3px solid #2c3d50; max-height: 45%; flex: none; }
.mirror-bar {
  display: flex; align-items: center; gap: 10px; padding: 4px 10px;
  background: #e8edf3; border-bottom: 1px solid #d0d7de; flex: none;
  flex-wrap: nowrap; overflow-x: auto;
}
.mirror-bar button, .mirror-bar .fine, .mirror-toggle { white-space: nowrap; flex: none; }
.mirror-toggle { border: none; background: none; font-weight: 700; padding: 2px 4px; }
.mirror .grid-wrap { opacity: .92; }

/* ---------- grid ---------- */
.grid-wrap { flex: 1; overflow: auto; }
.grid { border-collapse: separate; border-spacing: 0; user-select: none; }
.grid th, .grid td { border-right: 1px solid #e2e6ea; border-bottom: 1px solid #e2e6ea; }
.grid thead th {
  position: sticky; top: 0; z-index: 3; background: #eef1f5; padding: 2px 4px;
  font-size: 11px; min-width: var(--cellw, 58px);
}
.grid thead th.corner { z-index: 4; }
.dh-dow { color: #7a8794; }
.dh-date { font-weight: 700; }
.day-head.weekend { background: #e3e7ec; }
.day-head.today .dh-date { color: #1a6fd4; }
.week-start { border-left: 2px solid #9aa7b4 !important; }
.row-label {
  position: sticky; left: 0; z-index: 2; background: #f8fafc; text-align: left;
  padding: 2px 8px; font-weight: 600; font-size: 12px; white-space: nowrap; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis;
}
.row-label.sub { font-weight: 400; }
.ampm-tag {
  font-size: 10px; background: #dfe6ee; border-radius: 3px; padding: 0 4px; margin-left: 6px;
  color: #55677a;
}
.group-row th, .group-row td { background: #2c3d50 !important; color: #dfe8f2; font-size: 11px; padding: 1px 8px; border-color: #2c3d50; }
.divider-row th, .divider-row td { background: #dde3ea !important; height: 6px; padding: 0; border-color: #dde3ea; }
.divider-row.thin th, .divider-row.thin td { height: 2px; background: #e8ecf1 !important; border-color: #e8ecf1; }
.clickable { cursor: pointer; }
.clickable:hover { background: #e2e9f2 !important; }
/* template-apply "kept but differs" flag */
.cell.tpl-diff { background: #ffe9a8 !important; box-shadow: inset 0 0 0 2px #e0a800; }
.section-row th, .section-row td { background: #e9eef4 !important; color: #40566e; font-size: 11px; font-weight: 700; padding: 1px 8px; letter-spacing: .4px; border-color: #e9eef4; }
/* Custom text sits alongside any rostered people and wraps rather than clips */
.cell-text {
  display: block; font-size: 9.5px; font-style: italic; color: #7a6a3a;
  white-space: normal; word-break: break-word; max-width: 160px;
}
.cell.closed .chip { opacity: .55; filter: saturate(.6); }
.mode-tag {
  background: #4a90d9; color: #fff; font-size: 10px; font-weight: 700; border-radius: 3px;
  padding: 1px 6px; margin-left: 8px; vertical-align: 2px; letter-spacing: .5px; text-transform: uppercase;
}
.ctx-menu {
  position: fixed; z-index: 200; background: #fff; border: 1px solid #b9c2cc; border-radius: 6px;
  box-shadow: 0 6px 24px rgba(10,20,30,.25); padding: 4px; min-width: 210px;
}
.ctx-title { font-size: 10px; font-weight: 700; color: #7a8794; text-transform: uppercase; padding: 4px 8px 2px; }
.ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; padding: 5px 8px; border-radius: 4px; font-size: 12.5px;
}
.ctx-item:hover { background: #e8eef5; }
.ctx-item.current { font-weight: 700; }
.ctx-badge {
  display: inline-block; min-width: 26px; text-align: center; background: #eef1f5;
  border: 1px solid #d5dbe2; border-radius: 3px; font-size: 10px; font-weight: 700; padding: 0 2px;
}
/* --cellw is a MINIMUM: like a spreadsheet, a column widens to fit its
   content so chips and their modifiers are never cut off. */
.cell {
  min-width: var(--cellw, 58px);
  height: 26px; padding: 1px 2px; background: #fff; vertical-align: middle;
  cursor: cell; position: relative; white-space: nowrap;
}
.cell.closed {
  background: repeating-linear-gradient(45deg, #d4d8dd, #d4d8dd 5px, #c3c8ce 5px, #c3c8ce 10px) !important;
  cursor: default;
}
.closed-tag { font-size: 9px; color: #6b7580; font-style: italic; }
.cell.cell-hl { box-shadow: inset 0 0 0 2px #1a6fd4; }
.cell.weekend { background: #f3f5f8; }
/* status shading (default Excel/Zoho fill colours) */
.cell.shade-final { background: #d9ead3; }   /* light green - final roster */
.cell.shade-draft { background: #fff2cc; }   /* light yellow - draft */
.cell.inactive { background: repeating-linear-gradient(45deg, #eceef1, #eceef1 4px, #f5f6f8 4px, #f5f6f8 8px); cursor: default; }
.cell.today { box-shadow: inset 0 0 0 1px #9ec7f0; }
.cell.selected { background: #d7e7fa; }
.cell.focus { outline: 2px solid #1a6fd4; outline-offset: -2px; }
.cell.fill-preview { outline: 2px dashed #1a6fd4; outline-offset: -2px; background: #e8f1fc; }
.cell.issue-red { background: #f6c8c8 !important; box-shadow: inset 0 0 0 1px #d33; }
.cell.issue-yellow { background: #f7e9b0 !important; box-shadow: inset 0 0 0 1px #c9a227; }
.cell.issue-blue { background: #cfe2f3 !important; box-shadow: inset 0 0 0 1px #4a86c8; }
.cell.issue-red.selected, .cell.issue-yellow.selected, .cell.issue-blue.selected { filter: brightness(.92); }
/* Zoho/Excel look: names are plain cell text, centered, no coloured boxes.
   Doubled-up doctors stack as extra lines; modifiers stay on the name's line. */
.cell { text-align: center; }
.chip {
  display: block; width: auto; min-width: 0; color: #1c2733; font-weight: 600; font-size: 12px;
  padding: 0 3px; margin: 0; position: relative; background: none; cursor: cell;
}
.chip-line { display: flex; align-items: baseline; white-space: nowrap; justify-content: center; }
.chip-name { white-space: nowrap; }
.chip-mobile { display: block; font-weight: 400; font-size: 9px; color: #55677a; white-space: nowrap; }
.chip.dim { opacity: .22; }
.chip.hl { color: #1a6fd4; font-weight: 800; }
/* the modifier badge never gets clipped — it rides along with the name */
.pc-badge { flex: none; font-size: 9px; font-weight: 800; margin-left: 2px; color: #7a4a10; }
.chip-x {
  display: none; border: none; background: rgba(0,0,0,.25); color: #fff; border-radius: 2px;
  font-size: 9px; line-height: 1; padding: 1px 2px; margin-left: 3px;
}
.chip:hover .chip-x { display: inline-block; }
.fill-handle {
  position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;
  background: #1a6fd4; border: 1px solid #fff; cursor: crosshair; z-index: 2;
}
.presence-tag {
  position: absolute; top: -14px; left: 0; background: #7a5cd6; color: #fff;
  font-size: 9px; padding: 0 4px; border-radius: 2px; z-index: 5; pointer-events: none;
}
.cell.presence { outline: 2px solid #7a5cd6; outline-offset: -2px; }

/* ---------- notes rows ---------- */
.note-row .note-label { font-style: italic; color: #55677a; }
.note-cell {
  min-width: var(--cellw, 58px); height: 20px;
  background: #fbf8ec; font-size: 10px; padding: 1px 3px;
  white-space: normal; word-break: break-word; color: #6a5a1a; vertical-align: top;
}
.note-cell.editable { cursor: text; }
.note-cell.editable:hover { background: #f4edd2; }
.note-cell.has-note { font-weight: 600; }

/* ---------- ribbon (Excel-style, replaces the left bar) ---------- */
.ribbon {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  background: #f7f9fb; border-bottom: 1px solid #cfd6dd; padding: 4px 8px 5px;
}
.rgroup {
  display: flex; flex-direction: column; gap: 3px; padding: 0 12px 0 8px;
  border-right: 1px solid #e2e6ea;
}
.rgroup:last-child { border-right: none; }
.rgroup-title { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: #8a97a5; }
.rpeople { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; max-width: 560px; }
.rperson {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
  padding: 2px 8px; border: 1px solid #d5dbe2; border-radius: 3px; background: #fff;
  cursor: grab; color: #1c2733;
}
.rperson:hover { background: #e8eef5; }
.rperson:active { cursor: grabbing; }
.rsep { width: 1px; align-self: stretch; background: #d5dbe2; margin: 0 3px; }
.rstack { display: flex; flex-direction: column; gap: 3px; }
.rstack button { font-size: 11px; padding: 2px 8px; text-align: left; }
.rhint { font-size: 9.5px; color: #8a97a5; line-height: 1.35; max-width: 250px; }
.rhelp { max-width: 270px; }
.shade-btn { border: 1px solid #c6ccd4; }
.sb-final { background: #d9ead3; }
.sb-final:hover { background: #c9e0bf; }
.sb-draft { background: #fff2cc; }
.sb-draft:hover { background: #f5e6ac; }
.oncall-side { width: 200px; min-width: 200px; }

/* ---------- toolbar extras / sidebar extras ---------- */
.view-controls { display: flex; align-items: center; gap: 5px; }
.ctl-label { font-size: 10px; text-transform: uppercase; opacity: .6; letter-spacing: .5px; margin-left: 4px; }
.view-controls select, .view-controls button { font-size: 12px; }
.toolbar select { background: #2c3d50; border: 1px solid #45566b; color: #eef2f7; border-radius: 4px; padding: 3px 4px; }
.person-row { display: flex; align-items: center; }
.person-row .person { flex: 1; }
.info-btn { border: none; background: none; color: #8a97a5; padding: 2px 4px; font-size: 12px; }
.info-btn:hover { color: #1a6fd4; background: none; }
.wide-btn { width: 100%; }
.remove-btn { margin-bottom: 8px; border-color: #d9a0a0; color: #a33; }
.remove-btn:hover { background: #f8e8e8; }

/* ---------- modals: admin, contact, export ---------- */
.modal.xwide { width: 1060px; }
.modal.narrow { width: 400px; }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.tab { border: 1px solid #c6ccd4; background: #f3f5f8; padding: 4px 14px; border-radius: 4px 4px 0 0; }
.tab.active { background: #1e2a38; color: #fff; border-color: #1e2a38; }
.seg { display: inline-flex; gap: 2px; margin-right: 8px; }
.admin-table { border-collapse: collapse; width: 100%; }
.admin-table th, .admin-table td { border: 1px solid #dfe3e8; padding: 3px 5px; text-align: left; font-size: 12px; }
.admin-table input:not([type=checkbox]):not([type=color]), .admin-table select { width: 100%; box-sizing: border-box; font-size: 12px; padding: 2px 4px; }
.admin-table .row-actions { white-space: nowrap; }
.admin-table .row-actions button { font-size: 11px; padding: 2px 6px; margin-right: 3px; }
.inactive-row { opacity: .45; }
.retired-tag { font-size: 10px; color: #a33; font-style: italic; margin-right: 4px; }
.daymask { white-space: nowrap; font-size: 10px; }
.daymask label { margin-right: 2px; }
.daymask input { vertical-align: middle; margin: 0; }
.add-row-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.import-errors { font-size: 11px; color: #c22; max-height: 140px; overflow-y: auto; }
.contact-head { display: flex; align-items: center; gap: 10px; }
.contact-head h2 { margin: 0; }
.dot.big { width: 18px; height: 18px; border-radius: 4px; display: inline-block; }
.contact-rows { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.contact-rows b { display: inline-block; width: 60px; }
.choice-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.export-grid { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.export-grid .btn { text-align: center; padding: 8px; }
.export-form { display: flex; flex-direction: column; gap: 8px; }
.export-form label { display: flex; align-items: center; gap: 8px; }
.export-form input[type=date] { font: inherit; }
.btn.primary, button.primary { background: #1a6fd4; color: #fff; border-color: #1a6fd4; }
.btn.primary:hover, button.primary:hover { background: #1558a8; }
.history-table td { vertical-align: top; }

/* ---------- on-call planner (transposed) ---------- */
.oncall-grid .date-label { min-width: 108px; font-weight: 400; }
.oncall-grid .oncall-col-head { min-width: var(--cellw, 58px); }
.weekend-row .cell { background: #f3f5f8; }
.weekend-row .row-label { background: #eef1f5; }
.week-start-row .cell, .week-start-row .row-label { border-top: 2px solid #9aa7b4; }
.month-start-row .cell, .month-start-row .row-label { border-top: 3px solid #2c3d50; }
.today-row .row-label { color: #1a6fd4; font-weight: 700; }

.stats-box { margin-bottom: 12px; background: #f4f7fa; border: 1px solid #dde3ea; border-radius: 6px; padding: 6px 8px; }
.stats-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.stats-table th { text-align: right; font-size: 10px; color: #7a8794; padding: 2px 4px; }
.stats-table td { padding: 1px 4px; text-align: right; border-top: 1px solid #e6ebf0; }
.stats-table td:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.stats-table .dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; vertical-align: -1px; }

/* ---------- login / misc ---------- */
.center-page { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-box {
  background: #fff; border: 1px solid #d8dde3; border-radius: 8px; padding: 28px 32px;
  display: flex; flex-direction: column; gap: 10px; width: 300px;
}
.login-box h1 { margin: 0; font-size: 20px; }
.login-box p { margin: 0; color: #7a8794; }
.err { color: #c22; }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #1e2a38; color: #fff; padding: 8px 16px; border-radius: 6px; z-index: 100;
}

/* ---------- modals ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 20, 30, .45); z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: #fff; border-radius: 8px; padding: 20px 24px; max-height: 85vh; overflow-y: auto;
  width: 560px; max-width: 95vw;
}
.modal.wide { width: 860px; }
.modal h2 { margin-top: 0; }
.modal-actions { margin-top: 16px; text-align: right; }
.fine { font-size: 11px; color: #7a8794; }
.report-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.btn {
  border: 1px solid #c6ccd4; border-radius: 4px; padding: 4px 10px; text-decoration: none; color: inherit;
}
.report-table, .tpl-table { border-collapse: collapse; width: 100%; }
.report-table th, .report-table td, .tpl-table th, .tpl-table td {
  border: 1px solid #dfe3e8; padding: 4px 8px; text-align: left;
}
.report-table th { background: #eef1f5; }
.smi-col { background: #f4eef8; }
.tpl-table td.inactive { background: #eceef1; }
.tpl-table select { width: 100%; min-width: 54px; }
.link-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.link-row b { width: 110px; flex: none; font-size: 12px; }
.link-row input { flex: 1; font-size: 11px; color: #55677a; }
.ics-list { max-height: 240px; overflow-y: auto; }

/* ---------- stacked Excel-style header (year / month / date / day) ---------- */
.grid thead tr.h-year th, .grid thead tr.h-week th { top: 0; height: 18px; padding: 0 4px; line-height: 17px; }
.grid thead tr.h-month th { top: 18px; height: 18px; padding: 0 4px; line-height: 17px; }
.grid thead tr.h-date th { top: 36px; height: 19px; padding: 0 4px; line-height: 18px; }
.grid thead tr.h-dow th { top: 55px; height: 18px; padding: 0 4px; line-height: 17px; }
.grid thead tr.h-dow2 th { top: 18px; }
.grid thead th.corner { vertical-align: bottom; }
.span-head { text-align: left; font-weight: 700; white-space: nowrap; }
/* keep the year/month caption in view while scrolling across its span */
.span-cap { position: sticky; left: 165px; display: inline-block; padding: 0 6px; }
.h-year .span-head { background: #e3e8ee; font-size: 11px; letter-spacing: .5px; }
.h-month .span-head { background: #e9edf2; font-size: 11px; }
.h-week .span-head { background: #e9edf2; font-size: 11px; }
.h-date .dh-date { font-weight: 700; font-size: 12px; }
.h-dow .dh-dow { color: #7a8794; font-size: 10px; }
.day-head.today { background: #e8f1fd; }
.wk-tag {
  display: inline-block; margin-left: 3px; padding: 0 3px; border-radius: 3px;
  background: #2c3d50; color: #fff; font-size: 8.5px; font-weight: 700; line-height: 13px;
  vertical-align: 1px;
}

/* ---------- leave requests ---------- */
.req-badge {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px;
  background: #d93025; color: #fff; font-size: 10px; font-weight: 700; line-height: 14px;
}
.toolbar button.active-btn { outline: 2px solid #4a90d9; }
.float-panel {
  position: fixed; z-index: 60; width: 560px; max-width: 96vw;
  background: #fff; border: 1px solid #b9c2cc; border-radius: 8px;
  box-shadow: 0 8px 30px rgba(20, 30, 45, .3);
  display: flex; flex-direction: column;
}
.float-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: #eef1f5; border-bottom: 1px solid #d5dbe2; border-radius: 8px 8px 0 0;
  cursor: move; user-select: none;
}
.float-head label { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.float-body { padding: 8px 12px; max-height: 46vh; overflow: auto; }
.req-table th, .req-table td { padding: 3px 6px; }
.req-table select { font-size: 11px; padding: 2px 3px; }
.req-approved select { background: #d9ead3; }
.req-declined select { background: #f4cccc; }
.req-self_cancelled select { background: #ececec; color: #777; }

/* ---------- small screens (view links on phones; rotate for landscape) ---------- */
@media (max-width: 700px) {
  body { font-size: 12px; }
  .toolbar { gap: 6px; padding: 4px 6px; }
  .brand { font-size: 13px; }
  .range, .ctl-label { display: none; }
  .toolbar button, .toolbar select { font-size: 11px; padding: 3px 6px; }
  .grid-wrap { -webkit-overflow-scrolling: touch; }
  .row-label { max-width: 96px; padding: 2px 4px; font-size: 11px; }
  .span-cap { left: 100px; }
  .oncall-grid .date-label { min-width: 84px; }
  .modal { padding: 14px 16px; width: auto; }
  .float-panel { width: 96vw; }
  .link-row input { min-width: 0; }
}

/* Account & passwords modal */
.toolbar button.me-btn { background: transparent; border-color: transparent; opacity: .85; text-decoration: underline dotted; }
.toolbar button.me-btn:hover { opacity: 1; background: #3a4e65; }
.account-section { border-top: 1px solid #e3e7ec; padding: 12px 0 4px; }
.account-section h3 { margin: 0 0 4px; font-size: 14px; }
.account-section .muted { margin: 0 0 8px; color: #7a8794; font-size: 12px; }
.account-field { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.account-field input { width: 100%; box-sizing: border-box; }
.account-section .ok { color: #1f8a4c; font-size: 13px; margin: 6px 0; }
.account-section .err { color: #c0392b; font-size: 13px; margin: 6px 0; }

/* ---------- keyboard entry: type-ahead / F2 status popup ---------- */
.typeahead { position: fixed; z-index: 60; width: 230px; background: #fff; border: 1px solid #9aa7b5; border-radius: 6px;
  box-shadow: 0 6px 22px rgba(20, 30, 45, .28); font-size: 12px; overflow: hidden; }
.typeahead-head { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #1e2a38; color: #fff; }
.typeahead-title { opacity: .75; font-size: 11px; }
.typeahead-buf { font-weight: 600; letter-spacing: .3px; }
.typeahead-caret { display: inline-block; width: 1px; height: 12px; background: #fff; margin-left: 1px; vertical-align: -2px; animation: ta-blink 1s steps(1) infinite; }
@keyframes ta-blink { 50% { opacity: 0; } }
.typeahead-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.typeahead-item.active { background: #dcebfb; }
.typeahead-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.typeahead-main { font-weight: 600; min-width: 34px; }
.typeahead-sub { color: #5d6b7a; overflow: hidden; text-overflow: ellipsis; }
.typeahead-hint { padding: 4px 8px; border-top: 1px solid #e3e7ec; color: #7a8794; font-size: 10.5px; }

/* pinch-to-zoom on the grid is handled by the app (cell width), so the browser
   must not also page-zoom while two fingers are on it */
.grid-wrap { touch-action: pan-x pan-y; }