/* Throughline brand tokens — drawn straight from §2 of the brief */
:root{
  /* paper */
  --vellum:   #F8F5EE;
  --cream:    #FCFAF4;
  --tracing:  #F2EDE2;
  --hairline: #E4E0D6;
  /* ink */
  --graphite: #1F2024;
  --soft:     #6E6B65;
  --softer:   #9A9690;
  --blueprint:#1F4E79;
  /* state — spirit accents, one at a time, never two on a screen */
  --brass: #C9A961;
  --terra: #B85948;
  --sage:  #7A8B6C;

  /* the mark's line at rest — pencil, never graphite */
  --pencil: #9CA3AF;

  /* semantic states — canonical (brand book v2 §03). The mark (and UI)
     wears the state; the line is the default carrier. */
  --state-forward:  var(--blueprint);   /* recommendation · the forward action */
  --state-anchored: var(--brass);       /* a cultural moment named */
  --state-drift:    var(--terra);       /* the redline pencil — something moved */
  --state-live:     var(--sage);        /* reading now · verified */

  /* dark ground — blueprint lifted one step of light on graphite */
  --blueprint-dark: #5B84AE;

  /* data duo — charts only. Blueprint leads, signal is the counter/pop.
     Distinct from the spirit accents above: these two MAY share a chart. */
  --signal:      #CC6B33;   /* the pop — the counter line / bar to watch */
  --signal-soft: color-mix(in oklch, var(--signal) 12%, transparent);
  --blueprint-soft: color-mix(in oklch, var(--blueprint) 12%, transparent);
  --field:       color-mix(in oklch, var(--graphite) 10%, transparent);

  /* type stacks */
  --display: "Futura", "ITC Avant Garde Gothic Pro", "Avant Garde", "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "SFMono-Regular", "Berkeley Mono", Menlo, Consolas, monospace;
}

/* Artboard reset — every screen lives in a 1440×900 .tl-frame */
.tl-frame{
  width:1440px; height:900px;
  background:var(--vellum);
  color:var(--graphite);
  font-family:var(--body);
  position:relative;
  overflow:hidden;
  font-size:14px;
  line-height:1.4;
  letter-spacing:-0.005em;
  /* anti-aliased weight on warm paper */
  -webkit-font-smoothing:antialiased;
}

/* The two display modes that follow the brief verbatim */
.tl-q { font-family:var(--display); font-style:italic; font-weight:400; }    /* the question the system asks */
.tl-a { font-family:var(--display); font-style:normal; font-weight:400; }    /* the answer the system gives */
.tl-frame h1, .tl-frame h2, .tl-frame h3 { font-weight:400; margin:0; }

/* Mono labels — uppercase, wide-tracked. The ambient register. */
.tl-mono{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.20em;
  font-size:10.5px;
  color:var(--soft);
  font-weight:500;
}
.tl-mono.lg { font-size:12px; }
.tl-mono.sm { font-size:9.5px; }
.tl-mono.ink { color:var(--graphite); }
.tl-mono.blueprint { color:var(--blueprint); }
.tl-mono.brass { color:var(--brass); }
.tl-mono.sage { color:var(--sage); }
.tl-mono.terra { color:var(--terra); }
.tl-mono.signal { color:var(--signal); }

/* Body italic, soft grey — hints, "or", dot-leader sources */
.tl-hint{
  font-family:var(--body);
  font-style:italic;
  color:var(--soft);
  font-size:13px;
}

/* Standard numeric display */
.tl-num{ font-family:var(--display); font-weight:400; font-variant-numeric:tabular-nums; }

/* Hairlines */
.tl-rule { border:0; border-top:1px solid var(--hairline); }
.tl-rule.ink { border-top-color:var(--graphite); }
.tl-rule.blueprint { border-top-color:var(--blueprint); }
.tl-rule.signal { border-top-color:var(--signal); }
.tl-rule.dashed { border-top-style:dashed; }

/* Links — blueprint, subtly underlined */
.tl-link{
  color:var(--blueprint);
  text-decoration:none;
  border-bottom:1px solid color-mix(in oklch, var(--blueprint) 30%, transparent);
  padding-bottom:1px;
  cursor:pointer;
  font-family:var(--body);
}
.tl-link:hover{ border-bottom-color:var(--blueprint); }

/* Persistent header — mark + recipient line */
.tl-pageheader{
  position:absolute; top:36px; left:64px; right:64px;
  display:flex; align-items:center; justify-content:space-between;
  z-index:2;
}

/* Caption strip used above headlines */
.tl-caption{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.20em;
  font-size:10.5px;
  color:var(--soft);
}
.tl-caption .sep{ opacity:0.5; margin:0 10px; }

/* Dot leaders (provenance) */
.tl-dotleader{
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--body); font-style:italic; font-size:12.5px;
  color:var(--soft);
}
.tl-dotleader .dots{
  flex:1; min-width:0;
  border-bottom:1px dotted var(--hairline);
  transform:translateY(-3px);
}

/* Demo-mode footer (§7.5) */
.tl-demobadge{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  font-family:var(--mono); text-transform:uppercase;
  letter-spacing:0.20em; font-size:9.5px; color:var(--soft); opacity:0.5;
}

/* Confidence dots */
.tl-conf{ display:inline-flex; gap:5px; vertical-align:middle; }
.tl-conf i{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--graphite);
}
.tl-conf i.empty{ background:transparent; box-shadow:inset 0 0 0 1px var(--graphite); }

/* Buttons (rare — Throughline barely uses them) */
.tl-btn{
  font-family:var(--mono); text-transform:uppercase;
  letter-spacing:0.18em; font-size:11px;
  background:transparent; border:1px solid var(--graphite);
  color:var(--graphite); padding:13px 22px;
  cursor:pointer;
}
.tl-btn:hover{ background:var(--graphite); color:var(--cream); }
.tl-btn.ghost{ border-color:var(--hairline); color:var(--soft); }
.tl-btn.ghost:hover{ background:transparent; color:var(--graphite); border-color:var(--graphite); }

/* The mark — see Mark.jsx */
.tl-mark{ display:inline-block; vertical-align:middle; }

/* Section header on the canvas — reset; we use brand-style instead */
.dc-sectionhead .dc-editable{
  font-family: var(--display) !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

/* a few helpers used by primitives */
.tl-card{
  background:var(--cream);
  border:1px solid var(--hairline);
  padding:28px;
}
.tl-card.tracing{ background:var(--tracing); }

/* Architectural drafting line — sometimes used to draw moment markers */
.tl-momentline{
  position:relative;
  border-left:1px dashed var(--brass);
  height:100%;
}