/* Work mode: the screen is Harbour & Co. A query studio, an inbox and an object explorer. */

body.work {
  --chrome: #eeeef2;
  --chrome-2: #f5f5f7;
  --edge: #ccced8;
  --accent: #007acc;
  --sel: #cce8ff;
  --ui: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --code: Consolas, 'Cascadia Mono', 'JetBrains Mono', ui-monospace, monospace;
  margin: 0; height: 100vh; overflow: hidden; background: var(--chrome); font-family: var(--ui); font-size: 13px; color: #1e1e1e;
}
body.work button { font-family: var(--ui); }

/* ---------- clock in / out ---------- */
.clockin, .clockout {
  position: fixed; inset: 0; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 48px;
  padding: 0 var(--gutter); color: #fff;
  background: linear-gradient(120deg, rgba(10, 22, 48, .92), rgba(16, 42, 92, .82)), #0b1733 url('/img/hero.png') center / cover;
}
.clockin[hidden], .clockout[hidden], .desk[hidden] { display: none; }
.co-name { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.big-time { font-size: clamp(72px, 9vw, 140px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; margin-top: 12px; font-family: var(--ui); }
.big-date { font-size: 22px; opacity: .85; margin-top: 6px; }
.ci-note { max-width: 440px; font-size: 16px; line-height: 1.55; opacity: .85; margin: 28px 0 22px; }
.ci-back { font-size: 14px; opacity: .7; }
.ci-back:hover { opacity: 1; }
.clockin-card, .clockout-card { background: #fff; color: var(--ink); border-radius: 14px; padding: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); max-width: 420px; width: 100%; justify-self: start; }
.clockin-card h1, .clockout-card h1 { font-size: 26px; margin-bottom: 18px; }
.field { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.field input { display: block; width: 100%; height: 40px; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font: inherit; font-weight: 400; font-size: 15px; color: var(--ink); }
.field input:focus { outline: 2px solid var(--blue-100); border-color: var(--blue); }
.days { display: grid; gap: 8px; margin-bottom: 20px; }
.day { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.day strong { font-size: 14px; }
.day span { font-size: 12.5px; color: var(--muted); }
.day .tag { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.day.active { border-color: var(--blue); background: var(--blue-50); }
.day.locked { cursor: pointer; opacity: .75; }
.ci-small { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; text-align: center; }
.clockout { grid-template-columns: 1fr; justify-items: center; }
.clockout-card { justify-self: center; max-width: 460px; }
.co-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.co-stats div { background: var(--bg); border-radius: 10px; padding: 12px; text-align: center; font-size: 12px; color: var(--muted); }
.co-stats b { display: block; font-size: 24px; color: var(--ink); }
.co-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- the window ---------- */
.desk { position: fixed; inset: 0; display: grid; grid-template-rows: 32px 36px 1fr 24px; }
.titlebar { display: flex; align-items: center; gap: 10px; padding: 0 0 0 10px; background: #fff; border-bottom: 1px solid var(--edge); font-size: 12px; color: #444; }
.app-ico { width: 16px; height: 16px; border-radius: 3px; background: linear-gradient(135deg, #5b7cff, #1f5eff); }
.titlebar .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar .clock { margin-left: auto; font-weight: 600; color: #222; font-variant-numeric: tabular-nums; }
.tb-btn { height: 32px; border: 0; background: #c42b1c; color: #fff; padding: 0 16px; font-size: 12px; cursor: pointer; }
.tb-btn:hover { background: #a32315; }

.toolbar { display: flex; align-items: center; gap: 4px; padding: 0 8px; background: var(--chrome); border-bottom: 1px solid var(--edge); }
.tool { height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid transparent; border-radius: 3px; background: transparent; font-size: 12.5px; color: #1e1e1e; cursor: pointer; }
.tool:hover { background: #fcfcfc; border-color: var(--edge); }
.tool .ti { font-size: 13px; }
.tool .play { color: #2e8b2e; }
.tool.exec { font-weight: 600; }
.tool.on { background: var(--sel); border-color: #99d1ff; }
.toolbar .sep { width: 1px; height: 18px; background: var(--edge); margin: 0 4px; }
.toolbar .spacer, .statusbar .spacer { flex: 1; }
.db-pick select { height: 24px; font: 12.5px var(--ui); border: 1px solid var(--edge); background: #fff; color: #1e1e1e; padding: 0 6px; min-width: 120px; }
.kb-hint { font-size: 11.5px; color: #6a6a6a; white-space: nowrap; }

.panes { display: grid; grid-template-columns: 340px 230px minmax(0, 1fr); min-height: 0; }
.pane { display: flex; flex-direction: column; min-height: 0; background: #fff; border-right: 1px solid var(--edge); }
.pane-head { height: 26px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--chrome); border-bottom: 1px solid var(--edge); font-size: 12px; font-weight: 600; color: #333; }
.pane-head .count { background: var(--accent); color: #fff; border-radius: 9px; font-size: 11px; padding: 0 6px; font-weight: 600; }
.pane-head .count:empty { display: none; }

/* ---------- inbox ---------- */
.mail-list { list-style: none; margin: 0; padding: 0; max-height: 34%; overflow-y: auto; flex: none; border-bottom: 1px solid var(--edge); }
.mail { display: grid; grid-template-columns: 30px 1fr auto; gap: 2px 8px; padding: 8px 10px; border-bottom: 1px solid #f0f0f3; cursor: pointer; position: relative; }
.mail:hover { background: #f3f8fd; }
.mail.open { background: var(--sel); }
.mail .av { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.mail .who { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail .when { font-size: 11px; color: #777; }
.mail .subj { grid-column: 2 / span 2; font-size: 12px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail.unread .who::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.mail.closed .who, .mail.closed .subj { color: #8a8a8a; }
.mail.closed .when::after { content: ' ✓'; color: var(--green); font-weight: 700; }
.mail.locked { cursor: pointer; opacity: .55; }
.mail.locked .when::after { content: ' 🔒'; }
.mail-group { padding: 6px 10px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6a6a6a; background: var(--chrome-2); border-bottom: 1px solid #f0f0f3; }

.thread { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #fafafa; }
.msg-row { display: flex; gap: 8px; align-items: flex-start; }
.msg-row.me { flex-direction: row-reverse; }
.msg-row .av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; }
.bubble { background: #fff; border: 1px solid #e3e3e8; border-radius: 10px; padding: 8px 11px; max-width: 86%; font-size: 13px; line-height: 1.45; }
.bubble .meta { font-size: 11px; color: #777; margin-bottom: 3px; }
.bubble .meta b { color: #222; }
.bubble ul { margin: 6px 0 0; padding-left: 18px; color: #333; }
.msg-row.me .bubble { background: #e6f2fb; border-color: #c4def3; }
.bubble.bad { border-left: 3px solid #f59e0b; }
.bubble.good { border-left: 3px solid var(--green); }
.attach { margin-top: 6px; border: 1px solid #c4def3; border-radius: 6px; background: #fff; overflow: hidden; }
.attach .att-head { font-size: 11.5px; padding: 4px 8px; background: #f3f8fd; color: #345; border-bottom: 1px solid #dbe9f5; }
.attach table { border-collapse: collapse; font-size: 11px; width: 100%; }
.attach th, .attach td { padding: 2px 6px; border-bottom: 1px solid #eef2f6; text-align: left; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.attach th { color: #555; font-weight: 600; }
.sys-line { text-align: center; font-size: 11.5px; color: #777; }
.sys-line.closed { color: var(--green); font-weight: 600; }
.typing { font-size: 12px; color: #777; font-style: italic; padding-left: 34px; }
.locked-card { background: #fff; border: 1px dashed #f0c46a; border-radius: 10px; padding: 14px; font-size: 13px; }
.locked-card h3 { font-size: 14px; margin-bottom: 6px; }
.locked-card ol { margin: 8px 0 12px; padding-left: 18px; color: #555; max-height: 180px; overflow-y: auto; }
.thread-actions { flex: none; padding: 10px; border-top: 1px solid var(--edge); background: #fff; display: grid; gap: 6px; }
.thread-actions:empty { display: none; }
.thread-actions .btn { height: 34px; width: 100%; font-size: 13px; }
.thread-actions .row { display: flex; justify-content: space-between; font-size: 12px; }
.thread-actions .row button, .thread-actions .row a { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font-size: 12px; }
.thread-actions .why { font-size: 11.5px; color: #777; text-align: center; }

/* ---------- object explorer ---------- */
.tree { flex: 1; overflow: auto; padding: 4px 0; font-size: 12.5px; user-select: none; }
.node { display: flex; align-items: center; gap: 4px; padding: 1px 6px; white-space: nowrap; cursor: default; line-height: 20px; }
.node:hover { background: #e5f3ff; }
.node.sel { background: var(--sel); }
.node .tw { width: 12px; text-align: center; color: #555; font-size: 11px; cursor: pointer; flex: none; }
.node .ic { width: 14px; text-align: center; flex: none; font-size: 11px; }
.node .ty { color: #777; }
.node.col { cursor: pointer; }
.node .key { color: #b8860b; font-size: 10px; }

.ctx-menu { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--edge); box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 3px 0; min-width: 210px; font-size: 12.5px; }
.ctx-menu[hidden] { display: none; }
.ctx-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 5px 16px; cursor: pointer; font-size: 12.5px; }
.ctx-menu button:hover { background: var(--sel); }
.ctx-menu hr { border: 0; border-top: 1px solid #e5e5e5; margin: 3px 0; }

/* ---------- documents ---------- */
.workarea { display: grid; grid-template-rows: 26px minmax(120px, 1fr) auto; min-height: 0; min-width: 0; background: #fff; }
.workarea.no-results { grid-template-rows: 26px 1fr 0; }
.doc-tabs { display: flex; align-items: flex-end; background: var(--chrome); border-bottom: 2px solid var(--accent); overflow-x: auto; }
.doc-tab { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 6px 0 10px; font-size: 12px; color: #333; cursor: pointer; white-space: nowrap; border: 0; background: transparent; }
.doc-tab:hover { background: #fff; }
.doc-tab.active { background: var(--accent); color: #fff; }
.doc-tab .x { width: 16px; height: 16px; border-radius: 2px; display: grid; place-items: center; font-size: 11px; opacity: .7; }
.doc-tab .x:hover { background: rgba(0,0,0,.12); opacity: 1; }

.ssms-editor { position: relative; display: grid; grid-template-columns: 44px 1fr; min-height: 0; height: auto !important;
  font-family: var(--code); font-size: 14px; line-height: 19px; font-variant-ligatures: none; }
.ssms-editor .gutter { padding: 6px 0; text-align: right; color: #2b91af; background: #fff; border-right: 1px solid #e8e8e8; border-radius: 0; overflow: hidden; user-select: none; }
.ssms-editor .gutter div { padding-right: 10px; }
.ssms-editor .code pre, .ssms-editor .code textarea { padding: 6px 10px; }
.ssms-editor .kw { color: #0000ff; font-weight: 400; }
.ssms-editor .fn { color: #ff00ff; }
.ssms-editor .str { color: #ff0000; }
.ssms-editor .com { color: #008000; font-style: normal; }
.ssms-editor .num-t { color: #1e1e1e; }
.ssms-editor .br { color: #1e1e1e; }

.results-pane { display: grid; grid-template-rows: 24px minmax(0, 1fr) 24px; height: 42vh; min-height: 160px; border-top: 4px solid var(--chrome); }
.workarea.no-results .results-pane { display: none; }
.res-tabs { display: flex; gap: 2px; background: var(--chrome); padding: 0 4px; }
.res-tab { border: 0; background: transparent; font-size: 12px; padding: 0 10px; cursor: pointer; color: #333; }
.res-tab.active { background: #fff; border: 1px solid var(--edge); border-bottom: 0; }
.res-body { overflow: auto; background: #fff; }
.res-body.msg { font-family: var(--code); font-size: 13px; padding: 8px 10px; white-space: pre-wrap; }
.res-body.msg .err { color: #e00; }
.res-body[hidden] { display: none; }
.sgrid { border-collapse: collapse; font-size: 12.5px; font-family: var(--ui); }
.sgrid th { position: sticky; top: 0; background: #f0f0f0; font-weight: 400; text-align: left; padding: 2px 8px; border: 1px solid #d5d5d5; white-space: nowrap; }
.sgrid td { padding: 1px 8px; border: 1px solid #e3e3e3; white-space: nowrap; }
.sgrid td.rn, .sgrid th.rn { background: #f0f0f0; color: #555; text-align: right; min-width: 28px; }
.sgrid td.null { background: #ffffe1; }
.sgrid tr.extra td:not(.rn) { background: #fff1c9; }
.sgrid tr:first-child td:nth-child(2) { outline: 1px dotted #555; outline-offset: -2px; }
.res-empty { padding: 14px; color: #777; }
.query-status { display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 12px; background: #fdf5c9; border-top: 1px solid #e8dca0; color: #333; }
.query-status.ok::before { content: '✓'; color: #2e8b2e; font-weight: 700; }
.query-status.err { background: #fde2df; border-color: #f2b8b0; }
.query-status.err::before { content: '✕'; color: #c42b1c; font-weight: 700; }
.query-status.run::before { content: '◷'; color: #555; }

.statusbar { display: flex; align-items: center; gap: 18px; padding: 0 10px; background: var(--accent); color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; }

.toast { position: fixed; right: 18px; bottom: 64px; z-index: 70; width: 320px; background: #fff; border: 1px solid var(--edge); border-left: 4px solid var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 10px 12px; font-size: 12.5px; cursor: pointer; }
.toast[hidden] { display: none; }
.toast b { display: block; font-size: 13px; margin-bottom: 2px; }

.small-screen { display: none; }
@media (max-width: 960px) {
  body.work { overflow: auto; background: #fff; }
  .clockin, .desk, .clockout { display: none !important; }
  .small-screen { display: block; padding: 48px 20px; text-align: center; }
  .small-screen h1 { font-size: 24px; margin-bottom: 10px; }
  .small-screen p { color: var(--ink-2); margin: 0 0 20px; }
}
@media (max-width: 1280px) {
  .panes { grid-template-columns: 300px 200px minmax(0, 1fr); }
  .kb-hint { display: none; }
}
.co-nudge { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.co-nudge h3 { font-size: 15px; margin-bottom: 4px; }
.co-nudge p { font-size: 13.5px; color: var(--ink-2); }.msg-row .av.reviewer { background: #0b1733; }
.bubble.reviewer { background: #f6f7fb; border-color: #d9dceb; }
.bubble .sub { color: #555; }
.days { max-height: 300px; overflow-y: auto; padding-right: 2px; }

/* ---------- table guide (Object Explorer) ---------- */
.table-info { flex: none; border-top: 1px solid var(--edge); background: #f7f9ff; padding: 10px 12px 12px; font-size: 12.5px; line-height: 1.45; }
.table-info[hidden] { display: none; }
.ti-head { display: flex; justify-content: space-between; align-items: center; }
.ti-head b { font-size: 13px; }
.ti-x { border: 0; background: none; cursor: pointer; color: #777; }
.ti-meta { color: #777; font-size: 11.5px; margin: 1px 0 6px; }
.table-info p { margin: 0 0 8px; color: #333; }
.ti-try code { display: block; margin-top: 4px; font-family: var(--code); font-size: 12px; background: #fff; border: 1px solid #dde3f3; border-radius: 4px; padding: 5px 7px; color: #0000ff; }
.ti-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: #777; }
.ti-use { border: 1px solid var(--accent); background: #fff; color: var(--accent); border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.ti-use:hover { background: var(--accent); color: #fff; }

/* ---------- first-shift tour ---------- */
.tour-ring { position: fixed; z-index: 80; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(11, 23, 51, .5), 0 0 0 3px #4d8bff; transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease; }
.tour-ring.none { box-shadow: 0 0 0 9999px rgba(11, 23, 51, .55); }
.tour-ring[hidden], .tour-card[hidden] { display: none; }
.tour-card { position: fixed; z-index: 81; width: 340px; background: #fff; border-radius: 12px; padding: 16px 18px 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  font-family: Inter, 'Segoe UI', system-ui, sans-serif; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s, left .35s, top .35s; }
.tour-card.in { opacity: 1; transform: none; }
.tour-step { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.tour-card h3 { font-size: 18px; margin: 0 0 8px; }
.tour-body { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.tour-body code { display: block; margin: 8px 0; font-family: var(--code); font-size: 13px; background: #f3f6ff; border: 1px solid var(--blue-100); border-radius: 6px; padding: 8px 10px; color: #0000ff; }
.tour-small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.tour-wait { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.tour-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blue-100); border-top-color: var(--blue); animation: tour-spin .8s linear infinite; flex: none; }
@keyframes tour-spin { to { transform: rotate(360deg); } }
.tour-btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tour-btns:empty { display: none; }
.tour-btns .btn { height: 34px; font-size: 13.5px; }
.tour-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.tour-dots i.on { background: var(--blue); }
.tour-skip { border: 0; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.tour-skip:hover { color: var(--ink); }.ti-run { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.ti-run:hover { filter: brightness(1.1); }

/* ---------- the desk fills in as you go ---------- */
/* Stage 1, mail: an email client. Inbox list on the left, the message on the right, nothing else. */
.desk.stage-mail { grid-template-rows: 32px 1fr 24px; }
.desk.stage-mail .toolbar, .desk.stage-mail .explorer, .desk.stage-mail .workarea { display: none; }
.desk.stage-mail .panes { grid-template-columns: minmax(0, 1fr); }
.desk.stage-mail .inbox { display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: 26px minmax(0, 1fr) auto; border-right: 0; }
.desk.stage-mail .inbox .pane-head { grid-column: 1 / -1; }
.desk.stage-mail .mail-list { grid-row: 2 / span 2; max-height: none; border-right: 1px solid var(--edge); border-bottom: 0; overflow-y: auto; }
.desk.stage-mail .thread { padding: 28px 40px; background: #fff; font-size: 14px; }
.desk.stage-mail .thread .bubble { max-width: 640px; font-size: 14px; }
.desk.stage-mail .thread-actions { padding: 14px 40px 20px; justify-items: start; }
.desk.stage-mail .thread-actions .btn { width: auto; padding: 0 22px; height: 40px; font-size: 14px; }
.desk.stage-mail .thread-actions .row { gap: 24px; justify-content: flex-start; }
/* Stage 2: the query window slides in when it's needed. */
.desk:not(.stage-mail) .explorer, .desk:not(.stage-mail) .workarea { animation: desk-in .4s ease-out; }
@keyframes desk-in { from { opacity: 0; transform: translateX(14px); } }
.reading-empty { margin: auto; text-align: center; color: #8a8fa0; font-size: 14px; line-height: 1.6; }
.thread-actions .why.next { text-align: left; color: #333; background: #f3f8fd; border: 1px solid #dbe9f5; border-radius: 6px; padding: 8px 10px; }
.mail.unread { animation: mail-in .5s ease-out; }
@keyframes mail-in { from { background: #dcebff; } }
.tb-mute { height: 32px; border: 0; background: transparent; cursor: pointer; font-size: 14px; padding: 0 10px; }
.tb-mute:hover { background: #eee; }
/* ---------- a ticket is an email ---------- */
.workarea { grid-template-rows: 26px auto minmax(120px, 1fr) auto; }
.workarea.no-results { grid-template-rows: 26px auto 1fr 0; }
.em-subject { font-size: 15px; margin: 0 0 10px; font-family: var(--ui); }
.em { background: #fff; border: 1px solid #e3e3e8; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.em + .em { margin-top: 2px; }
.em header { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 6px; }
.em header .av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; }
.em-who { min-width: 0; font-size: 12.5px; line-height: 1.35; }
.em-addr { color: #777; font-size: 11.5px; }
.em-to { color: #777; font-size: 11.5px; }
.em header time { margin-left: auto; font-size: 11.5px; color: #777; }
.em-body p { margin: 0 0 8px; line-height: 1.5; }
.em-body p:last-child { margin-bottom: 0; }
.em.mine { background: #f5faff; border-color: #d4e6f7; }
.em.reply { border-left: 3px solid var(--green); }
/* In the inbox-only view the message fills the reading pane, Outlook-style. */
.desk.stage-mail .thread { padding: 26px 44px; gap: 14px; }
.desk.stage-mail .em-subject { font-size: 22px; letter-spacing: -0.01em; margin-bottom: 6px; }
.desk.stage-mail .em { border: 0; border-bottom: 1px solid #ececf1; border-radius: 0; padding: 0 0 18px; max-width: 760px; font-size: 15px; }
.desk.stage-mail .em header { margin-bottom: 16px; }
.desk.stage-mail .em header .av { width: 40px; height: 40px; font-size: 13px; }
.desk.stage-mail .em-who { font-size: 14px; }
.desk.stage-mail .em-body p { line-height: 1.65; margin-bottom: 12px; }
.desk.stage-mail .thread-actions { border-top: 0; }

/* ---------- coach strip: the walkthrough lives in the query window ---------- */
.coach { display: flex; align-items: flex-start; gap: 14px; padding: 7px 12px; background: #f7f9ff; border-bottom: 1px solid #dfe5f3; font-size: 12.5px; line-height: 1.5; }
.coach[hidden] { display: none; }
.coach-lines { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cl b { font-weight: 600; }
.cl.good { color: #12723a; }
.cl.bad { color: #a33a07; }
.cl.info { color: #445; }
.cl.hint { color: #333; }
.cl.wait { color: #777; font-style: italic; }
.cl .n { display: inline-block; background: var(--accent); color: #fff; border-radius: 3px; font-size: 11px; padding: 0 6px; margin-right: 4px; }
.coach-acts { display: flex; align-items: center; gap: 10px; flex: none; }
.coach-btn { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.coach-btn[disabled] { background: #fff; color: #8a8fa0; border-color: #ccd; cursor: default; }
.coach-link { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; }