/* Digital Business Card - main stylesheet.

   The page palette is the reference tokens from docs/design/card-mockup.html
   (brand, brand-soft, accent, ink, surface, line, text, text-dim, text-faint,
   link, radius, radius-card, font) - the page's only colour set; replace
   there, do not add a second set. This file sets them.

   The card itself stays template-driven (ADR-0017): render.js sets
   --surface/--ink/--muted/--accent/--brand/--link inline on the card element
   from the template record, so the .card rules below consume those tokens
   (with the default template's values as fallbacks) and the app chrome
   consumes the reference palette. A template value never becomes a stylesheet
   rule - it is a CSS custom property set on the card element. */

:root {
  /* Reference palette (docs/design/card-mockup.html). */
  --brand: #4F46E5;
  --brand-soft: #C7D2FE;
  --accent: #F59E0B;
  --ink: #0B0F1A;
  --surface: #111827;
  --line: #1F2937;
  --text: #FFFFFF;
  --text-dim: #9CA3AF;
  --text-faint: #6B7280;
  --link: #818CF8;

  /* Shape, depth and type from the reference. */
  --radius: 10px;
  --radius-card: 16px;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  font-family: var(--font);
  line-height: 1.5;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  min-height: 100vh;
}

.page {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

/* ---- App shell and masthead ---------------------------------------------- */

.app-shell {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.app-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--brand);
  padding: 20px 24px;
}

.wordmark {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-soft);
  font-weight: 500;
}

.app-title {
  margin: 6px 0 0;
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
}

/* The app nav (this task, ADR-0027): the signed-in screen switcher between
   the editor and the Leads screen, shown in the masthead. It sits between the
   brand and the auth control; the design's left rail (docs/design/app.html)
   is the product vision, this is the minimal in-app switch this task ships. */
.app-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* A nav item on the brand-coloured masthead: a pill that reads as a control,
   with the active screen filled. The active state is set by main.js
   (nav-item--on), never by a server value. */
.nav-item {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  color: var(--brand-soft);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.nav-item:hover {
  border-color: var(--text);
  color: var(--text);
}

.nav-item--on {
  background: var(--text);
  border-color: var(--text);
  color: var(--brand);
  font-weight: 600;
}

.auth-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The signed-in identity in the masthead (this task, ADR-0022): the avatar,
   name and email beside the sign-out control. The whole block is hidden by
   default (signed out), so the signed-out header is unchanged; main.js reveals
   it from the account the session probe returns. The avatar is provider-hosted
   (ADR-0022) and shows an initials fallback when it is absent or fails to
   load - never a broken image. */
.account-identity {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  max-width: 16rem;
}

.account-avatar {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: var(--surface);
}

/* The initials fallback shown when the avatar is absent or fails to load: a
   branded circle, never a broken image. The initials are written with
   textContent by the page. */
.account-avatar--fallback {
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
}

.account-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.account-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.account-email {
  font-size: 0.78rem;
  color: var(--brand-soft);
  overflow-wrap: anywhere;
}

.app-body {
  padding: 24px;
}

.app-body--center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Two-column app layout (wide) ---------------------------------------- */

.app-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) 1fr;
  gap: 2.25rem;
  align-items: start;
}

/* ---- Live preview --------------------------------------------------------- */

.preview-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* The card is a centred portrait object at a bounded width - a card, not a
   page. */
.preview-slot {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ---- Template picker ------------------------------------------------------ */

.section-label {
  margin: 0 0 0.6rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.template-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.template-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
}

.template-option:hover {
  border-color: var(--brand);
  color: var(--text);
}

.template-option input {
  accent-color: var(--brand);
}

.template-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--text);
}

.template-notice {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* ---- Slug link ------------------------------------------------------------ */

.slug-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.slug-link {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--link);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.slug-link:hover {
  text-decoration: underline;
}

.status {
  min-height: 1.3em;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

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

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--link);
  color: var(--link);
}

.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* The primary action follows the reference: accent fill, ink text. */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

.btn-primary:hover {
  color: var(--ink);
  filter: brightness(1.05);
}

/* Ghost button for the masthead auth control. */
.btn-ghost {
  background: transparent;
  border-color: var(--brand-soft);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--text);
  color: var(--text);
}

/* ---- Editor form ----------------------------------------------------------- */

.form-column fieldset {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

.form-column legend {
  margin-bottom: 0.85rem;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
}

.form-column fieldset > .field:first-child,
.form-column fieldset > .field-grid:first-child {
  margin-top: 0;
}

.form-column label {
  font-size: 12px;
  color: var(--text-dim);
}

.form-column input,
.form-column textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  color: var(--text);
  font: 400 15px var(--font);
}

.form-column input::placeholder,
.form-column textarea::placeholder {
  color: var(--text-faint);
}

.form-column input:focus,
.form-column textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}

.form-column input[type="color"] {
  padding: 0.25rem;
  height: 2.75rem;
  cursor: pointer;
}

.form-column textarea {
  resize: vertical;
}

.photo-preview {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.form-error {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.form-actions .btn-primary {
  width: 100%;
  padding: 0.85rem 1.15rem;
  font-size: 16px;
  font-weight: 600;
}

.form-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* ---- The card (template-driven, ADR-0017) --------------------------------- */

.card {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
  position: relative;
  background: var(--surface, #ffffff);
  color: var(--ink, #1f2733);
  border: 1px solid var(--line, #e1e5ea);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  overflow: hidden;
}

/* The template `rule` header: a short accent bar above the name (ADR-0017). */
.card-rule {
  width: 2.75rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--accent, #3366ff);
  margin-bottom: 1.25rem;
}

/* The `band` and `block` headers: a full-bleed brand-colour block at the top. */
.card-band,
.card-block {
  flex: none;
  background: var(--brand, var(--accent, #3366ff));
  margin: -2rem -2rem 0;
}

.card-band {
  height: 5rem;
}

.card-block {
  height: 8rem;
}

/* The initials avatar that overlaps the band/block headers. */
.card-avatar {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--accent, #3366ff);
  color: var(--surface, #ffffff);
  font-weight: 600;
  border: 3px solid var(--surface, #ffffff);
  margin-top: -1.75rem;
  margin-bottom: 0.5rem;
}

/* The `photo` header (portrait template): the card's photo fills the top. */
.card-photo-header {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  margin: -2rem -2rem 1.5rem;
}

.card-photo {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line, #e1e5ea);
  margin-bottom: 1rem;
}

.card-name {
  margin: 0 0 0.25rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink, #1f2733);
  overflow-wrap: anywhere;
}

.card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent, #3366ff);
  overflow-wrap: anywhere;
}

.card-org {
  margin: 0.1rem 0 0;
  color: var(--muted, #5c6675);
  overflow-wrap: anywhere;
}

.card-contacts {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.card-contact-label {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #5c6675);
}

.card-contact-value {
  color: var(--link, var(--accent, #3366ff));
  text-decoration: none;
  overflow-wrap: anywhere;
}

.card-contact-value:hover {
  text-decoration: underline;
}

.card-address,
.card-note {
  margin: 1.25rem 0 0;
  color: var(--muted, #5c6675);
  overflow-wrap: anywhere;
}

.card-note {
  color: var(--ink, #1f2733);
}

/* The on-card QR footer (this task) is carried by both the editor preview
   (render.js appends it after the shared card tree) and the public page a
   recipient receives (html-render.js serves the same footer structure; the
   page script draws the plate client-side). The authoritative layout
   reference is docs/design/card-footer-qr.html - it states the rules this
   block implements:
     - the footer is a column: the plate above the caption as siblings in a
       column, neither overlapping the other;
     - the plate is sized as a fraction of the card, never a fixed pixel size,
       so the plate and the QR fit within the card's content box at any card
       width;
     - the plate's padding is the quiet zone - it is never removed to gain
       space;
     - colour is specified only where structural: the white plate, the inset
       hairline on light surfaces, and the footer rule following the surface.
       Template colours stay owned by templates.js (render.js sets
       --surface/--ink/--muted/--accent/--brand/--link inline on the card). */
.card-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  /* The footer rule follows the surface (reference rule): mostly the card's
     own surface token with a little ink, so it reads as a crease in the card
     - a light line on a light surface, a dark line on a dark one - never a
     foreign colour. */
  border-top: 1px solid color-mix(in srgb, var(--surface, #ffffff) 86%, var(--ink, #1f2733));
}

/* The plate: the QR's light plate, sized as a fraction of the card (never a
   fixed pixel size) so the QR scales with the card and always stays inside
   the content box. The plate's padding is the quiet zone (reference rule) and
   is never removed to gain space. The white plate, the inset hairline and the
   rule above are the only structural colours here; every other colour on the
   card comes from the template's tokens. */
.qr-slot {
  width: 62%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: #ffffff; /* the white plate (structural; render.js sets it inline too) */
  padding: 0.75rem;    /* the quiet zone - do not remove */
  display: grid;
  place-items: center;
  /* The inset hairline (structural): a faint ring that lets the white plate
     read as a plate on a light surface; on a dark surface the plate's own
     contrast does the work. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.07);
}

/* The drawn QR (canvas, or the SVG fallback) fills the plate's content box -
   the plate's padding around it is the quiet zone. Both are square, so the
   matrix keeps its shape at any size and never bleeds past the card. */
.qr-slot .qr-canvas,
.qr-slot .qr-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.card-footer-text {
  color: var(--muted, #5c6675);
  font-size: 0.85rem;
  text-align: center;
}

/* ---- Visitor capture form (this task, ADR-0027) ---------------------------
   The capture form and its disclosure are emitted by the renderer
   (html-render.js captureFormHtml) on every stored card's page - never copied
   into a template record (ADR-0017) - and are absent from the legacy
   URL-encoded card (ADR-0015/0027). The form is a plain HTML form with no
   JavaScript: it posts to the card's own URL, so these styles only make it
   readable on the card page; they never add behaviour. The disclosure is a
   VISIBLE element of the form (ADR-0027): the essential facts paragraph
   renders normally, and the "details" control below it may expand the fuller
   text but never hides the essentials behind a click. */

.capture {
  width: 100%;
  max-width: 24rem;
  margin: 1.5rem auto 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.capture-heading {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.capture-form {
  display: grid;
  gap: 0.9rem;
}

.capture-field {
  display: grid;
  gap: 0.35rem;
}

.capture-field label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.capture-field input,
.capture-field textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  color: var(--text);
  font: 400 0.95rem var(--font);
}

.capture-field input:focus,
.capture-field textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}

.capture-field textarea {
  resize: vertical;
}

/* The disclosure is a visible element of the form (ADR-0027): the essential
   facts paragraph is shown in full, never behind the details control. */
.capture-disclosure {
  display: grid;
  gap: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.capture-disclosure-essential {
  margin: 0;
  color: var(--text-dim);
}

.capture-disclosure-details {
  color: var(--text-faint);
}

.capture-disclosure-details summary {
  cursor: pointer;
  color: var(--link);
}

.capture-disclosure-details p {
  margin: 0.5rem 0 0;
}

.capture-submit {
  width: 100%;
  padding: 0.8rem 1.15rem;
  font-size: 1rem;
  font-weight: 600;
}

/* ---- Visitor capture confirmation (this task, ADR-0027) -------------------
   The fixed HTML page a capture POST answers - for a live slug and a missing,
   deleted or reserved slug alike (ADR-0013 condition 3) - returned by
   functions/[[path]].js captureSuccess()/captureRateLimited() from
   html-render.js. The page can carry nothing that differs between a live and
   a dead slug, so this block only makes the fixed copy readable on the same
   page surface as the capture form. The per-lead deletion token (ADR-0027) is
   a later task; it fills the #capture-deletion-token seam, hidden until then. */

.capture-confirmation {
  width: 100%;
  max-width: 24rem;
  margin: 3rem auto 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.capture-confirmation-title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

.capture-confirmation-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* The per-lead deletion token seam (ADR-0027): empty and hidden today; the
   later task that issues the token surfaces it here. The existing [hidden]
   rule keeps it out of view until then. */
.capture-confirmation-token {
  margin-top: 1rem;
}

/* ---- Leads screen (this task, ADR-0027) ----------------------------------
   The signed-in account's own card's leads, following the Leads screen in
   docs/design/app.html: a heading and subtitle, then a table of Person / How
   / What happened / When, newest first. The panel is the app-body inside the
   shared app shell; main.js swaps it with the editor body via the app nav.
   Every lead today comes from the capture form, so the source reads Form;
   "What happened" is the visitor's message. The table is rendered by main.js
   with textContent only (the untrusted boundary holds here too); these styles
   only make it readable on the app surface - they never add behaviour. */

.leads-panel {
  max-width: 56rem;
}

.leads-heading {
  margin-bottom: 1.25rem;
}

.leads-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
}

.leads-summary {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* The empty state: a dashed panel (the design's empty-reads-as-an-open
   invite), shown when the account's card has no leads yet. */
.leads-empty {
  padding: 2rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-align: center;
}

.leads-empty-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.leads-empty-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* The table: the design's panel with a header row and hairline-separated
   rows. Column order is Person, How, What happened, When (docs/design/
   app.html). */
.leads-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}

.leads-table {
  width: 100%;
  border-collapse: collapse;
}

.leads-table th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}

.leads-table td {
  padding: 1rem;
  font-size: 0.9rem;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.leads-table tr:last-child td {
  border-bottom: none;
}

/* Person: the name with the email beneath, like the design's who2 block. */
.leads-person {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.leads-person-name {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.leads-person-email {
  font-size: 0.8rem;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

/* How: a small badge. Every lead today is a capture-form lead, so the page
   writes "Form" for every row; the badge just makes it read as a source. */
.leads-source {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.75rem;
}

/* What happened: the visitor's message, or the neutral fallback. */
.leads-message {
  color: var(--text-dim);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* When: a short relative time, kept from wrapping so the column reads as a
   time, like the design's when column. */
.leads-when {
  color: var(--text-faint);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ---- Card view chrome ------------------------------------------------------ */

.card-view .app-shell {
  max-width: 26rem;
  margin: 0 auto;
}

.card-view .card {
  margin: 0 auto;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.card-edit {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-faint);
}

.card-edit a {
  color: var(--link);
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 52rem) {
  .page {
    padding-top: 1.5rem;
  }

  .app-body {
    padding: 1.25rem;
  }

  /* One column on a narrow viewport: the fields first, the preview below. */
  .app-grid {
    grid-template-columns: 1fr;
  }

  .form-column {
    order: 1;
  }

  .preview-column {
    order: 2;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 1.25rem;
  }

  /* Keep the full-bleed headers touching the smaller card's edges too. */
  .card-band,
  .card-block,
  .card-photo-header {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .card-band {
    margin-top: -1.25rem;
  }

  .card-block {
    margin-top: -1.25rem;
  }

  .card-photo-header {
    margin-top: -1.25rem;
  }

  /* The leads table keeps a minimum width and scrolls horizontally on the
     narrowest screens rather than crushing the message column. */
  .leads-table-wrap {
    overflow-x: auto;
  }

  .leads-table {
    min-width: 34rem;
  }
}