/* styles for the ext-*.js features (6 Oct), app.css tokens only */

/* === casefacts === */
.cf-check { display: grid; gap: 6px; justify-items: start; }
.cf-out:empty { display: none; }
.cf-result { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--paper2); font-size: 13px; line-height: 1.45; }
.cf-result p { margin: 0; }
.cf-result.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--paper)); }
.cf-result.ok > strong { color: var(--ok); }
.cf-result.stop { border-color: color-mix(in srgb, var(--stop) 45%, transparent); background: color-mix(in srgb, var(--stop) 8%, var(--paper)); }
.cf-result.stop > strong { color: var(--stop); }
.cf-changes, .cf-offers { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--ink); }
.cf-offers .link { margin-left: 8px; }
.cf-value { font: 600 13px var(--text); color: var(--ink); text-align: right; }
.cf-value.estimate { color: var(--soft); font-style: italic; }
.cf-held summary { cursor: pointer; font-size: 12.5px; color: var(--soft); }
.cf-held-item { margin-top: 6px; padding: 8px 10px; border-radius: var(--r); background: var(--paper2); }
.cf-held-item p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.cf-slot.flagged { border-color: color-mix(in srgb, var(--warn) 50%, var(--rule)); }
.cf-flag { margin: 0; font-size: 13px; font-weight: 600; color: var(--warn); }
.cf-ok { color: var(--ok); font-size: 12.5px; }
.cf-stop { color: var(--stop); font-size: 12.5px; }
/* === caretools === */
/* Money card, Readiness, Plan time off, What Jigger learned (6 Oct). Tokens only, so the
   light and dark themes both work. */
.ct-money .ct-appt { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--rule); }
.ct-money .eyebrow + .ct-appt { border-top: 0; padding-top: 0; }
.ct-appt-head { margin: 0 0 2px; font-size: 13px; color: var(--ink); }
.ct-cancelled { opacity: .6; }
.ct-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--soft); }
.ct-row strong { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ct-session { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--soft); padding-left: 8px; border-left: 2px solid var(--rule); }
.ct-session .side-note { margin: 0; }
.ct-row strong.ct-state.ok, .ct-state.ok { color: var(--ok); }
.ct-row strong.ct-state.warn, .ct-state.warn { color: var(--warn); }
.ct-row strong.ct-state.unknown, .ct-state.unknown { color: var(--soft); font-style: italic; }
.ct-total { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.ct-source { color: var(--soft); }
.ct-hours { margin-top: 4px; }
.ct-when { font: 600 13px var(--text); color: var(--ink); white-space: nowrap; }
.ct-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ct-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; }
.ct-check .side-note { margin: 0; }
.ct-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; font: 700 11px/1 var(--text); border: 1px solid var(--rule); background: var(--paper2); color: var(--soft); }
.ct-check.ready .ct-mark { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.ct-check.missing .ct-mark { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 40%, transparent); }
.ct-off-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ct-off-form label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ct-reminders { margin: 0; padding-left: 18px; font-size: 13px; color: var(--soft); display: grid; gap: 2px; }
.ct-alts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ct-alts li { padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); }
.ct-days { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ct-days .side-note { margin: 0; }
.ct-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-kpi { display: grid; gap: 2px; min-width: 120px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); }
.ct-kpi .side-note { margin: 0; }
.ct-kpi strong { font: 600 18px var(--display); color: var(--ink); }
.ct-reasons { margin: 0; padding-left: 18px; font-size: 13px; color: var(--soft); }
.ct-learning th { text-align: left; padding: 6px 12px; font: 600 11px var(--text); color: var(--soft); border-bottom: 1px solid var(--rule); }
@media (max-width: 640px) {
  .ct-row { flex-direction: column; gap: 0; }
  .ct-row strong { text-align: left; }
  .ct-learning table { display: block; overflow-x: auto; }
}
/* === casewatch === */
/* Promises, Contradictions and Recovery views on Opportunities (ext-casewatch.js) */
.cw-card q { quotes: "“" "”" "‘" "’"; }
.cw-said { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.cw-said .side-note { margin-right: 4px; }
.cw-close { margin: 0; display: grid; gap: 2px; font-size: 13px; color: var(--ink); }
.cw-pause { margin: 0; max-width: 75ch; padding: 10px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--warn); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); font: 600 13.5px var(--text); }
.cw-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
/* === casedesk === */
/* Agreements and Emergencies views, Agreement and Project panel sections (ext-casedesk.js) */
.cd-card q, .cd-panel q { quotes: "“" "”" "‘" "’"; }
.cd-said { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.cd-said .side-note:first-child { margin-right: 4px; }
.cd-headline { margin: 0; font: 600 13.5px/1.45 var(--text); color: var(--ink); }
.cd-ask { margin: 0; display: grid; gap: 2px; font-size: 13px; color: var(--ink); }
.cd-change { margin: 0; padding: 6px 10px; border-left: 3px solid var(--warn); border-radius: var(--r); background: var(--paper2); font-size: 13px; color: var(--ink); }
.cd-focus { display: grid; gap: 4px; }
.cd-group { margin: 14px 0 4px; font: 600 14px var(--display); color: var(--ink); }
.cd-options summary, .cd-past > summary { cursor: pointer; font-size: 12.5px; color: var(--soft); }
.cd-options .table-scroll { margin-top: 6px; }
.cd-options td { font-size: 12.5px; vertical-align: top; }
.cd-dim td { color: var(--soft); }
.cd-terms { display: grid; gap: 6px; }
.cd-term { display: grid; gap: 2px; }
.cd-term .side-note { margin: 0; }
.cd-rule { margin: 0; max-width: 75ch; padding: 10px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--warn); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); font: 600 13.5px var(--text); }
.cd-incident.current { border-color: color-mix(in srgb, var(--stop) 45%, var(--rule)); }
.cd-clients { display: grid; gap: 10px; }
.cd-client { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); }
.cd-client-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.cd-state { margin: 0; font-size: 13px; font-weight: 600; color: var(--warn); }
.cd-state.ok { color: var(--ok); }
.cd-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.cd-path { display: grid; gap: 2px; align-content: start; font-size: 13px; color: var(--ink); }
.cd-path p { margin: 0; }
.cd-others { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.cd-past { display: grid; gap: 10px; }
.cd-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.cd-panel { display: grid; gap: 6px; }
.cd-project { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--rule); }
.cd-panel .eyebrow + .cd-project { border-top: 0; padding-top: 0; }
.cd-project-head { margin: 0; font-size: 13px; color: var(--ink); }
.cd-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--soft); }
.cd-facts strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.cd-sessions { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 12.5px; color: var(--ink); }
.cd-notes { display: grid; gap: 4px; }
@media (max-width: 640px) {
  .cd-paths { grid-template-columns: 1fr; }
}
/* === matchprice === */
/* Why these artists, Pricing and Design brief beside a conversation; Fill a gap in
   Opportunities (ext-matchprice.js). Tokens only, so both themes work. */
.mp-block q, .mp-gap q { quotes: "“" "”" "‘" "’"; }
.mp-quote { color: var(--ink); overflow-wrap: anywhere; }
.mp-artist { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--rule); }
.mp-artist-head { margin: 0; font-size: 13.5px; color: var(--ink); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.mp-facts dt { color: var(--soft); font-weight: 600; text-transform: capitalize; }
.mp-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.mp-line { margin: 4px 0; font-size: 13px; color: var(--ink); line-height: 1.45; }
.mp-line strong { font-variant-numeric: tabular-nums; }
.mp-dim { opacity: .6; }
.mp-warn { margin: 4px 0; padding: 6px 10px; border-left: 3px solid var(--warn); border-radius: var(--r); background: var(--paper2); font-size: 13px; color: var(--ink); }
.mp-flag { color: var(--warn); font-weight: 600; }
.mp-ok { margin: 4px 0; font-size: 13px; color: var(--ok); }
.mp-approval { margin: 4px 0 8px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--stop) 45%, transparent); border-radius: var(--r); background: color-mix(in srgb, var(--stop) 8%, var(--paper)); font-size: 13px; color: var(--ink); }
.mp-approval > strong { color: var(--stop); }
.mp-approval ul, .mp-changes ul, .mp-list { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; color: var(--ink); }
.mp-no li::marker { color: var(--stop); }
.mp-details summary { cursor: pointer; font-size: 12.5px; color: var(--soft); }
.mp-images { display: grid; gap: 6px; margin: 6px 0; }
.mp-role { padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); }
.mp-role ul { margin: 2px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); }
.mp-role-head { margin: 0; font: 600 12px var(--text); color: var(--soft); }
.mp-unseen { border-style: dashed; }
.mp-unseen .mp-role-head { color: var(--info); }
.mp-gap-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mp-gap-form label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.mp-total { color: var(--ink); }
@media (max-width: 640px) {
  .mp-facts { grid-template-columns: 1fr; }
}
/* === practice === */
/* Practice, What if and Is it working? (ext-practice.js). Tokens only, so both themes work. */
.pr-filter, .pr-controls, .pr-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-form label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pr-thread { display: grid; gap: 8px; max-width: 75ch; }
.pr-msg { display: grid; gap: 4px; max-width: 88%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); }
.pr-msg.client { justify-self: start; background: var(--paper2); }
.pr-msg.team { justify-self: end; border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); }
.pr-msg.automated { justify-self: end; border-style: dashed; color: var(--soft); }
.pr-msg-head { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink); }
.pr-msg-head .side-note { margin: 0; }
.pr-text { margin: 0; font: 400 13.5px/1.5 var(--text); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.pr-hidden { display: grid; gap: 4px; justify-items: start; }
.pr-hidden .side-note { margin: 0; }
.pr-turn q, .pr-options q, .pr-list q { quotes: "“" "”" "‘" "’"; }
.pr-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pr-checks li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink); }
.pr-clear { margin: 0; font-size: 13px; color: var(--ok); }
.pr-ask { display: grid; gap: 6px; justify-items: start; padding-top: 8px; border-top: 1px solid var(--rule); }
.pr-ask .side-note { margin: 0; }
.pr-options { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.pr-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-kpi { display: grid; gap: 2px; min-width: 120px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); }
.pr-kpi .side-note { margin: 0; }
.pr-kpi strong { font: 600 18px var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pr-label { margin: 0; padding: 8px 12px; border: 1px solid var(--rule); border-left: 3px solid var(--info); border-radius: var(--r); background: var(--paper2); font: 600 13px var(--text); color: var(--ink); }
.pr-hours { margin: 0; font-size: 13px; color: var(--ink); }
.pr-hours.unknown { color: var(--soft); font-style: italic; }
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.pr-list li { overflow-wrap: anywhere; }
.pr-assume summary { cursor: pointer; font-size: 12.5px; color: var(--soft); }
.pr-assume ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; color: var(--soft); }
.pr-exp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.pr-exp-head .eyebrow { margin: 0; }
.pr-queue { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.pr-queue th { text-align: left; padding: 6px 12px; font: 600 11px var(--text); color: var(--soft); border-bottom: 1px solid var(--rule); }
.pr-verdict { font-weight: 600; color: var(--ink); }
.pr-verdict.unknown { color: var(--soft); }
.pr-verdict.clear { color: var(--warn); }
@media (max-width: 640px) {
  .pr-msg { max-width: 100%; }
  .pr-kpi { min-width: 0; flex: 1 1 40%; }
}
/* === capacity === */
/* Clients per day view and the fresh line on Second chance cards (ext-capacity.js) */
.cap-fix { margin: 0; max-width: 75ch; padding: 10px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--info); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.cap-figure { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cap-figure .side-note { margin: 0; }
.cap-table th { text-align: left; padding: 6px 12px; font: 600 11px var(--text); color: var(--soft); border-bottom: 1px solid var(--rule); }
.cap-table tr.cap-off td { color: var(--soft); }
.cap-period { white-space: nowrap; font-size: 12.5px; color: var(--soft); }
.cap-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.cap-fresh { margin: 0; justify-self: start; padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--paper)); color: var(--ok); font: 600 12px var(--text); }
/* === openings === */
/* Next openings beside a client conversation (ext-openings.js): a full day has nothing booked,
   a part day has room below the artist's usual clients. Every chip reads "to confirm". */
.op-artist-block { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--rule); }
.op-block .eyebrow + .op-artist-block { border-top: 0; padding-top: 0; }
.op-artist { margin: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.op-days { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.op-day { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; max-width: 100%; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); border-radius: var(--r); background: color-mix(in srgb, var(--ok) 8%, var(--paper)); font-size: 12.5px; color: var(--ink); }
.op-day.part { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--paper)); }
.op-date { font-weight: 600; white-space: nowrap; }
.op-tag { font: 600 11px var(--text); color: var(--ok); white-space: nowrap; }
.op-day.part .op-tag { color: var(--warn); }
.op-window { color: var(--soft); overflow-wrap: anywhere; }
.op-confirm { color: var(--soft); font-style: italic; white-space: nowrap; }
.op-note { margin: 0; }
/* === blasts === */
/* Text blasts view on Opportunities (ext-blasts.js): the table, then one blast in full */
.bl-table th { text-align: left; padding: 6px 12px; font: 600 11px var(--text); color: var(--soft); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.bl-table td { vertical-align: top; }
.bl-table tr.on td { background: var(--paper2); }
.bl-table .opp-chip { margin-top: 4px; }
.bl-sample { max-width: 36ch; font-size: 13px; color: var(--ink2); white-space: pre-line; overflow-wrap: anywhere; }
.opp-chip.bl-personal { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); background: color-mix(in srgb, var(--info) 9%, var(--paper)); }
.opp-chip.bl-follow { color: var(--muted); }
.opp-chip.bl-interested { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--paper)); }
.opp-chip.bl-opt_out { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 40%, transparent); background: color-mix(in srgb, var(--stop) 9%, var(--paper)); }
.bl-open { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--warn); }
.bl-window { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; font-weight: 400; }
.bl-window .side-note { margin: 0; }
.bl-detail { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); scroll-margin-top: 12px; }
.bl-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bl-detail-head h3 { margin: 0; font: 500 21px/1.15 var(--display); color: var(--ink); }
.bl-detail .eyebrow { margin-top: 6px; }
.bl-text { margin: 0; padding: 10px 14px; border-left: 3px solid var(--rule2); border-radius: var(--r); background: var(--paper2); font-size: 13.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.bl-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-kpi { display: grid; gap: 2px; min-width: 120px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); }
.bl-kpi .side-note { margin: 0; }
.bl-kpi strong { font: 600 18px var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.bl-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bl-example { display: grid; gap: 4px; justify-items: start; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); }
.bl-example-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bl-example-head .side-note { margin: 0; }
.bl-example q, .bl-said { quotes: "“" "”" "‘" "’"; font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.bl-said { max-width: 40ch; }
.bl-type { font: 600 11.5px var(--text); color: var(--soft); }
.bl-type.bl-interested { color: var(--ok); }
.bl-type.bl-opt_out { color: var(--stop); }
.bl-line { margin: 0; font: 600 14px var(--text); color: var(--ink); }
.bl-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
@media (max-width: 640px) {
  .bl-detail { padding: 12px; }
  .bl-kpi { min-width: 0; flex: 1 1 40%; }
  .bl-sample, .bl-said { max-width: none; }
}

/* === improve (28 Oct) === */
/* Improve beside a reply: hers and the reworded one side by side, she picks */
.improve-button { white-space: nowrap; }
.improve-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.improve-result[hidden] { display: none; }
.improve-result > .side-note, .improve-why { grid-column: 1 / -1; margin: 0; font-size: 12.5px; }
.improve-why { color: var(--warn); }
.improve-choice { display: grid; gap: 6px; align-content: start; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); }
.improve-choice.is-better { border-color: var(--gold-line); }
.improve-label { margin: 0; font: 600 12px/1.2 var(--text); color: var(--soft); } /* sentence case (29 Oct) */
.improve-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.improve-pick { justify-self: start; }
.improve-pick.is-primary { background: var(--primary-bg); border-color: var(--primary-line); color: var(--primary-fg); }
@media (max-width: 640px) { .improve-result { grid-template-columns: 1fr; } }