/* ========================================
   Julia's Brand Design System — casmaAI
   Paper / red / gold, Anton + Special Elite + Arimo.
   Loaded before every other stylesheet so the tokens below
   are what app.css and wizard.css resolve against.
   ======================================== */

:root {
  /* --- Palette --- */
  --paper: #faf7f2;
  --white: #ffffff;
  --red: #ae3736;
  --red-dark: #8f2c2b;
  --red-wash: #fbeeee;
  --gold: #cba403;
  --gold-dark: #b59203;
  --ink: #1b1b1b;
  /* Ink is right for text. For a whole column of it, it reads as a wall,
     so large dark surfaces use the warmer, lighter tone instead. */
  --ink-surface: #34302b;
  --ink-surface-hi: #423d37;
  --line: #e7ddd0;
  --soft: #4a443d;
  --muted: #8a8178;
  --error: #b44a4a;

  /* --- Type --- */
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-accent: 'Special Elite', 'Courier Prime', 'Courier New', monospace;
  --font-body: 'Arimo', 'Inter', Arial, sans-serif;

  /* --- Shape --- */
  --radius: 3px;
  --radius-lg: 4px;
  --border: 1.5px solid var(--line);
  --lift: 0 14px 34px -18px rgba(174, 55, 54, .35);

  /* --- Compatibility aliases ---
     app.css, wizard.css and the older partials still ask for these
     names. Pointing them at the brand palette re-skins those files
     without touching every rule in them. */
  --color-navy: var(--ink-surface);
  --color-navy-light: var(--ink-surface-hi);
  --color-accent: var(--red);
  --color-accent-hover: var(--red-dark);
  --color-text: var(--ink);
  --color-text-light: var(--muted);
  --color-bg: var(--paper);
  --color-bg-light: var(--paper);
  --color-border: var(--line);
  --color-heading: var(--ink);
  --accent: var(--red);
  --bg-dark: var(--ink-surface);
  --text-dark: var(--ink);
  --text-muted: var(--muted);
  --text-light: var(--paper);
  --text-warm: var(--line);
  --font-heading: var(--font-display);
  --sidebar-width: 260px;
}

/* ===== Type roles ===== */

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
}

h1, h2, h3,
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
  color: var(--ink);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: 1.25rem; }

/* One phrase per headline carries the accent. */
.rd { color: var(--red); }
.gd { color: var(--gold); }

/* Sits above a headline. Always Special Elite, always uppercase. */
.eyebrow {
  font-family: var(--font-accent);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

/* ===== Cards ===== */

.b-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.b-card:hover {
  transform: translateY(-6px);
  border-color: var(--red);
  box-shadow: var(--lift);
}
/* Cards that are read, not clicked, should not invite a click. */
.b-card.is-static:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

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

.b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: .9rem;
  letter-spacing: .04em;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s ease;
}
.b-btn:hover { transform: translateY(-1px); }

.b-btn-primary { background: var(--red); color: var(--white); }
.b-btn-primary:hover { background: var(--red-dark); }

.b-btn-secondary { background: var(--gold); color: var(--ink); }
.b-btn-secondary:hover { background: var(--gold-dark); }

.b-btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.b-btn-ghost:hover { background: var(--ink); color: var(--paper); }

.b-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* ===== Tags, badges, chips ===== */

.b-tag {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
}

.b-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: .9rem;
  cursor: pointer;
  transition: all .2s ease;
}
.b-chip:hover { border-color: var(--gold); }
.b-chip.selected {
  background: var(--red-wash);
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

/* ===== Callout ===== */

/* An element with the hidden attribute stays hidden, whatever display a class
   gives it. Without this, any rule with display: flex quietly wins and the
   thing never goes away. That cost us a bug in the reporting. */
[hidden] { display: none !important; }

.b-callout {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.b-callout.is-red { border-left-color: var(--red); }

/* ===== Motion =====
   Julia wants motion on. Reveal styles hide content only once JS has
   confirmed it can reveal them again, so nothing depends on JS to be
   readable. */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.shown {
  opacity: 1;
  transform: none;
}

.b-cursor {
  display: inline-block;
  width: .6ch;
  background: var(--red);
  animation: b-blink 1s steps(1) infinite;
}
@keyframes b-blink {
  50% { background: transparent; }
}

/* ===== Where you are =====
   The same line the eyebrow uses, in ink rather than gold, because it is a
   place and not a label. The step you are on is the heavier one. */
.crumbs {
  font-family: var(--font-accent);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
/* Inside the app the line above the heading says where you are, and where you
   are is written in ink. Gold is for labels on the marketing pages. Half the
   app said it in gold and half in ink, which is worse than either. */
.page-app .eyebrow { color: var(--ink); }
.crumbs .crumb { color: var(--soft); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs .crumb:hover { color: var(--red); border-bottom-color: var(--red); }
.crumbs .crumb-sep { margin: 0 8px; color: var(--line); }
.crumbs .crumb-here { color: var(--ink); }


/* ===== One page, one width =====
   Every page used to carry its own: 800, 880, 900, 1000 and 1320 pixels, with
   three different top paddings and two different side ones, because each was
   written on the day it was needed. Nothing here is a judgement about any one
   page, it is just that nobody ever set the rule. This is the rule. */
:root {
  --page-w: 940px;
  --page-w-wide: 1320px;   /* where a table is genuinely wide: reporting, the builder */
  --page-pad: 44px 36px 70px;
}
.dash, .wk, .biz, .nl, .fw, .bv, .wizard {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: var(--page-pad);
}
.rp {
  max-width: var(--page-w-wide);
  margin: 0 auto;
  padding: var(--page-pad);
}
@media (max-width: 720px) {
  :root { --page-pad: 30px 20px 60px; }
}

/* ===== The blanks casmaAI left, and the way to them ===== */
.gap-box { padding: 14px 16px; margin-bottom: 16px; }
.gap-head { font-weight: 700; margin-bottom: 10px; }
.gap-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
}
.gap-row + .gap-row { border-top: 1px solid rgba(203, 164, 3, .3); }
.gap-what { flex: 1; min-width: 0; color: var(--ink); }
.gap-go {
  flex: none;
  font-family: var(--font-accent);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1.5px solid var(--gold-dark);
  border-radius: 3px;
  background: #fff;
  color: var(--gold-dark);
  cursor: pointer;
  white-space: nowrap;
}
.gap-go:hover { background: var(--gold-dark); color: #fff; }

/* ===== Colour behind the email =====
   A textarea holds one colour, so the colour goes on a copy of the text
   underneath it: same font, same box, same wrapping, scrolled together. The
   copy shows nothing but the bands; the text you read is the real one. */
.hl-wrap { position: relative; }
.hl-back {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: transparent;
  pointer-events: none;
}
.hl-back mark { color: transparent; background: none; border-radius: 2px; }
.hl-back mark.hl-gap  { background: rgba(203, 164, 3, .38); }
.hl-back mark.hl-mine { background: rgba(174, 55, 54, .18); }
.hl-area { position: relative; display: block; background: transparent !important; }

/* Subject and pre-header are single-line fields. Nothing to band, so the
   field itself says it. */
.is-mine { border-color: var(--red) !important; background: #fdf4f3 !important; }

/* What the two colours mean. Said once, above the email. */
.hl-key {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 18px 24px 0;
  margin: 0;
}
.hl-key span { display: inline-flex; align-items: center; gap: 7px; }
.hl-key i {
  width: 13px; height: 13px; border-radius: 2px; display: inline-block;
}
.hl-key i.gap  { background: rgba(203, 164, 3, .38); }
.hl-key i.mine { background: rgba(174, 55, 54, .18); }