/* Extends the established Meadowlark runtime tokens in styles.css. */
:root { --scroll-thumb: var(--muted); --scroll-track: var(--cream); }
* { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--scroll-track); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--walnut); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.opp-page { font-size:14px; }
.opp-page .page-head h2 { font-size:38px; }
.opp-page .page-head p { font-size:14px; }
.opp-overview { display:grid; grid-template-columns:1fr 1fr 1.6fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:24px 0; padding:20px 0; gap:24px; }
.opp-overview > div { display:flex; flex-direction:column; gap:8px; }
.opp-overview span { color:#625c55; }
.opp-overview strong { font-size:28px; font-weight:500; }
.opp-overview .opp-intake { border-left:2px solid var(--orange); padding-left:22px; justify-content:center; }
.opp-intake strong { font-size:16px; }
.opp-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:14px; margin:24px 0; }
.opp-toolbar form { display:flex; flex:1 1 310px; gap:8px; flex-wrap:wrap; }
.opp-toolbar input { min-width:160px; flex:1; }
.opp-toolbar label { display:grid; gap:6px; font-size:13px; }
.opp-toolbar input,.opp-toolbar select,.opp-dialog input,.opp-dialog select,.opp-dialog textarea,.opp-panel input,.opp-panel select,.opp-panel textarea { border:1px solid #aaa196; background:var(--white); color:var(--ink); padding:11px; min-height:42px; width:100%; }
.opp-view { display:flex; }
.opp-view [aria-pressed=true] { background:var(--walnut); color:white; }
.opp-board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr); overflow-x:auto; padding-bottom:18px; gap:14px; scrollbar-gutter:stable; }
.opp-column { min-width:0; background:#eee9e1; border-top:3px solid var(--walnut); padding:12px; }
.opp-column header { display:grid; grid-template-columns:1fr auto; gap:8px; margin:3px 0 18px; }
.opp-column h3 { font-size:16px; margin:0; font-weight:600; }
.opp-column header small { color:#625c55; grid-column:1/-1; font-size:13px; }
.opp-column header > span { background:var(--white); padding:2px 7px; border-radius:4px; font-size:13px; }
.opp-card { width:100%; display:flex; flex-direction:column; align-items:stretch; gap:10px; text-align:left; background:var(--white); border:1px solid var(--line); padding:17px; margin-bottom:12px; box-shadow:0 2px 3px #28251f08; overflow-wrap:anywhere; }
.opp-card:hover { border-color:var(--walnut); box-shadow:0 3px 8px #28251f16; }
.opp-card:active { background:var(--cream); }
.opp-card strong { font-family:var(--serif); font-size:22px; font-weight:500; line-height:1.2; }
.opp-card b { font-weight:600; margin:5px 0; }
.opp-card-type { color:#625c55; font-size:12px; }
.opp-card-footer { display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; }
.opp-next { color:#625c55; font-size:13px; line-height:1.4; }
.opp-overdue { color:#963c28; font-weight:600; }
.opp-column-empty { color:#625c55; font-size:13px; padding:14px 0; line-height:1.5; }
.opp-empty { min-height:260px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; text-align:center; border:1px dashed var(--line); padding:32px; }
.opp-empty h3 { font:28px var(--serif); margin:0; }
.opp-empty p { max-width:500px; line-height:1.6; margin:0; }
.opp-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:20px 0; color:#625c55; font-size:13px; }
.opp-pagination > div { display:flex; gap:8px; }
.opp-page button:disabled { cursor:default; opacity:.5; }
.opp-stage { display:inline-block; padding:6px 9px; font-size:13px; background:#eee7d7; color:#604916; white-space:nowrap; }
.opp-stage-1,.opp-stage-2 { background:#e5eadb; color:#435221; }.opp-stage-3 { background:#f6e7d7; color:#8e481c; }.opp-stage-4 { background:#dcebdc; color:#305831; }.opp-stage-5 { background:#f3dedc; color:#822e2e; }
.opp-table { min-width:750px; }
.opp-table td,.opp-table th,.opp-table .text-btn { font-size:14px; }
.opp-table td > div { margin-top:6px; color:#625c55; font-size:13px; }
.opp-table .text-btn { text-align:left; font-weight:600; line-height:1.5; }
.opp-detail-head { margin-top:25px; flex-wrap:wrap; gap:16px; }
.opp-detail-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr); gap:24px; }
.opp-panel { background:var(--white); border:1px solid var(--line); padding:24px; margin-bottom:20px; overflow-wrap:anywhere; }
.opp-panel h3 { font:25px var(--serif); margin:0 0 22px; }
.opp-panel p { line-height:1.6; }
.opp-panel dl { display:grid; gap:10px; margin:20px 0 0; }
.opp-panel dt { color:#625c55; font-size:13px; }.opp-panel dd { margin:0 0 10px; line-height:1.5; }
.opp-prose,.opp-timeline p { white-space:pre-wrap; }
.opp-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:22px; }
.opp-progress > span { border-top:3px solid var(--line); padding-top:10px; font-size:13px; color:#625c55; }
.opp-progress > .reached { border-color:var(--meadow); color:var(--meadow); }
.opp-progress small { display:block; margin-bottom:6px; font-size:13px; }
.opp-panel .field,.opp-dialog .field { font-size:14px; font-weight:500; margin:0; gap:7px; }
.opp-panel form { display:grid; gap:14px; }.opp-panel form > button { justify-self:start; }
.opp-timeline { list-style:none; padding:0 0 0 18px; border-left:2px solid var(--line); margin:25px 0 0; }
.opp-timeline li { padding:0 0 22px 8px; }.opp-timeline p { margin:0 0 8px; }.opp-timeline small { color:#625c55; font-size:12px; }
.opp-dialog { width:min(740px,calc(100vw - 28px)); max-height:90svh; padding:28px; border:1px solid var(--line); background:var(--white); color:var(--ink); box-shadow:0 20px 80px #0004; }
.opp-dialog::backdrop { background:#1f1a1a88; }.opp-dialog header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }
.opp-dialog h2 { margin:0; font:30px var(--serif); }.opp-dialog p { line-height:1.6; }.opp-dialog .field { margin-bottom:16px; }
.opp-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }.opp-wide { grid-column:1/-1; }.opp-form-grid > p { margin:0 0 20px; font-size:13px; }
.opp-dialog footer { display:flex; justify-content:flex-end; gap:12px; margin-top:20px; }.opp-dialog textarea { resize:none; min-height:120px; }.opp-discard { border:1px solid var(--red); padding:16px; }
[data-form-error] { color:var(--red); margin:8px 0; min-height:20px; }
@media(max-width:1050px) { .opp-detail-grid { grid-template-columns:1fr; }.opp-overview { grid-template-columns:1fr 1fr; }.opp-intake { grid-column:1/-1; }.opp-board { grid-auto-columns:275px; } }
@media(max-width:600px) { .opp-form-grid { grid-template-columns:1fr; }.opp-page .page-head h2 { font-size:30px; }.opp-dialog { padding:18px; }.opp-toolbar form { flex-basis:100%; }.opp-panel { padding:18px; }.opp-pagination { flex-wrap:wrap; }.opp-progress { grid-template-columns:1fr 1fr; }.opp-page .action-row { flex-wrap:wrap; }.opp-overview { gap:18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(forced-colors:active) { * { scrollbar-color:auto; }.opp-card,.opp-stage { border:1px solid CanvasText; } }

.resize-none { resize: none !important; }
.sidebar { overflow-y: auto; }