@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap");

/* Offcut components — every value comes from tokens.css */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 24px; }
.oc-stage { padding: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.oc-stack { padding: var(--space-4); display: grid; gap: var(--space-4); max-width: 560px; }

/* Button */
.oc-btn { font: 600 14px/20px var(--font-sans); padding: 9px var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.oc-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.oc-btn:disabled { color: var(--ink-muted); cursor: not-allowed; }
.oc-btn--primary { border-color: transparent; color: var(--on-kerf); background: linear-gradient(225deg, transparent calc(var(--cut-corner) * 0.7071), var(--kerf) calc(var(--cut-corner) * 0.7071)); }
.oc-btn--quiet { border-color: transparent; background: transparent; color: var(--ink-muted); }
.oc-btn--quiet:hover { color: var(--ink); }
.oc-btn--sm { font-size: 13px; padding: 5px var(--space-3); }

/* Risk badge */
.oc-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--font-sans); letter-spacing: 0.02em; padding: 2px var(--space-2); border-radius: var(--radius-sm); }
.oc-badge::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.oc-badge--low { color: var(--saved); background: var(--saved-soft); }
.oc-badge--medium { color: var(--caution); background: var(--caution-soft); }
.oc-badge--medium::before { transform: rotate(45deg); }
.oc-badge--high { color: var(--danger); background: var(--danger-soft); }
.oc-badge--high::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 8px; height: 7px; }

/* Savings figure */
.oc-figure { display: grid; gap: 2px; }
.oc-figure__value { font: 600 40px/44px var(--font-mono); letter-spacing: -0.02em; color: var(--ink); }
.oc-figure__value--saved { color: var(--saved); }
.oc-figure__label { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.oc-amount { font: 500 15px/24px var(--font-mono); }
.oc-code { font: 400 13px/20px var(--font-mono); color: var(--ink-muted); }

/* Finding card */
.oc-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-3); }
.oc-card--highlight { border-color: transparent; border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg); background: linear-gradient(225deg, transparent calc(var(--cut-corner) * 0.7071), var(--kerf-soft) calc(var(--cut-corner) * 0.7071)); }
.oc-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.oc-card__title { margin: 0; font: 600 17px/24px var(--font-sans); }
.oc-card__body { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.oc-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.oc-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Digest message (chat) */
.oc-msg { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); max-width: 560px; }
.oc-msg__avatar { width: 40px; height: 40px; border-radius: var(--radius-lg); }
.oc-msg__head { display: flex; gap: var(--space-2); align-items: baseline; }
.oc-msg__name { font-weight: 700; }
.oc-msg__tag { font: 600 11px/16px var(--font-sans); color: var(--ink-muted); background: var(--sawdust); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
.oc-msg__time { font-size: 13px; color: var(--ink-muted); }
.oc-msg p { margin: var(--space-1) 0; }
.oc-msg__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.oc-msg__foot { color: var(--ink-muted); font-size: 13px; }