/* Calder & Rowe: evergreen ink, warm ivory paper, brass detail. Newsreader for display, Public Sans for text.
   Chat tokens first (see /kit/chat.css :root), then the intake page (top bar, rail), then the custom blocks. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..600&family=Public+Sans:wght@400;500;600;700&display=swap");

:root {
  --cr-green: #1f4a3d;
  --cr-green-deep: #15342b;
  --cr-brass: #a7814a;
  --cr-brass-soft: #e9dcc3;
  --cr-paper: #f6f1e7;
  --cr-top-h: 68px;

  --bk-accent: var(--cr-green);
  --bk-accent-ink: #fbf7ee;
  --bk-accent-soft: color-mix(in srgb, var(--cr-green) 9%, transparent);
  --bk-bg: #fffdf8;
  --bk-surface: #f4eee2;
  --bk-surface-2: #ece4d4;
  --bk-border: #e0d6c2;
  --bk-border-strong: #c9bb9f;
  --bk-text: #1b2420;
  --bk-muted: #59625d;
  --bk-user-bg: var(--cr-green);
  --bk-user-ink: #fbf7ee;
  --bk-font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bk-font-display: "Newsreader", Georgia, serif;
  --bk-radius: 16px;
  --bk-radius-sm: 12px;
  --bk-glow: 0 0 0 1px color-mix(in srgb, var(--cr-brass) 45%, transparent), 0 10px 28px -10px color-mix(in srgb, var(--cr-brass) 60%, transparent);
  --bk-shadow: 0 1px 2px rgba(40, 32, 16, 0.06), 0 14px 40px -14px rgba(40, 32, 16, 0.25);
  --bk-good: #1f6b4a;
  --bk-warn: #9a5b0f;
  --bk-bad: #9b2c2c;
}

html, body { margin: 0; }
body.cr-intake {
  font-family: var(--bk-font); color: var(--bk-text); font-size: 16px;
  background: var(--cr-paper) url("/assets/paper.webp") center / 900px auto;
  overflow: hidden;
}

/* ---------- top bar ---------- */
.cr-top {
  height: var(--cr-top-h); box-sizing: border-box; display: flex; align-items: center; gap: 28px; padding: 0 22px;
  background: linear-gradient(180deg, var(--cr-green) 0%, var(--cr-green-deep) 100%); color: #f3ead8;
  border: 1px solid #0f2820; position: relative; z-index: 30;
}
.cr-logo { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; flex: none; }
.cr-logo img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(214, 182, 122, 0.35); }
.cr-logo strong { display: block; font: 600 22px/1.05 var(--bk-font-display); letter-spacing: 0.01em; color: #fbf3e2; }
.cr-logo small { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #cdb88f; margin-top: 3px; }
.cr-nav { display: flex; gap: 6px; margin-right: auto; }
.cr-nav a, .cr-how-btn {
  color: #e9dfca; text-decoration: none; font: 500 16px/1 var(--bk-font); padding: 10px 14px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: background var(--bk-fast), border-color var(--bk-fast), color var(--bk-fast), transform var(--bk-fast), box-shadow var(--bk-fast);
}
.cr-nav a:hover, .cr-how-btn:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(214, 182, 122, 0.45); color: #fff; transform: translateY(-1px); }
.cr-top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.cr-how-btn { display: none; border-color: rgba(214, 182, 122, 0.45); }
.cr-call {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, #c9a46a, #a7814a); color: #1a1408; font: 700 16px/1 var(--bk-font);
  border: 1px solid #d8b97f; transition: transform var(--bk-fast), box-shadow var(--bk-fast), filter var(--bk-fast);
}
.cr-call svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.cr-call:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(233, 205, 150, 0.6), 0 10px 26px -8px rgba(201, 164, 106, 0.8); }
.cr-call:active, .cr-nav a:active { transform: translateY(0); }

/* ---------- app grid: chat (history sidebar + main) and the rail ---------- */
.cr-app { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr); height: calc(100dvh - var(--cr-top-h)); }
.cr-rail { min-height: 0; }
.cr-rail > * { flex: none; }
.cr-chat { min-width: 0; min-height: 0; }
.cr-chat .bk-page { height: 100%; background: transparent; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.cr-chat .bk-page .bk-main { height: 100%; min-height: 0;border: 1px solid var(--bk-border); border-top: 0; border-bottom: 0; }
.cr-chat .bk-side { background: color-mix(in srgb, var(--bk-surface) 82%, transparent); backdrop-filter: blur(2px); }
.bk-side-brand strong { font-size: 20px; }
.bk-side-note { border-color: color-mix(in srgb, var(--cr-brass) 45%, var(--bk-border)); background: color-mix(in srgb, var(--cr-brass-soft) 35%, var(--bk-bg)); color: #4a4436; }
.bk-head { padding-block: 12px; }
.bk-title strong { font-size: 20px; font-weight: 600; }
.bk-avatar { border-color: color-mix(in srgb, var(--cr-brass) 40%, transparent); }
.bk-empty h3 { font-size: 27px; font-weight: 500; line-height: 1.25; max-width: 28ch; }
.bk-empty p { font-size: 16px; }
.bk-empty-avatar .bk-avatar { width: 72px; height: 72px; border-radius: 50%; }
.bk-starter { font-size: 16px; }
.bk-disclaimer { font-size: 14px; color: var(--bk-muted); }
.bk-md h4, .bk-block-title { font-weight: 600; }
.bk-chip { font-size: 15.5px; }

.cr-rail {
  overflow-y: auto; padding: 18px 18px 24px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box;
  background: color-mix(in srgb, var(--cr-paper) 70%, transparent);
}
.cr-rail-close { display: none; }
.cr-photo { margin: 0; position: relative; border-radius: var(--bk-radius); overflow: hidden; border: 1px solid var(--bk-border); box-shadow: var(--bk-shadow); animation: cr-rise 520ms var(--bk-ease) both; }
.cr-photo img { display: block; width: 100%; height: 190px; object-fit: cover; }
.cr-photo figcaption { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; background: linear-gradient(180deg, transparent, rgba(16, 30, 24, 0.92)); color: #fbf3e2; }
.cr-photo strong { display: block; font: 600 20px/1.2 var(--bk-font-display); }
.cr-photo span { display: block; font-size: 15px; color: #e3d6bb; margin-top: 3px; }
.cr-card {
  padding: 16px 18px; border-radius: var(--bk-radius); border: 1px solid var(--bk-border); background: var(--bk-bg);
  box-shadow: 0 1px 2px rgba(40, 32, 16, 0.05); transition: transform var(--bk-fast), box-shadow var(--bk-fast), border-color var(--bk-fast);
  animation: cr-rise 520ms var(--bk-ease) both;
}
.cr-card:nth-of-type(2) { animation-delay: 70ms; } .cr-card:nth-of-type(3) { animation-delay: 140ms; }
.cr-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cr-brass) 55%, var(--bk-border)); box-shadow: var(--bk-glow); }
.cr-card h2 { margin: 0 0 10px; font: 600 21px/1.2 var(--bk-font-display); color: var(--cr-green-deep); }
.cr-card p { margin: 0; font-size: 16px; line-height: 1.55; color: #3c4540; }
.cr-how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cr-how li { display: flex; gap: 12px; align-items: flex-start; }
.cr-how b {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cr-brass) 60%, transparent); background: color-mix(in srgb, var(--cr-brass-soft) 50%, var(--bk-bg));
  color: #6b5023; font: 600 16px/1 var(--bk-font-display);
}
.cr-how strong { display: block; font-size: 16px; }
.cr-how span { display: block; font-size: 15px; color: var(--bk-muted); line-height: 1.45; }
.cr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cr-tags span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bk-border); background: var(--bk-surface); font-size: 14.5px; color: #3c4540; }
.cr-legal { background: color-mix(in srgb, var(--cr-brass-soft) 30%, var(--bk-bg)); border-color: color-mix(in srgb, var(--cr-brass) 40%, var(--bk-border)); }
.cr-scrim { position: fixed; inset: 0; background: rgba(12, 22, 18, 0.45); z-index: 40; animation: cr-fade var(--bk-med) var(--bk-ease); }

/* ---------- custom blocks ---------- */
.cr-block {
  padding: 16px 18px; border-radius: var(--bk-radius); border: 1px solid var(--bk-border); background: var(--bk-bg);
  box-shadow: var(--bk-shadow); transition: transform var(--bk-fast), box-shadow var(--bk-fast), border-color var(--bk-fast);
}
.cr-block:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cr-brass) 50%, var(--bk-border)); box-shadow: var(--bk-glow), var(--bk-shadow); }
.cr-ico { width: 20px; height: 20px; flex: none; }
.cr-block-head { display: flex; align-items: center; gap: 12px; }
.cr-block-head > div { min-width: 0; flex: 1; }
.cr-block-ico {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--cr-green); color: #e2c48d; border: 1px solid var(--cr-green-deep);
}
.cr-block-ico.cr-ok { background: var(--bk-good); color: #fff; border-color: var(--bk-good); }
.cr-kicker { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8a6a37; }
.cr-block h4 { margin: 2px 0 0; font: 600 21px/1.25 var(--bk-font-display); color: var(--bk-text); }
.cr-block h5 { margin: 0 0 8px; font: 600 15px/1.3 var(--bk-font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bk-muted); }
.cr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--bk-border); background: var(--bk-surface); }
.cr-pill[data-tone="good"] { color: var(--bk-good); border-color: color-mix(in srgb, var(--bk-good) 45%, transparent); background: color-mix(in srgb, var(--bk-good) 9%, var(--bk-bg)); }
.cr-pill[data-tone="warn"] { color: var(--bk-warn); border-color: color-mix(in srgb, var(--bk-warn) 45%, transparent); background: color-mix(in srgb, var(--bk-warn) 9%, var(--bk-bg)); }
.cr-pill[data-tone="neutral"] { color: #4a4436; }
.cr-urgency { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 600; border: 1px solid var(--bk-border); background: var(--bk-surface); color: #4a4436; }
.cr-urgency .cr-ico { width: 16px; height: 16px; }
.cr-urgency[data-u="elevated"] { color: var(--bk-warn); border-color: color-mix(in srgb, var(--bk-warn) 45%, transparent); background: color-mix(in srgb, var(--bk-warn) 8%, var(--bk-bg)); }
.cr-urgency[data-u="urgent"], .cr-urgency[data-u="past_deadline"] { color: var(--bk-bad); border-color: color-mix(in srgb, var(--bk-bad) 45%, transparent); background: color-mix(in srgb, var(--bk-bad) 8%, var(--bk-bg)); }
.cr-reason { margin: 12px 0 0; font-size: 16px; line-height: 1.55; }
.cr-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; margin: 12px 0 0; }
.cr-dl > div { min-width: 0; }
.cr-dl dt { font-size: 14px; color: var(--bk-muted); font-weight: 500; }
.cr-dl dd { margin: 2px 0 0; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.cr-dim { color: var(--bk-muted); font-weight: 400; }
.cr-warn {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 14px; border-radius: var(--bk-radius-sm);
  border: 1px solid color-mix(in srgb, var(--bk-bad) 40%, transparent); background: color-mix(in srgb, var(--bk-bad) 7%, var(--bk-bg)); color: #6e1f1f;
}
.cr-warn p { margin: 0; font-size: 16px; font-weight: 500; }
.cr-warn .cr-ico { margin-top: 2px; }
.cr-referral { margin-top: 12px; padding: 12px 14px; border-radius: var(--bk-radius-sm); border: 1px solid var(--bk-border-strong); background: var(--bk-surface); }
.cr-referral p { margin: 4px 0 0; font-size: 16px; }
.cr-fine { margin: 12px 0 0; font-size: 14px; color: var(--bk-muted); }
.cr-elig[data-status="not_a_fit"] .cr-block-ico { background: var(--bk-surface-2); color: #6b5023; border-color: var(--bk-border-strong); }

.cr-summary { padding: 0; overflow: hidden; }
.cr-summary-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(180deg, var(--cr-green), var(--cr-green-deep)); color: #f3ead8; flex-wrap: wrap; }
.cr-summary-top .cr-block-head { flex: 1; min-width: 220px; }
.cr-summary-top .cr-block-ico { background: rgba(255, 255, 255, 0.08); border-color: rgba(214, 182, 122, 0.5); }
.cr-summary-top .cr-kicker { color: #d6b67a; }
.cr-summary-top h4 { color: #fbf3e2; }
.cr-ref { text-align: right; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(214, 182, 122, 0.5); background: rgba(255, 255, 255, 0.06); }
.cr-ref span { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #cdb88f; }
.cr-ref strong { display: block; font: 600 20px/1.2 var(--bk-font-display); letter-spacing: 0.02em; color: #fbf3e2; font-variant-numeric: tabular-nums; }
.cr-flags { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 0; }
.cr-summary > .cr-warn { margin: 12px 18px 0; }
.cr-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding: 14px 18px 0; }
.cr-groups section { padding: 12px 14px; border-radius: var(--bk-radius-sm); border: 1px solid var(--bk-border); background: color-mix(in srgb, var(--bk-surface) 55%, var(--bk-bg)); }
.cr-groups .cr-dl { grid-template-columns: 1fr; gap: 8px; margin: 0; }
.cr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cr-summary .cr-actions { padding: 0 18px 16px; }
.cr-actions .bk-btn { gap: 8px; text-decoration: none; }
.cr-payload { margin: 0 18px 18px; border-radius: var(--bk-radius-sm); border: 1px solid var(--bk-border); background: #1a2420; color: #e6efe9; overflow: hidden; animation: cr-rise 260ms var(--bk-ease) both; }
.cr-payload-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; font-size: 14px; color: #b9c8bf; border-bottom: 1px solid #2c3a34; }
.cr-payload-head .bk-icon-btn { color: #b9c8bf; }
.cr-payload-head .bk-icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: #3c4d45; }
.cr-payload pre { margin: 0; padding: 12px 14px; max-height: 300px; overflow: auto; font: 14px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; }

.cr-format { display: inline-flex; margin-top: 14px; padding: 3px; border-radius: 999px; border: 1px solid var(--bk-border); background: var(--bk-surface); }
.cr-format button {
  border: 0; background: transparent; color: var(--bk-muted); font: 600 15px/1 var(--bk-font); padding: 9px 16px; border-radius: 999px; cursor: pointer;
  transition: background var(--bk-fast), color var(--bk-fast), box-shadow var(--bk-fast);
}
.cr-format button:hover:not(:disabled) { color: var(--bk-text); }
.cr-format button[aria-checked="true"] { background: var(--cr-green); color: #fbf7ee; box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--cr-green) 60%, transparent); }
.cr-format button:disabled { cursor: default; }
.cr-day { margin-top: 14px; }
.cr-times { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-time {
  min-height: 42px; padding: 8px 16px; border-radius: 12px; border: 1px solid var(--bk-border-strong); background: var(--bk-bg); color: var(--bk-text);
  font: 600 16px/1 var(--bk-font); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: transform var(--bk-fast), box-shadow var(--bk-fast), border-color var(--bk-fast), background var(--bk-fast), color var(--bk-fast);
}
.cr-time:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--cr-green); box-shadow: var(--bk-glow); }
.cr-time:active:not(:disabled) { transform: translateY(0); }
.cr-time:disabled { opacity: 0.5; cursor: default; }
.cr-time.is-picked { opacity: 1; background: var(--cr-green); border-color: var(--cr-green); color: #fbf7ee; }
.cr-time:focus-visible, .cr-call:focus-visible, .cr-nav a:focus-visible, .cr-how-btn:focus-visible { outline: 2px solid var(--cr-brass); outline-offset: 2px; }

@keyframes cr-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cr-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .cr-app { grid-template-columns: minmax(0, 1fr); }
  .cr-how-btn { display: inline-flex; }
  .cr-rail {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 50; background: var(--cr-paper);
    border: 1px solid var(--bk-border); box-shadow: var(--bk-shadow); transform: translateX(105%); transition: transform var(--bk-med) var(--bk-ease);
  }
  .cr-rail-open .cr-rail { transform: none; }
  .cr-rail-close {
    display: grid; place-items: center; align-self: flex-end; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--bk-border);
    background: var(--bk-bg); font-size: 24px; line-height: 1; cursor: pointer; color: var(--bk-text);
  }
}
@media (max-width: 1000px) { .cr-nav { display: none; } }
@media (max-width: 860px) {
  .cr-chat .bk-page { grid-template-columns: 1fr; }
  .cr-chat .bk-page .bk-side { top: var(--cr-top-h); }
  .cr-chat .bk-page .bk-main { border: 0; }
}
@media (max-width: 560px) {
  :root { --cr-top-h: 60px; }
  .cr-top { gap: 10px; padding: 0 12px; }
  .cr-logo small { display: none; }
  .cr-logo strong { font-size: 19px; }
  .cr-logo img { width: 34px; height: 34px; }
  .cr-call { padding: 10px 12px; }
  .cr-call span { display: none; }
  .bk-title span { display: none; }
  .bk-head { flex-wrap: nowrap; }
  .cr-how-btn { padding: 9px 12px; font-size: 15px; }
  .cr-summary-top { padding: 14px; }
  .cr-ref { text-align: left; }
  .cr-groups, .cr-flags { padding-inline: 14px; }
  .cr-summary .cr-actions { padding: 0 14px 14px; }
  .cr-payload { margin: 0 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-photo, .cr-card, .cr-payload, .cr-scrim { animation: none; }
  .cr-card:hover, .cr-block:hover, .cr-time:hover:not(:disabled), .cr-call:hover, .cr-nav a:hover { transform: none; }
  .cr-rail { transition: none; }
}