/* ============================================================================
   TRAC design system  —  the shared visual language between Ally (iOS) and Kate (web)
   Mirrors: TRACBrand.swift, CompanyDetailView.MetricRow, sectionDivider(title:)
   ========================================================================= */

:root {
  /* ── Brand ───────────────────────────────────────────────────────────── */
  --trac-purple:        #480ee7;   /* Color.tracPurpleDark, light mode         */
  --trac-purple-light:  #c8b3f6;   /* Color.tracPurpleLight                    */
  /* --trac-purple is an ACCENT and lightens to #9575f0 in dark mode so it reads
     against black. That makes it wrong as a FILL under white text: there it
     measures about 2.4:1. Anything filled purple with white type on it uses
     this instead, which stays deep in both themes and gives 8.4:1. */
  --trac-purple-fill:   #480ee7;
  --trac-hero: linear-gradient(135deg, var(--trac-purple-light), var(--trac-purple));

  /* ── Status ──────────────────────────────────────────────────────────── */
  --trac-green:  #34c759;   /* passing / positive / "Email Sent"               */
  --trac-orange: #ff9500;   /* in-progress / "Shared"                          */
  --trac-red:    #ff3b30;   /* failing / negative                              */
  --trac-amber:  #ff8500;   /* investableColor == "amber" — orange, not yellow  */

  /* The status colours above are DOT AND FILL values, tuned to be seen at a
     glance, not read. As 14px type on white, --trac-green measures 2.2:1 and
     --trac-red 3.6:1 — both under AA. These are the darkened values for when
     the colour IS the text, same arrangement as --trac-gold-text below. In
     dark mode the accents already clear AA against black, so the -text
     variants are simply the accents themselves and no override is needed. */
  --trac-green-text: #146c2e;   /* 6.5:1 on white, 5.9:1 on grouped grey */
  --trac-red-text:   #d70015;   /* 5.4:1 on white, 4.8:1 on grouped grey */
  /* --trac-amber is the worst of the three as type: 2.44:1 on white and 2.19:1
     on grouped grey, so it fails even 1.4.11's 3:1 for a non-text mark. The
     preview band's eye glyph is exactly that case — a small icon carrying the
     "you are not yourself right now" signal. */
  --trac-amber-text: #a85200;   /* 5.4:1 on white, 4.9:1 on grouped grey */

  /* A mark that is quiet but must still be SEEN: the resting ▲▼ on a sortable
     column heading is the case that prompted it. --trac-tertiary is the
     obvious choice and the wrong one — at 0.30 alpha it measures 1.73:1, under
     the 3:1 that WCAG 1.4.11 asks of non-text content, and too faint to do the
     one job it has, which is telling someone the column can be sorted before
     they have clicked it. 0.58 is the quietest value that clears 3:1. */
  --trac-affordance: rgba(60, 60, 67, 0.58);   /* 3.3:1 on white */

  /* Eligibility gold. Deliberately NOT --trac-amber: the whole point of the
     shift above was to stop "Check Valuation" and "Fully Eligible" reading as
     the same signal. Gold is the celebration, orange is the caution.
     --trac-gold is the accent bar and tint; --trac-gold-text is the darker
     value that stays legible as text on a light ground. */
  --trac-gold:      rgb(255, 214, 0);
  --trac-gold-text: rgb(209, 153, 0);

  /* ── Text ────────────────────────────────────────────────────────────── */
  --trac-primary:    #000000;
  /* Ally's literal secondaryLabel is 0.60 alpha. On a white desktop page that
     composites to rgb(138,138,142) and measures 3.44:1 — under the 4.5:1 that
     normal-size text needs, and Kate sets whole paragraphs in it where Ally
     sets short labels on a phone held at 30cm. Same reasoning as the icon
     sizes above: the ratio carries over from Ally, the literal value does not.
     0.75 composites to rgb(109,109,114), about 5.0:1, and still reads as
     clearly secondary. Dark mode already measured 6.36:1 and is unchanged. */
  --trac-secondary:  rgba(60, 60, 67, 0.75);   /* cf. UIColor.secondaryLabel   */
  --trac-tertiary:   rgba(60, 60, 67, 0.30);
  --trac-placeholder:rgba(60, 60, 67, 0.30);

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --trac-bg:            #ffffff;   /* systemBackground                         */
  --trac-bg-grouped:    #f2f2f7;   /* systemGroupedBackground                  */
  --trac-bg-secondary:  #f2f2f7;   /* secondarySystemBackground                */
  --trac-fill-tertiary: rgba(118, 118, 128, 0.12);  /* tertiarySystemFill      */
  --trac-gray4:         #d1d1d6;
  /* Label colour for a disabled button, which sits on --trac-gray4. The
     secondary token is only 4.03:1 against that fill in light mode — the
     affordance is carried by the grey background anyway, so the text has no
     reason to be the illegible part. 5.07:1 here, 7.44:1 in dark. */
  --trac-disabled-label: rgba(60, 60, 67, 0.85);
  --trac-gray5:         #e5e5ea;
  --trac-gray6:         #f2f2f7;
  --trac-separator:     rgba(60, 60, 67, 0.30);     /* .secondary.opacity(0.3) */

  /* ── Type ────────────────────────────────────────────────────────────── */
  --trac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", "Segoe UI", system-ui, sans-serif;

  /* ── Icon sizes ──────────────────────────────────────────────────────────
     Ally's point values do not transfer: 12pt on a phone at 30cm is a much
     larger angular size than 12px on a desktop monitor at arm's length. The
     ratios carry over, the absolute numbers do not — these are Ally's
     relationships scaled up for a screen you sit back from.
     Tune the whole app from here. */
  --trac-icon-info:    20px;   /* secondary annotation beside a 16px label   */
  --trac-icon-chevron: 19px;   /* pure affordance, quietest of the three     */
  --trac-icon-status:  22px;   /* pass/fail is data, and should carry weight */

  /* ── Metrics ─────────────────────────────────────────────────────────── */
  --trac-pad-h:        16px;   /* horizontal padding, everywhere              */
  --trac-row-pad-v:    14px;   /* .padding(.vertical, 14) on metric rows      */
  --trac-radius-cta:   14px;   /* RoundedRectangle(cornerRadius: 14)          */
  --trac-radius-card:  10px;   /* secondary cards / pills                     */
  --trac-radius-panel: 18px;   /* TRACHeader card                             */
}

/* Dark mode. The purple lightens so it reads against black — same as the
   dynamic UIColor in TRACBrand.swift. */
html.dark,
.dark {
  --trac-purple:        #9575f0;

  --trac-green:  #30d158;
  --trac-orange: #ff9f0a;
  --trac-red:    #ff453a;
  /* 8.4:1 and 5.0:1 on the dark card — the accents are already legible here. */
  --trac-green-text: #30d158;
  --trac-red-text:   #ff453a;
  --trac-amber-text: #ff9f0a;   /* 10.2:1 on black, 8.3:1 on the dark card */
  --trac-affordance: rgba(235, 235, 245, 0.45);   /* 3.9:1 on black */
  --trac-amber:  #ff8500;
  --trac-gold:      rgb(255, 214, 0);
  --trac-gold-text: rgb(255, 209, 51);   /* brighter: it sits on black */

  --trac-primary:     #ffffff;
  --trac-secondary:   rgba(235, 235, 245, 0.60);
  --trac-tertiary:    rgba(235, 235, 245, 0.30);
  --trac-placeholder: rgba(235, 235, 245, 0.30);

  --trac-bg:            #000000;
  --trac-bg-grouped:    #000000;
  --trac-bg-secondary:  #1c1c1e;
  --trac-fill-tertiary: rgba(118, 118, 128, 0.24);
  --trac-gray4:         #3a3a3c;
  --trac-disabled-label: rgba(235, 235, 245, 0.85);
  --trac-gray5:         #2c2c2e;
  --trac-gray6:         #1c1c1e;
  --trac-separator:     rgba(235, 235, 245, 0.30);
}

/* ============================================================================
   Wordmark  —  TRACWordmark.swift
   "TRAC" black weight in label color, "AI/VC" light weight in brand purple,
   the slash thin + italic + 5% larger.
   ========================================================================= */

.trac-wordmark {
  font-family: var(--trac-font);
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.trac-wordmark .wm-trac { font-weight: 900; color: var(--trac-primary); }
.trac-wordmark .wm-ai,
.trac-wordmark .wm-vc   { font-weight: 300; color: var(--trac-purple); }
.trac-wordmark .wm-slash{
  font-weight: 100;
  font-style: italic;
  font-size: 1.05em;
  color: var(--trac-purple);
}
/* On a gradient or other dark ground, the whole mark goes white. */
.trac-wordmark.light .wm-trac,
.trac-wordmark.light .wm-ai,
.trac-wordmark.light .wm-vc,
.trac-wordmark.light .wm-slash { color: #fff; }

.trac-tagline {
  font-size: 12px;
  font-weight: 400;
  /* Was a literal #8e8e93, which measures 2.8:1 on the sidebar's ground. */
  color: var(--trac-secondary);
}

/* ============================================================================
   Section divider  —  sectionDivider(title:)
   ── SECTION TITLE ──  rules on both flanks, 10pt small caps, kerned.
   ========================================================================= */

.trac-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 26px var(--trac-pad-h) 11px;
}
.trac-section::before,
.trac-section::after {
  content: "";
  flex: 1 1 auto;
  height: 0.5px;
  background: var(--trac-separator);
}
.trac-section > span {
  /* 10px secondary-grey read as a caption rather than a heading, so sections
     did not announce themselves and long pages ran together. Bigger, bolder,
     full-contrast, with more air above than below so the rule binds to the
     content it introduces. min-width lets a long title wrap on a phone
     instead of pushing the rules off the edge. */
  flex: 0 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--trac-primary);
}

/* One step down on a phone: at 13px a long title wraps to three lines of bold
   uppercase, which stops reading as a heading and starts reading as shouting.
   The flanking rules also collapse to nothing once the span takes the full
   width, so the size has to give instead. */
@media (max-width: 560px) {
  .trac-section { padding-top: 18px; }
  .trac-section > span { font-size: 13px; letter-spacing: 0.3px; }
}

/* ============================================================================
   Metric row  —  CompanyDetailView.MetricRow
   [Label + ⓘ]  [Value]  [✓ / ✗ / › / reserved space]
   Two equal columns, then a fixed 20px accessory gutter that is always
   reserved so values line up whether or not a row has an accessory.
   ========================================================================= */

.trac-rows { display: block; }

.trac-row {
  display: grid;
  grid-template-columns: 1fr 1fr 20px;
  align-items: center;
  gap: 8px;
  padding: var(--trac-row-pad-v) 0;
  font-family: var(--trac-font);
  font-size: 16px;
  color: var(--trac-primary);
}
/* Block, not flex: when a long label wraps on a narrow screen the ⓘ button
   should flow with the last word, not get pushed onto a line of its own. */
.trac-row__label {
  display: block;
  font-weight: 600;
  min-width: 0;
}
.trac-row__value {
  font-weight: 400;
  min-width: 0;
  overflow-wrap: anywhere;
}
.trac-row--bold .trac-row__label,
.trac-row--bold .trac-row__value { font-weight: 700; }

.trac-row__accessory {
  justify-self: end;
  display: flex;
  align-items: center;
  font-size: var(--trac-icon-status);
  line-height: 1;
}
.trac-row__accessory.pass { color: var(--trac-green); }
.trac-row__accessory.fail { color: var(--trac-red); }
.trac-row__accessory.chevron {
  font-size: var(--trac-icon-chevron);
  font-weight: 600;
  color: var(--trac-secondary);
}
/* Reserved, invisible chevron — keeps every row's columns aligned. */
.trac-row__accessory.ghost { visibility: hidden; }

/* A row that navigates somewhere. It is a div with role=button rather than a
   real <button>, because a row may also contain the ⓘ popover button and
   nested interactive elements are invalid HTML. */
.trac-row--tappable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.trac-row--tappable:active { opacity: 0.55; }
.trac-row--tappable:focus-visible {
  outline: 2px solid var(--trac-purple);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Value colors driven by the backend's investableColor. */
.trac-value--green  { color: var(--trac-green)  !important; }
.trac-value--amber  { color: var(--trac-amber)  !important; }
.trac-value--gold   { color: var(--trac-gold-text) !important; }
.trac-value--red    { color: var(--trac-red)    !important; }
.trac-value--purple { color: var(--trac-purple) !important; }
.trac-value--muted  { color: var(--trac-secondary) !important; }

/* Divider between rows — inset 16px on the left, matching
   Divider().padding(.leading, 16). */
.trac-divider {
  height: 0.5px;
  background: var(--trac-separator);
  margin-left: var(--trac-pad-h);
}
.trac-divider--full { margin-left: 0; }

/* Framework7 declares `.f7-icons { font-size: 22px }` on the <i> element
   itself, so sizing a container does nothing to the glyph inside it — every
   icon in these components was rendering at 22px no matter what the parent
   said. Opting our own components back into inheritance makes the sizes below
   mean what they appear to mean. */
.trac-info .f7-icons,
.trac-row__accessory .f7-icons { font-size: inherit; line-height: 1; }

/* ⓘ popover trigger  —  InfoPopoverButton.swift */
/* Sized down from 15px and given more room to breathe: at the label's own
   size it competed with the text instead of annotating it, and 4px of margin
   left it crowding the colon. The tap target stays comfortable because the
   padding is larger than the glyph. */
.trac-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--trac-icon-info);
  height: var(--trac-icon-info);
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--trac-purple);
  font-size: var(--trac-icon-info);
  line-height: 1;
  vertical-align: -3px;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;      /* anchor for the expanded hit area below */
}
/* Grows the touch target to ~25px without changing layout, so shrinking the
   glyph does not make the button harder to hit on a phone. */
.trac-info::before {
  content: "";
  position: absolute;
  inset: -6px;
}

/* ============================================================================
   Company logo  —  CompanyLogo.swift
   Rounded square from the Brandfetch CDN, building-icon fallback.
   ========================================================================= */

.trac-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--trac-gray5);
  color: #8e8e93;
}
.trac-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.trac-logo .fallback { font-size: 0.42em; }

/* ============================================================================
   Status badges  —  MyIntrosView status colors
   ========================================================================= */

.trac-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: var(--trac-fill-tertiary);
  color: var(--trac-secondary);
}
.trac-badge--sent    { color: var(--trac-green);  }
.trac-badge--shared  { color: var(--trac-orange); }
.trac-badge--notsent { color: var(--trac-secondary); }
.trac-badge--trac    { color: var(--trac-purple); }

/* ============================================================================
   Buttons
   ========================================================================= */

.trac-btn {
  /* flex, not inline-flex: `margin: auto` resolves to 0 on an inline-level box,
     so the max-width cap left the button stranded against the left edge
     instead of centred. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--trac-radius-cta);
  font-family: var(--trac-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: var(--trac-purple-fill);
  color: #fff;
}
.trac-btn:disabled { background: var(--trac-gray4); color: var(--trac-disabled-label); cursor: default; }
.trac-btn--secondary {
  border-radius: var(--trac-radius-card);
  background: var(--trac-fill-tertiary);
  color: var(--trac-purple);
}

.trac-link { color: var(--trac-purple); text-decoration: none; }
.trac-link:hover { text-decoration: underline; }