/*
 * Speaker Radar - base styles. No framework, no build step. Kept small and
 * boring on purpose: system fonts, one accent color, plain forms and
 * tables. Modules add their own classes on top of this.
 */

:root {
  /* Warmed neutrals. The old greys were cool; a speaker's own material sits
     better on a paper-warm ground. */
  --color-bg: #f8f6f2;
  --color-surface: #ffffff;
  --color-surface-sunken: #f2efe9;
  --color-border: #e2ddd2;
  --color-border-strong: #c9c2b2;
  --color-text: #201d17;
  --color-text-muted: #6b6558;
  --color-text-faint: #9a9484;
  --color-accent: #1f6f5c;
  --color-accent-dark: #164f42;
  --color-accent-contrast: #ffffff;
  --color-accent-tint: #eaf3f0;

  /* Outcome triad, unchanged values. */
  --color-success-bg: #eaf6ef;
  --color-success-text: #1f6f4f;
  --color-error-bg: #fbeceb;
  --color-error-text: #a3352a;
  --color-info-bg: #eaf1f7;
  --color-info-text: #29587d;

  /* Neutral: "nothing set yet", suggested, dismissed. */
  --color-neutral-bg: #eef0ee;
  --color-neutral-text: #4c534e;

  /* Amber is the ONE "this needs you" colour in the app, and it means
     exactly one thing: an AI wrote it and nobody has confirmed it yet.
     The old #d99b28 failed contrast twice - 2.42:1 as a boundary (needs
     3:1) and 2.42:1 behind white button text (needs 4.5:1). These pass. */
  --color-draft-bg: #fdf0d5;
  --color-draft-text: #8a5a00;
  --color-draft-border: #e8c986;
  --color-draft-edge: #af7d1f;
  --color-draft-fill: #8c6419;
  --color-draft-fill-hover: #714f14;
  --color-draft-notice-bg: #fdf6e8;
  --color-draft-notice-text: #6f4a05;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';
  /* Headings only. System serifs, so nothing is downloaded. */
  --font-serif-display: Georgia, 'Iowan Old Style', Charter, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;

  --shadow-card: 0 1px 2px rgba(32, 29, 23, 0.05), 0 1px 1px rgba(32, 29, 23, 0.03);
  --shadow-lift: 0 8px 24px rgba(32, 29, 23, 0.12);
  --focus-ring: 0 0 0 3px rgba(31, 111, 92, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-serif-display);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

p {
  margin: 0 0 1em;
}

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

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

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

/* ---------------------------------------------------------------------- */
/* Header / nav                                                           */
/* ---------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  text-decoration: none;
  margin-right: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav-links a:hover {
  color: var(--color-text);
}

/* The nav link rule above outranks .btn-primary on specificity, which turned
   the header Sign up button's text accent-on-accent. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover {
  color: var(--color-accent-contrast);
}

.nav-link-active {
  color: var(--color-text) !important;
  font-weight: 600;
}

.nav-account {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.logout-form {
  margin: 0;
  display: inline;
}

/* The header Feedback control: a plain <details> so it opens with no
   JavaScript at all. htmx (loaded on every page) upgrades the submit into
   an in-place swap of this same element when it is present. */
.feedback-widget {
  position: relative;
}

.feedback-widget-summary {
  cursor: pointer;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.feedback-widget-summary::-webkit-details-marker {
  display: none;
}

.feedback-widget-summary:hover {
  color: var(--color-text);
}

.feedback-widget-body {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 20;
  width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.feedback-form label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.feedback-form select,
.feedback-form textarea {
  width: 100%;
  margin-bottom: var(--space-3);
}

.feedback-sent {
  margin: 0;
  color: var(--color-text);
}

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

.btn,
.btn-link,
button {
  font-family: inherit;
  font-size: 0.95rem;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}

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

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-accent-contrast);
}

.btn-small {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
}

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

/* ---------------------------------------------------------------------- */
/* Flash messages                                                         */
/* ---------------------------------------------------------------------- */

.flash {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 0.95rem;
}

.flash-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.flash-error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.flash-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

/* ---------------------------------------------------------------------- */
/* Badge                                                                  */
/* ---------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Landing page                                                           */
/* ---------------------------------------------------------------------- */

.hero {
  padding: 48px 0 32px;
}

.hero h1 {
  font-size: 2.1rem;
  max-width: 720px;
}

.hero-lede {
  max-width: 640px;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

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

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}

.feature-card h2 {
  font-size: 1.05rem;
}

.feature-card p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.95rem;
}

.cta-footer {
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------- */
/* Pricing page                                                           */
/* ---------------------------------------------------------------------- */

.pricing-page {
  padding: 24px 0;
}

.pricing-lede {
  color: var(--color-text-muted);
  max-width: 560px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.pricing-amount {
  font-size: 2rem;
  font-weight: 700;
  margin: 8px 0 0;
}

.pricing-amount span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.pricing-annual {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 12px;
}

.pricing-blurb {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.pricing-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 0.9rem;
}

.pricing-specs li {
  padding: 4px 0;
}

.pricing-note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------- */
/* Auth pages                                                             */
/* ---------------------------------------------------------------------- */

.auth-page {
  max-width: 420px;
  margin: 32px auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.auth-switch {
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                  */
/* ---------------------------------------------------------------------- */

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='url'],
input[type='date'],
select,
textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------- */
/* Dashboard / cards                                                      */
/* ---------------------------------------------------------------------- */

.dashboard {
  padding: 8px 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.module-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.module-card:hover,
.module-card:focus-visible {
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.module-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lift), var(--focus-ring);
}

.module-card h2 {
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.module-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Tables                                                                 */
/* ---------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

th {
  color: var(--color-text-muted);
  font-weight: 600;
  background: var(--color-bg);
}

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

.table-wrap {
  overflow-x: auto;
}

/* ---------------------------------------------------------------------- */
/* Copy block                                                             */
/* ---------------------------------------------------------------------- */

.copy-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin: 12px 0;
  overflow: hidden;
}

.copy-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.copy-block-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.copy-block-text {
  margin: 0;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------------------------------------------------- */
/* Tracker stage pills                                                    */
/* ---------------------------------------------------------------------- */

.stage {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.stage-suggested {
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
}

.stage-interested {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

/* Amber used to live here too. It moved out: amber is reserved for
   unconfirmed AI text, and "submitted" is waiting on the organizer, not on
   the speaker. */
.stage-submitted {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.stage-accepted {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.stage-declined {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.stage-delivered {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.stage-dismissed {
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
}

/* ---------------------------------------------------------------------- */
/* Error page                                                             */
/* ---------------------------------------------------------------------- */

.error-page {
  max-width: 560px;
  margin: 48px auto;
  text-align: center;
}

.error-code {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin: 0 0 8px;
}

.error-detail {
  color: var(--color-text-muted);
}

.error-stack {
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

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

@media (max-width: 600px) {
  .nav {
    gap: 12px;
  }

  .nav-account {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  .auth-page {
    margin: 16px;
    padding: 24px;
  }

  /* The chat bubble insets used to be overridden here and it never worked:
     the unconditional .chat-turn-member and .chat-turn-assistant rules are
     declared further down this file, same specificity, so source order won
     and a 375px phone still got the full 48px inset. The override now lives
     at the very end of the file, after everything it has to beat. */
}

/* ---------------------------------------------------------------------------
   Collapsible panels: the Battle Book all-in-one page.
   --------------------------------------------------------------------------- */

.bb-overview .page-intro {
  color: var(--color-text-muted);
  margin-top: -0.25rem;
}

.bb-panel-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 1.25rem 0 0.75rem;
  flex-wrap: wrap;
}

.bb-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: 0.625rem;
  overflow: hidden;
}

.bb-panel-summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  user-select: none;
}

.bb-panel-summary::-webkit-details-marker {
  display: none;
}

.bb-panel-summary::before {
  content: '\25B8';
  color: var(--color-text-muted);
  font-size: 0.8rem;
  transition: transform 0.12s ease-in-out;
}

.bb-panel[open] > .bb-panel-summary::before {
  transform: rotate(90deg);
}

.bb-panel[open] > .bb-panel-summary {
  border-bottom: 1px solid var(--color-border);
}

.bb-panel-summary:hover {
  background: var(--color-bg);
}

.bb-panel-title {
  flex: 1 1 auto;
}

.bb-panel-count {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  min-width: 1.5rem;
  text-align: center;
}

.bb-panel-body {
  padding: 1rem;
}

.bb-section-body > .bb-create {
  margin-bottom: 1rem;
}

.bb-create > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent);
  padding: 0.25rem 0;
}

.bb-create > summary:hover {
  color: var(--color-accent-dark);
}

.bb-row-preview {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

/* ---------------------------------------------------------------------------
   Review state: anything an AI wrote is amber until a human confirms it.
   --------------------------------------------------------------------------- */

.review-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

.review-badge-draft {
  background: var(--color-draft-bg);
  color: var(--color-draft-text);
  border: 1px solid var(--color-draft-border);
}

.review-notice {
  border: 1px solid var(--color-draft-border);
  border-left: 4px solid var(--color-draft-edge);
  background: var(--color-draft-notice-bg);
  color: var(--color-draft-notice-text);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.review-notice a {
  color: var(--color-draft-notice-text);
}

.review-inline-note {
  color: var(--color-draft-text);
  font-size: 0.85rem;
}

.bb-list-item.is-ai-draft {
  border-left: 4px solid var(--color-draft-edge);
  border-color: var(--color-draft-border);
  border-left-color: var(--color-draft-edge);
  background: #fffdf7;
}

.bb-confirm-all {
  display: inline-block;
  margin-bottom: 0.75rem;
}

.btn-confirm {
  background: var(--color-draft-fill);
  border-color: var(--color-draft-fill-hover);
  color: #ffffff;
}

.btn-confirm:hover {
  background: var(--color-draft-fill-hover);
}

/* ---------------------------------------------------------------------------
   "How this page works": the per-page instruction panel.
   --------------------------------------------------------------------------- */

.page-guide {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin: 1rem 0 1.25rem;
}

.page-guide-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent-dark);
  padding: 0.7rem 1rem;
  list-style: none;
  user-select: none;
}

.page-guide-summary::-webkit-details-marker {
  display: none;
}

.page-guide-summary::before {
  content: '\25B8  ';
  font-size: 0.75rem;
}

.page-guide[open] > .page-guide-summary::before {
  content: '\25BE  ';
}

.page-guide-body {
  padding: 0 1rem 1rem;
  font-size: 0.9rem;
}

.page-guide-what {
  margin-top: 0;
  color: var(--color-text);
}

.page-guide-steps {
  margin: 0.75rem 0;
  padding-left: 1.2rem;
}

.page-guide-steps li {
  margin-bottom: 0.4rem;
  color: var(--color-text-muted);
}

.page-guide-steps strong {
  color: var(--color-text);
}

.page-guide-notes {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.page-guide-notes li {
  margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------------- */
/* Document intake                                                         */
/* ---------------------------------------------------------------------- */

.intake-page section {
  margin: 1.75rem 0;
  padding: 1.25rem;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
}

.intake-page section h2 {
  margin-top: 0;
  font-size: 1.05rem;
}

.intake-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.intake-docs {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.intake-doc {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e3e6ea;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: #fbfcfd;
}

.intake-doc.is-failed {
  border-left: 4px solid #c0392b;
  background: #fdf1f0;
}

.intake-doc-name {
  display: block;
  font-weight: 600;
  word-break: break-word;
}

.intake-doc-meta {
  display: block;
  font-size: 0.85rem;
  color: #5b6570;
}

.intake-doc-error {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: #a33227;
}

.intake-doc-remove {
  margin: 0;
  flex: none;
}

.intake-counts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 0;
  padding: 0;
}

.intake-counts li {
  font-size: 0.9rem;
  color: #33404d;
}

.intake-result {
  border-left: 4px solid #2f7d5d;
}

.intake-gaps {
  border-left: 4px solid #d99b28;
  background: #fffaf1;
}

.intake-gaps ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.intake-gaps li {
  margin-bottom: 0.35rem;
}

.intake-stub-note {
  font-size: 0.85rem;
  color: #7a6320;
}

/* ---------------------------------------------------------------------------
   Focus. Only form fields used to get a visible ring, which left every link
   and button in the app keyboard-invisible.
   --------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-link:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Page header and button groups. Replaces the raw style="" attributes that
   were scattered through the Tracker views.
   --------------------------------------------------------------------------- */

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.page-header h1 {
  margin: 0;
}

.btn-group {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.btn-group-right {
  justify-content: flex-end;
}

/* A stacked label/input form. Lifted out of the per-page <style> blocks that
   the Assemble and Concierge pages used to hand-roll. */

.form-stacked label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.form-stacked input[type='text'],
.form-stacked input[type='url'],
.form-stacked select,
.form-stacked textarea {
  width: 100%;
  margin-bottom: var(--space-4);
}

.badge-gap {
  display: inline-block;
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
}

/* "Start here" is not "an AI wrote this". It used to borrow the amber draft
   badge, which made an empty profile look like unreviewed AI text. */
.badge-start {
  display: inline-block;
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Radar. This page emitted fifteen class names and the stylesheet had rules
   for none of them, so it rendered as a bare browser-default table.
   --------------------------------------------------------------------------- */

.radar-filters,
.radar-import,
.radar-import-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  margin: var(--space-4) 0;
}

.radar-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.radar-table th {
  background: var(--color-surface-sunken);
  text-align: left;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
}

.radar-table td {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  vertical-align: top;
}

/* `.radar-checkbox` is on the LABEL, so the 16px belongs to the input inside
   it. Sizing the label itself squeezed the text into a three-line wrap. */
.radar-filters .radar-checkbox,
.radar-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  font-size: var(--text-sm);
  padding-bottom: var(--space-2);
}

.radar-checkbox input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Each filter is a stacked label over its control. */
.radar-filters label,
.radar-import label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.radar-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  white-space: nowrap;
}

.radar-badge-none {
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
}

.radar-badge-past {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.radar-badge-soon {
  background: var(--color-draft-bg);
  color: var(--color-draft-text);
}

.radar-badge-ok {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.radar-empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.radar-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.radar-detail-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.radar-detail-row:first-child {
  border-top: none;
}

.radar-detail-label {
  width: 160px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.radar-detail-value {
  flex: 1;
}

/* ---------------------------------------------------------------------------
   Battle Book row layer. Only compound selectors existed before, so the list
   carried browser default bullets and no spacing of its own.
   --------------------------------------------------------------------------- */

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

/* Each row is one visual unit. Without this the row's own Edit and Delete
   links sit closer to the row below them than to the row they belong to. */
.bb-list-item {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: var(--space-2);
}

.bb-row-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.bb-row-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.bb-create-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Dashboard: the first-run hero and the returning-member briefing.
   --------------------------------------------------------------------------- */

.dash-hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.dash-hero h1 {
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-3);
}

.dash-hero p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 62ch;
}

.dash-hero-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* The quiet version, shown once a member has dismissed the assistant. */
.dash-hero-quiet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.briefing-stats {
  display: flex;
  gap: var(--space-7);
  flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-5);
}

.briefing-stat {
  text-decoration: none;
  color: var(--color-text);
}

.briefing-num {
  display: block;
  font-family: var(--font-serif-display);
  font-size: var(--text-3xl);
  line-height: 1.1;
}

.briefing-num-attention {
  color: var(--color-draft-text);
}

.briefing-num-zero {
  color: var(--color-text-faint);
}

.briefing-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}

.briefing-next {
  background: var(--color-accent-tint);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

.dash-index-heading {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  font-family: var(--font-sans);
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------------
   Onboarding assistant.
   --------------------------------------------------------------------------- */

.assistant-page {
  max-width: 780px;
}

.chat-transcript {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.chat-turn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.chat-turn-member {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
  margin-left: var(--space-7);
}

/* The mirror of .chat-turn-member's inset, so a reply sits off the right
   edge the way a member's turn sits off the left and the transcript reads
   as two sides talking, not a stacked log. Applies to every assistant/chat
   kind turn (Assemble's turns included) unless a more specific kind rule
   below resets it, e.g. a system note has no side to sit on. */
.chat-turn-assistant {
  margin-right: var(--space-7);
}

/* .chat-turn-chat needs no rule of its own: it is the base .chat-turn
   bubble, left alone. Named here so the choice not to fork it is visible
   rather than looking like a missed class. */

/* A drafting turn is the one that produced amber content, so it carries the
   amber edge itself. The member should be able to scroll back and find the
   moment the AI wrote something. */
.chat-turn-draft {
  border-left: 4px solid var(--color-draft-edge);
  background: var(--color-draft-notice-bg);
}

/* A system note (the assistant's own status line, not a reply from either
   party - a re-match confirmation, an opening message) drops the bubble
   shape entirely so it never reads as something someone said. Order matters:
   this comes after .chat-turn-assistant so its margin reset wins. */
.chat-turn-system {
  background: none;
  border: none;
  border-top: 1px dashed var(--color-border);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: var(--space-3) 0 0;
  text-align: center;
}

.chat-turn-system .chat-who {
  display: none;
}

.chat-turn-system .chat-body {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.chat-who {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.chat-body {
  /* A pasted form or a model reply can carry a long unbroken token (a URL,
     an id). Without this one long word forces the whole page to scroll
     sideways on a phone screen. */
  overflow-wrap: anywhere;
}

.chat-body p:last-child,
.chat-body ul:last-child {
  margin-bottom: 0;
}

.chat-body ul {
  margin: 0 0 1em;
  padding-left: 1.25rem;
}

.chat-meta {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin: 0;
}

.chat-composer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.chat-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chat-form label {
  font-weight: 600;
  font-size: var(--text-sm);
}

.chat-form textarea,
.chat-form input[type='text'] {
  width: 100%;
}

.chat-form button {
  align-self: start;
}

.chat-draft {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.chat-draft .field-hint {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Assemble and Concierge. These two pages used to inject their own <style>
   block on every render, with hardcoded greys that predated the tokens.
   --------------------------------------------------------------------------- */

.assembler-page label,
.concierge-page label {
  display: block;
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.assembler-page input[type='text'],
.assembler-page select,
.assembler-page textarea,
.concierge-page input[type='text'],
.concierge-page select,
.concierge-page textarea {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  font-weight: normal;
}

.assembler-page textarea,
.concierge-page textarea {
  font-family: inherit;
}

.assembler-page form,
.concierge-page form {
  margin-bottom: var(--space-5);
}

.answer-block {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.answer-block form {
  margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------------------
   Assemble: the working session. A chat scoped to one assembly that can
   rewrite the answers above it. It reuses the .chat-* classes the
   onboarding assistant page defined; everything here is what Assemble
   needs on top of that base, scoped under .assembly-session/.assembly-setup
   rather than forked onto the shared class names. See
   docs/CONTRACT-TRACKS-AND-CHAT.md section 3.
   --------------------------------------------------------------------------- */

.assembly-setup {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.assembly-setup form {
  margin-bottom: 0;
}

/* .inline-form has no base rule of its own (every module that uses it
   lays it out its own way), so the row-of-controls treatment is scoped to
   this section rather than declared globally on a class this file does
   not own the meaning of everywhere it appears. */
.assembly-setup .inline-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.assembly-setup .inline-form label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
}

.assembly-setup .inline-form select {
  width: auto;
  margin-top: 0;
}

.assembly-session {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* The line telling a member which answers a turn rewrote. It has to read
   as important without reading as an error, and amber already means one
   specific thing in this app: an AI wrote this and nobody confirmed it
   yet. Reusing it here would tell a member their rewritten answer is
   unreviewed AI output, which is not what this line means, so it draws on
   the info tokens instead. Contrast: --color-info-text #29587d on
   --color-info-bg #eaf1f7 = 6.6:1, above the 4.5:1 floor for this text
   size. */
.chat-revised {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-info-bg);
  color: var(--color-info-text);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* Tracker layout bits that used to be inline style attributes. */

.tracker-section {
  margin-bottom: var(--space-5);
}

.tracker-stage-panel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  flex-wrap: wrap;
}

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

.tracker-note {
  margin-bottom: var(--space-3);
}

.tracker-note-body {
  margin: 0;
}

.tracker-note-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Admin. Operator-only - every /admin route is behind requireAdmin and the
   nav link is filtered out for members - but it emitted twelve class names
   against zero rules, so it rendered with browser defaults. Same gap Radar
   had. Styled from the same tokens as everything else rather than given its
   own look.
   --------------------------------------------------------------------------- */

.admin-page {
  padding: var(--space-2) 0;
}

.admin-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.admin-subnav-link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.admin-subnav-link:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.admin-subnav-link-active {
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}

.admin-card h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.admin-stat {
  font-family: var(--font-serif-display);
  font-size: var(--text-2xl);
  line-height: 1.1;
  margin: 0 0 var(--space-2);
}

.admin-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.admin-stat-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 2px 0;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.admin-table th {
  background: var(--color-surface-sunken);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}

.admin-table td {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  vertical-align: top;
}

.admin-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.admin-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.admin-inline-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-job-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Job output is raw text and can be long. It scrolls inside its own box
   rather than pushing the page sideways. */
.admin-job-result {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
   Track tabs. Which audience's material a screen is showing right now. A
   member with one audience has one tab and this row never does anything
   for them, so it has to stay out of the way at rest and still be
   scannable once a member has five tracks going. Shared across whatever
   module renders it (Battle Book today); not specific to one page, so it
   lives at the top level rather than nested under a page class. See
   docs/CONTRACT-TRACKS-AND-CHAT.md section 2.
   --------------------------------------------------------------------------- */

.track-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.track-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}

.track-tab:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

/* Active is never colour alone: a heavier weight and a filled, bordered
   shape stand off from the row even in greyscale, on top of the colour
   change. Contrast: --color-accent-dark #164f42 text on
   --color-accent-tint #eaf3f0 background = 8.3:1. Same pair the "Start
   here" badge and the admin sub-nav already use. */
.track-tab-active,
.track-tab-active:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
  font-weight: 700;
}

/* The "+" that opens the new-track form. Dashed so it reads as an empty
   slot to fill rather than one more tab in the set. */
.track-add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  line-height: 1.2;
}

.track-add:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

/* The small tag on a Battle Book row marking which track it belongs to.
   Same accent pairing as the active tab, so a member learns the colour
   once and reads it in both places. Contrast: 8.3:1 (see above). */
.track-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.track-tab:focus-visible,
.track-add:focus-visible,
.track-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------------------------------------------------------------------------
   Narrow screens, last word
   ---------------------------------------------------------------------------
   This block is deliberately the last thing in the file.

   Every rule in it has the same specificity as the unconditional rule it is
   correcting, so the ONLY thing making it win is source order. Putting a
   mobile override earlier and then declaring the base rule later is how the
   chat inset override sat dead in this file: the media query matched, the
   rule parsed, and the later declaration quietly won every time.

   Anything added here must be a genuine narrow-screen correction. Do not put
   base styling in it. */

@media (max-width: 600px) {
  /* The 48px side inset that makes the transcript read as two sides talking
     is real width on a 375px screen. Halve it so a bubble keeps room to wrap
     rather than squeezing text into a sliver, which is what pushes a long
     unbroken word into a horizontal overflow. */
  .chat-turn-member,
  .chat-turn-assistant {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }

  .chat-turn-member {
    margin-right: 0;
  }

  .chat-turn-assistant {
    margin-left: 0;
  }

  /* A system turn has no side to sit on, so it keeps neither inset. */
  .chat-turn-system {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------------------------------------------------------------------- */
/* Tracker board column alignment                                          */
/* ---------------------------------------------------------------------- */
/* The board renders a separate table per stage (tracker/views.ts
   boardSection), so each table sizes its columns from its own longest title
   and the columns step from one stage to the next. Fixed layout plus shared
   widths makes every stage table line up. min-width keeps the columns aligned
   on a narrow screen; .table-wrap already provides the horizontal scroll. */

.tracker-section table {
  table-layout: fixed;
  min-width: 640px;
}

.tracker-section th:nth-child(1),
.tracker-section td:nth-child(1) { width: 38%; }
.tracker-section th:nth-child(2),
.tracker-section td:nth-child(2) { width: 22%; }
.tracker-section th:nth-child(3),
.tracker-section td:nth-child(3) { width: 13%; }
.tracker-section th:nth-child(4),
.tracker-section td:nth-child(4) { width: 13%; }
.tracker-section th:nth-child(5),
.tracker-section td:nth-child(5) { width: 14%; text-align: right; }

.tracker-section td:nth-child(1) a { overflow-wrap: anywhere; }