/* Calm Instrument Slice 6: Services (.sv) and the offering editor (.se) — safe, deliberate commercial configuration.
   The list is grouped by the Vitals service: what Vitals sets is shown as read-only text under a "Set by Vitals" label,
   never as something to edit; under it, this partner's offerings on hairlines, each with a word-and-glyph state
   (active, inactive, needs setup — a commercial limit, never an error), its price, and its revision. Retired
   offerings are history: muted, never red. The editor is one form in sections; a box only where it makes a
   configuration unit (the Vitals service, each charge, the save summary). Required is a neutral word. Error red only
   for something actually invalid. One lime action: Save. Tokens only; scoped to .sv and .se. */

/* ---- Services ------------------------------------------------------------------------------------------------- */
.sv { max-width: 1080px; }
.sv-note { margin: 0 0 var(--s6); max-width: 76ch; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.sv-note-k { margin-right: var(--s2); font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sv-intro { max-width: 70ch; margin: 0 0 var(--s7); padding: var(--s5) var(--s6); border: 1px solid var(--line-strong); border-radius: var(--r-lg); }
.sv-intro h2 { margin: 0 0 var(--s2); font-size: var(--fs-title); line-height: var(--lh-title); color: var(--text); }
.sv-intro p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.sv-intro p + p { margin-top: var(--s2); }
.sv-intro .sv-intro-act { margin-top: var(--s3); font-weight: var(--fw-strong); color: var(--text); }
.sv-setup { max-width: 76ch; margin: 0 0 var(--s6); padding-left: var(--s3); border-left: 3px solid var(--line-commercial); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); }
.sv-setup .sv-st { margin-right: var(--s2); }

.sv-group { padding: var(--s6) 0; border-top: 1px solid var(--line-strong); }
.sv-gh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3); }
.sv-gh h2 { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-strong); color: var(--text); }
.sv-role { padding: 0 var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--text-2); }
.sv-desc { margin: 4px 0 0; max-width: 76ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.sv-set { max-width: 90ch; margin: var(--s3) 0 0; }
.sv-set p { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.sv-set .sv-set-k { display: inline; margin-right: var(--s2); font-weight: var(--fw-strong); color: var(--text-2); }
.sv-set .sv-set-k + p { display: inline; }

.sv-offs { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.sv-off { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(120px, .6fr) minmax(0, 1.6fr) auto; gap: 4px var(--s5); align-items: center;
    padding: var(--s3) 0 var(--s3) var(--s4); border-left: 2px solid var(--line-strong); }
.sv-off + .sv-off { margin-top: var(--s2); }
.sv-off-id, .sv-off-p { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-off-n { font-weight: var(--fw-strong); color: var(--text); overflow-wrap: anywhere; }
.sv-off-m { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); overflow-wrap: anywhere; }
.sv-price { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); overflow-wrap: anywhere; }
.sv-off-a { justify-self: end; }
.sv-none { margin: var(--s4) 0 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.sv-add { margin: var(--s3) 0 0; font-size: var(--fs-sm); }

.sv-st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; white-space: nowrap; }
.sv-st-on { color: var(--text); }
.sv-st-setup { color: var(--commercial); }
.sv-st-off, .sv-st-retired { color: var(--muted); }

.sv-retired { margin: var(--s4) 0 0; }
.sv-retired summary { cursor: pointer; width: fit-content; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--text-2); }
.sv-retired ul { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.sv-retired li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3); padding: var(--s2) 0 var(--s2) var(--s4); border-left: 2px dotted var(--line-strong); }
.sv-retired li .sv-off-n { font-weight: 600; color: var(--text-2); }
.sv-foot { max-width: 80ch; margin: var(--s6) 0 0; padding-top: var(--s5); border-top: 1px solid var(--line-strong); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }

/* ---- The offering editor --------------------------------------------------------------------------------------- */
.se { max-width: 1080px; }
.se-crumb { margin: 0 0 var(--s3); font-size: var(--fs-sm); }
.se-crumb .ci-link { color: var(--text-2); text-decoration-color: transparent; }
.se-crumb .ci-link:hover { text-decoration-color: var(--line-strong); }
.se .ci-ph-desc { display: flex; flex-wrap: wrap; gap: 4px var(--s2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.se-dot { color: var(--muted); }
.se-status-active { color: var(--text); font-weight: 600; }
.se-status-inactive, .se-status-retired { color: var(--muted); font-weight: 600; }

.se-grid { display: grid; grid-template-columns: minmax(0, 680px) minmax(240px, 300px); column-gap: var(--s9); align-items: start; }
.se-solo { grid-template-columns: minmax(0, 680px); }
.se-main, .se-history { min-width: 0; }
.se-saved { margin: 0 0 var(--s5); padding-left: var(--s3); border-left: 3px solid var(--line-progress); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); }

.se-sec { padding: var(--s6) 0; border-top: 1px solid var(--line-strong); }
.se-form > .se-sec:first-of-type, .se-main > .se-sec:first-child { border-top: 0; padding-top: 0; }
.se-sec > h2 { margin: 0 0 var(--s3); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.se-sec > p { margin: 0; max-width: 68ch; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.se-help, .se-sec .se-help { margin: 0 0 var(--s2); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); max-width: 68ch; }
.se-help-i { margin-left: 4px; font-size: var(--fs-meta); color: var(--muted); }
.se-req, .se-opt, .se-unit { margin-left: 4px; font-size: var(--fs-meta); font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; }

/* The Vitals service: read-only text in a quiet frame — nothing about it looks like a field. */
.se-platform { margin: 0 0 var(--s5); padding: var(--s4) var(--s5); border-radius: var(--r-md); background: var(--fill-1); }
.se-platform p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.se-platform p + p { margin-top: 4px; }
.se-platform .se-pf-k { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.se-platform .se-pf-k span { font-weight: 600; letter-spacing: 0; text-transform: none; }
.se-platform .se-pf-t { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-strong); color: var(--text); }
.se-role { margin-left: var(--s2); padding: 0 var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.se-platform .se-pf-r { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }

.se-field { margin: 0 0 var(--s5); }
.se-field:last-child { margin-bottom: 0; }
.se-field > label, .se-inputs label { display: block; margin: 0 0 4px; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-strong); color: var(--text); }
.se-narrow { max-width: 260px; }
.se .ci-input, .se .ci-select, .se .ci-textarea { width: 100%; }
.se .ci-textarea { min-height: 72px; resize: vertical; }
.se [aria-invalid="true"].ci-input, .se [aria-invalid="true"].ci-select { border-color: var(--error); }
.se-err { margin: 6px 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--error); }

.se-choice { margin: 0 0 var(--s5); padding: 0; border: 0; min-width: 0; }
.se-choice:last-child { margin-bottom: 0; }
.se-choice legend, .se-charge legend { padding: 0; margin: 0 0 var(--s2); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-strong); color: var(--text); }
.se-choice > label { display: flex; align-items: center; gap: var(--s2); min-height: 32px; font-size: var(--fs-control); color: var(--text); }
.se-choice > label + label { margin-top: 2px; }
.se-choice[aria-invalid="true"] legend { color: var(--error); }
.se input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--text); flex: none; }

/* A charge: one configuration unit. Its ways of charging are radios laid out as a row of choices; the chosen one is
   marked by its filled radio and a stronger outline, not by colour alone. */
.se-charge { margin: 0 0 var(--s4); padding: var(--s4) var(--s5); border: 1px solid var(--line-strong); border-radius: var(--r-lg); min-width: 0; }
.se-charge[aria-invalid="true"] { border-color: var(--line-error); }
.se-charge > legend { float: left; width: 100%; margin-bottom: var(--s3); }           /* inside the unit, not on its border */
.se-charge > legend + * { clear: both; }
.se-kinds { display: flex; flex-wrap: wrap; gap: var(--s2); }
.se-kind { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-control); padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-md);
    font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.se-kind:has(input:checked) { border-color: var(--text-2); color: var(--text); font-weight: 600; background: var(--fill-1); }
.se-kind:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.se-amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: var(--s4); margin-top: var(--s4); }
.se-amounts .se-field { margin: 0; }
.se-charge > .se-help { margin: var(--s3) 0 0; }

.se-inputs { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.se-inputs li + li { margin-top: var(--s3); }
.se-inrow { display: flex; gap: var(--s2); align-items: center; }
.se-inrow .ci-input { flex: 1 1 auto; }

/* What saving will do, then the one lime action. */
.se-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s2); padding: var(--s4) var(--s5);
    border: 1px solid var(--line-strong); border-radius: var(--r-lg); }
.se-effect { flex: 1 1 280px; margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.se-effect-CommercialChange, .se-effect-New { color: var(--text); }
.se-actions { display: flex; gap: var(--s2); align-items: center; }

.se-errors { margin: 0 0 var(--s5); padding: var(--s4) var(--s5); border: 1px solid var(--line-error); border-radius: var(--r-lg); }
.se-errors:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.se-errors h2 { margin: 0 0 var(--s2); font-size: var(--fs-heading); line-height: var(--lh-heading); color: var(--text); }
.se-errors ul { margin: 0; padding-left: var(--s5); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text); }
.se-errors a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Retire: separate from saving, below it, never beside Save. */
.se-retire { margin-top: var(--s8); }
.se-retire > p { margin-bottom: var(--s3); }
.se-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.se-confirm p { margin: 0; flex-basis: 100%; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.se-was dl { margin: var(--s3) 0 0; }
.se-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); padding: 4px 0; font-size: var(--fs-sm); }
.se-facts dt { color: var(--muted); }
.se-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* Revision history: the shared history grammar — when, what kind of event, what changed. */
.se-history h2 { margin: 0 0 var(--s3); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-strong); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.se-revs { list-style: none; margin: 0; padding: 0; }
.se-rev { padding: 0 0 var(--s4) var(--s4); border-left: 2px solid var(--line-strong); }
.se-rev-commercial { border-left-color: var(--line-commercial); }
.se-rev-wording { border-left-style: dotted; }
.se-rev-retired { border-left-style: dashed; }
.se-rev p { margin: 0; }
.se-rev-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); }
.se-rev-n { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--text); }
.se-rev-k { font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.se-rev-commercial .se-rev-k { color: var(--commercial); }
.se-rev-w { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); overflow-wrap: anywhere; }
.se-rev ul { margin: 4px 0 0; padding-left: var(--s4); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); overflow-wrap: anywhere; }

@media (max-width: 1180px) {
    .se-grid { grid-template-columns: minmax(0, 680px); }
    .se-history { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line-strong); }
}
@media (max-width: 900px) {
    .sv-off { grid-template-columns: minmax(0, 1fr) auto; }
    .sv-off-st { grid-column: 1; }
    .sv-off-p { grid-column: 1 / -1; }
    .sv-off-a { grid-column: 2; grid-row: 1; }
    .sv .ci-btn, .se .ci-btn { min-height: var(--h-touch); }
    .se-kind { min-height: var(--h-touch); }
    .se-choice > label { min-height: var(--h-touch); }
}
@media (max-width: 640px) {
    .sv-intro { padding: var(--s4); }
    .se-amounts { grid-template-columns: minmax(0, 1fr); }
    .se-charge { padding: var(--s4); }
    .se-savebar { padding: var(--s4); }
    .se-actions { width: 100%; }
    .se-actions .ci-btn { flex: 1 1 auto; }
    .se-narrow { max-width: none; }
    .se-facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}