/* Palette carried over from the existing call console so the two tools feel like
   one product as the console folds into this app. */
:root {
   --navy: #1c2b4a;
   --orange: #c85a20;
   --green: #2e7d4f;
   --red: #a8322d;
   --paper: #f4f1ec;
   --line: #d9d3c9;
   --ink: #222;
   --muted: #6b6b6b;
}

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   font:
      15px/1.5 -apple-system,
      "Segoe UI",
      Roboto,
      sans-serif;
   color: var(--ink);
   background: #fff;
}

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

/* ─── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 10px 20px;
   background: var(--navy);
   color: #fff;
}

.topbar a {
   color: #fff;
   text-decoration: none;
   font-size: 14px;
}

.topbar .brand {
   font-weight: 600;
   margin-right: 4px;
}

.topbar .spacer {
   flex: 1;
}

/* nav is its own flex row: without it the links run together as one line of
   text with a single space between them. */
.topbar nav {
   display: flex;
   gap: 4px;
}

.nav-link {
   padding: 6px 11px;
   border-radius: 6px;
   opacity: 0.8;
   white-space: nowrap;
   transition:
      background 0.12s ease,
      opacity 0.12s ease;
}

.nav-link:hover {
   background: rgba(255, 255, 255, 0.14);
   opacity: 1;
}

.nav-link--current {
   background: rgba(255, 255, 255, 0.18);
   opacity: 1;
   font-weight: 600;
}

/* Sign out is a form button, not a link, but belongs to the same row. */
.topbar button.nav-link {
   font: inherit;
   color: #fff;
   background: none;
   border: 0;
   cursor: pointer;
}

.inline {
   display: inline;
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.container {
   max-width: 1120px;
   margin: 0 auto;
   padding: 24px 20px 80px;
}

.page-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 20px;
}

h1 {
   font-size: 22px;
   color: var(--navy);
   margin: 0 0 4px;
}

h2 {
   font-size: 16px;
   color: var(--navy);
   margin: 0 0 12px;
}

.columns {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 16px;
}

.row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 0 16px;
}

.card {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 16px;
   margin-bottom: 16px;
   background: #fff;
}

.card--narrow {
   max-width: 460px;
   margin: 40px auto;
}

.card--alert {
   border-color: var(--red);
   background: #fdf6f5;
}

/* ─── Forms ───────────────────────────────────────────────────────────────── */
.stack {
   display: block;
}

fieldset {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 12px 16px;
   margin: 0 0 16px;
}

legend {
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--muted);
   padding: 0 6px;
}

/* Short inputs flow into columns so a long form is scannable rather than a
   single tall stack; textareas and long text opt out with .field--full. */
.field-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
   gap: 0 16px;
   align-items: start;
}

.field--full {
   grid-column: 1 / -1;
}

.field {
   margin-bottom: 12px;
}

.field label {
   display: block;
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 4px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="datetime-local"],
select,
textarea {
   width: 100%;
   font: inherit;
   padding: 7px 9px;
   border: 1px solid var(--line);
   border-radius: 6px;
   background: #fff;
}

textarea {
   resize: vertical;
}

.field--error input,
.field--error select,
.field--error textarea {
   border-color: var(--red);
}

.checkbox {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   margin-bottom: 12px;
}

.checkbox input {
   width: auto;
}

.hint {
   font-size: 12px;
   color: var(--muted);
   margin: 4px 0 0;
}

.error {
   font-size: 12px;
   color: var(--red);
   margin: 4px 0 0;
}

button,
.button {
   font: inherit;
   display: inline-block;
   border: 1px solid var(--line);
   background: #fff;
   color: var(--ink);
   border-radius: 6px;
   padding: 7px 12px;
   cursor: pointer;
   text-decoration: none;
}

button:hover,
.button:hover {
   background: var(--paper);
}

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

.primary:hover {
   filter: brightness(1.08);
   background: var(--orange);
}

button.link {
   border: 0;
   background: none;
   color: inherit;
   text-decoration: underline;
   padding: 0;
}

.form-actions {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-top: 4px;
}

.filters {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   margin-bottom: 16px;
}

.filters input[type="search"] {
   width: 240px;
}

.filters select {
   width: auto;
}

.filters .checkbox {
   margin-bottom: 0;
}

/* ─── Dashboard ───────────────────────────────────────────────────────────── */
.tiles {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 12px;
   margin-bottom: 20px;
}

.tile {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 14px 16px;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.tile--alert {
   border-color: var(--red);
   background: #fdf6f5;
}

.tile--warn {
   border-color: var(--orange);
   background: #fdf8f4;
}

.tile-number {
   font-size: 26px;
   font-weight: 600;
   color: var(--navy);
   line-height: 1.1;
}

.tile--alert .tile-number {
   color: var(--red);
}

.tile-label {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--muted);
}

.card--warn {
   border-color: var(--orange);
}

.toggle {
   display: flex;
   gap: 4px;
}

.button--on {
   background: var(--navy);
   border-color: var(--navy);
   color: #fff;
}

.button--on:hover {
   background: var(--navy);
}

.queue {
   list-style: none;
   margin: 0;
   padding: 0;
}

.queue > li {
   display: grid;
   grid-template-columns: minmax(180px, 1.2fr) 2fr auto;
   gap: 12px;
   align-items: baseline;
   padding: 9px 0;
   border-bottom: 1px solid var(--line);
}

.queue > li:last-child {
   border-bottom: 0;
}

.queue-main {
   display: flex;
   flex-direction: column;
}

.queue-action {
   font-size: 14px;
}

@media (max-width: 640px) {
   .queue > li {
      grid-template-columns: 1fr;
      gap: 2px;
   }
}

/* ─── Call console ────────────────────────────────────────────────────────── */
.outreach-types {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin: 0 0 16px;
}

.console {
   display: grid;
   grid-template-columns: 1fr minmax(320px, 420px);
   gap: 16px;
   align-items: start;
}

@media (max-width: 900px) {
   .console {
      grid-template-columns: 1fr;
   }
}

.console-capture {
   position: sticky;
   top: 68px;
}

@media (max-width: 900px) {
   .console-capture {
      position: static;
   }
}

.script-section h3 {
   margin-top: 0;
}

/* Lines to read aloud. Deliberately the most prominent thing on the page, a rep
   mid-call is scanning, not reading. */
.say {
   font-size: 16px;
   line-height: 1.6;
   border-left: 3px solid var(--navy);
   padding: 6px 0 6px 12px;
   margin: 10px 0;
}

.branch {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin: 16px 0 4px;
   color: var(--muted);
}

.branch--yes {
   color: var(--green);
}

.branch--no {
   color: var(--red);
}

.branch--warn {
   color: var(--orange);
}

.script-hint {
   font-size: 13px;
   color: var(--muted);
   font-style: italic;
   margin: 4px 0 10px;
}

.callout {
   background: var(--paper);
   border-radius: 6px;
   padding: 10px 12px;
   font-size: 13px;
   margin: 12px 0;
}

.timer {
   font-variant-numeric: tabular-nums;
   font-size: 18px;
   font-weight: 600;
   color: var(--muted);
   padding: 4px 8px;
}

.timer--running {
   color: var(--navy);
}

.flash--warn {
   background: #fdf8f4;
   border-color: var(--orange);
   color: var(--orange);
}

code {
   background: var(--paper);
   padding: 1px 4px;
   border-radius: 4px;
   font-size: 13px;
}

/* ─── Playbook ────────────────────────────────────────────────────────────── */
.entry-card {
   margin-bottom: 12px;
}

.entry-head {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 12px;
   flex-wrap: wrap;
}

.entry-head h2 {
   margin: 0;
}

.entry-scenario {
   margin: 6px 0;
}

/* Entries are written as prose with paragraph breaks; keep them. */
.entry-body {
   white-space: pre-wrap;
   margin: 0;
}

.tag--proposed {
   background: #fdf8f4;
   border-color: var(--orange);
   color: var(--orange);
}

.tag--archived {
   text-decoration: line-through;
}

.tag--playbook {
   background: #eef2f8;
   border-color: var(--navy);
   color: var(--navy);
   text-decoration: none;
}

button.promote {
   font-size: 12px;
   color: var(--muted);
}

button.promote:hover {
   color: var(--navy);
}

.plain-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.plain-list li {
   padding: 4px 0;
   border-bottom: 1px solid var(--line);
   font-size: 14px;
}

.plain-list li:last-child {
   border-bottom: 0;
}

/* ─── Product signals ─────────────────────────────────────────────────────── */
.escalation {
   font-size: 13px;
   color: var(--orange);
   margin-top: 4px;
}

.attach-form {
   display: flex;
   gap: 6px;
   align-items: center;
   margin-top: 6px;
}

.attach-form select {
   max-width: 200px;
}

.tag--opportunity {
   background: #fdf0ee;
   border-color: var(--red);
   color: var(--red);
}

.tag--documented {
   background: #fdf8f4;
   border-color: var(--orange);
   color: var(--orange);
}

.tag--shipped {
   background: #eaf3ed;
   border-color: var(--green);
   color: var(--green);
}

.tag--declined {
   text-decoration: line-through;
}

a.tag {
   text-decoration: none;
}

.format-help {
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 10px 12px;
   font-size: 13px;
   overflow-x: auto;
   margin: 8px 0;
}

button[disabled] {
   opacity: 0.4;
   cursor: default;
}

/* ─── Table ───────────────────────────────────────────────────────────────── */
.table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
}

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

.table th {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--muted);
}

/* ─── Bits ────────────────────────────────────────────────────────────────── */
.muted {
   color: var(--muted);
   font-size: 13px;
}

.empty {
   color: var(--muted);
   padding: 8px 0 4px;
}

.flash {
   background: #eaf3ed;
   border: 1px solid var(--green);
   color: var(--green);
   padding: 8px 12px;
   border-radius: 6px;
}

.tag {
   display: inline-block;
   font-size: 11px;
   padding: 1px 6px;
   border-radius: 10px;
   background: var(--paper);
   border: 1px solid var(--line);
   color: var(--muted);
}

.tag--gap {
   background: #fdf0ee;
   border-color: var(--red);
   color: var(--red);
}

.tag--workaround {
   background: #eaf3ed;
   border-color: var(--green);
   color: var(--green);
}

.status {
   font-size: 12px;
}

.status--disqualified,
.status--do_not_contact {
   color: var(--muted);
}

.status--active {
   color: var(--green);
}

.due--overdue {
   color: var(--red);
   font-weight: 600;
}

.due--none {
   color: var(--muted);
}

.next-action {
   font-size: 16px;
   margin: 0 0 4px;
}

dl {
   margin: 0;
   display: grid;
   grid-template-columns: 130px 1fr;
   gap: 4px 12px;
   font-size: 14px;
}

dt {
   color: var(--muted);
   font-size: 13px;
}

dd {
   margin: 0;
}

/* ─── Timeline ────────────────────────────────────────────────────────────── */
.timeline {
   list-style: none;
   margin: 0;
   padding: 0;
}

.timeline > li {
   border-left: 2px solid var(--line);
   padding: 0 0 16px 14px;
   margin-left: 4px;
}

.timeline-head {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   margin-bottom: 6px;
}

.timeline-body {
   grid-template-columns: 110px 1fr;
}

/* ─── Scoring ─────────────────────────────────────────────────────────────── */
.tier {
   display: inline-block;
   font-size: 12px;
   font-weight: 600;
   line-height: 1;
   padding: 3px 8px;
   border-radius: 3px;
   border: 1px solid var(--line);
   white-space: nowrap;
}

.tier--priority {
   background: #eaf3ed;
   border-color: var(--green);
   color: var(--green);
}

.tier--strong {
   background: #f0f4ea;
   border-color: #6d8a2f;
   color: #4f6a1f;
}

.tier--watch {
   background: #fbf3e6;
   border-color: var(--orange);
   color: var(--orange);
}

.tier--not_now {
   background: #f2f0ec;
   border-color: var(--line);
   color: var(--muted);
}

.tier--disqualified {
   background: #f6ecec;
   border-color: var(--red);
   color: var(--red);
}

.score-headline {
   display: flex;
   align-items: baseline;
   gap: 8px;
   font-size: 18px;
   margin: 0 0 12px;
}

.score-headline strong {
   font-size: 22px;
}

.score-grid {
   grid-template-columns: 1fr auto;
}

.gate--pass {
   color: var(--green);
   font-weight: 600;
}

.gate--fail {
   color: var(--red);
   font-weight: 600;
}

.gate--unknown {
   color: var(--muted);
}

table.guide {
   width: 100%;
   border-collapse: collapse;
   margin: 8px 0 4px;
   font-size: 14px;
}

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

table.guide thead th {
   font-size: 13px;
   color: var(--muted);
}

.guide-points {
   width: 40px;
   text-align: center;
   font-weight: 600;
}

.guide-factor {
   margin-bottom: 16px;
}

.guide-factor h3 {
   margin: 0 0 4px;
   font-size: 15px;
}

/* Deep research reads as stacked prose, not a two-column term/definition grid. */
.research {
   grid-template-columns: 1fr;
   gap: 2px 0;
}

.research dt {
   margin-top: 12px;
   font-size: 13px;
   color: var(--muted);
}

.research dt:first-child {
   margin-top: 0;
}

.research dd {
   white-space: pre-line;
}