:root { --ink: #1d2a33; --muted: #66737d; --line: #d9e0e5; --accent: #0b6e4f; --bg: #f6f8f9; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .75rem 1.25rem; background: #fff; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--accent); text-decoration: none; }
.label { background: #fde68a; padding: .1rem .5rem; border-radius: .25rem; font-size: .85rem; }
nav { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.who { color: var(--muted); }
main { max-width: 64rem; margin: 0 auto; padding: 1.25rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: .5rem; padding: 1rem 1.25rem; margin: 1rem 0; }
form label { display: block; margin: .6rem 0; }
input { display: block; width: 100%; max-width: 24rem; padding: .5rem; font: inherit; border: 1px solid var(--line); border-radius: .3rem; }
button, .button { display: inline-block; padding: .5rem 1rem; font: inherit; color: #fff; background: var(--accent); border: 0; border-radius: .3rem; cursor: pointer; text-decoration: none; }
form.inline { display: inline; margin: 0; }
nav button { background: none; color: var(--accent); padding: 0; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.muted, .hint { color: var(--muted); }
.notice { background: #fff7e6; border: 1px solid #f5c26b; padding: .5rem .75rem; border-radius: .3rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
dt { color: var(--muted); }
/* administration screens (src/admin-pages.mjs) */
select, textarea { display: block; padding: .45rem; font: inherit; border: 1px solid var(--line); border-radius: .3rem; background: #fff; }
textarea { width: 100%; }
label.check { display: inline-flex; align-items: center; gap: .4rem; margin: .3rem 1rem .3rem 0; }
label.check input { width: auto; display: inline; }
fieldset { border: 1px solid var(--line); border-radius: .3rem; margin: .6rem 0; }
form.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
form.row input { max-width: 20rem; }
button.small { padding: .25rem .6rem; font-size: .9rem; }
button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.badge { background: #e0e7ff; color: #3730a3; padding: 0 .4rem; border-radius: .25rem; font-size: .8rem; }
table.offerings input { max-width: 7rem; padding: .25rem; }
table.offerings input.wide { max-width: 16rem; }
.landing p { margin: .4rem 0; }
.hint { display: block; font-size: .9rem; }
/* call evaluation: the scoring grid is wider than the page */
.wide { overflow-x: auto; margin: 1rem -1rem; }
table.grid { font-size: .8rem; }
table.grid td { vertical-align: top; padding: .3rem .35rem; }
table.grid select, table.grid input, table.grid textarea { width: auto; max-width: 10rem; padding: .2rem; font-size: .8rem; display: inline-block; }
table.grid audio { width: 12rem; height: 2rem; }
.scroll { max-height: 6rem; width: 14rem; overflow-y: auto; white-space: pre-wrap; font-size: .75rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.inline-form label { margin: 0; }
tr.saving { background: #fffbe6; } tr.saved-ok { background: #ecfdf3; } tr.save-failed { background: #fdecec; }
/* sales tallies */
select { padding: .45rem; font: inherit; border: 1px solid var(--line); border-radius: .3rem; max-width: 100%; }
.pickers, .filters { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: end; }
.pickers label, .filters label { margin: .3rem 0; }
.notice.ok { background: #e8f6ef; border-color: #7cc4a3; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: .5rem; margin: .75rem 0; padding: .25rem .75rem .75rem; }
.panel > summary { font-weight: 700; font-size: 1.1rem; padding: .5rem 0; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: .5rem 0 0; }
legend { font-weight: 600; color: var(--muted); padding: .4rem 0 .2rem; }
.thead, .trow { display: grid; grid-template-columns: 1fr 4.5rem 4.5rem; gap: .4rem; align-items: center; }
.thead span { font-size: .8rem; color: var(--muted); text-align: center; }
.trow { padding: .2rem 0; border-top: 1px solid #eef2f4; }
.trow input { max-width: none; text-align: center; padding: .55rem .25rem; font-size: 1.05rem; }
.trow .single { grid-column: 2 / span 2; max-width: 4.5rem; }
input.bad { border: 2px solid #c0392b; }
.savebar { position: sticky; bottom: 0; background: var(--bg); padding: .75rem 0; }
.savebar button { width: 100%; max-width: 24rem; font-size: 1.1rem; padding: .75rem; }
.report-wrap { overflow-x: auto; }
table.report th, table.report td { white-space: nowrap; text-align: right; font-size: .9rem; }
table.report tbody th { text-align: left; font-weight: normal; }
table.report tr.section th { background: #403579; color: #fff; font-weight: 700; text-align: left; }
table.report tr.hl td:not(.goal) { background: #ffff00; }
td.goal, th.goal { font-weight: 700; } .goal.rs { background: #ffe1f0; } .goal.site { background: #fffaae; } .goal.opc { background: #d3e2ce; }
.sitepick label.inline { display: inline-block; margin: .2rem .8rem .2rem 0; }
.sitepick input, .inline input[type=checkbox] { display: inline; width: auto; }
.modes { margin: .75rem 0; } .bad-text { color: #c0392b; }
form.goals input { max-width: 24rem; }
.quick { margin: .25rem 0 .75rem; font-size: .95rem; }
nav.days { direction: rtl; display: flex; gap: .25rem; overflow-x: auto; margin: .5rem 0; padding-bottom: .25rem; }
nav.days a { direction: ltr; flex: 0 0 auto; min-width: 2.4rem; text-align: center; padding: .3rem .2rem; border: 1px solid var(--line); border-radius: .35rem; background: #fff; color: var(--ink); text-decoration: none; font-size: .85rem; line-height: 1.2; }
nav.days a span { display: block; font-size: .7rem; color: var(--muted); }
nav.days a i { display: block; font-style: normal; color: var(--accent); font-size: .75rem; }
nav.days a.done { border-color: #7cc4a3; }
nav.days a.on { background: var(--accent); color: #fff; border-color: var(--accent); }
nav.days a.on span, nav.days a.on i { color: #fff; }
nav.days a.step { align-self: center; border: 0; background: none; font-size: 1.1rem; }
/* monthly revenue and labor (src/revenue/) */
.frow { display: grid; grid-template-columns: 1fr 9rem; gap: .5rem; align-items: center; margin: 0; padding: .2rem 0; border-top: 1px solid #eef2f4; }
.frow input { max-width: none; text-align: right; }
.frow.derived output { text-align: right; padding: .5rem; font-weight: 600; }
nav.months { display: flex; gap: .25rem; overflow-x: auto; margin: .5rem 0; padding-bottom: .25rem; }
nav.months a { flex: 0 0 auto; text-align: center; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: .35rem; background: #fff; color: var(--ink); text-decoration: none; font-size: .85rem; line-height: 1.2; }
nav.months a i { display: block; font-style: normal; color: var(--muted); font-size: .7rem; }
nav.months a.on { background: var(--accent); color: #fff; border-color: var(--accent); }
nav.months a.on i { color: #fff; }
details.log table td { vertical-align: top; font-size: .9rem; }
table.report tr.total th, table.report tr.total td { font-weight: 700; }
table.report.labor th.month { text-align: center; border-left: 1px solid var(--line); }
figure.viz { margin: 1rem 0; background: #fcfcfb; border: 1px solid var(--line); border-radius: .5rem; padding: .75rem; }
figure.viz figcaption { font-weight: 600; margin-bottom: .25rem; }
svg.chart { width: 100%; height: auto; display: block; }
ul.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: 0; margin: .25rem 0 .5rem; font-size: .85rem; color: #52514e; }
ul.legend i { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
ul.legend i.s1 { background: #2a78d6; } ul.legend i.s2 { background: #eb6834; } ul.legend i.s3 { background: #1baf7a; } ul.legend i.s4 { background: #eda100; }
ul.legend i.s5 { background: #e87ba4; } ul.legend i.s6 { background: #008300; } ul.legend i.s7 { background: #6250d6; } ul.legend i.s8 { background: #e34948; }
table.report.compare td.up { background: #c6efce; color: #006100; } table.report.compare td.down { background: #ffc7ce; color: #9c0006; }
table.report.glance { max-width: 44rem; }
/* View as (src/view-as.mjs): on every page while OPC staff view as a client login. */
.view-as-banner { position: sticky; top: 0; z-index: 10; background: #7a1f1f; color: #fff; padding: .5rem 1rem; font-size: .95rem; }
.view-as-banner button { margin-left: .75rem; background: #fff; color: #7a1f1f; border: 0; font-weight: bold; }
/* Admin: the old site's price history (long; scrolls in place) and the level-of-concern badge. */
.admin-history { max-height: 30rem; overflow: auto; }
.concern { display: inline-block; padding: 0 .4em; border-radius: 3px; font-size: .85em; font-weight: 600; }
.concern-1 { background: #f8d7d3; color: #8a1c12; }
.concern-2 { background: #fbefc4; color: #6b5300; }
.concern-3 { background: #d6f0da; color: #1e5b2a; }
/* Revenue Road (src/coach/revenue-road.mjs): the old dashboard's green / red / amber cells. */
.rr-steps { margin: .5rem 0; }
.rr-heading { font-weight: 600; margin: .5rem 0; }
.rr-snap td, .rr-sales td, .rr-status td { text-align: right; white-space: nowrap; }
.rr-snap td a, .rr-sales td a { color: inherit; text-decoration: none; }
.rr-snap td a:hover, .rr-sales td a:hover { text-decoration: underline; }
.rr-snap .rr-gap td { height: .6rem; padding: 0; border: 0; }
.rr-up { background: #c6efce; color: #006100; }
.rr-down { background: #ffc7ce; color: #9c0006; }
.rr-nodata { background: #ffeb9c; color: #9c6500; }
.rr-status { width: auto; margin-top: 1rem; }
.rr-sales .rr-total { font-weight: 600; }
.rr-two { display: flex; flex-wrap: wrap; gap: 2rem; }
.rr-two > div { flex: 1 1 20rem; }
.rr-sites fieldset { border: 1px solid var(--line); padding: .5rem; }
.rr-sites label.inline { display: inline-block; margin: .2rem .8rem .2rem 0; }
.rr-sites input[type=checkbox] { display: inline; width: auto; }
/* Coaching hub (src/hub/): who-sees-it badges, the timeline's summaries, tab links. */
.badge.hub-owner_only { background: #fde2e2; color: #8a1c1c; }
.badge.hub-client { background: #e3f4e8; color: #1d6b3a; }
.hub-summary { font-size: .85rem; max-width: 48rem; white-space: pre-line; }
table.hub-timeline td { vertical-align: top; }
.coach-tabs a { margin-right: .9rem; }
.coach-tabs a.on { font-weight: 700; text-decoration: none; }
.coach-text { white-space: pre-wrap; }
/* One interaction, one entry (src/hub/entries.mjs) */
.hub-entry-summary { font-size: .9rem; margin: .15rem 0; }
ul.hub-materials { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .85rem; }
ul.hub-materials > li { margin: .1rem 0; }
ul.hub-attachments { list-style: none; margin: .1rem 0 0 1.2rem; padding: 0; }