/* Lead Desk page styles, on top of tokens.css and components.css.
   No inline styles anywhere: the Content-Security-Policy blocks them. */

*, *::before, *::after { box-sizing: border-box; }
p { margin: 0; }
a { color: var(--brand-text); }
.link:hover { color: var(--brand-hover); }
a.ld-btn { text-decoration: none; }
.ld-btn-primary, .ld-btn-primary:hover { color: var(--on-brand); }
.ld-btn svg { width: 16px; height: 16px; flex: none; }
.ld-btn-sm { padding: 0 var(--space-3); font-size: 13px; }
.ld-btn-sm svg { width: 14px; height: 14px; }
.btn-block { width: 100%; justify-content: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-4); top: -60px; z-index: 50; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--ink); color: var(--surface-000); font-weight: 600; }
.skip:focus { top: var(--space-4); }
.main:focus { outline: none; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.with-icon { display: flex; align-items: center; gap: var(--space-2); }
.with-icon svg { width: 18px; height: 18px; color: var(--brand); }
.muted { color: var(--ink-muted); }
.small { font-size: 12px; line-height: 16px; }
.strong { font-weight: 600; }
.label { font-weight: 600; font-size: 13px; line-height: 18px; }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-8 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-12 { display: flex; flex-direction: column; gap: var(--space-3); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.btn-row form { margin: 0; }

/* Shell */
.side { position: sticky; top: 0; align-self: flex-start; min-height: 100vh; }
.side-brand { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); color: var(--ink); font-size: 18px; line-height: 24px; font-weight: 700; text-decoration: none; }
.side-dot { width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--brand); flex: none; }
.nav-list { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-form { margin: 0; }
button.nav-link { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.nav-sep { height: 1px; margin: var(--space-2) var(--space-3); background: var(--line-strong); opacity: .4; }
.side-note { margin-top: auto; padding: 0 var(--space-3); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.main { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }

.page { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.page-head { display: flex; flex-direction: column; gap: var(--space-1); }
.page-head-row { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; justify-content: space-between; }
.head-tools { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.split { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.split-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.split-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.aside-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.aside-empty { padding: var(--space-3) 0; }

/* Messages */
.flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: 600; }
.flash-ok { background: var(--success-tint); color: var(--success); }
.flash-error { background: var(--danger-tint); color: var(--danger); }
.banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--warning-tint); color: var(--warning); font-weight: 600; }

/* Inbox */
.stats { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.stat { flex: 1 1 160px; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.stat-num { font-size: 24px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-late { color: var(--danger); }
.stat-warn { color: var(--warning); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.chip-icon { display: inline-grid; place-items: center; min-width: 36px; padding: 0 var(--space-2); }
.chip-icon svg { width: 16px; height: 16px; }
.search { position: relative; flex: 1 1 220px; min-width: 0; margin: 0; }
.search .field { padding-left: 40px; }
.search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); display: grid; color: var(--ink-muted); pointer-events: none; }
.search-icon svg { width: 18px; height: 18px; }
.list { overflow: hidden; }
a.ld-lead { box-sizing: border-box; text-decoration: none; }
.list .ld-lead:last-child { border-bottom: 0; }
.ld-lead-tags { margin-top: 2px; }
.empty { padding: var(--space-8) var(--space-4); text-align: center; display: flex; flex-direction: column; gap: var(--space-1); }
.empty-title { font-weight: 600; font-size: 16px; line-height: 24px; }

/* Lead */
.lead { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.back { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; min-height: 32px; font-size: 13px; text-decoration: none; }
.back svg { width: 16px; height: 16px; }
.lead-head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; justify-content: space-between; }
.lead-id { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.late { color: var(--danger); font-weight: 600; }
.panel { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ai-panel { border-color: var(--line-strong); }
.ai-out { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-100); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-2); }
.ai-out[hidden], .ai-error[hidden] { display: none; }
.ai-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 22px; }
.ai-foot { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.ai-error { color: var(--danger); font-weight: 600; }
.is-busy::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ld-spin .8s linear infinite; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-busy::after { animation: none; border-right-color: currentColor; opacity: .5; } .ld-btn { transition: none; } }
.split-main .ld-timeline { padding: var(--space-2) 0 0; max-width: none; }
.tl-content { min-width: 0; }
.ld-tl-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.jlist { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.jlist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.jlist-item { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; justify-content: space-between; }
.jlist-main { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0; }
.jlist-meta { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.note { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-1); }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Forms */
.form-stack { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.form-stack > .ld-btn { align-self: flex-start; }
.form-stack > .btn-block { align-self: stretch; }
textarea.field { resize: vertical; min-height: 88px; }
select.field { appearance: auto; }
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.fld { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.fld-wide { flex: 3 1 240px; }

/* Tasks */
.quick-add { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; padding: var(--space-4); margin: 0; box-shadow: none; }
.board { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.board-col { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-200); border-radius: var(--radius-lg); }
.board-title { color: var(--ink); }
.task-check { margin: -10px; }
.task-check-hit { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.ld-task-title { overflow-wrap: anywhere; }
.task-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) 0 0 calc(-1 * var(--space-3)); }
.task-actions form { margin: 0; display: flex; gap: var(--space-1); }

/* Schedule */
.sync-line { display: flex; gap: var(--space-2); align-items: baseline; font-size: 13px; }
.sync-line .dot { transform: translateY(-1px); }
.dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }
.dot-ok { background: var(--success); }
.week { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-000); -webkit-overflow-scrolling: touch; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(136px, 1fr)); min-width: 952px; }
.day { display: flex; flex-direction: column; min-height: 320px; border-left: 1px solid var(--line); }
.day:first-child { border-left: 0; }
.day-head { margin: 0; display: flex; gap: var(--space-2); align-items: baseline; padding: var(--space-2) var(--space-3); background: var(--surface-200); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.day-dow { font: 700 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.day-date { font-weight: 600; }
.day-today .day-head { background: var(--brand-tint); }
.day-today .day-dow, .day-today .day-date { color: var(--brand-text); }
.day-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); }
.day-empty { padding: var(--space-1); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.visit { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-000); font-size: 12px; line-height: 16px; min-width: 0; }
.visit-panepal { border-left-color: var(--panepal); }
.visit-hlc { border-left-color: var(--hlc); }
.visit-done { opacity: .72; }
.visit-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.visit-name { font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.visit-sub { color: var(--ink-muted); overflow-wrap: anywhere; }
.visit-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.visit-tags .ld-badge { white-space: normal; }

/* Settings */
.settings { max-width: 760px; }
.settings-card { padding: var(--space-6); gap: var(--space-4); }
.dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.dl dt { color: var(--ink-muted); }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.status-ok { color: var(--success); font-weight: 600; }
.status-bad { color: var(--danger); font-weight: 600; }

/* Login and message pages */
.bare { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.bare-card { width: 100%; max-width: 400px; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.bare-brand { padding: 0; align-self: flex-start; }

/* Touch screens get 44 px chips and small buttons */
@media (pointer: coarse) { .chip, .chip-icon { min-height: 44px; min-width: 44px; } }
@media (pointer: fine) { .ld-btn-sm { min-height: 32px; } }

/* Phone and small tablet: the side nav becomes a sticky tab bar above the content */
@media (max-width: 799px) {
  .side { flex-basis: 100%; min-height: 0; z-index: 20; padding: var(--space-1) var(--space-2); gap: 0; border-bottom: 1px solid var(--line); }
  .side .side-brand, .side-note, .nav-sep { display: none; }
  .nav-list { flex-direction: row; gap: 2px; }
  .nav-list > * { flex: 1 1 0; min-width: 0; }
  .nav-link, button.nav-link { position: relative; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: var(--space-1) 2px; font-size: 11px; line-height: 14px; text-align: center; }
  .nav-count { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; min-width: 18px; padding: 0 var(--space-1); font-size: 11px; line-height: 16px; }
  .main { padding: var(--space-4); gap: var(--space-4); }
  .h1 { font-size: 22px; line-height: 28px; }
  .page, .lead, .split, .split-main { gap: var(--space-4); }
  .settings-card, .bare-card { padding: var(--space-4); }
  .quick-add > .ld-btn { width: 100%; justify-content: center; }
}