:root {
  --bg: #F5E9D6;
  --panel: #FFFCF7;
  --paper: #FFF8EC;
  --ink: #1B1B1B;
  --ink-2: #4A4A45;
  --ink-3: #857F73;
  --line: #E3D5BE;
  --line-2: #EFE6D5;
  --teal: #2F5A1F;         /* primary action: Flawsome dark green (name kept for compatibility) */
  --teal-dark: #234416;
  --teal-soft: #E4EBD6;
  --sage: #6E8F5A;
  --amber: #C2691A;
  --amber-soft: #F8E2CB;
  --red: #B42318;
  --red-soft: #F6D9D5;
  --focus: #2F5A1F;
  --radius: 10px;
  --sans: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --script: "Caveat", "Segoe Script", cursive;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14.5px; font-variation-settings: "opsz" 14; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.app { display: grid; grid-template-columns: 196px 1fr; min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 14px; border-right: 1px solid var(--line); background: var(--bg); }
.brand { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; margin: 0 8px 26px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand-mark { width: 34px; height: auto; display: inline-block; flex-shrink: 0; }
.rail a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--ink-2); margin-bottom: 2px; }
.rail a:hover { background: rgba(20,32,43,.05); color: var(--ink); }
.rail a.active { background: var(--panel); color: var(--teal); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.rail-count { font-size: 12px; background: var(--teal); color: #fff; border-radius: 10px; padding: 0 7px; line-height: 18px; min-width: 18px; text-align: center; }
.rail-count:empty { display: none; }
.rail-foot { margin-top: auto; font-size: 12.5px; color: var(--ink-3); padding: 0 10px; line-height: 1.5; }
.rail-foot .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 6px; vertical-align: 1px; }
.rail-foot .dot.on { background: var(--teal); }

main { padding: 26px 32px 60px; max-width: 1440px; width: 100%; }
.view-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.view-head h1 { font-family: var(--serif); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; margin: 0; line-height: 1; font-variation-settings: "opsz" 60; }
.view-head .script { font-family: var(--script); font-size: 24px; color: var(--teal); line-height: 1; transform: rotate(-3deg); display: inline-block; }
.view-head .spacer { flex: 1; }
.view-head p { margin: 0; color: var(--ink-2); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar select, .toolbar input { width: auto; }

/* buttons */
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 14px; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.btn.sage { background: var(--sage); border-color: var(--sage); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--teal-dark); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: rgba(20,32,43,.06); color: var(--ink); }
.btn.danger { color: var(--red); }
.btn.small { padding: 4px 9px; font-size: 13px; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border: 2px solid rgba(20,32,43,.25); border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite; }
.btn.primary.busy::after { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* form controls */
input:not([type]), input[type=text], input[type=search], input[type=tel], input[type=url], input[type=email], input[type=number], input[type=date], input[type=datetime-local], input[type=month], input[type=password], select, textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; background: var(--panel); width: 100%; }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; }
label.field small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.field-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.check { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
.check input { width: auto; }

/* panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.panel + .panel { margin-top: 16px; }
.panel-head { padding: 14px 18px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-head > .toolbar { flex-wrap: wrap; }   /* a long row of controls wraps rather than running off the screen */
.panel-head h2 { font-size: 15px; font-weight: 600; margin: 0; }
.panel-head .spacer { flex: 1; }
.panel-body { padding: 16px 18px; }
.panel-body p:first-child { margin-top: 0; }
.muted { color: var(--ink-3); }
.hint { color: var(--ink-2); font-size: 13px; }
.empty { padding: 40px 20px; text-align: center; color: var(--ink-2); }
.empty h3 { font-family: var(--serif); font-weight: 700; font-size: 24px; margin: 0 0 6px; color: var(--ink); }

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
th button.th-sort { background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 500; color: inherit; cursor: pointer; text-align: left; white-space: nowrap; }
th button.th-sort:hover { color: var(--ink); text-decoration: underline; }
th.num button.th-sort { width: 100%; text-align: right; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: rgba(20,32,43,.025); }
td input, td select { padding: 5px 8px; }

/* selection & bulk actions */
th.sel, td.sel { width: 34px; padding-right: 0; padding-left: 12px; }
td.sel input, th.sel input { width: 15px; height: 15px; accent-color: var(--teal); cursor: pointer; margin: 0; vertical-align: middle; }
.bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; background: var(--teal-soft); border-bottom: 1px solid var(--line-2); }
.bulk-bar .spacer { flex: 1; }
.bulk-bar select, .bulk-bar input { width: auto; padding: 5px 8px; }
.bulk-bar .bulk-tag { display: inline-flex; gap: 4px; }
.bulk-bar .bulk-tag input { width: 150px; }
.btn.danger:hover { border-color: var(--red); }

/* tags & chips */
.tag { display: inline-block; font-size: 12px; border-radius: 999px; padding: 1px 9px; border: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.tag.key { background: var(--teal); color: #fff; border-color: var(--teal); }
.tag.known { border-color: var(--ink-3); }
.tag.internal { background: var(--line-2); border-color: var(--line-2); }
.wait { display: inline-block; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; border-radius: 999px; padding: 1px 10px; background: var(--teal-soft); color: var(--teal); }
.wait.warn { background: var(--amber-soft); color: var(--amber); }
.wait.critical { background: var(--red-soft); color: var(--red); }

/* SLA board */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--sage); border-radius: 18px; overflow: hidden; margin-bottom: 18px; color: #fff; }
.board > div { background: transparent; padding: 18px 22px 16px; border-left: 1px solid rgba(255,255,255,.2); }
.board > div:first-child { border-left: none; }
.board .n { font-family: var(--serif); font-weight: 700; font-size: 42px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 60; }
.board .n small { font-size: 18px; color: rgba(255,255,255,.7); font-weight: 600; }
.board .sub { color: rgba(255,255,255,.75); font-size: 12.5px; margin-top: 4px; }
.board.five { grid-template-columns: repeat(5, 1fr); }
.board .l { color: rgba(255,255,255,.88); margin-top: 6px; font-size: 13.5px; }
.board .warn .n, .board .n.warn { color: #FFD98A; }
.board .critical .n, .board .n.critical { color: #FFB8A6; }
@media (max-width: 1100px) { .board.five { grid-template-columns: repeat(3, 1fr); } }

/* reply desk */
.desk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 1200px) { .desk { grid-template-columns: 1fr; } }

/* ---------- a reply: who wrote, what they said, what you say back, what to do with it ---------- */
.reply { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 1px 2px rgba(20,32,43,.05); transition: box-shadow .15s; }
.reply:hover { box-shadow: 0 4px 16px rgba(20,32,43,.08); }
.reply.leaving { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }

.reply-head { padding: 18px 20px 0; display: flex; align-items: baseline; gap: 8px 10px; flex-wrap: wrap; }
.reply-head .who { font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.reply-head .who a { text-decoration: none; color: var(--ink); }
.reply-head .who a:hover { color: var(--teal); }
.reply-head .company { color: var(--ink-2); font-size: 14px; }
.reply-head .reply-tags { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.reply-head .reply-tags .tag { font-size: 11px; padding: 2px 8px; }
.reply-head .spacer { flex: 1; }
.reply-head .wait { align-self: center; }
.reply-subject { padding: 4px 20px 0; color: var(--ink-2); font-size: 14px; }
.reply .ctx { margin: 12px 20px 0; padding: 8px 12px; background: var(--teal-soft); border-radius: 10px; font-size: 12.5px; color: var(--ink-2); }
.reply .ctx a { color: var(--teal-dark); }
.reply-to { padding: 8px 20px 0; font-size: 12.5px; color: var(--ink-3); }
.reply .gmail-draft-note { margin: 8px 20px 0; padding: 6px 10px; background: var(--amber-soft); color: var(--amber); border-radius: 8px; font-size: 12.5px; }

/* their side: a quiet panel with tabs drawn as an underline, so it reads as reading, not as controls */
.reply .their { margin: 14px 20px 0; }
.reply-tabs { display: flex; gap: 18px; padding: 0 2px; border-bottom: 1px solid var(--line); }
.reply-tabs button { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--ink-3); font-size: 13px; padding: 6px 0 8px; cursor: pointer; font: inherit; font-size: 13px; }
.reply-tabs button:hover { color: var(--ink); }
.reply-tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--teal); }
.reply-msg { padding: 12px 2px 4px; white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.reply-msg.long { max-height: 340px; overflow: auto; }
.reply-msg ul.summary { margin: 0; padding-left: 18px; white-space: normal; }
.reply-msg ul.summary li { margin: 4px 0; }
.reply-msg ul.summary li::marker { color: var(--teal); }

/* your side: one box — what to ask the AI, the words, and the small things that go with them */
.reply .composer { margin: 14px 20px 0; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); overflow: hidden; }
.reply .composer:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.reply-hint { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.reply-hint select { width: auto; max-width: 170px; padding: 6px 8px; font-size: 13px; border-color: transparent; background: var(--bg); }
.reply-hint .hint-input { flex: 1; min-width: 0; padding: 7px 10px; border-color: transparent; background: var(--bg); }
.reply-hint .hint-input:focus { background: #fff; border-color: var(--line-2); }
.reply textarea { margin: 0; width: 100%; border: 0; border-radius: 0; background: transparent; min-height: 170px; padding: 14px 14px 8px; font-size: 14.5px; line-height: 1.55; resize: vertical; }
.reply textarea:focus { background: transparent; box-shadow: none; outline: none; }
.reply .draft-tools { display: flex; gap: 4px; align-items: center; padding: 0 10px 8px; font-size: 12px; color: var(--ink-3); }
.reply .draft-tools .btn.small { padding: 2px 7px; min-height: 0; font-size: 12px; }
.reply .attach-row { padding: 8px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.reply-meta { padding: 8px 12px 10px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); background: var(--panel); }
.reply-meta label { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 200px; }
.reply-meta input { padding: 5px 8px; font-size: 13px; }
.reply-meta .sig-note { color: var(--ink-3); }

/* what to do with it: one real button, one safe one, the rest quiet */
.reply-foot { padding: 14px 20px 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reply-foot .spacer { flex: 1; }
.reply-foot .src { color: var(--ink-3); font-size: 12.5px; }
.reply-foot .btn.quiet { color: var(--ink-3); }
.reply-foot .btn.quiet:hover { color: var(--ink); }
.reply-meta input { padding: 4px 8px; font-size: 12.5px; }
.reply-meta .sig-note { color: var(--ink-3); }
.sig-modes { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; }
.sig-modes .check { margin: 0 0 8px; }
.sig-preview-wrap { margin-top: 14px; }
.sig-preview { margin-top: 6px; padding: 16px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; overflow: auto; }

.tag.green { background: var(--teal-soft); border-color: var(--teal-soft); color: var(--teal); }
td.buys { max-width: 220px; }
.chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-label { font-size: 12px; color: var(--ink-3); width: 100%; margin-top: 4px; }
button.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
button.chip:hover { border-color: var(--teal); }
button.chip.on { background: var(--teal); border-color: var(--teal); color: #fff; }
button.chip.on .muted { color: rgba(255,255,255,.75); }
.prod-group { margin-bottom: 12px; }
.prod-group td { padding: 4px 6px; border-bottom: none; }

/* pipeline */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1200px) { .kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.col { background: rgba(20,32,43,.035); border-radius: 10px; padding: 10px; min-height: 160px; }
.col.over { outline: 2px dashed var(--teal); outline-offset: -2px; }
.col-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 10px; }
.col-head h3 { font-size: 14px; margin: 0; font-weight: 600; }
.col-head .sum { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.deal { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; }
.deal:active { cursor: grabbing; }
.deal .t { font-weight: 600; margin-bottom: 2px; }
.deal .c { color: var(--ink-2); font-size: 13px; }
.deal .m { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.deal .m + .m { margin-top: 6px; display: block; }
.deal .m + .m span { display: block; }
.deal .m + .m span + span { margin-top: 2px; }
.deal .m b { color: var(--ink); font-weight: 600; }
.deal .stale { color: var(--amber); }
.deal .due { color: var(--red); }
.avatar { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--line-2); color: var(--ink-2); font-size: 11px; font-weight: 600; align-items: center; justify-content: center; }

.rep-row { border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.rep-row .grid { display: grid; grid-template-columns: 1.2fr 1.4fr .8fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.rep-row input, .rep-row select { padding: 5px 8px; }

/* progress */
.bar { height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; background: var(--teal); }
.bar > i.over { background: var(--amber); }

/* settings layout */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .settings-grid { grid-template-columns: 1fr; } }
.settings-grid .panel + .panel { margin-top: 0; }
.status-line { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.status-line .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.status-line .dot.on { background: var(--teal); }
ol.steps { padding-left: 18px; margin: 8px 0 0; color: var(--ink-2); font-size: 13.5px; }
ol.steps li { margin-bottom: 4px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; background: var(--bg); padding: 1px 5px; border-radius: 4px; }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(20,32,43,.35); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow: auto; z-index: 20; }
.modal { background: var(--panel); border-radius: 12px; width: 100%; max-width: 720px; border: 1px solid var(--line); min-width: 0; margin: 0 auto; }
/* nothing inside a window may make the window wider than the screen: a long file name in a dropdown
   once pushed a whole window off to the right */
.modal-back { justify-content: flex-start; }
.modal input, .modal select, .modal textarea { max-width: 100%; }
.modal .field, .modal .field-row > * { min-width: 0; }
.attach-row select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.modal-head .hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal.wide { max-width: 960px; }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px; }
.modal-head h2 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 24px; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 18px 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line-2); display: flex; gap: 8px; align-items: center; }
.modal-foot .spacer { flex: 1; }
/* Email the team: the group picker does the work, the list is there when someone wants to pick by hand */
#et-list { margin-top: 10px; border: 1px solid var(--line-2); border-radius: 8px; }
#et-list > summary { cursor: pointer; padding: 9px 12px; font-size: 13.5px; color: var(--ink-2); user-select: none; }
#et-list[open] > summary { border-bottom: 1px solid var(--line-2); }
#et-list .scroll { max-height: 46vh; overflow: auto; }
#et-list table { margin: 0; }
#et-count { margin-top: 10px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.timeline .when { color: var(--ink-3); font-size: 12.5px; }

.rail-foot .ver { margin-top: 6px; color: var(--ink-3); font-size: 11.5px; }
#stale-banner { position: sticky; top: 0; z-index: 40; background: var(--red); color: #fff; padding: 10px 18px; font-size: 13.5px; line-height: 1.45; }
#stale-banner em { font-style: normal; text-decoration: underline; }

/* toast */
#toast-root { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 30; }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13.5px; box-shadow: 0 6px 20px rgba(20,32,43,.25); }
.toast.error { background: var(--red); }

/* ---------- Flawsome additions: dashboards, accounts, tiers ---------- */
.rail-me { margin-top: auto; padding: 0 10px 10px; font-size: 12.5px; color: var(--ink-2); }
.rail-me select { width: 100%; margin-top: 4px; padding: 5px 8px; }
.rail-foot { margin-top: 0; }
.tier { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; border-radius: 4px; padding: 1px 7px; border: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; white-space: nowrap; }
.tier.priority { background: var(--teal); border-color: var(--teal); color: #fff; }
.tier.core { border-color: var(--teal); color: var(--teal); }
.tier.new { border-color: var(--amber); color: var(--amber); }
.tier.other { color: var(--ink-3); }
.flag { display: inline-block; font-size: 11.5px; border-radius: 4px; padding: 1px 6px; background: var(--amber-soft); color: var(--amber); margin: 1px 2px 1px 0; white-space: nowrap; }
.flag.red { background: var(--red-soft); color: var(--red); }
.flag.green { background: var(--teal-soft); color: var(--teal); }
.pct { font-variant-numeric: tabular-nums; font-weight: 600; }
.pct.good { color: var(--teal); } .pct.warn { color: var(--amber); } .pct.bad { color: var(--red); }
.money { font-variant-numeric: tabular-nums; }
/* A row of fields laid out in columns. Five places used class="grid" with their columns set inline,
   and there was no such class — so every one of them stacked instead. */
.grid { display: grid; align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.grid-2 .panel + .panel, .grid-3 .panel + .panel { margin-top: 0; }
.focus-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; position: relative; }
.focus-card .rank { position: absolute; top: 10px; right: 14px; font-family: var(--script); font-size: 26px; color: var(--sage); line-height: 1; }
.focus-card h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; margin: 0 0 2px; padding-right: 30px; }
.focus-card .kv { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; flex-wrap: wrap; }
.focus-card .kv b { color: var(--ink); font-variant-numeric: tabular-nums; }
.focus-card .actions { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.focus-card.empty-slot { border-style: dashed; color: var(--ink-3); background: transparent; }
.pareto { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line-2); margin-top: 8px; }
.pareto > i { display: block; height: 100%; }
.pareto .core { background: var(--teal); } .pareto .new { background: var(--amber); }
.pareto-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.pareto-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.trend { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 150px; padding: 8px 4px 0; }
.trend .col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 3px; position: relative; }
.trend .bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; width: 100%; justify-content: center; }
.trend .bar-d { width: 45%; background: var(--teal); border-radius: 3px 3px 0 0; }
.trend .bar-b { width: 25%; background: var(--line); border-radius: 3px 3px 0 0; }
.trend .bar-d.current { background: var(--sage); }
.trend .lbl { font-size: 11px; color: var(--ink-3); }
.mini-bar { height: 5px; background: var(--line-2); border-radius: 3px; overflow: hidden; margin-top: 4px; min-width: 60px; }
.mini-bar > i { display: block; height: 100%; background: var(--teal); }
.mini-bar > i.warn { background: var(--amber); } .mini-bar > i.bad { background: var(--red); }
.attach-row { padding: 8px 16px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.attach-row select { width: auto; padding: 4px 8px; font-size: 12.5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--teal-soft); color: var(--teal); border-radius: 12px; padding: 2px 8px 2px 10px; font-size: 12.5px; font-weight: 600; }
.chip button { border: none; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.month-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.month-strip .m { background: var(--bg); border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.month-strip .m b { display: block; font-variant-numeric: tabular-nums; }
.month-strip .m .bud { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hint-box { background: var(--teal-soft); color: var(--teal-dark); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; }
.hint-box b { font-family: var(--script); font-size: 20px; font-weight: 500; margin-right: 6px; }

/* =====================================================================
   v0.10 — morning page, outreach, grow, organograms, ops, team mode
   ===================================================================== */
.rail { overflow-y: auto; }
.rail a { padding: 6px 10px; font-size: 13.5px; }

/* ---------- Good morning page ---------- */
.morning { position: relative; }
.morning-head { display: flex; align-items: center; gap: 28px; margin-bottom: 22px; padding: 22px 28px; border-radius: 22px; overflow: hidden; position: relative;
  background: linear-gradient(120deg, #FFF7EA 0%, #F5E9D6 55%, #E7EFD9 100%); border: 1px solid var(--line); }
.morning-head h1 { font-family: var(--serif); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; margin: 0; line-height: 1.05; font-variation-settings: "opsz" 80; }
.morning-date { font-family: var(--script); font-size: 24px; color: var(--teal); margin-top: 6px; transform: rotate(-2deg); display: inline-block; }
.morning-art { margin-left: auto; opacity: .95; }
.morning-art svg { height: 120px; width: auto; }
.morning-head .btn.big { font-size: 16px; padding: 12px 22px; border-radius: 999px; white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr; } .morning-head { flex-wrap: wrap; } }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; min-height: 300px; overflow: hidden; position: relative; }
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--teal); opacity: .9; }
.tile.t-quiz::before { background: linear-gradient(90deg, #C2691A, #E5A24B); }
.tile.t-cal::before { background: linear-gradient(90deg, #2F5A1F, #7BA05B); }
.tile.t-bday::before { background: linear-gradient(90deg, #B8336A, #E58BB1); }
.tile.t-tasks::before { background: linear-gradient(90deg, #1E5F74, #6FB1C4); }
.tile.t-ideas::before { background: linear-gradient(90deg, #7A5C2E, #C9A66B); }
.tile.t-moments::before { background: linear-gradient(90deg, #4C6A2F, #9DBB6A); }
.tile-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 8px; }
.tile-head h2 { font-family: var(--serif); font-weight: 700; font-size: 20px; margin: 0; letter-spacing: -0.01em; }
.tile-head .hint { font-size: 12px; }
.tile-body { padding: 4px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.tile-body .hint { line-height: 1.4; }
/* quiz */
.quiz-q { font-family: var(--serif); font-size: 17px; font-weight: 600; margin: 4px 0 12px; line-height: 1.3; }
.quiz-opts { display: grid; gap: 8px; }
.quiz-opt { text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font: inherit; color: var(--ink); transition: background .15s; }
.quiz-opt:hover { background: #fff; border-color: var(--ink-3); }
.quiz-opt.good { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-dark); font-weight: 600; }
.quiz-opt.bad { background: #FBE7E4; border-color: #E0A39A; }
.quiz-opt:disabled { cursor: default; }
.quiz-fact { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); font-style: italic; }
.quiz-done { text-align: center; padding: 18px 0; }
.quiz-done .n { font-family: var(--script); font-size: 46px; color: var(--teal); line-height: 1; }
/* calendar (today, compact) */
.cal-allday { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.cal-allday .pill { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-dark); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-allday .pill.ext { background: var(--amber-soft); color: #7A4A0E; }
.cal-allday .pill.more { background: var(--line-2); color: var(--ink-2); }
.cal-list { display: flex; flex-direction: column; }
.cal-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 5px 6px; margin: 0 -6px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 13.5px; line-height: 1.25; }
.cal-row:hover { background: var(--bg); }
.cal-row .time { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12.5px; }
.cal-row .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-row.past { color: var(--ink-3); }
.cal-row.past .time { color: var(--ink-3); }
.cal-row.next { font-weight: 600; }
.cal-row.next .time { color: var(--teal); font-weight: 700; }
.cal-row.live { background: var(--teal-soft); font-weight: 600; }
.cal-row.ext .title::before { content: "●"; color: var(--amber); margin-right: 5px; font-size: 8px; vertical-align: 2px; }
.cal-row .cust { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #7A4A0E; background: var(--amber-soft); padding: 1px 6px; border-radius: 4px; }
.cal-row .cust.now { background: var(--teal); color: #fff; }
.cal-more { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.cal-empty { color: var(--ink-2); font-size: 13.5px; padding: 12px 0; }
/* birthdays */
.bday-list { list-style: none; padding: 0; margin: 0; }
.bday-list li { padding: 8px 0; border-bottom: 1px dashed var(--line); display: flex; align-items: baseline; gap: 8px; }
.bday-list li:last-child { border-bottom: 0; }
.bday-list .days { margin-left: auto; font-family: var(--script); font-size: 20px; color: #B8336A; white-space: nowrap; }
.bday-list li.today { background: #FFF1F6; margin: 0 -8px; padding: 8px; border-radius: 8px; }
/* tasks */
.task-group { margin-bottom: 10px; }
.task-group > .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 4px 0; }
.task { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.task input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--teal); }
.task.big .title { font-weight: 600; font-size: 15px; }
.task.done .title { text-decoration: line-through; color: var(--ink-3); }
.task .title { flex: 1; }
.task .x { opacity: 0; }
.task:hover .x { opacity: 1; }
.task-add { display: flex; gap: 6px; margin-top: 8px; }
.task-add input { flex: 1; }
/* ideas */
.idea-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; max-height: 260px; }
.idea { padding: 8px 0; border-bottom: 1px dashed var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.idea:last-child { border-bottom: 0; }
.idea .kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #7A5C2E; background: #F3E6CF; padding: 2px 6px; border-radius: 4px; margin-top: 3px; }
.idea .who { font-size: 12px; color: var(--ink-2); }
.idea-status { font-size: 11px; }
.vote { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.vote.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.idea-add { display: grid; gap: 6px; grid-template-columns: 1fr auto; margin-top: 10px; }
.idea-add input, .idea-add select { min-width: 0; }
/* moments */
.moments { flex: 1; display: flex; flex-direction: column; min-height: 220px; }
.moment { margin: 0; flex: 1; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #000; position: relative; min-height: 220px; }
.moment img { width: 100%; height: 220px; object-fit: cover; display: block; }
.moment figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; color: #fff; font-size: 13px; background: linear-gradient(transparent, rgba(0,0,0,.65)); display: flex; align-items: center; gap: 8px; }
.moment figcaption .x { margin-left: auto; color: #fff; opacity: .7; }
.moment .nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.85); border: 0; border-radius: 999px; width: 30px; height: 30px; cursor: pointer; font-size: 16px; }
.moment .nav.prev { left: 8px; } .moment .nav.next { right: 8px; }
.moments-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; }
/* orchard art */
.orchard .leaf { fill: #7BA05B; } .orchard .apple { fill: #C2691A; } .orchard .trunk { fill: #7A5C2E; } .orchard .sun { fill: #E5A24B; }

/* ---------- plays (Grow / attention) ---------- */
.plays { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.play { border-radius: 999px; background: var(--teal-soft); border-color: var(--teal-soft); color: var(--teal-dark); }
.btn.play:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.segments { display: flex; gap: 6px; flex-wrap: wrap; }
.segments .chip.on, .chip.on { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---------- Outreach ---------- */
.outreach table td { vertical-align: top; }
.o-subject { width: 100%; font-weight: 600; margin-bottom: 4px; }
.o-body { width: 100%; min-height: 120px; font: inherit; font-size: 13.5px; line-height: 1.4; resize: vertical; }
.o-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tag.draft { border-color: var(--ink-3); }
.tag.approved { background: var(--teal-soft); border-color: var(--teal-soft); color: var(--teal-dark); }
.tag.exported, .tag.sent { background: var(--teal); color: #fff; border-color: var(--teal); }
.tag.skipped { text-decoration: line-through; }
.tag.amber { background: #FBEBD0; border-color: #FBEBD0; color: #7A4A0E; }
.tag.red { background: #FBE7E4; border-color: #FBE7E4; color: #8A2E22; }
.picker { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.picker label { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 13.5px; }
.progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 8px 0; }
.progress i { display: block; height: 100%; background: var(--teal); transition: width .3s; }

/* ---------- Organograms ---------- */
.org-tree, .org-tree ul { list-style: none; padding-left: 0; margin: 0; }
.org-tree ul { padding-left: 26px; border-left: 2px solid var(--line-2); margin-left: 12px; }
.org-tree li { margin: 8px 0; }
.org-node { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; max-width: 640px; }
.org-node.linked { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); }
.org-node > div:first-child { flex: 1; min-width: 0; }
.org-node .email { font-size: 12.5px; color: var(--ink-2); }
.org-node .email.guess { font-style: italic; }
.org-node .email.guess::after { content: " (guess)"; font-size: 11px; }
.org-actions { display: flex; gap: 4px; opacity: .35; }
.org-node:hover .org-actions { opacity: 1; }
.org-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .org-layout { grid-template-columns: 1fr; } }
.org-list a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.org-list a.on { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.org-list .n { float: right; color: var(--ink-2); font-size: 12px; }

/* ---------- Ops ---------- */
.ops table { font-size: 13.5px; }
.ops td.num, .ops th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ops tr.order_now td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.ops tr.order_soon td:first-child { box-shadow: inset 4px 0 0 var(--amber); }
.ops tr.ok td:first-child { box-shadow: inset 4px 0 0 var(--sage); }
.tag.order_now { background: #FBE7E4; border-color: #FBE7E4; color: #8A2E22; font-weight: 600; }
.tag.order_soon { background: #FBEBD0; border-color: #FBEBD0; color: #7A4A0E; font-weight: 600; }
.tag.plan { border-color: var(--ink-3); }
.tag.ok { background: var(--teal-soft); border-color: var(--teal-soft); color: var(--teal-dark); }
.tag.no_sales { color: var(--ink-3); }
.op-detail td { background: var(--bg); padding: 10px 14px 14px; }
.week-grid { overflow-x: auto; }
.week-grid table { font-size: 12.5px; min-width: 900px; }
.week-grid th, .week-grid td { padding: 4px 8px; white-space: nowrap; }
.week-grid th.low, .week-grid td.low { background: #FBE7E4; color: #8A2E22; }
.week-grid td.receipt { color: var(--teal-dark); font-weight: 600; }
.ops .trend-up { color: var(--teal-dark); } .ops .trend-down { color: var(--red); }
.ops-assume { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.ops-assume b { color: var(--ink); }

/* ---------- Voice examples, mailboxes, team mode (Settings) ---------- */
.voice-ex { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 6px 0; font-size: 13px; white-space: pre-wrap; max-height: 120px; overflow: auto; background: var(--bg); position: relative; }
.voice-ex .x { position: absolute; top: 6px; right: 8px; }
.mailbox-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.mailbox-row:last-child { border-bottom: 0; }
.mailbox-row .email { font-weight: 600; }
.mailbox-row .sub { font-size: 12px; color: var(--ink-2); }
.dot.err { background: var(--red); }
.lan-list code { display: inline-block; margin: 2px 6px 2px 0; font-size: 13px; }
.inbox-tag { font-size: 11px; color: var(--ink-2); border: 1px dashed var(--line-2); border-radius: 999px; padding: 0 7px; }
.pw-warn { color: #8A2E22; font-size: 13px; }

/* ---------- Ops: monthly MPS grid ---------- */
.ops.mps th.cur, .ops.mps td.cur { background: #FFF7EA; }
.ops.mps td.mcell { padding: 4px 4px; min-width: 72px; }
.ops.mps td.mcell.low { background: #FBE7E4; }
.ops.mps td.mcell.low b { color: #8A2E22; }
.ops.mps td.mcell b { display: block; text-align: right; font-size: 12.5px; padding: 2px 4px 0; }
.ops .cell { width: 100%; text-align: right; font: inherit; font-size: 12px; padding: 1px 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink); -moz-appearance: textfield; }
.ops .cell::-webkit-outer-spin-button, .ops .cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ops .cell:hover, .ops .cell:focus { border-color: var(--line); background: #fff; outline: none; }
.ops .cell.f { color: var(--ink-2); }
.ops .cell.f.auto { color: var(--ink-3); font-style: italic; }
.ops .cell.p { color: var(--teal-dark); font-weight: 600; }
.ops .cell.bs { width: 64px; display: inline-block; text-align: left; font-size: 12px; }
.ops .expiring { color: #8A2E22; font-size: 12px; }
.ops .hist { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ops .hist span i { display: block; font-style: normal; color: var(--ink-3); font-size: 11px; }
.ops tr[data-i] td:nth-child(2) b { cursor: pointer; }

/* ---------- Organogram mind map ---------- */
.mm-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--ink-2); margin: 4px 0 10px; }
.mm-legend .dot, .mm-tile .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.known { background: var(--teal); } .dot.guess { background: var(--amber); } .dot.none { background: var(--line-2); border: 1px solid var(--ink-3); }
.mm-wrap { overflow: auto; max-height: 78vh; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(0deg, rgba(20,32,43,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20,32,43,.035) 1px, transparent 1px); background-size: 24px 24px; background-color: var(--paper); cursor: grab; padding: 24px; }
.mm-wrap:active { cursor: grabbing; }
.mm { display: inline-block; transform-origin: 0 0; --hue: 100; --ghost-w: 230px; }
.mm-node { display: flex; align-items: center; position: relative; }
.mm-kids { display: flex; flex-direction: column; gap: 10px; margin-left: 36px; padding-left: 22px; position: relative; }
.mm-kids::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px; background: hsl(var(--hue) 35% 62%); border-radius: 2px; }
.mm-kids > .mm-node::before, .mm-dept > .mm-node::before { content: ""; position: absolute; left: -22px; top: 50%; width: 22px; height: 2px; background: hsl(var(--hue) 35% 62%); }
.mm-node > .mm-tile::before { content: ""; position: absolute; left: -36px; top: 50%; width: 36px; height: 2px; background: hsl(var(--hue) 35% 62%); }
.mm-node.root > .mm-tile::before, .mm-kids > .mm-node.team::before, .mm-node.team > .mm-tile::before { display: none; }
.mm-kids > .mm-node.team { margin-left: 0; }
.mm-dept { display: flex; flex-direction: column; gap: 10px; position: relative; padding: 18px 10px 10px; margin-left: -10px; border: 1px dashed hsl(var(--hue) 30% 70%); border-radius: 12px; }
.mm-dept > .mm-node::before { display: none; }
.mm-dept-lbl { position: absolute; top: -9px; left: 12px; background: var(--paper); padding: 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--hue) 40% 35%); font-weight: 600; }
.mm-tile { position: relative; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid hsl(var(--hue) 45% 45%); border-radius: 12px; padding: 8px 12px 6px; width: 230px; box-shadow: 0 1px 2px rgba(20,32,43,.06); flex: none; }
.mm-tile.root { width: 200px; background: var(--teal); color: #fff; border-color: var(--teal); text-align: center; padding: 14px 12px; }
.mm-tile.root .mm-title { color: rgba(255,255,255,.75); }
.mm-tile.team { width: 190px; background: hsl(var(--hue) 45% 95%); border-color: hsl(var(--hue) 35% 70%); }
.mm-tile.team .mm-name b { font-family: var(--serif); font-size: 17px; }
.mm-tile.unit { background: var(--bg); border-style: dashed; }
.mm-tile.linked { box-shadow: 0 0 0 2px var(--teal-soft); }
.mm-tile.hit { outline: 3px solid var(--amber); }
.mm-name { display: flex; align-items: center; gap: 4px; font-size: 13.5px; line-height: 1.25; }
.mm-name b { flex: 1; min-width: 0; }
.mm-title { font-size: 12px; color: var(--ink-2); line-height: 1.25; margin-top: 1px; }
.mm-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.mm-tog { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; min-width: 22px; height: 20px; padding: 0 6px; font: inherit; font-size: 11px; cursor: pointer; color: var(--ink-2); }
.mm-tog:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.mm-actions { display: none; gap: 2px; flex-wrap: wrap; margin-top: 6px; padding-top: 4px; border-top: 1px dashed var(--line); }
.mm-tile:hover .mm-actions, .mm-tile:focus-within .mm-actions { display: flex; }
.mm-actions .btn.small { padding: 1px 6px; font-size: 11.5px; }
.zoom { display: inline-flex; gap: 2px; }

/* ---------- tidy-up: rail sections, settings tabs ---------- */
.rail-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 10px 10px 3px; }
.rail-sec:first-of-type { margin-top: 0; }
.stabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; }
.stabs button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.stabs button.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.settings-grid .panel.stab-hide { display: none; }
.attn-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; }

/* ---------- account page, samples, hygiene, ops alerts ---------- */
.dot.bad { background: var(--red); }
.tile.t-ops::before { background: linear-gradient(90deg, #B42318, #E58B7D); }
.ops-alerts { list-style: none; margin: 0; padding: 0; }
.ops-alerts li { padding: 7px 0; border-bottom: 1px dashed var(--line); display: grid; gap: 2px; font-size: 13.5px; }
.ops-alerts li:last-child { border-bottom: 0; }
.ops-alerts li span { font-size: 12.5px; color: var(--ink-2); }
.ops-alerts li.order_now b::before { content: "●"; color: var(--red); margin-right: 6px; font-size: 9px; vertical-align: 2px; }
.ops-alerts li.order_soon b::before { content: "●"; color: var(--amber); margin-right: 6px; font-size: 9px; vertical-align: 2px; }
.dup-group { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.dup-row { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; }
.view-head .muted .tier { vertical-align: middle; }

/* ---------- next best action, reply context, depots matrix, quotes ---------- */
.nba-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn.play.nba { font-weight: 600; }
.nba.ok { color: var(--teal-dark); font-weight: 600; font-size: 13px; }
.nba-why { font-size: 12px; color: var(--ink-2); max-width: 260px; line-height: 1.2; }
.nba-more { padding: 0 8px; }
.nba-others { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.reply-card .ctx, .ctx { font-size: 12.5px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 10px; margin: 6px 0 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ctx a { color: var(--teal-dark); }
.matrix th.sku { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 11px; padding: 6px 4px; max-height: 120px; }
.matrix td.on { background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; }
.matrix td.gap { background: #FBEBD0; color: #B8791A; text-align: center; }
table.qb .cell { font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
table.qb .cell.num { text-align: right; }

/* ---------- league tile, mail lanes ---------- */
.tile.t-league::before { background: linear-gradient(90deg, #7A5C2E, #E5A24B); }
table.league td { padding: 6px 4px; border-bottom: 1px dashed var(--line); font-size: 13px; vertical-align: top; }
table.league tr:last-child td { border-bottom: 0; }
table.league td.medal { font-size: 18px; width: 30px; text-align: center; }
table.league tr.me td { background: #FFF7EA; }
table.league .badge { font-size: 11px; color: #7A5C2E; }
.bday-list li.ann { color: var(--teal-dark); }
.lanes { display: flex; gap: 6px; margin: 0 0 14px; }
.lanes a { text-decoration: none; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 13.5px; }
.lanes a.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.lanes .rail-count { margin-left: 4px; }

/* ---------- 0.14: your week, mentions, presence, labels, shelf life ---------- */
.tile.t-week::before { background: linear-gradient(90deg, #2F5A1F, #9DBB6A); }
.tile.t-mentions::before { background: linear-gradient(90deg, #1E5F74, #6FB1C4); }
.week-text { font-family: var(--serif); font-size: 16px; line-height: 1.4; margin: 4px 0 12px; }
.week-nums { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-2); }
.week-nums b { font-size: 16px; color: var(--ink); }
.mention-list { list-style: none; margin: 0; padding: 0; }
.mention-list li { padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.mention-list li:last-child { border-bottom: 0; }
.presence-tag { background: #E4F1F5; border-color: #E4F1F5; color: #1E5F74; }
.draft-tools { display: flex; gap: 4px; align-items: center; margin: 4px 0; font-size: 12px; }
.draft-tools .btn.on { background: var(--teal-soft); border-color: var(--teal); }
.tag.label-price { background: #FBEBD0; border-color: #FBEBD0; color: #7A4A0E; }
.tag.label-complaint { background: #FBE7E4; border-color: #FBE7E4; color: #8A2E22; }
.tag.label-order, .tag.label-listing { background: var(--teal-soft); border-color: var(--teal-soft); color: var(--teal-dark); }
.tag.label-samples, .tag.label-meeting { background: #E4F1F5; border-color: #E4F1F5; color: #1E5F74; }
.ops .cell.f.uplift { color: #7A4A0E; }
.ops th.mh { cursor: pointer; }
.ops th .uplift { font-size: 10px; color: #7A4A0E; font-weight: 600; }
.ops .bands { margin-bottom: 8px; font-size: 13px; }
.ops .bands .b60 { color: #8A2E22; font-weight: 700; } .ops .bands .b120 { color: #7A4A0E; font-weight: 600; }
.red { color: var(--red); }

/* ---------- organogram: top-to-bottom layout ---------- */
.mm.down .mm-node { flex-direction: column; align-items: center; }
.mm.down .mm-kids { flex-direction: row; align-items: flex-start; gap: 14px; margin: 0; padding: 26px 0 0; }
/* the horizontal rail joining siblings, and the stub from the parent down to it */
.mm.down .mm-kids::before { content: ""; position: absolute; left: 50%; right: auto; top: 0; bottom: auto; width: 2px; height: 14px; transform: translateX(-1px); background: hsl(var(--hue) 35% 62%); }
.mm.down .mm-kids::after { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 2px; background: hsl(var(--hue) 35% 62%); }
.mm.down .mm-kids > .mm-node:only-child::after { content: ""; }
.mm.down .mm-kids > .mm-node::before, .mm.down .mm-dept > .mm-node::before { left: 50%; top: -12px; width: 2px; height: 12px; transform: translateX(-1px); }
.mm.down .mm-node > .mm-tile::before { display: none; }
/* the sibling rail must not stick out past the first and last child */
.mm.down .mm-kids > .mm-node:first-child { position: relative; }
.mm.down .mm-kids > .mm-node:first-child::after, .mm.down .mm-kids > .mm-node:last-child::after { content: ""; position: absolute; top: -12px; height: 2px; background: var(--paper); width: 50%; }
.mm.down .mm-kids > .mm-node:first-child::after { left: 0; }
.mm.down .mm-kids > .mm-node:last-child::after { right: 0; }
.mm.down .mm-kids > .mm-node:only-child::after { display: none; }
.mm.down .mm-dept { padding: 22px 12px 12px; margin: 0; }
.mm.down .mm-dept > .mm-node::before { display: block; }
.mm.down .mm-dept-lbl { left: 50%; transform: translateX(-50%); }
.mm.down .mm-tile { width: 200px; }
.mm.down .mm-tile.root, .mm.down .mm-tile.team { width: 200px; }
.mm.down .mm-node.collapsed > .mm-kids { display: none; }

.pm-groups { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; background: var(--bg); }
.pm-groups summary { cursor: pointer; font-size: 13.5px; }
.group-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; margin: 8px 0; }
.group-picks .check { font-size: 13px; }

/* ---------- organogram: compact mode ---------- */
.mm.tight .mm-tile { width: 168px; padding: 5px 9px 4px; border-left-width: 3px; border-radius: 9px; }
.mm.tight .mm-name { font-size: 12.5px; gap: 3px; }
.mm.tight .mm-title { font-size: 10.5px; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.mm.tight .mm-meta { display: none; }
.mm.tight .mm-tile:hover .mm-meta { display: block; }
.mm.tight .mm-tog { min-width: 18px; height: 17px; font-size: 10px; padding: 0 4px; }
.mm.tight .mm-actions { position: absolute; z-index: 3; left: 0; right: 0; top: 100%; margin-top: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; box-shadow: 0 3px 10px rgba(20,32,43,.14); border-top: 1px solid var(--line); }
.mm.tight .mm-tile { z-index: 1; } .mm.tight .mm-tile:hover, .mm.tight .mm-tile:focus-within { z-index: 4; }
.mm.tight .mm-tile.root, .mm.tight .mm-tile.team { width: 168px; padding: 8px 10px; }
.mm.tight .mm-kids { gap: 6px; }
.mm.tight.down .mm-kids { gap: 8px; padding-top: 20px; }
.mm.tight.down .mm-kids::before { height: 10px; } .mm.tight.down .mm-kids::after { top: 10px; }
.mm.tight.down .mm-kids > .mm-node::before, .mm.tight.down .mm-dept > .mm-node::before { top: -9px; height: 9px; }
.mm.tight.down .mm-kids > .mm-node:first-child::after, .mm.tight.down .mm-kids > .mm-node:last-child::after { top: -9px; }
.mm.tight.side .mm-kids { margin-left: 22px; padding-left: 16px; }
.mm.tight.side .mm-node > .mm-tile::before { left: -22px; width: 22px; }
.mm.tight .mm-dept { padding: 16px 8px 8px; }
.mm.tight .mm-dept-lbl { font-size: 10px; }
/* people with nobody under them stack instead of spreading sideways */
.mm.down .mm-leaves { display: flex; flex-direction: column; gap: 6px; position: relative; }
.mm.down .mm-leaves > .mm-node::before { left: 50%; }
.mm.down .mm-kids > .mm-leaves { align-self: flex-start; }
.mm.side .mm-leaves { display: flex; flex-direction: column; gap: 8px; }
.mm.side .mm-leaves > .mm-node { position: relative; }

/* ---------- organogram: wrap wide teams into rows ---------- */
.mm.down .mm-kids.chunked { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 20px; }
.mm.down .mm-kids.chunked::after { display: none; }
.mm.down .mm-kids.chunked::before { left: calc(var(--ghost-w) / 2); transform: none; }
.mm-row { display: flex; align-items: flex-start; gap: 14px; position: relative; }
.mm-row::before { content: ""; position: absolute; left: calc(var(--ghost-w) / 2); top: 26px; width: calc(var(--ghost-w) / 2 + 14px); height: 2px; background: hsl(var(--hue) 35% 62%); }
.mm.down .mm-kids.chunked > .mm-row:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--ghost-w) / 2); top: 26px; bottom: -18px; width: 2px; background: hsl(var(--hue) 35% 62%); }
.mm-rowkids { display: flex; align-items: flex-start; gap: 10px; }
.mm.down .mm-row .mm-node::before { display: none; }
.mm.down .mm-row .mm-node > .mm-kids::before { left: 50%; }
.mm-tile.ghost { border-style: dashed; background: transparent; box-shadow: none; opacity: .75; width: 168px; }
.mm-tile.ghost .mm-name b { font-weight: 600; }
.mm-tile.ghost .mm-title { font-style: italic; }
.mm.tight .mm-tile.ghost { width: 152px; }
.mm.tight { --ghost-w: 152px; }
.mm:not(.tight) { --ghost-w: 168px; }

.prod-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); text-align: left; padding: 4px 6px; }
.prod-table td { padding: 2px 6px; }
.prod-table input { width: 100%; font-size: 13px; padding: 4px 6px; }

/* ---------- My desk & Team: aligned card grids ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cards-3, .cards-2 { grid-template-columns: 1fr; } }
.focus-card.small { padding: 10px 12px; }
.focus-card.small h3 { font-size: 15.5px; }
.focus-card.small .kv { gap: 10px; font-size: 12px; margin-top: 6px; }
.focus-card.small .actions { margin-top: 8px; }
.focus-card .flags-row { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.focus-card.attn { border-left: 3px solid var(--amber); }
.focus-card.attn .actions { gap: 4px; }
.cards-2 .more-note, .cards-3 .more-note { grid-column: 1 / -1; font-size: 13px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack > .panel { margin-top: 0; }

/* ---------- Grow: fewer, wider columns ---------- */
.grow-table td { vertical-align: top; }
.grow-table td.num { width: 190px; }
.grow-table td.plays { width: 320px; }
.grow-table .flags-row { margin-top: 4px; }
.grow-table .pareto, .grow-table .bar { margin-top: 4px; }

/* ---------- Send samples ---------- */
.ship-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.ship-card.warn { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.ship-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.ship-card .field span { font-size: 11.5px; }
.ship-card textarea, .ship-card input, .ship-card select { font-size: 13px; }
.ship-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ship-lines .chip { display: inline-flex; align-items: center; gap: 4px; }
.ship-lines .chip.bad { background: #FBE7E4; border-color: #E0A39A; }
.ship-warn { margin-top: 8px; font-size: 12.5px; color: #8A4A0E; }

/* ---------- Settings products: linked master + legacy entries ---------- */
.prod-table td.code-cell { font-variant-numeric: tabular-nums; font-weight: 600; padding: 6px; }
.orphans { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 12px; }
.orphans h3 { font-family: var(--serif); font-size: 15px; margin: 0 0 4px; }
.orphans select { font-size: 13px; }

/* ---------- even gaps between blocks everywhere ---------- */
main > *, #d-body > *, #t-body > *, #g-body > *, #ap-body > * { margin-bottom: 16px; }
main > *:last-child, #d-body > *:last-child, #t-body > *:last-child, #g-body > *:last-child, #ap-body > *:last-child { margin-bottom: 0; }
main > .view-head, #d-body > .view-head { margin-bottom: 14px; }
.board { margin-bottom: 0; }                      /* the rule above provides the gap */
.panel + .panel { margin-top: 0; }
.grid-2, .grid-3, .cards-2, .cards-3, .stack { align-items: stretch; }
.grid-2 > .panel, .grid-3 > .panel, .stack > .panel { height: 100%; display: flex; flex-direction: column; }
.grid-2 > .panel > table, .grid-3 > .panel > table, .stack > .panel > table { margin-bottom: auto; }
.panel .empty { padding: 20px 16px; }             /* short lists no longer leave a hole */
.panel .empty h3 { font-size: 18px; }

.ship-past { margin: 6px 0 4px; font-size: 12.5px; color: var(--ink-2); background: var(--bg); border-radius: 8px; padding: 5px 9px; }
.ship-past.repeat { background: #FBEBD0; color: #7A4A0E; }

/* ---------- Ops monthly: sales columns ---------- */
.ops.mps th.sales, .ops.mps td.sales { background: #FBF7EF; }
.ops.mps th.sales.cur, .ops.mps td.sales.cur { background: #FFF7EA; }
.ops.mps th.fc, .ops.mps td.fc { background: var(--teal-soft); cursor: pointer; }
.ops.mps th.fc { position: relative; }
.ops.mps td.fc .cell { color: var(--teal-dark); font-weight: 600; }
.ops.mps th .sub { font-size: 10px; font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.ops.mps td.key { background: #FFFCF7; }

.ship-lines { flex-direction: column; align-items: stretch; gap: 5px; }
.ship-line { display: flex; gap: 6px; align-items: center; }
.ship-line select { flex: 1; min-width: 0; font-size: 13px; }
.ship-line.bad select { border-color: var(--red); }
.ship-line .x { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 15px; }
#ss-notify-wrap { margin-right: 8px; font-size: 13px; }

.ship-match { margin: 6px 0 4px; font-size: 12.5px; background: var(--teal-soft); color: var(--teal-dark); border-radius: 8px; padding: 5px 9px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ship-match .btn { padding: 1px 8px; }

/* ---------- organogram: keep the tree against the left edge, centre the tiles that head a branch ---------- */
.mm.down { display: flex; flex-direction: column; align-items: flex-start; }
.mm.down > .mm-node.root { align-items: flex-start; }
.mm.down .mm-node { align-items: flex-start; }
.mm.down .mm-node > .mm-tile { align-self: center; }              /* a parent sits over the middle of its own row block */
.mm.down .mm-kids.chunked { align-items: flex-start; }
.mm.down .mm-kids.chunked > .mm-row > .mm-tile.ghost { align-self: flex-start; }
.mm-tile.root, .mm-tile.team, .mm-tile.ghost { text-align: center; }
.mm-tile.root .mm-name, .mm-tile.team .mm-name, .mm-tile.ghost .mm-name { justify-content: center; }
.mm-tile.root .mm-name b, .mm-tile.team .mm-name b, .mm-tile.ghost .mm-name b { flex: 0 1 auto; }
.mm.down .mm-node.team > .mm-tile, .mm.down .mm-node.root > .mm-tile { align-self: center; }

/* ---------- Send samples: a clearer "send this one" switch ---------- */
.send-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; padding: 3px 11px 3px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; color: var(--ink-2); transition: background .15s, border-color .15s, color .15s; }
.send-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.send-toggle .dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--ink-3); position: relative; flex: none; transition: border-color .15s, background .15s; }
.send-toggle.on { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-dark); font-weight: 600; }
.send-toggle.on .dot { border-color: var(--teal); background: var(--teal); }
.send-toggle.on .dot::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.send-toggle.held { background: var(--amber-soft); border-color: #E5C08A; color: #7A4A0E; }
.send-toggle.held .dot { border-color: #C08A3E; }
.send-toggle:hover { border-color: var(--teal); }
.send-toggle:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- charts ---------- */
.chart-bars { display: flex; gap: 6px; align-items: flex-end; height: 130px; }
.chart-bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.chart-bars .stack { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.chart-bars .stack i { display: block; width: 46%; border-radius: 3px 3px 0 0; min-height: 2px; }
.chart-bars .lbl { font-size: 11px; color: var(--ink-2); }
.chart-band { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line-2); }
.chart-band i { display: block; height: 100%; }
.chart-key { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.chart-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
td.num.red { color: var(--red); }

/* ---------- customer map ---------- */
.map-layout { grid-template-columns: minmax(360px, 620px) 1fr; }
@media (max-width: 1000px) { .map-layout { grid-template-columns: 1fr; } }
.uk-map { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.uk-map .pin { opacity: .78; cursor: pointer; transition: opacity .15s; }
.uk-map .pin:hover { opacity: 1; stroke: var(--ink); stroke-width: 1.5; }
.uk-map .pin.flagged { stroke: var(--red); stroke-width: 2; }
.uk-map .region { fill: var(--ink-3); font-size: 12px; font-family: var(--serif); opacity: .55; text-anchor: middle; }
.uk-map .gap circle { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 2 2; }
.uk-map .gap text { fill: var(--ink-3); font-size: 9px; }
.map-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }
.map-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.map-key i.ring { border: 2px solid var(--red); background: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- prospecting & win stories ---------- */
.wins-box { background: var(--teal-soft); border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: 13px; color: var(--teal-dark); }
.wins-box .win { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 5px; }
.wins-box .win span { flex: 1; min-width: 200px; }
.wins-box .muted { flex-basis: 100%; font-size: 11.5px; }
.tile.t-campaign::before { background: linear-gradient(90deg, #7A3E8F, #C79BD6); }

/* ---------- brand workspace: big tiles, page reader, design board ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.big-tile { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 18px; border-radius: 20px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); background: var(--panel); position: relative; overflow: hidden; min-height: 190px; transition: transform .14s ease, box-shadow .14s ease; }
.big-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20,32,43,.12); }
.big-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--teal); }
.big-tile.green::before { background: linear-gradient(90deg, #2F5A1F, #9DBB6A); }
.big-tile.plum::before { background: linear-gradient(90deg, #7A3E8F, #C79BD6); }
.big-tile.amber::before { background: linear-gradient(90deg, #C2691A, #E5A24B); }
.big-tile.red::before { background: linear-gradient(90deg, #B42318, #E88C7D); }
.big-tile.teal::before { background: linear-gradient(90deg, #1E5F74, #6FB1C4); }
.big-tile.board::before { background: linear-gradient(90deg, #2F5A1F, #E5A24B, #7A3E8F); }
.big-tile .ic { font-size: 34px; line-height: 1; margin-top: 6px; }
.big-tile h2 { font-family: var(--serif); font-size: 21px; margin: 4px 0 0; }
.big-tile p { color: var(--ink-2); font-size: 13.5px; margin: 0; flex: 1; }
.big-tile .foot { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.page-ic { font-size: 26px; }
.page-body { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 30px 40px; max-width: 900px; font-size: 15px; line-height: 1.62; }
.page-body h1 { font-family: var(--serif); font-size: 30px; margin: 0 0 6px; }
.page-body h2 { font-family: var(--serif); font-size: 22px; margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.page-body h3 { font-family: var(--serif); font-size: 17px; margin: 18px 0 4px; }
.page-body h4 { font-size: 14px; margin: 14px 0 3px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.page-body p { margin: 0 0 10px; }
.page-body ul, .page-body ol { margin: 0 0 12px; padding-left: 22px; }
.page-body li { margin: 3px 0; }
.page-body ul.checks { list-style: none; padding-left: 2px; }
.page-body ul.checks .box { display: inline-block; width: 15px; height: 15px; border: 1.5px solid var(--line-2); border-radius: 4px; margin-right: 8px; text-align: center; font-size: 11px; line-height: 13px; vertical-align: -2px; }
.page-body ul.checks li.done { color: var(--ink-3); text-decoration: line-through; }
.page-body blockquote { margin: 0 0 14px; padding: 12px 18px; background: var(--bg); border-left: 4px solid var(--teal); border-radius: 0 10px 10px 0; font-family: var(--serif); font-size: 16px; }
.page-body blockquote p { margin: 0; }
.page-body table.md { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 13.5px; }
.page-body table.md th { text-align: left; background: var(--bg); padding: 7px 10px; border-bottom: 2px solid var(--line); }
.page-body table.md td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.page-body code { background: var(--bg); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
.page-body.green h2 { border-color: #9DBB6A; } .page-body.plum h2 { border-color: #C79BD6; } .page-body.amber h2 { border-color: #E5A24B; } .page-body.red h2 { border-color: #E88C7D; }
.page-edit { width: 100%; min-height: 60vh; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; }
.board-cols { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; }
@media (max-width: 1200px) { .board-cols { grid-template-columns: repeat(3, minmax(190px, 1fr)); } }
@media (max-width: 700px) { .board-cols { grid-template-columns: 1fr; } }
.board-cols .col { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.board-cols .col-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.board-cols .col-head h2 { font-family: var(--serif); font-size: 15px; margin: 0; }
.board-cols .col-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 10px; }
.board-cols .col-body.over { background: var(--teal-soft); outline: 2px dashed var(--teal); }
.board-cols .col-empty { font-size: 12px; color: var(--ink-3); padding: 8px; }
.job { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: grab; font-size: 13px; }
.job:hover { border-color: var(--teal); }
.job.dragging { opacity: .4; }
.job.late { border-left: 3px solid var(--red); }
.job-top { display: flex; gap: 6px; align-items: baseline; justify-content: space-between; }
.job-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
@media print { .rail, .view-head .toolbar, .btn { display: none !important; } .page-body { border: 0; padding: 0; } }
.big-tile.events::before { background: linear-gradient(90deg, #1E5F74, #E5A24B); }
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.ev-card { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; cursor: pointer; font-size: 13px; background: var(--panel); }
.ev-card:hover { border-color: var(--teal); }
.ev-card.done { opacity: .65; }
.ev-card.live { border-left: 3px solid var(--red); }
.ev-card .ev-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }
tr.muted-row td { opacity: .62; }
.stabs.small button { font-size: 12.5px; padding: 4px 10px; }

/* ---------- real checkboxes on brand pages ---------- */
.page-body ul.checks li { display: flex; align-items: flex-start; gap: 9px; padding: 2px 0; }
.page-body ul.checks .box { width: 19px; height: 19px; flex: none; margin-top: 1px; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--panel); cursor: pointer; font-size: 12px; line-height: 1; color: #fff; display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; padding: 0; }
.page-body ul.checks .box:hover { border-color: var(--teal); }
.page-body ul.checks .box[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); }
.page-body ul.checks li.done .txt { color: var(--ink-3); text-decoration: line-through; }
.page-progress { display: flex; align-items: center; gap: 12px; max-width: 900px; margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); }
.page-progress .bar { flex: 1; height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.page-progress .bar i { display: block; height: 100%; background: var(--teal); transition: width .2s ease; }
@media print { .page-progress { display: none; } .page-body ul.checks .box { border-color: #999; } }
#codes-bank.flash { outline: 3px solid var(--teal); outline-offset: 3px; transition: outline-color 1.2s ease; }
.og-more { border-top: 1px solid var(--line); padding: 10px; }
.og-more .hidden { display: none; }
.og-more-q { width: 100%; margin: 8px 0 4px; font-size: 13px; }
.og-more table { font-size: 13px; }
.og-more td { padding: 5px 8px; }
tr.other-partner td { background: #FFF7EA; }

/* ---------- feed, trends, lab ---------- */
.trend-sum { background: var(--teal-soft); color: var(--teal-dark); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; margin: 0 0 10px; }
.trend-list { list-style: none; margin: 0; padding: 0; }
.trend-list li { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.trend-list li:last-child { border-bottom: 0; }
.panel.trend .panel-head h2 { font-size: 16px; }

/* ---------- picking several orders at once ---------- */
.bulk-bar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--teal-soft); border: 1px solid var(--teal); border-radius: 12px; padding: 8px 14px; margin-bottom: 10px; }
.oc-all { display: inline-flex; margin: 0 0 10px 4px; font-size: 13px; color: var(--ink-2); }
.order-card .panel-head .check.pick { margin: 0 4px 0 0; }
.order-card.picked { outline: 2px solid var(--teal); outline-offset: 1px; }

/* ---------- tidying the menu ---------- */
.rail-edit { display: block; width: 100%; margin-top: 10px; padding: 5px 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-2); cursor: pointer; }
.rail-edit:hover { border-color: var(--teal); color: var(--teal-dark); }
.rail-edit.quiet { margin-top: 5px; border-style: dashed; }
.nav-tick { width: 15px; height: 15px; margin-right: 7px; padding: 0; flex: none; border: 1.5px solid var(--ink-3); border-radius: 4px; background: var(--teal); cursor: pointer; vertical-align: -2px; }
.rail a.nav-hidden .nav-tick { background: transparent; }
.rail a.nav-hidden { opacity: .45; text-decoration: line-through; }
body.rail-editing .rail a[data-view] { display: flex; align-items: center; }
body.rail-editing .rail { outline: 2px dashed var(--teal); outline-offset: -4px; border-radius: 10px; }

/* ---------- Today: the single queue ---------- */
.today-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.today-list { display: flex; flex-direction: column; gap: 8px; }
.job-card { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-decoration: none; color: var(--ink); transition: border-color .12s, transform .12s; }
.job-card:hover { border-color: var(--teal); transform: translateX(2px); }
.job-card .ic { font-size: 19px; }
.job-card .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.job-card .note, .job-card .where { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card .where { color: var(--ink-3); }
.job-card .do { font-size: 13px; color: var(--teal-dark); background: var(--teal-soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.job-card .when { font-size: 12px; color: var(--ink-3); min-width: 58px; text-align: right; }
.job-card.k-order .do { background: var(--amber-soft); color: #7A4A0E; }
.job-card.k-account .do { background: #FBE9E7; color: #B42318; }
@media (max-width: 800px) { .job-card { grid-template-columns: 26px 1fr; } .job-card .do, .job-card .when { display: none; } }
.empty.big { padding: 48px 20px; }

/* ---------- what is new, marked in pink until the team has seen it ---------- */
/* What changed in this version. Black rather than pink: it reads as a note from us, not an alarm. */
body.whats-new [data-new] { outline: 2px solid var(--ink, #12100C); outline-offset: 2px; border-radius: 8px; position: relative; }
body.whats-new .rail a[data-new] { outline-offset: -2px; }
body.whats-new [data-new]::after { content: "new"; position: absolute; top: -9px; right: -6px; background: var(--ink, #12100C); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 1px 5px; border-radius: 999px; text-transform: uppercase; pointer-events: none; }
body.whats-new .stabs [data-new]::after, body.whats-new .rail a[data-new]::after { top: -6px; right: 2px; }
.rail a.off-job, .rail a.merged-away { display: none; }
/* .rail a sets display:flex, which beats the hidden attribute — so a hidden link (folded away, tidied
   away, not this person's work) has to be told twice. Without this the fold changes nothing you can see. */
.rail a[hidden], .rail .rail-sec[hidden] { display: none !important; }
body.rail-editing .rail a.off-job, body.rail-editing .rail a.merged-away { display: flex; opacity: .5; }
.stabs.sub-nav { margin: -6px 0 14px; }
.stabs.small button { font-size: 12.5px; padding: 4px 11px; }
.stabs.small { margin: -6px 0 12px; }
.rail-all { margin: 6px 12px 0; font-size: 12px; color: var(--ink-2); }
.panel.review .review-actions { margin-top: 10px; gap: 8px; }
.panel.review .hint-box { margin-bottom: 10px; }

/* ---------- list screens: Accounts, Activity, Contacts ----------
   These are lists you work through, not pages you read. Each one opens with a quiet reading of
   what is in front of you — a smaller, cream sibling of the green board on an account page, so the
   account page stays the loud one — then the controls that narrow the list, then the list itself. */
.list-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.list-board > div { background: var(--panel); padding: 12px 16px 11px; }
.list-board .n { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 40; }
.list-board .l { color: var(--ink-2); font-size: 12.5px; margin-top: 3px; }
.list-board .sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.list-board .lead .n { color: var(--teal-dark, #2E4A2E); }
.list-board .warn .n { color: var(--amber-ink, #8A5A00); }
.list-board button.n { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: inherit; }
.list-board button.n:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Narrowing the list and acting on it are different jobs, so they stop looking the same. */
.toolbar .filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 4px 6px; }
.toolbar .filters select, .toolbar .filters input { border-color: transparent; background: transparent; }
.toolbar .filters select:focus, .toolbar .filters input:focus { border-color: var(--line-2); background: var(--panel); }
.toolbar .filters .clear { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 12.5px; padding: 2px 6px; }
.toolbar .filters .clear:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 900px) { .list-board { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sequences: what happened after a batch went out ----------
   The funnel is the point of the screen, so it gets the only strong colour here; the segments
   underneath are quiet until one of them has people in it. */
.sq-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sq-step .sq-bar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.sq-step .sq-bar span { display: block; height: 100%; background: var(--sage); border-radius: 999px; }
.sq-step.lead .sq-bar span { background: var(--teal-dark); }
.sq-step .sq-n { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.sq-step .sq-n small { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sq-step .sq-l { color: var(--ink-2); font-size: 12.5px; }
.sq-segments { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-seg { display: flex; align-items: baseline; gap: 8px; border: 1px solid var(--line-2); background: var(--panel); border-radius: 10px; padding: 9px 14px; cursor: pointer; font: inherit; }
.sq-seg b { font-family: var(--serif); font-size: 20px; }
.sq-seg span { color: var(--ink-2); font-size: 13px; }
.sq-seg:hover:not(.empty) { border-color: var(--teal-dark); background: var(--teal-soft); }
.sq-seg.empty { opacity: .5; cursor: default; }
@media (max-width: 900px) { .sq-funnel { grid-template-columns: repeat(2, 1fr); } }
.pc-rename { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.pc-rename input { font-size: 12.5px; padding: 3px 7px; }

/* A job that has stopped is worth a quiet word in the rail rather than a scream. */
.rail-jobs { display: block; margin: 6px 10px 0; padding: 5px 8px; border-radius: 8px; background: var(--amber-soft, #F6EAD2); color: var(--amber-ink, #8A5A00); font-size: 12px; text-decoration: none; }
.rail-jobs:hover { text-decoration: underline; }
.seg-mode { display: flex; gap: 18px; margin: 4px 0 10px; }
.team-mail { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; padding-right: 10px; border-right: 1px solid var(--line); }
.team-mail .muted { font-size: 12.5px; margin-right: 2px; }
.rail-me { padding: 8px 10px 4px; font-size: 12.5px; color: var(--ink-2); }
.rail-me .field { margin: 0; } .rail-me .field span { font-size: 11.5px; }
.rail-me select { width: 100%; font-size: 12.5px; }
.access-grid th { text-align: center; font-size: 12.5px; }
.access-grid td.num { text-align: center; }
.mm-links { font-size: 11px; color: hsl(var(--hue) 40% 38%); margin-top: 3px; cursor: help; }
.og-linkset { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.og-linkset:last-child { border-bottom: 0; }

/* A section heading in the menu folds its screens away; the little mark says which way it is. */
.rail-sec.foldable { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.rail-sec.foldable::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink-3); transition: transform .15s; }
.rail-sec.foldable.is-folded::before { transform: rotate(-90deg); }
.rail-sec.foldable:hover { color: var(--ink); }
.team-ticks { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.team-ticks .check { margin: 0; font-size: 13px; }

/* ---------- a document beside the work (the PO next to what we read from it) ---------- */
#doc-pane { position: fixed; top: 0; right: 0; bottom: 0; width: 620px; background: var(--panel); border-left: 1px solid var(--line-2); box-shadow: -8px 0 24px rgba(20,32,43,.10); display: flex; flex-direction: column; z-index: 60; }
#doc-pane .dp-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
#doc-pane .dp-head select { max-width: 200px; font-size: 12.5px; }
#doc-pane .dp-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; }
#doc-pane .dp-grip:hover { background: var(--teal-soft); }
#doc-pane iframe { flex: 1; width: 100%; border: 0; background: #fff; }
body.has-doc-pane { padding-right: var(--doc-pane-w, 620px); }
body.has-doc-pane .rail { z-index: 61; }
@media (max-width: 1100px) { body.has-doc-pane { padding-right: 0; } #doc-pane { width: 100% !important; } }
#doc-pane #dp-text { flex: 1; overflow: auto; background: #fff; padding: 12px 14px; }
#doc-pane #dp-text pre { white-space: pre-wrap; font: 13px/1.55 ui-monospace, monospace; margin: 0; }
#doc-pane .stabs.small button { padding: 3px 10px; font-size: 12px; }
#doc-pane #dp-size { font-size: 12px; white-space: nowrap; }

/* Numbering a list of people: the count is the point, so it is quiet but always there. */
.row-n { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; padding-right: 2px; }

/* ---------- an account's guide: written once, read before every meeting ---------- */
.guide-body { max-width: 80ch; }
.guide-body h1 { font-family: var(--serif); font-size: 26px; margin: 0 0 8px; }
.guide-body h2 { font-family: var(--serif); font-size: 20px; margin: 26px 0 6px; }
.guide-body h3 { font-size: 15px; margin: 18px 0 4px; }
.guide-body p, .guide-body li { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.guide-body table { border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.guide-body th, .guide-body td { border: 1px solid var(--line-2); padding: 5px 8px; vertical-align: top; text-align: left; }
.guide-body th { background: var(--bg); }
.guide-body hr { border: 0; border-top: 1px solid var(--line-2); margin: 22px 0; }

/* ---------- sequences as a map: a batch opens into the groups of people it produced ---------- */
.mm-tile.sq-batch { width: 260px; cursor: pointer; }
.mm-tile.sq-batch:hover { border-color: var(--teal); }
.mm-tile.sq-batch .mm-meta a { color: var(--ink-3); }
.mm-node.open > .mm-tile.sq-batch { background: var(--teal-soft); }
.mm-tile.team.sq-group { width: 300px; }
.mm-tile.sq-group .mm-title { font-size: 12.5px; line-height: 1.4; margin-top: 4px; }
.sq-group-btns { margin-top: 8px; }
.sq-toggle { padding: 2px 8px; min-height: 0; font-size: 12px; }
.panel.vote { border-left: 4px solid var(--teal); }
.vote-why { margin: 6px 0 0; padding-left: 18px; }
.vote-why li { margin-bottom: 4px; color: var(--ink-2); }

/* ---------- boards: a map for thinking, a plan for doing ---------- */
.bd-tile { cursor: pointer; padding-right: 26px; }
.bd-tile:hover { border-color: var(--teal); }
.bd-tile.done { opacity: .55; }
.bd-tile.done .mm-name { text-decoration: line-through; }
.bd-tile.dropped { opacity: .4; }
.bd-tile .mm-meta .late { color: var(--red); font-weight: 600; }
.bd-plus { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-3); font: 600 13px/1 inherit; cursor: pointer; padding: 0; }
.bd-plus:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
table.plan input, table.plan select { width: auto; padding: 4px 6px; font-size: 13px; }
table.plan input.late { border-color: var(--red); color: var(--red); }
.gantt { position: relative; height: 14px; background: var(--bg); border-radius: 7px; overflow: hidden; }
.gantt-bar { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: hsl(100 40% 60%); }
.gantt-bar.todo { background: hsl(200 45% 65%); } .gantt-bar.doing { background: var(--teal); } .gantt-bar.done { background: hsl(100 25% 75%); } .gantt-bar.dropped { background: var(--line-2); }
.gantt-bar.late { background: var(--red); }

/* ---------- the board canvas: ideas wherever people put them ---------- */
.bd-wrap { position: relative; overflow: auto; max-height: 76vh; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 22px 22px; cursor: grab; }
.bd-wrap:active { cursor: grabbing; }
.bd-canvas { position: relative; }
.bd-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.bd-lines .bd-line { fill: none; stroke: hsl(100 25% 70%); stroke-width: 1.5; }
.bd-lines .bd-tie { fill: none; stroke: hsl(280 35% 60%); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bd-card { position: absolute; background: hsl(var(--hue) 45% 96%); border: 1px solid hsl(var(--hue) 35% 78%); border-left: 4px solid hsl(var(--hue) 45% 45%); border-radius: 12px; padding: 8px 26px 6px 12px; box-shadow: 0 1px 2px rgba(20,32,43,.08); cursor: grab; user-select: none; touch-action: none; }
.bd-card:hover { box-shadow: 0 3px 10px rgba(20,32,43,.14); }
.bd-card.dragging { cursor: grabbing; box-shadow: 0 8px 22px rgba(20,32,43,.2); z-index: 5; }
.bd-card.size-1 { width: 150px; font-size: 12.5px; padding: 6px 24px 6px 10px; }
.bd-card.size-2 { width: 200px; }
.bd-card.size-3 { width: 260px; font-size: 16px; padding: 12px 28px 10px 14px; border-left-width: 6px; }
.bd-card.root { background: hsl(var(--hue) 45% 45%); color: #fff; border-color: hsl(var(--hue) 45% 40%); font-family: var(--serif); font-size: 17px; }
.bd-card.root .bd-plus { color: #fff; background: hsl(var(--hue) 45% 40%); border-color: hsl(var(--hue) 45% 35%); }
.bd-card.starred { box-shadow: 0 0 0 2px hsl(45 90% 55%), 0 1px 2px rgba(20,32,43,.08); }
.bd-card.done { opacity: .5; } .bd-card.done .bd-card-title { text-decoration: line-through; }
.bd-card.dropped { opacity: .35; }
.bd-card-title { font-weight: 600; line-height: 1.3; }
.bd-card-kind { font-size: 11px; color: hsl(var(--hue) 40% 38%); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.bd-card .mm-meta { font-size: 11.5px; margin-top: 4px; color: var(--ink-3); }
.bd-card .mm-meta .late { color: var(--red); font-weight: 600; }
.hue-row { display: inline-flex; gap: 6px; align-items: center; height: 38px; }
.hue-row .hue { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; background: hsl(var(--hue) 45% 55%); cursor: pointer; padding: 0; }
.hue-row .hue.on { border-color: var(--ink); }
.mm-tile.root.person { cursor: pointer; }
.mm-tile.root.person .mm-meta { color: rgba(255,255,255,.75); font-size: 11.5px; margin-top: 2px; }
tfoot td { border-top: 2px solid var(--line-2); padding-top: 10px; }
/* moving a person on the chart to change who they report to */
.mm-tile.lifting { opacity: .85; box-shadow: 0 10px 26px rgba(20,32,43,.25); z-index: 30; position: relative; cursor: grabbing; }
.mm-tile.drop-here { outline: 3px solid var(--teal); outline-offset: 2px; }
body.mm-reparenting .mm-tile:not(.lifting) { cursor: copy; }

/* the queue below the desk: quiet rows, the subject the thing to read */
#rest table td { padding: 10px 12px; }
#rest tbody tr:hover { background: var(--bg); }
#rest td:nth-child(4) { color: var(--ink-2); }
.wait { display: inline-block; font-variant-numeric: tabular-nums; }
.rail-me .warn-link { color: var(--amber); font-weight: 600; }

/* ---------- a chart as a canvas: calm tiles, team as colour, placed by hand ---------- */
.oc-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.oc-team { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); padding: 3px 10px 3px 8px; border-radius: 999px; background: hsl(var(--hue) 45% 95%); }
.oc-team::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--hue) 40% 50%); }
.oc-wrap { position: relative; overflow: auto; max-height: 78vh; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 24px 24px; cursor: grab; }
.oc-wrap:active { cursor: grabbing; }
.oc-canvas { position: relative; }
.oc-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.oc-line { fill: none; stroke: hsl(var(--hue) 30% 72%); stroke-width: 1.5; }
.oc-card { position: absolute; width: 190px; min-height: 56px; padding: 9px 12px; background: #fff; border: 1px solid hsl(var(--hue) 30% 86%); border-radius: 12px; box-shadow: 0 1px 2px rgba(20,32,43,.05); user-select: none; touch-action: none; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.oc-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: hsl(var(--hue) 40% 55%); }
.oc-card:hover { border-color: hsl(var(--hue) 35% 70%); box-shadow: 0 4px 14px rgba(20,32,43,.09); }
.oc-card.can { cursor: grab; }
.oc-card.dragging { cursor: grabbing; box-shadow: 0 10px 26px rgba(20,32,43,.18); z-index: 5; }
.oc-card.drop-here { outline: 3px solid var(--teal); outline-offset: 3px; }
.oc-card.top { background: var(--teal); border-color: var(--teal); color: #fff; }
.oc-card.top::before { display: none; }
.oc-card.top .oc-title { color: rgba(255,255,255,.8); }
.oc-name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.oc-title { font-size: 12px; color: var(--ink-3); line-height: 1.3; margin-top: 2px; }

/* the few seconds in which a sent reply can still be stopped */
#undo-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; background: var(--ink); color: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(20,32,43,.25); font-size: 14px; overflow: hidden; }
#undo-bar .btn { background: #fff; color: var(--ink); border-color: #fff; font-weight: 600; }
#undo-bar.done { padding-right: 18px; }
#undo-bar .undo-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); }
#undo-bar .undo-fill { display: block; height: 100%; width: 100%; background: hsl(100 45% 55%); transform-origin: left; animation: undo-run linear forwards; }
@keyframes undo-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Cc our people ---------- */
.cc-line { display: flex; gap: 6px; align-items: center; }
.cc-line input { flex: 1; }
.reply-meta label [data-cc-pick] { margin-left: 4px; white-space: nowrap; }
.cc-pop { position: absolute; z-index: 80; width: 330px; max-height: 70vh; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 12px 32px rgba(20,32,43,.16); padding: 10px 12px 8px; }
.cc-group { padding: 6px 0 8px; border-bottom: 1px solid var(--line); }
.cc-group:last-child { border-bottom: 0; }
.cc-group .check { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 6px; font-size: 13.5px; }
.cc-all { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 6px; margin-bottom: 2px; font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-dark); cursor: pointer; border-radius: 6px; }
.cc-all:hover { background: var(--teal-soft); }
.cc-rest { display: block; padding: 4px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; font-size: 12px; }