/* Take Interest · Corin / Beacon Insurance preview · corin.css
   =================================================================
   Loads AFTER product.css, so this :root wins. Re-themes the demo from
   erin's Puget-Sound teal to an insurance NAVY + amber palette — the
   "trusted broker / protection" register, and visibly distinct from the
   erin (teal) and crestline (datum-graphite) previews. Then adds the
   insurance domain components the broker loom + client portal need:
   coverage table, status pills, carrier panel, the quote→bind→renew
   journey rail, the renewal radar, and the premium-financing schedule.

   Structural tokens (radius, spacing, shadows, type) stay from product.css.
   Mock data only — no real client, premium, carrier-binding, or EIN data.
   ================================================================= */

:root {
  /* --- NAVY: the hero accent (institutional trust / protection) --- */
  --accent:        #2b3a8c;   /* royal-navy; AA small-text on cream (~6.8:1) */
  --accent-deep:   #1d2a66;   /* darker navy for headings / active state */
  --accent-bright: #3a4db0;   /* lighter navy for solid fills (white text passes) */
  --accent-soft:   rgba(43, 58, 140, 0.14);
  --accent-pale:   rgba(43, 58, 140, 0.06);
  --border-teal:   rgba(43, 58, 140, 0.20);   /* product.css reuses this name as the accent border */
  --surface-3:     #eef0f8;   /* palest navy tint for accented surfaces */
  --shadow-teal:   0 10px 30px rgba(43, 58, 140, 0.16);

  /* --- amber: the warm secondary (value / the asset being protected) --- */
  --gold:      #a8702c;
  --gold-deep: #875727;
  --gold-soft: rgba(168, 112, 44, 0.14);
  --gold-pale: rgba(168, 112, 44, 0.07);
}

/* Re-skin the photography placeholder to navy so any reused frame matches. */
.photo-frame {
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(58, 77, 176, 0.34), transparent 60%),
    radial-gradient(120% 120% at 90% 95%, rgba(168, 112, 44, 0.30), transparent 55%),
    linear-gradient(135deg, #1d2a66 0%, #2b3a8c 46%, #46599f 100%);
  border-color: var(--border-teal);
}
.photo-frame .photo-label { color: var(--accent-deep); }
.photo-frame .photo-label::before { content: "◆"; }
.photo-frame.warm {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(168, 112, 44, 0.40), transparent 60%),
    linear-gradient(135deg, #875727 0%, #a8702c 55%, #c79255 100%);
}

/* ===== Metric strip — the small numbers a broker reads first ===== */
.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: var(--space);
}
.metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  box-shadow: var(--shadow-sm);
}
.metric .m-num { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--accent-deep); letter-spacing: -0.02em; }
.metric .m-num small { font-size: 15px; color: var(--text-dim); }
.metric .m-label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dimmer); margin-top: 7px; font-weight: 600; }
.metric .m-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.metric.is-warn .m-num { color: var(--warn); }
.metric.is-ok .m-num { color: var(--ok); }

/* ===== Coverage status pill ===== */
.cov-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.cov-pill::before { content: "●"; font-size: 8px; }
.cov-pill.bound    { background: var(--ok-wash); color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.cov-pill.pending  { background: var(--gold-pale); color: var(--gold-deep); border-color: var(--gold-soft); }
.cov-pill.quoting  { background: var(--accent-pale); color: var(--accent-deep); border-color: var(--border-teal); }
.cov-pill.renewal  { background: #fbf0e8; color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.cov-pill.lapsed   { background: var(--surface-2); color: var(--text-dimmer); border-color: var(--border); }

/* ===== Coverage table (line · limit · premium · carrier · status) ===== */
.cov-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cov-table th {
  text-align: left; font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-dimmer); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.cov-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.cov-table tr:last-child td { border-bottom: none; }
.cov-table .line-name { font-weight: 600; color: var(--text); }
.cov-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cov-table tfoot td { font-weight: 700; color: var(--accent-deep); border-top: 2px solid var(--border); padding-top: 12px; }

@media (max-width: 640px) {
  .cov-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .cov-table th,
  .cov-table td {
    padding-left: 9px;
    padding-right: 9px;
  }
}

/* ===== Carrier panel (the multi-carrier quoting surface) ===== */
.carrier-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--text);
}
.carrier-chip .am { font-size: 10px; color: var(--text-dimmer); font-weight: 700; }
.carrier-panel { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== The quote → bind → renew journey rail ===== */
.journey { display: flex; flex-direction: column; gap: 0; margin: 4px 0; }
.j-step { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; position: relative; }
.j-step .j-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;
  border: 2px solid var(--border); background: var(--surface); z-index: 1;
}
.j-step::before {
  content: ""; position: absolute; left: 6px; top: 18px; bottom: -6px;
  width: 2px; background: var(--border);
}
.j-step:last-child::before { display: none; }
.j-step.is-done  .j-dot { background: var(--ok); border-color: var(--ok); }
.j-step.is-done::before { background: var(--ok); }
.j-step.is-now   .j-dot { background: var(--accent-bright); border-color: var(--accent-bright); box-shadow: 0 0 0 4px var(--accent-pale); }
.j-step .j-body { padding-bottom: 14px; }
.j-step .j-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.j-step.is-pending .j-title { color: var(--text-dim); }
.j-step .j-meta { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.j-step .j-stamp {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  margin-left: 8px; color: var(--text-dimmer);
}
.j-step.is-now .j-stamp { color: var(--accent-deep); }
.j-step.is-done .j-stamp { color: var(--ok); }

/* ===== Renewal radar ===== */
.rr-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.rr-row:last-child { border-bottom: none; }
.rr-name { font-weight: 600; font-size: 14px; }
.rr-when { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; }
.rr-track { grid-column: 1 / -1; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.rr-fill { height: 100%; border-radius: 999px; background: var(--accent-bright); }
.rr-row.is-soon .rr-fill { background: var(--warn); }
.rr-row.is-soon .rr-when { color: var(--warn); font-weight: 700; }

/* ===== Premium financing schedule ===== */
.fin-schedule { font-size: 13px; }
.fin-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.fin-row:last-child { border-bottom: none; }
.fin-n { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-dim); }
.fin-row.is-paid .fin-n { background: var(--ok-wash); color: var(--ok); }
.fin-amt { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ===== Coverage ring wrap (uses svg-charts.js TICharts.ring) ===== */
.ring-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.ring-cell { text-align: center; }
.ring-cell .ring-cap { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

/* ===== Client / book-of-business cards ===== */
.client-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s, border-color .15s; border-bottom: 1px solid var(--border); }
.client-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--border-teal); }
.client-card .cc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.client-card .cc-name { font-family: var(--serif); font-size: 18px; color: var(--text); }
.client-card .cc-sector { font-size: 12px; color: var(--text-dimmer); }
.client-card .cc-lines { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.client-card .cc-foot { font-size: 12.5px; color: var(--text-dim); display: flex; justify-content: space-between; margin-top: 8px; }

/* ===== Certificate (COI) chip ===== */
.coi { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.coi .coi-ico { font-size: 18px; color: var(--accent); }
.coi .coi-body { flex: 1; }
.coi .coi-title { font-weight: 600; font-size: 13.5px; }
.coi .coi-meta { font-size: 12px; color: var(--text-dim); }

/* ===== A calm "what you're protected for" hero strip for the client portal ===== */
.cov-hero { background: linear-gradient(135deg, var(--accent-deep), var(--accent)); color: #fff; border-radius: var(--radius-lg); padding: 30px 32px; box-shadow: var(--shadow-teal); }
.cov-hero .ch-eyebrow { font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255,255,255,0.78); font-weight: 700; }
.cov-hero h1 { color: #fff; font-size: 34px; margin: 8px 0 6px; }
.cov-hero p { color: rgba(255,255,255,0.86); font-size: 14.5px; max-width: 60ch; }
.cov-hero .ch-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .client-card { transition: none; }
}

/* ===== Wave 2 (2026-06-09, WAVE2_BUILD_SPEC.md) ===== */
/* book: stage board + editable table */
.bk-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bk-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.bk-col.is-won { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.bk-col-head { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; opacity: .65; }
.bk-col-count { font-size: 13px; margin-top: 6px; }
.bk-col-prem { font-size: 20px; font-weight: 700; margin-top: 2px; }
.bk-col-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.bk-edit select, .bk-edit input { font: inherit; color: inherit; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; max-width: 110px; }
.bk-edit tr.is-edited td:first-child { box-shadow: 2px 0 0 var(--accent) inset; }
.bk-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bk-btn { font: 600 12.5px/1 inherit; color: var(--accent-deep); background: var(--surface-2); border: 1px solid var(--accent); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.bk-btn.is-quiet { border-color: var(--border); color: var(--text-dim); }
.bk-note { font-size: 11.5px; color: var(--text-dim); }
/* roles: the AI staff */
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.rl-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.rl-card:hover, .rl-card.is-open { border-color: var(--accent); }
.rl-ico { font-size: 20px; }
.rl-title { font-weight: 700; font-size: 14.5px; margin-top: 6px; }
.rl-charter { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
.rl-meta { font-size: 11.5px; margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.rl-task { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; background: var(--surface-2); }
.rl-task-title { flex: 1; font-size: 13px; }
.rl-state { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); }
.rl-state.is-done { color: var(--accent-deep); border-color: var(--accent); }
.rl-state.is-review { color: #8a6d1f; border-color: #c9a437; }
.rl-sample { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 10px; white-space: pre-wrap; font-size: 13px; line-height: 1.6; }
.rl-approve { display: flex; gap: 8px; margin-top: 10px; }
/* policy-language finder */
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pf-input { font: inherit; color: inherit; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; width: min(420px, 100%); }
.pf-doc { max-height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 16px; background: var(--surface-2); }
.pf-sec h4 { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; opacity: .7; margin: 14px 0 4px; }
.pf-sec p { font-size: 13px; line-height: 1.65; }
.pf-sec.is-hit { background: rgba(122,200,188,.10); border-left: 3px solid var(--accent); padding-left: 10px; border-radius: 4px; }
.pf-sec.is-hit mark { background: rgba(201,164,55,.35); color: inherit; padding: 0 2px; border-radius: 3px; }
/* library form-fill */
.lb-field-pending { opacity: .35; }
.lb-field-filled { transition: opacity .25s ease; opacity: 1; }
.lb-confirm { border: 1px solid #c9a437; background: rgba(201,164,55,.10); border-radius: var(--radius-sm); padding: 12px 14px; margin: 10px 0; font-size: 13px; display: flex; align-items: center; gap: 10px; }
/* radar + ops */
.rd-event { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; background: var(--surface-2); }
.rd-score { font-weight: 700; color: var(--accent-deep); min-width: 44px; text-align: center; }
.op-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.po-row { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; background: var(--surface-2); }
.po-row summary { cursor: pointer; padding: 12px 14px; font-size: 13.5px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.po-body { padding: 0 16px 14px; font-size: 13px; }
@media (max-width: 900px) { .bk-board { grid-template-columns: repeat(2, 1fr); } .op-board { grid-template-columns: 1fr; } }