/* ---------------------------------------------------------------------------
   Beaver Trapper - shared stylesheet
   Plain CSS, no framework, no build step.
--------------------------------------------------------------------------- */

:root {
  --ink: #12161c;
  --ink-soft: #4a5463;
  --ink-faint: #8a93a1;
  --line: #e2e6ec;
  --line-strong: #cbd2dc;
  --bg: #f5f7fa;
  --panel: #ffffff;
  --accent: #1f4d8f;
  --accent-dark: #163a6d;
  --accent-soft: #eaf1fb;
  --danger: #b22b2b;
  --danger-soft: #fdeceb;
  --warn: #9a6100;
  --warn-soft: #fdf3e0;
  --ok: #1d7a4c;
  --ok-soft: #e8f6ee;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(18, 22, 28, 0.06), 0 6px 20px rgba(18, 22, 28, 0.07);

  /* Surfaces and tints. Every colour on the page comes from a token, so the
     dark theme below only has to redefine these. */
  --field: #ffffff;          /* inputs, white boxes inside panels */
  --hover: #f0f3f8;
  --chip-bg: #eef1f6;
  /* Header row on Tracker, History, Solen Portcos: a translucent blue wash
     laid over the panel colour, so it looks see-through but rows scrolling
     underneath the pinned header never show through it. */
  --head-tint: rgba(31, 77, 143, 0.22);
  --head-bg: linear-gradient(var(--head-tint), var(--head-tint)), var(--panel);
  --subtle: #fafbfd;         /* shaded panel sections */
  --accent-tint: #f4f8fd;
  --ink-ghost: #a0a7b2;      /* fainter than faint: the motto, skipped notes */
  --skip-bg: #e9ecf0;
  --skip-hover: #e2e6eb;
  --skip-chip: #dde1e7;
  --ok-chip: #cfeadb;
  --ok-hover: #dcf0e5;
  --warn-chip: #f7e3bd;
  --warn-hover: #fbeed4;
  --danger-chip: #f7d4d2;
  --danger-hover: #fbdedc;
  --danger-line: #e6bdba;
  --danger-faint: #fffafa;
  --warn-faint: #fffdf7;
  --linkedin: #0a66c2;
  --call: #6b4fa0;
  --primary-bg: var(--accent);
  --primary-hover: var(--accent-dark);
  color-scheme: light;
}

/* Dark mode, switched on from Settings (theme.js sets data-theme on <html>). */
:root[data-theme="dark"] {
  --ink: #e6e9ee;
  --ink-soft: #b3bac5;
  --ink-faint: #828b98;
  --ink-ghost: #5f6773;
  --line: #2a313b;
  --line-strong: #3a4350;
  --bg: #111418;
  --panel: #191d23;
  --accent: #79afff;
  --accent-dark: #9cc4ff;
  --accent-soft: #1c2a40;
  --danger: #ff8077;
  --danger-soft: #3a1f1f;
  --warn: #e6a740;
  --warn-soft: #33291a;
  --ok: #55c98e;
  --ok-soft: #16302a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);

  --field: #1f242b;
  --hover: #242a33;
  --chip-bg: #282e37;
  --head-tint: rgba(92, 146, 230, 0.24);
  --head-bg: linear-gradient(var(--head-tint), var(--head-tint)), var(--panel);
  --subtle: #1c2026;
  --accent-tint: #18212d;
  --skip-bg: #2a2f37;
  --skip-hover: #30363f;
  --skip-chip: #363d47;
  --ok-chip: #1f4a35;
  --ok-hover: #1d3b2e;
  --warn-chip: #4a3a1c;
  --warn-hover: #3d311c;
  --danger-chip: #5a2a2a;
  --danger-hover: #452424;
  --danger-line: #6b3333;
  --danger-faint: #221819;
  --warn-faint: #221e15;
  --linkedin: #5aa9f0;
  --call: #b39ddb;
  /* The light accent is too pale behind white button text. */
  --primary-bg: #2c5fae;
  --primary-hover: #3a70c4;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* The browser hides [hidden] elements with `display: none`, but any author
   rule setting `display` beats it. The modal and side panel both set
   `display: flex`, so without this they would be permanently on screen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15.5px;
  line-height: 1.55;
}

/* Form controls do not inherit the page font on their own. */
input, textarea, select, button, .btn { font-family: inherit; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

a { color: var(--accent); }

/* --- Buttons --------------------------------------------------------------- */

button,
.btn {
  font: inherit;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

button:hover:not(:disabled),
.btn:hover { background: var(--hover); }

button:disabled { opacity: 0.55; cursor: default; }

button.primary {
  background: var(--primary-bg);
  border-color: var(--primary-bg);
  color: #fff;
}

button.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }

/* --- Form fields ----------------------------------------------------------- */

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="date"],
textarea,
select {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
}

/* Browsers size a dropdown differently from a text box, even with the same
   padding. Give it a text box's exact height: one line of text, the 9px
   padding above and below, and the 1px border. */
select { height: calc(1.55em + 20px); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- Login page ------------------------------------------------------------ */

.login-shell {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 32px;
}

.login-card .brand {
  margin-bottom: 4px;
  font-size: 19px;
}

.login-card .tagline {
  color: var(--ink-faint);
  font-size: 13px;
  margin: 0 0 24px;
}

.login-card .field { margin-bottom: 16px; }

.login-card button { width: 100%; }

/* Microsoft's sign-in button: their four-square logo, plain and neutral. */
.ms-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.ms-signin:hover { background: var(--hover); }
.ms-signin.busy { opacity: 0.6; cursor: progress; }

.login-card .form-error { margin: 0 0 16px; }
.login-note { margin: 16px 0 0; }

.form-error {
  display: none;
  margin-top: 14px;
  padding: 9px 11px;
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
}

.form-error.visible { display: block; }

/* --- App chrome ------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 0 20px;
  height: 56px;
}

.topbar .brand { font-size: 15px; }

/* The Solen logo beside the app name. "multiply" lets its white background
   disappear into the bar; in dark mode it is flipped to white-on-dark and
   "screen" drops the (now black) background instead. */
.brand-logo {
  height: 36px;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
}

:root[data-theme="dark"] .brand-logo {
  filter: invert(1);
  mix-blend-mode: screen;
}

.topbar .brand span { color: var(--ink-faint); font-weight: 400; margin-left: 8px; }

.topbar .spacer { flex: 1; }

/* Add account / Refresh / Sign out: plain words like the page links, no box,
   a touch larger. Georgia comes from the page (buttons inherit it). */
.topbar > button,
.topbar > button.primary {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 15px;
  padding: 6px 12px;
}

.topbar > button:hover:not(:disabled),
.topbar > button.primary:hover:not(:disabled) {
  border: none;
  background: var(--hover);
  color: var(--ink);
}

.page { padding: 24px 20px 48px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 20px;
  max-width: 900px;
}

.card h2 { font-size: 15px; margin-bottom: 12px; }

.kv {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 8px 16px;
  font-size: 13px;
}

.kv dt { color: var(--ink-soft); font-weight: 500; }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

.muted { color: var(--ink-faint); }

code {
  font-family: inherit;
  font-size: 12.5px;
  background: var(--chip-bg);
  padding: 1px 5px;
  border-radius: 4px;
}

/* --- Summary strip --------------------------------------------------------- */

.summary {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.summary .spacer { flex: 1; }

.stat { display: flex; align-items: baseline; gap: 8px; }

.stat-value {
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.stat.overdue .stat-value { color: var(--danger); }

.stat-meta { font-size: 12px; color: var(--ink-faint); }

.motto {
  font-size: 15px;
  font-style: italic;
  color: var(--ink-ghost);
  letter-spacing: 0.01em;
}

/* --- The grid -------------------------------------------------------------- */

.page-grid { padding: 20px; }

/* The frame lives on the scroll container, not the table. An `overflow` on the
   table itself would make it the sticky container, which would strand the
   pinned Status column off the right-hand edge.

   It also scrolls up and down itself, sized to fill the window below the top
   bar and summary strip. That is what lets the header row stay pinned while
   you scroll a long list - a sticky header only sticks within the box that
   is actually scrolling. */
.grid-wrap {
  overflow: auto;
  max-height: calc(100vh - 158px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* A small gap between company rows. border-spacing draws it with the table's
   own background, so the table is the page grey and every cell is given the
   panel colour - at zero specificity, so the status tints still win. */
:where(table.grid) :where(th, td) { background-color: var(--panel); }

table.grid {
  border-collapse: separate;
  border-spacing: 0 6px;
  background: var(--bg);
  /* Fill the card. Company and Status have set widths; the 12 step columns
     split everything else equally, so they are all the same width and as
     wide as the screen allows. Below the minimum (12 x 76px plus Company and
     Status) the grid scrolls sideways instead of squashing. */
  width: 100%;
  table-layout: fixed;
  min-width: calc(170px + 130px + 12 * 76px);
  /* The row gap would also put a strip above the header row; pull the table
     up by that much so the header sits flush with the top of the box. */
  margin-top: -6px;
}

table.grid th,
table.grid td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

table.grid tr:last-child th,
table.grid tr:last-child td { border-bottom: none; }

table.grid th:last-child,
table.grid td:last-child { border-right: none; }

/* Header row */

/* Column widths are set on table.grid above. */
table.grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--head-bg);
  padding: 8px 7px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}

.col-name {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ink);
  /* "InMail 1/LinkedIn Connection" wraps rather than widening its column. */
  white-space: normal;
  line-height: 1.3;
}

/* The "LinkedIn" and "Connection" lines underneath "InMail 1/". */
.col-name-sub { white-space: nowrap; }

.col-day {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* Every heading in the header row is InMail blue. */
table.grid thead .col-name { color: var(--linkedin); }

/* Frozen company column */

table.grid th.company {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel);
  width: 170px;
  padding: 9px 10px;
  border-right: 1px solid var(--line-strong);
  font-weight: 500;
}

table.grid thead th.company.corner {
  z-index: 3;
  background: var(--head-bg);
  font-size: 12px;
  font-weight: 650;
  color: var(--linkedin);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.company-btn {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font: inherit;
}

.company-btn:hover { background: none; }
.company-btn:hover .company-name { color: var(--accent); }

.company-name {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.35;
}

.company-vertical {
  display: block;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* A line's gap between the vertical (or the name) and the contact. */
.company-sub {
  display: block;
  margin-top: 0.9em;
  font-size: 12px;
  color: var(--ink-faint);
}

.acct-status {
  display: inline-block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 20px;
}

.acct-replied { background: var(--ok-soft); color: var(--ok); }
.acct-paused  { background: var(--warn-soft); color: var(--warn); }
.acct-closed  { background: var(--chip-bg); color: var(--ink-soft); }

/* Touch cells */

td.cell {
  padding: 8px 7px;
  cursor: pointer;
  transition: background 0.1s ease;
}

td.cell:hover { background: var(--hover); }

.cell-top { display: flex; align-items: center; gap: 4px; }

.chip {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.01em;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--chip-bg);
  color: var(--ink-soft);
  white-space: nowrap;
}

.cell-date {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: pre-line; /* lets "Scheduled for" wrap onto its own line */
}

.cell-note {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ink-faint);
}

/* Per-status tone */

.tone-unscheduled           { background: var(--subtle); }
.tone-unscheduled .chip     { background: var(--chip-bg); color: var(--ink-faint); }
.tone-unscheduled .cell-note { color: var(--ink-ghost); }

.tone-ready .chip      { background: var(--accent-soft); color: var(--accent); }
.tone-ready-warn .chip { background: var(--warn-soft); color: var(--warn); }
.tone-ready-warn .cell-note { color: var(--warn); font-weight: 600; }

.tone-drafted .chip { background: var(--warn-soft); color: var(--warn); }

/* Sent and done are finished business - make them read that way at a glance
   and keep them legible, since they never change again. */
.tone-sent, .tone-done { background: var(--ok-soft); }
.tone-sent .chip, .tone-done .chip { background: var(--ok-chip); color: var(--ok); }
.tone-sent .cell-note, .tone-done .cell-note { color: var(--ok); font-weight: 600; }
.tone-sent .cell-date, .tone-done .cell-date { color: var(--ok); }

/* A skipped step greys out the whole box. */
td.cell.tone-skipped              { background: var(--skip-bg); }
td.cell.tone-skipped:hover        { background: var(--skip-hover); }
.tone-skipped .chip               { background: var(--skip-chip); color: var(--ink-faint); }
.tone-skipped .cell-note,
.tone-skipped .cell-date          { color: var(--ink-ghost); }

/* Due today / due soon / overdue take over the cell background */

td.cell.is-today {
  background: var(--ok-soft);
  box-shadow: inset 2px 0 0 var(--ok);
}
td.cell.is-today:hover { background: var(--ok-hover); }
td.cell.is-today .chip { background: var(--ok-chip); color: var(--ok); }
td.cell.is-today .cell-date { color: var(--ok); font-weight: 600; }

td.cell.is-tomorrow {
  background: var(--warn-soft);
  box-shadow: inset 2px 0 0 var(--warn);
}
td.cell.is-tomorrow:hover { background: var(--warn-hover); }
td.cell.is-tomorrow .chip { background: var(--warn-chip); color: var(--warn); }
td.cell.is-tomorrow .cell-date { color: var(--warn); font-weight: 600; }

/* Not anchored yet, but we can say where it would land */
td.cell.is-projected .cell-date { color: var(--ink-faint); font-style: italic; }

td.cell.is-overdue {
  background: var(--danger-soft);
  box-shadow: inset 2px 0 0 var(--danger);
}
td.cell.is-overdue:hover { background: var(--danger-hover); }
td.cell.is-overdue .chip { background: var(--danger-chip); color: var(--danger); }
td.cell.is-overdue .cell-date { color: var(--danger); font-weight: 650; }

/* Confidence dot */

.conf {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  cursor: help;
}

.conf-high   { background: #2e9c62; }
.conf-medium { background: #d99100; }
.conf-low    { background: #d14b45; }

/* --- Empty state ----------------------------------------------------------- */

/* A header-only table gets rounded bottom corners, since there is no body. */
table.grid.is-empty thead th { border-bottom: none; }

.empty-state {
  padding: 36px 24px 8px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.empty-state h2 { font-size: 16px; margin-bottom: 8px; }
.empty-state p { margin: 0 0 6px; font-size: 13.5px; }

/* --- Add account modal ----------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(18, 22, 28, 0.42);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.modal {
  width: 100%;
  max-width: 620px;
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(18, 22, 28, 0.28);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 { font-size: 16px; }

.modal-body { padding: 20px 22px 4px; }

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--subtle);
}

.icon-btn {
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-faint);
  padding: 2px 8px;
  border-radius: 6px;
}

.icon-btn:hover { background: var(--chip-bg); color: var(--ink); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field { margin-bottom: 14px; }

.field-hint {
  margin: -8px 0 16px;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.45;
}

.req, .opt {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  margin-left: 4px;
}

.req { color: var(--danger); }
.opt { color: var(--ink-faint); }

.cc-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 14px;
  margin-bottom: 18px;
  background: var(--subtle);
}

.cc-section summary {
  cursor: pointer;
  padding: 11px 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  list-style-position: inside;
}

.cc-section[open] summary {
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  color: var(--ink);
}

/* --- Side panel ------------------------------------------------------------ */

.panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(18, 22, 28, 0.28);
}

.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  width: 400px;
  max-width: 100vw;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 32px rgba(18, 22, 28, 0.12);
  display: flex;
  flex-direction: column;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2 { font-size: 16px; line-height: 1.3; }

.panel-sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px 32px;
}

.panel-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.panel-section:last-child { border-bottom: none; }

.panel-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.panel-row {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
}

.panel-label { color: var(--ink-soft); }
.panel-value { word-break: break-word; }

.panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.save-hint { font-size: 12px; color: var(--ok); }

.pill-overdue {
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--danger-soft);
  color: var(--danger);
}

.small { font-size: 12px; line-height: 1.5; }

.danger-btn {
  border-color: var(--danger-line);
  color: var(--danger);
  background: var(--field);
}

.danger-btn:hover:not(:disabled) { background: var(--danger-soft); }

.danger-section p { margin: 0 0 12px; }

/* --- Touch content editing -------------------------------------------------- */

.panel-actions.wrap { flex-wrap: wrap; }

.panel-body label {
  margin-top: 12px;
  margin-bottom: 4px;
}

.panel-body textarea {
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.55;
  resize: vertical;
}

.conf-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 10px;
  background: var(--subtle);
  border-radius: var(--radius);
}

.link-btn {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  font-size: 12.5px;
  margin-left: auto;
}

.link-btn:hover { background: none; color: var(--accent-dark); }

.conf-why {
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--line-strong);
  background: var(--subtle);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.conf-why p { margin: 0; }

.low-warning {
  margin-top: 8px !important;
  color: var(--danger);
  font-weight: 600;
}

/* --- Settings page ---------------------------------------------------------- */

.simple-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 10px;
}

.simple-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  padding: 0 8px 6px 0;
  font-weight: 650;
}

.simple-table td { padding: 3px 8px 3px 0; vertical-align: middle; }
.simple-table th.shrink, .simple-table td.shrink { width: 1%; white-space: nowrap; padding-right: 0; }

.cell-input {
  padding: 6px 9px;
  font-size: 13px;
  transition: background 0.3s ease;
}

.cell-input.saved { background: var(--ok-soft); }

.small-btn { padding: 5px 10px; font-size: 12.5px; }


/* The portcos table needs the width, so let the card run wider than default. */
.card.wide { max-width: 1320px; }

/* --- Solen Portcos table --------------------------------------------------- */

.portco-table { table-layout: fixed; }

.portco-table th,
.portco-table td { padding: 9px 12px 9px 0; }

/* Room so the first heading does not sit on the edge of the blue band. */
.portco-table th:first-child,
.portco-table td:first-child { padding-left: 12px; }

.portco-table th.c-name     { width: 14%; }
.portco-table th.c-industry { width: 15%; }
.portco-table th.c-what     { width: 31%; }
.portco-table th.c-web      { width: 15%; }
.portco-table th.c-notes    { width: 17%; }
.portco-table th.c-more     { width: 8%; }

/* The column headings stay at the top of the window as the list scrolls. */
.portco-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--head-bg);
  color: var(--linkedin);
  padding-top: 10px;
  box-shadow: inset 0 -1px 0 var(--line-strong);
}

.portco-table tbody tr {
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.portco-table tbody tr:hover { background: var(--hover); }
.portco-table tbody tr:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.portco-table td.c-name .cell-text { font-weight: 600; }

/* One line per cell; the full text lives in the modal. */
.cell-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}

.cell-text a { text-decoration: none; }
.cell-text a:hover { text-decoration: underline; }

td.c-more, th.c-more {
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
}

/* Present to screen readers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.read-more {
  visibility: hidden;
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: underline;
  white-space: nowrap;
}

.portco-table tbody tr:hover .read-more,
.portco-table tbody tr:focus .read-more { visibility: visible; }

/* --- Page navigation ------------------------------------------------------- */

.main-nav {
  display: flex;
  gap: 4px;
  margin-left: 18px;
}

.main-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 13.5px;
  padding: 6px 12px;
  border-radius: var(--radius);
}

.main-nav a:hover { background: var(--hover); color: var(--ink); }

.main-nav a.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* --- Status dots ----------------------------------------------------------- */

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
}

.status-dot.ok  { background: var(--ok); }
.status-dot.bad { background: var(--ink-faint); }

/* --- Portco logos + hover card --------------------------------------------- */

.name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }

.portco-logo {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 2px;
}

.portco-logo.fallback {
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

.hover-card {
  position: absolute;
  z-index: 60;
  width: 400px;
  max-width: calc(100vw - 32px);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(18, 22, 28, 0.2);
  padding: 14px 16px;
  pointer-events: none;
  font-size: 13px;
  line-height: 1.5;
}

.hover-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.hover-head strong { display: block; font-size: 14px; }

.hover-industry { font-size: 12px; color: var(--ink-faint); }

.hover-card p { margin: 0 0 8px; }
.hover-card p:last-child { margin-bottom: 0; }

.hover-notes { color: var(--ink-soft); font-size: 12.5px; }
.hover-web { color: var(--accent); font-size: 12.5px; word-break: break-all; }

/* --- Status column --------------------------------------------------------- */

/* Pinned to the right edge, so the outcome stays readable however far the
   grid is scrolled sideways. Kept narrow - the text wraps rather than forcing
   the whole grid wider than the screen. */
th.status-col, td.status-col {
  position: sticky;
  right: 0;
  width: 130px;
  border-left: 2px solid var(--line-strong);
  background: var(--panel);
}

table.grid thead th.status-col { z-index: 3; background: var(--head-bg); }

/* Everything wraps inside the box, so nothing hangs off the right edge into
   the scrollbar (or makes the grid wider than the screen). */
td.status-col {
  padding: 8px 12px 8px 9px;
  vertical-align: middle;
  z-index: 1;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
}

.status-text {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.3;
}

.status-sub {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ink-faint);
  margin-top: 3px;
}

/* Colour tells you the outcome before you read the words. */
td.outcome-not_started  { background: var(--chip-bg); }
td.outcome-not_started .status-text { color: var(--ink-soft); }

td.outcome-in_progress  { background: var(--warn-soft); }
td.outcome-in_progress .status-text { color: var(--warn); }

td.outcome-responded    { background: var(--ok-soft); }
td.outcome-responded .status-text { color: var(--ok); }

td.outcome-no_response  { background: var(--danger-soft); }
td.outcome-no_response .status-text { color: var(--danger); }

td.outcome-paused { background: var(--warn-soft); }
td.outcome-paused .status-text { color: var(--warn); }

td.outcome-closed { background: var(--chip-bg); }
td.outcome-closed .status-text { color: var(--ink-soft); }

.stat.succeeded .stat-value { color: var(--ok); }

/* --- Touch detail: call and LinkedIn shortcuts ----------------------------- */

.call-out { background: var(--subtle); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }

.big-phone, .big-link {
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.big-link { font-size: 15px; }
.big-phone:hover, .big-link:hover { text-decoration: underline; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 6px;
}

.checkbox-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--ok);
  cursor: pointer;
}

.response-section { background: var(--subtle); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }

/* "Completed?" on InMail and call cells in the grid. Kept small so the grid
   still fits without a sideways scrollbar. */
.cell-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  margin-top: 5px;
}

/* inline-flex, so only the box and its word are clickable - not the empty
   width of the cell beside them. */
.cell-check {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.cell-check input {
  width: 11px;
  height: 11px;
  margin: 0;
  flex: none;
  accent-color: var(--ok);
  cursor: pointer;
}

.cell-check:hover span { color: var(--ink); }
.tone-done .cell-check span { color: var(--ok); }

.complete-section { background: var(--subtle); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }

.brochure-row {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.brochure-row span { font-size: 12.5px; line-height: 1.45; }
.brochure-row strong { display: block; margin-bottom: 2px; }
.brochure-row input:disabled + span { color: var(--ink-faint); }

.draft-line { font-size: 13px; margin-bottom: 4px; }

.sent-line {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 650;
  color: var(--ok);
}

.drafted-line {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--warn);
}

.form-error.success {
  background: var(--ok-soft);
  color: var(--ok);
}

/* --- Signature preview ----------------------------------------------------- */

.preview-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 18px 0 6px;
}

.sig-preview {
  margin: 0;
  padding: 12px 14px;
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink-soft);
}

/* The made-up sentence above the signature is only there for context. */
.sig-preview::first-line { color: var(--ink-faint); font-style: italic; }

.count-badge {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  background: var(--chip-bg);
  padding: 3px 9px;
  border-radius: 20px;
  margin-left: 8px;
  vertical-align: middle;
}

.inline-form .field { margin-bottom: 0; }

a.btn { text-decoration: none; display: inline-block; }

/* --- Status column controls ------------------------------------------------ */

.status-check { margin-top: 7px; }

.rerun-btn {
  display: block;
  margin-top: 7px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.status-run {
  display: block;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 2px;
}

.status-runs { color: var(--ink-soft); font-weight: 600; }

/* A frozen earlier campaign in History: readable, but plainly a record. */
td.cell.is-archived { cursor: default; }
td.cell.is-archived:hover { background: inherit; }
tr.archived-row td.cell { opacity: 0.85; }

/* --- Touch panel extras ---------------------------------------------------- */

.check-pair { display: flex; gap: 22px; flex-wrap: wrap; }

/* Only the box and its words are clickable. */
.checkbox-row.inline { display: inline-flex; align-items: center; margin-bottom: 0; }
.checkbox-row.inline input[type="checkbox"] { margin: 0; }

.complete-section .muted.small { margin: 8px 0 0; }

.connect-section { background: var(--accent-tint); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.connect-section h3 .opt { text-transform: none; letter-spacing: 0; }
.connect-section textarea { margin-top: 4px; }
.connect-section .muted.small { margin: 10px 0 0; }

.char-count { font-size: 12px; color: var(--ink-faint); }
.char-count.over { color: var(--danger); font-weight: 650; }

.panel-select { padding: 4px 8px; font-size: 13px; width: auto; max-width: 100%; height: calc(1.55em + 10px); }

/* --- Editable account panel ------------------------------------------------- */

.panel-field { margin-bottom: 10px; }
.panel-field label { margin-top: 0; }
.panel-field input, .panel-field select { padding: 7px 10px; font-size: 13.5px; }
/* ...the same text-box height, for these smaller fields. */
.panel-field select { height: calc(1.55em + 16px); }

.commit-section button { width: 100%; }
.commit-section .muted.small { margin: 8px 0 0; }
.commit-section .commit-failed { color: var(--danger); }

/* --- Attention banners (Outlook reconnect, AI unavailable) ------------------ */

.app-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 20px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}

.app-banner-outlook { background: var(--warn-soft); color: var(--warn); }
.app-banner-ai      { background: var(--danger-soft); color: var(--danger); }
/* Links styled as the primary (blue) button, e.g. "Reconnect Outlook". */
a.btn.primary { background: var(--primary-bg); border-color: var(--primary-bg); color: #fff; }
a.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* --- Admin page --------------------------------------------------------------- */

.admin-table td, .admin-table th { padding: 9px 12px 9px 0; vertical-align: middle; }
.admin-table tbody tr { border-top: 1px solid var(--line); }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .total-row td { font-weight: 650; border-top: 2px solid var(--line-strong); }
.row-inactive td { color: var(--ink-faint); }

.role-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
}

.row-me td { background: var(--accent-tint); }

.type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 20px;
}
.type-admin { background: var(--accent-soft); color: var(--accent); }
.type-cda   { background: var(--chip-bg); color: var(--ink-soft); }


/* --- Appearance setting ---------------------------------------------------- */

.theme-choice { display: flex; gap: 24px; flex-wrap: wrap; margin: 4px 0 6px; }
.theme-choice input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* --- Watermark --------------------------------------------------------------
   The beaver sits over the whole page, faint and click-through. It is drawn
   on top rather than underneath because every card and table here has a solid
   white background that would otherwise hide it; the "multiply" blend means
   it only ever darkens white a touch and leaves text untouched. Modals and
   the side panel stack above it, so they stay clean. */

body.watermarked::after {
  content: '';
  position: fixed;
  inset: 56px 0 0 0;          /* below the top bar */
  z-index: 20;
  pointer-events: none;
  background: url('/img/watermark.png') center 55% / auto min(78vh, 900px) no-repeat;
  opacity: 0.07;
  mix-blend-mode: multiply;
}

/* On a dark backdrop the black drawing is inverted to white and lightens
   instead. Add class="on-dark" to <body>, or data-theme="dark" to <html>. */
body.watermarked.on-dark::after,
:root[data-theme="dark"] body.watermarked::after {
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.055;
}

/* --- Bounced emails ---------------------------------------------------------- */

/* Under the company name on the Tracker when an email came back undeliverable. */
.bounce-pill {
  display: inline-block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--danger-soft);
  color: var(--danger);
}

/* The warning at the top of the account panel. */
.bounce-section {
  background: var(--danger-soft);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.bounce-section h3 { color: var(--danger); }
.bounce-section p { margin: 6px 0 0; color: var(--ink); }

/* --- Restart or continue? ----------------------------------------------------- */

.choice-overlay { z-index: 60; align-items: center; }
.choice-modal { max-width: 520px; }

.choice {
  display: block;
  width: 100%;
  text-align: left;
  margin: 12px 0;
  padding: 12px 14px;
}

.choice strong { display: block; margin-bottom: 4px; }
.choice span { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.choice.recommended { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }