/* The console's one stylesheet. Fixed heights everywhere a control can appear or disappear, so the
   list never moves under the mouse: badges reserve their width, the notice lives inside the bar,
   drawers and composers overlay instead of pushing. */
:root {
  --green: #076342;
  --green-dark: #074733;
  --ink: #172b3a;
  --muted: #64748b;
  --border: #dce3e8;
  --bg: #f7f9fa;
  --amber: #fff4d8;
  --red: #c4302b;
  --shadow: 0 8px 30px #17384819;
  --top: 56px;
  --tabs: 190px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { border: 1px solid var(--border); border-radius: 7px; background: white; color: var(--ink); padding: 8px 13px; white-space: nowrap; }
button:hover { background: #edf4f0; border-color: #adc8ba; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, [contenteditable]:focus-visible { outline: 3px solid #72b79b; outline-offset: 2px; }
input, select { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; background: white; color: var(--ink); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); width: 16px; height: 16px; padding: 0; flex-shrink: 0; margin: 0; }
a { color: var(--green); }
.primary { background: var(--green); border-color: var(--green); color: white; font-weight: 600; }
.primary:hover { background: var(--green-dark); color: white; }
.muted { color: var(--muted); font-size: 12px; }
.small { font-size: 12px; padding: 5px 10px; }
.text-button { background: none; border-color: transparent; color: var(--green); padding: 5px 8px; }
.text-button:hover { background: #edf4f0; }
.icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; position: relative; }
.dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
[hidden] { display: none !important; }

/* Top bar */
.top { height: var(--top); display: flex; align-items: center; gap: 18px; padding: 0 18px; background: white; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: baseline; gap: 8px; width: var(--tabs); flex-shrink: 0; }
.brand strong { font-size: 19px; letter-spacing: -0.6px; color: var(--green-dark); }
.brand span { color: var(--muted); font-size: 12px; }
.search { display: flex; gap: 8px; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; flex: 1; max-width: 620px; padding: 0 14px; height: 38px; min-width: 120px; }
.search span { font-size: 20px; color: var(--muted); }
.search input { width: 100%; border: none; background: none; outline: none; padding: 6px 0; }
.safety { margin-left: auto; padding: 6px 12px; border: 1px solid #ead096; background: var(--amber); border-radius: 7px; color: #754509; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.safety.live { background: #eef5f0; border-color: #bbd7c6; color: var(--green-dark); }
.safety.demo { background: #eef2ff; border-color: #c3cdf5; color: #2e3f8f; }

/* The app: tabs on the left, main beside them, both scroll on their own */
.app { display: grid; grid-template-columns: var(--tabs) 1fr; height: calc(100vh - var(--top)); }
main { display: flex; flex-direction: column; min-width: 0; padding: 0 18px; overflow: hidden; }
.tabs { border-right: 1px solid var(--border); background: #f1f5f3; padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.compose { width: 100%; padding: 11px 14px; text-align: left; box-shadow: 0 3px 7px #063f3317; margin-bottom: 10px; }
.tab { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; border-radius: 8px; text-align: left; padding: 10px 10px; color: var(--ink); text-decoration: none; width: 100%; }
.tab:hover { background: #e6eee9; border-color: transparent; }
.tab.active { background: #dfece5; color: var(--green-dark); font-weight: 650; }
.tab-icon { width: 20px; text-align: center; font-size: 16px; flex-shrink: 0; }
.tab-label { flex: 1; }
.need { min-width: 22px; height: 18px; padding: 0 6px; border-radius: 10px; background: var(--red); color: white; font-size: 11px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.need:empty { visibility: hidden; }
.tabs-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }

/* The account: initials, login and role at the foot of the tabs; the menu is fixed to the
   viewport, placed above the button by the script, so the tabs column never scrolls sideways */
.account { position: relative; border-top: 1px solid #dbe5df; padding-top: 8px; }
.account-button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; background: none; text-align: left; color: var(--ink); }
.account-button:hover, .account-button[aria-expanded="true"] { background: #e6eee9; border-color: transparent; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--green-dark); color: white; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.account-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.account-name strong { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-role { font-size: 11px; color: var(--muted); }
.account-caret { color: var(--muted); display: inline-flex; flex-shrink: 0; }
.account-menu { position: fixed; z-index: 30; min-width: 220px; background: white; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; }
.account-head { padding: 8px 12px 10px; font-size: 12px; font-weight: 650; border-bottom: 1px solid var(--border); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-head .account-role { font-weight: 400; }
.account-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 13px; }
.account-item:hover { background: var(--bg); }
.logout-item { color: var(--red); }
.logout-item:hover { background: #fbeeed; }

/* The bar above the list */
.bar { height: 52px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* The day: one input, empty for every day, a cross beside it while one is set. */
.day[hidden] { display: none; }
.day { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 7px; background: white; padding: 0 4px 0 8px; height: 36px; }
.day input { border: 0; background: none; font: inherit; color: var(--ink); width: 130px; }
.day input:invalid { color: var(--muted); }
.day button { padding: 0 4px; color: var(--muted); }
.day[data-set="0"] button { visibility: hidden; }
.square { position: relative; display: inline-flex; border: 1px solid var(--border); border-radius: 7px; background: white; }
.square .icon { border: 0; width: 34px; }
/* The tick inside the square is a readout, never a target: a click on it toggled the box natively
   before the button's handler read it, so "select all" cleared the page instead. */
.square #pickAll { pointer-events: none; }
.square .caret { width: 22px; font-size: 12px; border-left: 1px solid var(--border); border-radius: 0 7px 7px 0; }
.menu { position: absolute; top: 40px; left: 0; z-index: 30; background: white; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; display: grid; min-width: 130px; }
.menu button { border: 0; text-align: left; background: none; padding: 8px 12px 8px 30px; border-radius: 6px; position: relative; }
/* The current entry carries a tick in a slot every entry reserves, so nothing moves when it appears */
.menu [role="menuitemradio"]::before { content: "✓"; position: absolute; left: 11px; top: 8px; color: var(--green); visibility: hidden; }
.menu [role="menuitemradio"][aria-checked="true"]::before { visibility: visible; }
/* An entry answers the pointer, or it reads as dead until clicked. Every menu in the console. */
.menu button:hover, .menu button:focus-visible { background: #edf4f0; color: var(--green-dark); }
.selection { display: flex; align-items: center; gap: 4px; font-size: 12px; padding: 0 6px; height: 36px; border-radius: 7px; background: #eef4f0; }
.bar-notice { flex: 1; min-width: 0; font-size: 12px; color: #754509; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.bar-notice:empty { visibility: hidden; }
.pager { display: flex; align-items: center; gap: 4px; font-size: 12px; margin-left: auto; }
.pager span { min-width: 110px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.chips { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; height: 34px; overflow: hidden; flex-shrink: 0; font-size: 12px; }
.chip { background: #e5efff; border: 0; border-radius: 20px; padding: 4px 10px; font-size: 12px; }
.chip span { margin-left: 8px; }

/* Filters popout, unchanged in substance from the old dashboard */
.filters { position: absolute; z-index: 30; left: calc(var(--tabs) + 18px); top: calc(var(--top) + 52px); width: min(860px, calc(100vw - var(--tabs) - 60px)); background: white; border: 1px solid #bdceca; border-radius: 9px; box-shadow: var(--shadow); padding: 17px; }
.filter-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.1fr; }
.filter-col { padding: 0 15px; border-right: 1px solid #edf0f1; }
.filter-col:first-child { padding-left: 0; }
.filter-col:last-child { border: 0; }
.filter-col h3 { margin: 0 0 12px; font-size: 12px; }
.filter-option { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; cursor: pointer; }
.filter-option small { margin-left: auto; color: var(--muted); }
.filter-footer { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 17px; }
.filter-footer .primary { margin-left: auto; }
.filter-footer label { font-size: 12px; }

/* The list */
.table-wrap { background: white; border: 1px solid var(--border); border-radius: 8px; overflow: auto; flex: 1; min-height: 0; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid #edf0f3; font-size: 13px; }
th { font-size: 11px; font-weight: 650; background: #fbfcfd; color: #536477; position: sticky; top: 0; z-index: 1; }
td small { display: block; color: var(--muted); font-size: 11px; }
td.pick, th.pick { width: 40px; padding-right: 0; }
tbody tr { cursor: pointer; height: 54px; }
tbody tr:hover { background: #f4f8f6; }
tbody tr.selected { background: #f0f6fd; }
tbody tr.unread strong { font-weight: 750; }
tbody tr.unread td { background: #fbfcfd; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; border-radius: 14px; padding: 3px 8px; background: #edf2f3; white-space: nowrap; }
.status.green { background: #e5f3e9; color: #256343; }
.status.amber { background: var(--amber); color: #754509; }
.status.red { background: #ffeded; color: var(--red); }
.status.grey { background: #edf2f3; color: var(--muted); }
.foot { height: 34px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; flex-shrink: 0; }
.empty { text-align: center; padding: 55px 20px; white-space: normal; color: var(--muted); }

/* The thread, in place of the list */
.thread { flex: 1; min-height: 0; overflow: auto; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 0 0 24px; }
.thread-head { position: sticky; top: 0; z-index: 2; background: white; border-bottom: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; gap: 10px; min-height: 62px; }
.thread-head h2 { font-size: 17px; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-head .who { font-size: 12px; color: var(--muted); font-weight: 400; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-actions { display: flex; gap: 6px; flex-shrink: 0; }
.turns { padding: 18px 16px; display: grid; gap: 14px; }
.turn { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; max-width: min(70%, 760px); background: white; text-align: left; font: inherit; color: inherit; }
.turn.ours { margin-left: auto; background: #f1f7f3; border-color: #cfe2d6; }
.turn.theirs { margin-right: auto; background: #f7f8fa; }
.turn.stale { opacity: 0.55; }
.turn.waiting { border-style: dashed; border-color: #adc8ba; background: #fbfdfb; }
.turn.opens { cursor: pointer; }
.turn.opens:hover { background: #e9f3ec; border-color: var(--green); }
.turn.next { border: 2px dashed #adc8ba; background: transparent; color: var(--green-dark); font-weight: 600; min-width: 260px; padding: 18px 20px; cursor: pointer; }
.turn.next:hover { background: #f1f7f3; border-color: var(--green); }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #cfe2d6; border-top-color: var(--green); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.turn-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.turn-meta strong { color: var(--ink); font-weight: 650; }
.turn-meta .status { margin-left: auto; }
.turn h3 { font-size: 13px; margin: 0 0 6px; }
.turn .body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.turn details { margin-top: 8px; font-size: 12px; }
.turn summary { cursor: pointer; color: var(--muted); }
.turn pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.turn .quoted { white-space: pre-wrap; color: var(--muted); border-left: 2px solid var(--border); padding-left: 10px; margin-top: 8px; }
.referral { margin: 0 16px; padding: 10px 14px; border: 1px solid #c3cdf5; background: #eef2ff; border-radius: 8px; font-size: 12px; display: flex; align-items: center; gap: 10px; max-width: 900px; }
.referral button { margin-left: auto; }

/* Organisation drawer */
.detail { position: fixed; top: var(--top); bottom: 0; right: 0; z-index: 45; width: 440px; background: white; box-shadow: var(--shadow); border-left: 1px solid var(--border); padding: 24px; overflow: auto; }
.close { position: absolute; right: 10px; top: 10px; font-size: 22px; border: 0; background: transparent; }
.detail h2 { padding-right: 25px; font-size: 19px; margin: 0 0 4px; }
.detail h3 { font-size: 12px; margin: 18px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.detail dl { display: grid; grid-template-columns: 80px 1fr; gap: 6px; font-size: 13px; }
.detail dd { margin: 0; overflow-wrap: anywhere; }
.detail dt { color: var(--muted); }
.detail .actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.contact { border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; margin: 8px 0; font-size: 13px; }
.contact small { color: var(--muted); }

/* Composers, docked bottom right, always the same size */
.dock { position: fixed; bottom: 0; right: 16px; left: calc(var(--tabs) + 30px); display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px; z-index: 40; pointer-events: none; }
.composer { pointer-events: auto; width: 460px; flex: 0 0 460px; height: 560px; max-height: calc(100vh - var(--top) - 8px); border: 1px solid #b6c9c1; border-bottom: 0; border-radius: 9px 9px 0 0; box-shadow: var(--shadow); background: white; display: flex; flex-direction: column; overflow: hidden; }
.composer.expanded { position: fixed; left: calc(var(--tabs) + 3vw); right: 6vw; top: calc(var(--top) + 3vh); bottom: 0; width: auto; flex: none; height: auto; max-height: none; }
.composer header { height: 42px; min-height: 42px; padding: 8px 12px; background: #f0f5f3; display: flex; align-items: center; gap: 7px; }
.composer header strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.composer header button { padding: 0 6px; border: 0; background: none; font-size: 16px; width: auto; height: auto; }
.saved { font-size: 10px; color: var(--muted); min-width: 92px; text-align: right; }
.saved.error { color: var(--red); }
.compose-fields { padding: 6px 13px 0; font-size: 12px; }
.compose-line { display: flex; align-items: center; gap: 8px; height: 32px; border-bottom: 1px solid #eff2f3; overflow: hidden; }
.compose-line label { width: 60px; white-space: nowrap; flex-shrink: 0; color: var(--muted); }
.compose-line input { border: 0; padding: 4px 0; min-width: 0; flex: 1; font-size: 12px; }
.compose-line select { font-size: 11px; padding: 3px 6px; min-width: 0; max-width: 170px; flex: 1; }
.compose-line .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor { padding: 10px 16px; flex: 1; min-height: 80px; overflow: auto; outline: none; font-size: 13px; overflow-wrap: anywhere; }
.editor p { margin: 0 0 12px; }
.editor:empty::before { content: "Write your email here…"; color: var(--muted); }
.signature { padding: 8px 16px 10px; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--border); white-space: pre-wrap; }
/* In the composer the block is a reminder, not the email: text only, capped with a fade so the
   footer and Send stay inside the 560px; the logo and the whole block are in Preview. */
.composer .signature { max-height: 96px; overflow: hidden; flex-shrink: 0; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.composer .signature img { display: none; }
.signature img { max-height: 40px; display: block; margin-top: 4px; }
.redraft-line { display: flex; gap: 6px; padding: 6px 12px; border-top: 1px solid #eef1f2; background: #f7fbf8; }
.redraft-line input { flex: 1; font-size: 12px; padding: 6px 9px; }
.attachment-list { padding: 2px 12px; max-height: 60px; overflow: auto; display: flex; flex-wrap: wrap; gap: 5px; }
.attachment { display: flex; align-items: center; gap: 5px; max-width: 100%; background: #edf2f5; border-radius: 20px; padding: 3px 8px; font-size: 10px; }
.attachment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment button { padding: 0 3px; border: 0; background: none; }
.format-bar { padding: 5px 10px; border-top: 1px solid #eef1f2; display: flex; gap: 2px; align-items: center; }
.format-bar button { border: 0; padding: 4px 7px; font-size: 12px; }
.format-bar .spacer { flex: 1; }
.compose-footer { padding: 8px 12px; display: flex; gap: 6px; align-items: center; border-top: 1px solid #eef1f2; height: 52px; }
.compose-footer .spacer { flex: 1; }
.send-group { display: inline-flex; }
.send-group .primary { border-radius: 7px 0 0 7px; min-width: 130px; }
.send-group .caret { border-radius: 0 7px 7px 0; border-left: 1px solid #ffffff55; padding: 8px 0; min-width: 0; width: 30px; font-size: 11px; }
.send-menu { top: auto; left: auto; right: 12px; bottom: calc(100% - 2px); z-index: 5; }
.compose-error { color: var(--red); font-size: 11px; padding: 0 12px; height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.schedule-state { background: var(--amber); font-size: 11px; padding: 4px 12px; height: 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Minimised drafts are the dock's first child, so they sit to the LEFT of every open composer
   and can never cover one's Send. They wrap upward when the composers leave them little room. */
.minimized { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; align-content: flex-end; gap: 6px; min-width: 0; flex: 1 1 auto; }
.minimized:empty { display: none; }
.tab-min { pointer-events: auto; display: inline-flex; align-items: stretch; max-width: 200px; min-width: 0; box-shadow: var(--shadow); border: 1px solid var(--border); border-bottom: 0; border-radius: 8px 8px 0 0; background: white; overflow: hidden; }
.tab-min button { border: 0; border-radius: 0; box-shadow: none; font-size: 11px; }
.tab-min [data-restore] { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.tab-min [data-close-composer] { flex: 0 0 auto; padding: 0 8px; visibility: hidden; color: var(--muted); }
.tab-min:hover [data-close-composer], .tab-min:focus-within [data-close-composer] { visibility: visible; }
.tab-min [data-close-composer]:hover { color: var(--red); background: #fbeeed; }

/* Dialogs */
dialog { border: 1px solid var(--border); border-radius: 12px; padding: 28px; width: min(680px, 90vw); max-height: 88vh; box-shadow: var(--shadow); color: var(--ink); }
dialog::backdrop { background: #102c3955; backdrop-filter: blur(2px); }
dialog h2 { font-size: 20px; margin: 0 0 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
/* The batch dialog's Send is the composer's: the worded button, the caret, the menu above them */
.batch-send { position: relative; }
.batch-send .primary { min-width: 0; }
.batch-menu { top: auto; left: auto; right: 0; bottom: calc(100% + 4px); min-width: 210px; }
.preview { border: 1px solid var(--border); border-radius: 7px; padding: 18px; background: #fcfdfc; overflow-wrap: anywhere; margin-top: 16px; }
.preview .body { font-size: 14px; }
.preview .signature { border-top: 1px dashed var(--border); padding: 8px 0 0; margin-top: 12px; }
.notice { padding: 10px 13px; margin: 12px 0; background: var(--amber); border-radius: 6px; color: #754509; font-size: 12px; }
/* The Add organisation form on Leads: two columns, the note across both, scrolling inside the dialog. */
.hand-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; max-height: 52vh; overflow: auto; padding: 2px; margin-top: 12px; }
.hand-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.hand-form input, .hand-form select, .hand-form textarea { font-size: 14px; color: var(--ink); }
.hand-form textarea { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; resize: vertical; background: white; }
.hand-form .wide { grid-column: 1 / -1; }
.hand-error { color: var(--red); font-size: 12px; min-height: 18px; margin: 8px 0 0; }
.hand-import { margin-right: auto; }
dialog dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; margin: 12px 0; }
dialog dt { color: var(--muted); }
dialog dd { margin: 0; }
.toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100; background: var(--green-dark); color: white; padding: 12px 22px; border-radius: 8px; box-shadow: var(--shadow); max-width: 85vw; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }

@media (max-width: 1100px) {
  :root { --tabs: 150px; }
  .composer { width: 400px; flex-basis: 400px; }
  .dock { left: 170px; }
}
@media (max-width: 800px) {
  :root { --tabs: 60px; }
  .brand { width: auto; }
  .brand span, .tab-label, .compose span, .safety { display: none; }
  .compose { padding: 9px; text-align: center; font-size: 0; }
  .compose::before { content: "＋"; font-size: 20px; }
  .tab { justify-content: center; padding: 10px 4px; gap: 0; position: relative; }
  .account-button { justify-content: center; padding: 6px 2px; gap: 0; }
  .account-name, .account-caret { display: none; }
  .need { position: absolute; top: 2px; right: 2px; }
  .dock { left: 68px; right: 8px; }
  .composer { width: 100%; flex: 1; height: 70vh; }
  .detail { width: min(440px, 100vw); }
  .filters { position: fixed; left: 70px; right: 12px; width: auto; max-height: 75vh; overflow: auto; }
  .filter-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .filter-col { border: 0; }
  .pager span { min-width: 0; }
}
/* The row at the top of Drafts while the drafters run: the one place a reviewer looks for them. */
tr.drafting td { background: var(--amber-bg, #fff7e0); color: var(--ink); font-weight: 500; padding: 10px 12px; }