/* Prepped brand: navy, gold, cream. One light theme, tuned for easy reading.
   Mobile first: the base rules are for phones; 640px adds room, 1024px is the desktop layout.
   Nothing may be wider than the screen: wide tables scroll inside .heat-wrap / .table-wrap. */

@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/dm-serif-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --navy: #1F2E4F;
  --gold: #D9A441;          /* accents only: gold on cream is 2:1, too faint for text */
  --cream: #F7F3EA;
  --surface: #FFFDF8;
  --border: #E2DCCD;
  --control-border: #CFC7B5;
  --text: #1F2E4F;
  --text-2: #4A5468;        /* 6.9:1 on cream */
  --row-hover: #F2EDE1;
  --ok: #2F6B2F;
  --error: #A33A2C;

  /* Heat map: navy tints solved for contrast against the card (1.3 / 2.0 / 4.7 / 8.0 / 13.2 : 1).
     Navy numbers on steps 1-2, cream numbers on 3-5; every pairing is at least 4.7:1. */
  --heat-1: #dfe0e0;
  --heat-2: #b2b6be;
  --heat-3: #697287;
  --heat-4: #434f6a;
  --heat-5: #1F2E4F;

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* One spacing scale for every page. */
  --gutter: 16px;           /* page side padding */
  --card-pad: 16px;
  --gap: 16px;              /* between cards and tiles */
  --tap: 44px;              /* smallest tap target */
  --content: 1100px;
}
@media (min-width: 640px) {
  :root { --gutter: 24px; --card-pad: 24px; --gap: 20px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; --card-pad: 28px; --gap: 24px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font: 16px/1.5 var(--sans);
  overflow-wrap: break-word;
}
img, iframe, video { max-width: 100%; }
a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(31, 46, 79, .35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.2; margin: 0 0 .4rem; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.25; margin: 0 0 .4rem; }
@media (min-width: 1024px) {
  body { font-size: 17px; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.4rem; }
}
p { margin: 0 0 .75rem; }
.muted { color: var(--text-2); }
.small { font-size: .9rem; font-family: var(--sans); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code { font-size: .9em; overflow-wrap: anywhere; }

/* Header: brand, then the four tabs. They share the width on phones and sit beside the brand on desktop. */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-inner {
  max-width: var(--content); margin: 0 auto; padding: 12px var(--gutter) 0;
  display: flex; flex-direction: column; gap: 6px;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--navy); align-self: flex-start; min-height: var(--tap); }
.brand img { width: 40px; height: 40px; display: block; flex: none; }
.brand-text { display: flex; flex-direction: column; }
.wordmark { font-family: var(--serif); font-size: 1.8rem; line-height: 1; }
.tagline { font-size: .9rem; color: var(--text-2); margin-top: .15rem; letter-spacing: .01em; }
.tabs { display: flex; margin: 0 calc(-1 * var(--gutter)); padding: 0 calc(var(--gutter) / 2); }
.tabs a {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 .4rem;
  color: var(--text-2); text-decoration: none; font-weight: 500; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.tabs a:hover { color: var(--navy); }
.tabs a[aria-current="page"] { color: var(--navy); font-weight: 650; border-bottom-color: var(--gold); }
@media (min-width: 640px) { .tabs { padding: 0 var(--gutter); gap: 2px; } .tabs a { flex: none; padding: 0 .9rem; } }
@media (min-width: 1024px) {
  .topbar-inner { flex-direction: row; align-items: center; gap: 1.5rem; padding: 10px var(--gutter); }
  .brand img { width: 44px; height: 44px; }
  .wordmark { font-size: 2rem; }
  .tabs { flex: 1; margin: 0; padding: 0; align-self: stretch; align-items: stretch; }
}

/* Network sub-nav: People | Groups on the left, Upload new export on the right. */
.subnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--gap); }
.subtabs { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.subtabs a {
  display: flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: 6rem; padding: 0 1rem;
  border-radius: 7px; color: var(--text-2); text-decoration: none; font-weight: 550;
}
.subtabs a:hover { color: var(--navy); }
.subtabs a[aria-current="page"] { background: var(--navy); color: var(--cream); }

/* Page and cards */
.page { max-width: var(--content); margin: 0 auto; padding: var(--gutter) var(--gutter) 3rem; }
.page > p:first-child { margin-bottom: var(--gap); }   /* "← Back" links */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: var(--card-pad); margin-bottom: var(--gap); min-width: 0;
}
.card > :last-child { margin-bottom: 0; }
.card-head { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-bottom: 1.1rem; }
.card-head p { margin: 0; }
@media (min-width: 640px) {
  .card-head { flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
  .card-head > div:first-child { flex: 1 1 26rem; min-width: 0; }
}
.section-title { margin-top: 1.5rem; }

/* Summary tiles: two across on phones, three on tablets, one row (up to six) on desktop. */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--gap); }
.card .tiles { margin: 1rem 0; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem; min-width: 0; }
.card .tile { background: #fff; }
.tile-value { display: block; font-family: var(--serif); font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-label { color: var(--text); font-weight: 550; }
.tile-label small { display: block; color: var(--text-2); font-weight: 400; font-size: .85rem; line-height: 1.35; }
@media (min-width: 1024px) { .tile-value { font-size: 2.1rem; } }

/* Heat map: scrolls inside its card. The sector names stay pinned on the left and the company types on top.
   Sticky cells need border-collapse: separate with no border-spacing (Safari ignores sticky cells in a collapsed
   table, and spacing would let scrolled cells show through beside the pinned column), so the gaps between
   cells come from padding, and pinned cells get an opaque background. The scroll box has a height limit so
   the header row has something to stick to. */
.scale { display: flex; align-items: center; gap: 5px; font-size: .9rem; }
.swatch { width: 24px; height: 16px; border-radius: 4px; }
.heat-wrap, .table-wrap {
  position: relative;   /* keeps absolutely positioned children (e.g. .sr-only) inside the scroll box */
  max-width: 100%; max-height: 75vh; max-height: 75dvh; overflow: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.heat { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.heat th { font-weight: 500; color: var(--text-2); font-size: .8rem; overflow-wrap: normal; background: var(--surface); }
.heat thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--border); }
.heat .corner { text-align: left; vertical-align: bottom; padding: 0 8px 8px 0; left: 0; z-index: 3; }
.heat .col-head { vertical-align: bottom; line-height: 1.2; padding: 0 3px 8px; text-align: center; }
.heat .row-head, .heat .corner { box-shadow: inset -1px 0 0 var(--border); }
.heat thead .corner { box-shadow: inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border); }
.heat .row-head {
  position: sticky; left: 0; z-index: 1;
  text-align: right; padding: 0 9px 0 0; color: var(--text);
  white-space: normal; line-height: 1.2; max-width: 7.5rem; overflow-wrap: normal;
}
.heat td { height: 50px; padding: 3px; text-align: center; }
.heat tbody tr:first-child td, .heat tbody tr:first-child .row-head { padding-top: 6px; }
.heat td:nth-child(2) { padding-left: 6px; }
/* Cells keep a 44px minimum through their contents (browsers ignore min-width on table cells), so the
   table scrolls on phones instead of crushing columns. */
.heat td.empty::before {
  content: ""; display: block; width: 44px; height: 44px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--border);
}
.heat td.total { color: var(--text-2); font-size: .9rem; min-width: 44px; }
@media (min-width: 1024px) {
  /* Fills the card and, at the 1100px content width, fits every company type without scrolling. A mouse
     doesn't need 44px targets, so cells may go down to 40px here. */
  .heat { width: 100%; }
  .heat td { padding: 2px; height: 44px; }
  .heat .row-head { max-width: 9rem; }
  .heat td.empty::before { width: 40px; height: 40px; }
  .heat .cell, .heat td.total { min-width: 40px; }
}
.cell {
  width: 100%; min-width: 44px; height: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 5px; cursor: pointer;
  font: 600 1rem var(--sans); transition: transform .08s ease, box-shadow .08s ease;
}
.cell:hover, .cell:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--gold); outline: none; transform: translateY(-1px); }
.s1 { background: var(--heat-1); color: var(--navy); }
.s2 { background: var(--heat-2); color: var(--navy); }
.s3 { background: var(--heat-3); color: var(--surface); }
.s4 { background: var(--heat-4); color: var(--surface); }
.s5 { background: var(--heat-5); color: var(--surface); }

.tip {
  position: fixed; z-index: 10; pointer-events: none; max-width: 280px;
  background: var(--navy); color: var(--cream); border-radius: 8px; padding: .55rem .75rem; font-size: .95rem;
  box-shadow: 0 6px 18px rgba(31, 46, 79, .25);
}
.tip strong { display: block; }

/* Forms. Controls are full width and at least 44px tall on every screen. */
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; color: var(--text); font-weight: 500; min-width: 0; }
input, select, textarea, button { font: inherit; color: var(--text); }
input[type="search"], input[type="text"], input[type="email"], input[type="url"], input[type="date"], select, textarea {
  width: 100%; max-width: 100%; min-height: var(--tap); min-width: 0;
  background: var(--surface); border: 1px solid var(--control-border); border-radius: 8px; padding: .55rem .7rem;
  font-weight: 400; font-size: 16px;   /* 16px stops iOS zooming into the field */
}
input[type="file"] { max-width: 100%; min-height: var(--tap); font-size: 1rem; }
input[type="file"]::file-selector-button {
  min-height: var(--tap); margin-right: .75rem; padding: 0 1rem; border: 0; border-radius: 8px;
  background: var(--navy); color: var(--cream); font: inherit; font-weight: 600; cursor: pointer;
}
button, .button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); max-width: 100%;
  background: var(--navy); color: var(--cream); border: 0; border-radius: 8px; padding: .55rem 1.1rem;
  cursor: pointer; font-weight: 600; text-decoration: none; text-align: center;
}
button:hover, .button:hover { background: #2B3E66; }
button.secondary, .button.secondary { background: var(--surface); color: var(--navy); box-shadow: inset 0 0 0 1px var(--control-border); }
button.secondary:hover, .button.secondary:hover { background: var(--row-hover); }
button.link { background: none; color: var(--navy); padding: .3rem .45rem; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
button.link:hover { background: var(--row-hover); }
button.danger { color: var(--error); }
button[disabled] { opacity: .65; cursor: progress; }
.checkbox { display: flex; align-items: center; gap: .6rem; font-weight: 500; min-height: var(--tap); cursor: pointer; }
.checkbox input { width: 22px; height: 22px; flex: none; }
summary { cursor: pointer; color: var(--navy); font-weight: 600; display: flex; align-items: center; min-height: var(--tap); }
.form-stack { display: grid; gap: 1.1rem; max-width: 460px; }
.msg { font-size: .95rem; }
.msg.ok { color: var(--ok); }
.msg.error { color: var(--error); }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin: 1.4rem 0 .6rem; }
.date-pick { margin: 1rem 0; display: flex; gap: .6rem; align-items: flex-end; }
.date-pick .field { flex: 1 1 16rem; max-width: 22rem; }

/* Network filters: stacked on phones, two across on tablets, a grid on desktop. */
.filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: end; }
@media (min-width: 640px) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .filters .grow { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); } .filters .grow { grid-column: span 2; } }
.filter-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 1rem 0 1.25rem; }
.save-group { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.save-group input { flex: 1 1 12rem; width: auto; }
@media (min-width: 640px) {
  .filter-actions { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
}

/* People table */
.table-head { display: flex; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.table-head h2 { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .3rem 0; padding: 0; }
.chips li { background: var(--row-hover); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .75rem; font-size: .9rem; }
/* Same pinning as the heat map: Name stays on the left and the header row on top while the rest scrolls. */
table.people { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.people th { text-align: left; font-weight: 650; color: var(--text); border-bottom: 2px solid var(--border); padding: .6rem .55rem; white-space: nowrap; }
.people td { border-bottom: 1px solid var(--border); padding: .55rem .55rem; vertical-align: top; background: var(--surface); }
.people thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.people th:first-child, .people td.name {
  position: sticky; left: 0; z-index: 1; background: var(--surface); border-right: 1px solid var(--border);
}
.people thead th:first-child { z-index: 3; }
.people td:not(.name):not(.row-actions) { min-width: 7.5rem; }
.people tbody tr:hover > td, .people tr.editing > td { background: var(--row-hover); }
.people .name { font-weight: 600; white-space: normal; min-width: 8rem; max-width: 9.5rem; }
@media (min-width: 640px) { .people .name { white-space: nowrap; max-width: none; } }
.people td a { display: inline-flex; align-items: center; min-height: var(--tap); }
.people select { min-width: 12rem; }
@media (min-width: 1024px) { .people td a { min-height: 0; } table.people { font-size: 1rem; } }
.tag { font-size: .85rem; border: 1px solid var(--control-border); border-radius: 5px; padding: 0 .4rem; color: var(--text-2); white-space: nowrap; }
.edited { font-size: .8rem; font-weight: 600; color: #8A6516; background: #FBF1DC; border-radius: 4px; padding: 0 .35rem; white-space: nowrap; }
.warmth { white-space: nowrap; font-weight: 550; }
.warmth::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: 1px; }
.warmth.hot::before { background: var(--navy); }
.warmth.warm::before { background: var(--heat-3); }
.warmth.talked-today::before { background: var(--navy); box-shadow: 0 0 0 2px var(--gold); }
.warmth.cold::before { background: transparent; box-shadow: inset 0 0 0 2px var(--heat-2); }
.warmth.unknown { font-weight: 400; color: var(--text-2); }
.warmth.unknown::before { background: transparent; box-shadow: inset 0 0 0 2px var(--border); }
.empty-state { color: var(--text-2); padding: 1rem 0; margin: 0; }
.row-actions { white-space: nowrap; }
.remind-menu { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; white-space: normal; }
.remind-menu input[type="date"] { width: auto; }
.reminder-badge { font-size: .85rem; font-weight: 600; background: #E8EBF2; color: var(--navy); border-radius: 4px; padding: .05rem .4rem; white-space: nowrap; }
.removed-badge { font-size: .85rem; font-weight: 600; background: #EEE9DE; color: var(--text-2); border-radius: 4px; padding: .05rem .4rem; white-space: nowrap; }

/* Company page */
.company-head .chips { margin: .6rem 0; }
.description { font-size: 1.05rem; max-width: 70ch; margin: 1rem 0 .3rem; }
.provenance { color: var(--text-2); font-size: .95rem; margin: 0 0 1.25rem; }
.competitors { padding-left: 1.2rem; margin: .6rem 0 1.25rem; }
.competitors li { margin: .1rem 0; }
.competitors a { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (min-width: 1024px) { .competitors a { min-height: 0; } .competitors li { margin: .25rem 0; } }
.edit-labels .filters { margin-top: .5rem; }

/* Lists: groups, reminders, recent imports, saved items. Rows stack on phones. */
.group-list, .plain-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.group-list > li, .plain-list > li {
  display: flex; flex-direction: column; align-items: stretch; gap: .6rem;
  padding: .9rem 0; border-top: 1px solid var(--border);
}
.plain-list.compact > li { padding: .55rem 0; }
.plain-list .row-actions, .group-list .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; white-space: normal; }
.plain-list .row-actions form, .group-list form { margin: 0; }
.plain-list .nowrap { white-space: normal; }
.group-name { font-weight: 650; }
/* Links that stand alone in a list row (names, dates, titles) are 44px tap targets below desktop widths. */
.plain-list a, .group-list a { display: inline-flex; align-items: center; min-height: var(--tap); }
.plain-list p a { display: inline; min-height: 0; }
@media (min-width: 640px) {
  .group-list > li, .plain-list > li { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 1rem; }
  .plain-list .row-actions { justify-content: flex-end; flex: none; max-width: 55%; }
  .plain-list .nowrap { white-space: nowrap; }
}
@media (min-width: 1024px) { .plain-list a, .group-list a { display: inline; min-height: 0; } }
.email-frame { display: block; width: 100%; border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 0; overflow: hidden; }

/* Upload */
.alert { background: #FBF1DC; border: 1px solid #EAD39C; border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0; }
.alert.error { background: #FBE9E7; border-color: #E9B5AE; }
.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.upload-form { display: grid; gap: 1rem; margin: 1.25rem 0; max-width: 640px; }
.dropzone { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; border: 2px dashed var(--control-border); border-radius: 12px; padding: 1.1rem; background: var(--surface); cursor: pointer; min-width: 0; }
.dropzone input[type="file"] { width: 100%; }
.dropzone:hover, .dropzone:focus-within { border-color: var(--navy); }
.dropzone-title { font-weight: 650; font-size: 1.1rem; }
.help ol { padding-left: 1.3rem; }
.help li { margin: .35rem 0; }
.details { padding-left: 1.2rem; }
.details li { margin: .3rem 0; }
.name-list { max-width: 75ch; }
progress { width: 100%; max-width: 520px; height: 14px; accent-color: var(--navy); }

/* Add to brief */
.add-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 1.25rem 0 .8rem; }
@media (min-width: 640px) { .add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.add-box { display: grid; gap: .8rem; align-content: start; min-width: 0; }
.saved-item { display: flex; gap: .8rem; align-items: flex-start; max-width: 78ch; min-width: 0; }
.saved-item > div { min-width: 0; }
.saved-item p { margin: .4rem 0; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex: none; }
@media (min-width: 640px) { .thumb { width: 96px; height: 96px; } .saved-item { gap: 1rem; } }
.takeaway span { font-weight: 650; color: #8A6516; }
.take { margin: .4rem 0 .25rem; }
.take span { font-weight: 650; }
.detail-bullets { margin: .25rem 0 .5rem; padding-left: 1.2rem; }
.detail-bullets li { margin: .15rem 0; }
.status { color: var(--text-2); font-style: italic; }
.status.warn { color: #8A6516; font-style: normal; }

/* Editor picks */
.picks-form { display: grid; gap: 1.1rem; max-width: 760px; }
.pick { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; display: grid; gap: .8rem; background: #fff; }
.pick legend { font-weight: 650; padding: 0 .3rem; }
.pick.has-error { border-color: #E9B5AE; }
@media (min-width: 640px) { .pick { padding: 1rem 1.2rem; } }

/* Sign in */
.signin { max-width: 30rem; margin: 1rem auto; }
.signin-form { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
@media (min-width: 640px) { .signin { margin: 2.5rem auto; } }