/* The calm pass, Area C, dialogs, forms and side panels (practice form, reason, waiver, estimates, derive, imagery, assistant, settings, account, console).

   docs/CALM-UI.md. Only this area edits this file; it loads after ui.css,
   so a rule here may quiet a rule in style.css without editing style.css.
   Theme tokens only (no hex), light and dark, phone width. */

/* ---------- the practice form (practice.js) ----------
   The few inputs first, the rest under one Details. Fewer boxes: the
   sections are spacing and a hairline, the chips are quiet words, the
   infiltration question is three plain choices. */
#practice-body .pr-sec { margin-bottom: 16px; }
#practice-body .pr-sec h3 {
  justify-content: flex-start; align-items: center; gap: 6px;
  font: 600 13px/1.4 var(--sans); border-bottom: 0; padding-bottom: 0; margin: 0 0 8px;
}
#practice-body .pr-sec h3 .calm-info-wrap,
#practice-result .pr-sec h3 .calm-info-wrap { text-align: left; }
.pr-sec h3 .calm-pop, .pr-sec h3 .calm-pop span { font: 400 13px/1.5 var(--sans); color: var(--ink); text-align: left; }
.pr-why > * { margin: 0; }
.pr-why > * + * { margin-top: 6px; }
.pr-why .pr-sub { display: block; color: var(--ink-mid); font-style: italic; }
.pr-why .pr-more, .pr-why .pr-path { border: 0; background: none; padding: 0; }
.pr-why .pr-more > summary { display: none; }
.pr-why .pr-more > *:not(summary) { display: block; }

.pr-klabel, .pr-q, .pr-subhead {
  display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
  font: 600 13px/1.4 var(--sans); color: var(--ink);
}
.pr-subhead { margin-top: 4px; }
.pr-kind { margin-bottom: 12px; }
#practice-body .pr-picks { gap: 6px; }
#practice-body .pr-pick { padding: 6px 10px; font-size: 13px; }
#practice-body .pr-pick.resolvable, #practice-body .pr-pick.wet { border-color: var(--line-strong); }
.pr-kmore { margin-top: 8px; }
.pr-kmore .pr-kgroup { margin: 8px 0 0; }
.pr-kmore .pr-kglabel {
  font: 500 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-mid);
  align-items: center; gap: 6px;
}
.pr-kind-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The Details that holds the rest of the form. */
.pr-fold > summary {
  cursor: pointer; list-style: none; color: var(--ink-mid); font: 500 13px/1.4 var(--sans);
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
}
.pr-fold > summary::-webkit-details-marker { display: none; }
.pr-fold > summary::before { content: "\25B8"; font-size: 11px; }
.pr-fold[open] > summary::before { content: "\25BE"; }
.pr-fold > summary:hover { color: var(--accent); }
.pr-details { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 8px; }
.pr-details[open] > summary { margin-bottom: 12px; }

/* Fields: label, "?" and the quiet origin word on one line. */
.pr-lrow { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; min-height: 20px; }
.pr-lrow label { margin: 0 !important; font-size: 12px; }
.pr-lrow .pr-chip, .pr-lrow .origin { margin-left: auto; }
#practice-body .pr-chip.origin {
  border: 0; background: none; padding: 0; font: 400 11px/1.3 var(--sans);
  letter-spacing: 0; text-transform: none; color: var(--ink-soft);
}
#practice-body .pr-chip.origin.overridden { color: var(--ochre); }
#practice-body .pr-field.dim input { border-style: solid; background: var(--sunk); }
#practice-body .pr-grid { gap: 12px 16px; margin-top: 0; }
#practice-body .pr-main .pr-grid { margin-bottom: 12px; }

/* The infiltration question: three plain choices. */
#practice-body .pr-rate { margin-top: 4px; }
#practice-body .rate-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#practice-body .rate-pick {
  border: 1px solid var(--line-strong); border-radius: 0; padding: 6px 12px; background: var(--surface);
}
#practice-body .rate-pick .rp-l { font-size: 13px; font-weight: 500; }
#practice-body .rate-pick.on { background: var(--accent-soft); border-color: var(--accent); }
#practice-body .rate-pick.untested { border-width: 1px; border-style: solid; }
#practice-body .rate-pick.untested.on { background: var(--red-soft); border-color: var(--red); }
#practice-body .pr-rate .pr-grid { margin-top: 8px; }
#practice-body .rate-stored, #practice-body .rate-stored.untested {
  border: 0; background: none; padding: 0; margin-top: 8px;
}
#practice-body .rate-stored .rs-l { display: flex; align-items: center; gap: 6px; letter-spacing: .04em; }
#practice-body .rs-pair { margin: 0; }

/* One-line rows: the map footprint, the storm, what drains here. */
.pr-mapline, .pr-note-line, .pr-frommap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  font-size: 13px; color: var(--ink-mid); margin: 0 0 12px;
}
#practice-body .pr-mapline, #practice-body .pr-drains, #practice-body .pr-others, #practice-body .pr-next {
  border: 0; background: none; padding: 0; margin: 0 0 12px; font-size: 13px;
}
#practice-body .pr-drains.warn { color: var(--ochre); }
#practice-body .pr-next { color: var(--ink); }
#practice-body .pr-condrow { margin-bottom: 12px; }

/* The save row: the gate on the left in plain words, one filled button. */
#practice-body .pr-foot { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; align-items: center; }
#practice-body .pr-gate { font-family: var(--sans); font-size: 12.5px; color: var(--ink-mid); flex: 1 1 16rem; }
#practice-body .pr-gate.ok { color: var(--accent); }
#practice-body .pr-actions { align-items: center; }
.pr-foot-why .calm-pop { left: auto; right: -4px; }

#practice-body .calm-notice { margin: 8px 0; }
#practice-body .pr-derived { border: 0; padding: 0; }

@media (max-width: 620px) {
  #practice-body .pr-grid { grid-template-columns: 1fr; }
}

/* ---------- what the practice does (practice results) ---------- */
#practice-result .pr-sec h3 {
  justify-content: flex-start; align-items: center; gap: 6px;
  font: 600 13px/1.4 var(--sans); border-bottom: 0; padding-bottom: 0; margin: 0 0 8px;
}
#practice-result .pr-await, #practice-result .pr-voided {
  display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0;
  margin: 0 0 12px; font-size: 13px; color: var(--ink-mid);
}
#practice-result .pr-func { border: 0; background: none; padding: 0; margin: 0 0 12px; color: var(--ink-mid); }
#practice-result .ps-l { display: flex; align-items: center; gap: 6px; }
#practice-result .pr-withheld { border: 0; border-left: 2px solid var(--red); background: none; padding: 2px 0 2px 10px; }
#practice-result .pr-withheld .pw-l { display: flex; align-items: center; gap: 6px; }
#practice-result .pr-caveat { display: flex; align-items: center; gap: 6px; }

/* A refusal (waiver.js, one renderer for the product): the headline, its
   effect and what to do; the long reason behind the "?" beside it. One
   rule on the left instead of a filled box. */
.refuse[data-wv-item] { background: none; border: 0; border-left: 3px solid var(--red); padding: 4px 0 4px 12px; }
.refuse[data-wv-item].rf-overruled { border-left-color: var(--ochre); }
.refuse[data-wv-item] .rf-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.refuse[data-wv-item] .rf-l { letter-spacing: .06em; }
.wv-struct-line { display: flex; align-items: center; gap: 6px; color: var(--ink-mid); }

/* ---------- the "?" the side panels get (calm-forms.js) ---------- */
h2.with-action > .calm-auto { margin-right: auto; margin-left: -4px; }
h1 > .calm-auto, h2 > .calm-auto, h3 > .calm-auto, h4 > .calm-auto { margin-left: 4px; }
h1 .calm-pop, h2 .calm-pop, h3 .calm-pop, h4 .calm-pop {
  font: 400 13px/1.5 var(--sans); letter-spacing: normal; text-transform: none; color: var(--ink);
}
.calm-pop > p, .calm-pop > div { margin: 0; font-size: 13px; color: var(--ink); }
.calm-pop > * + * { margin-top: 6px; }
p.calm-kept, div.calm-kept { margin: 0 0 8px; color: var(--ink-mid); }

/* Quiet empty states in the side views (rule 9): no dashed box. */
#view-jurisdiction .dv-empty, #view-account .dv-empty, #view-billing .dv-empty,
#derive-panel .dv-empty, #estimates-panel .dv-empty, #imagery-panel .dv-empty, #plan-intake-panel .dv-empty {
  border: 0; background: none; padding: 12px 0; text-align: left; color: var(--ink-mid);
}
.calm-pop .panel-sub { display: block; font: inherit; color: var(--ink-mid); }

/* ---------- the acknowledgement and reason (reason.js) ---------- */
.ack .ack-head { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0;
                 font: 600 14px/1.4 var(--sans); }
.ack .ack-head .calm-pop, .ack .ack-actions .calm-pop { font: 400 13px/1.5 var(--sans); color: var(--ink); }
.ack .ack-actions { display: inline-flex; align-items: center; gap: 6px; }
.ack .ack-actions .calm-pop { left: auto; right: -4px; }
.ack .calm-pop .ack-attrib, .ack .calm-pop .ack-why { display: block; border: 0; padding: 0; margin: 0; }

/* ---------- what the public data says (derive.js) ---------- */
#derive-panel .dv-sec h3, #derive-panel .dv-qhead, #derive-panel .dv-ahead {
  justify-content: flex-start; align-items: center; gap: 6px;
}
#derive-panel .calm-pop .w, #derive-panel .calm-pop .d { display: block; }
#derive-panel .calm-pop .d { margin-top: 6px; font-style: italic; }

/* A note behind a "?" reads the same wherever it sits: a heading, a mono
   label or an uppercase row does not restyle it. */
.calm-info-wrap > .calm-pop, .calm-info-wrap > .calm-pop span:not(.origin):not(.mono) {
  font-family: var(--sans); font-size: 13px; font-weight: 400; line-height: 1.5;
  letter-spacing: normal; text-transform: none; color: var(--ink); text-align: left; font-style: normal;
}
h3 > .calm-auto + span, h3 > .calm-auto + * { margin-left: auto; }
#view-jurisdiction .ju-verdict .calm-details { margin-top: 8px; font-size: 13px; }

/* ---------- the waiver form (waiver.js) ---------- */
.wv-form .wv-fh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
                  font: 600 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.wv-form .wv-acts { display: inline-flex; align-items: center; gap: 6px; }
.wv-form .wv-acts .calm-pop { left: auto; right: -4px; }
.calm-pop .wv-demand, .calm-pop .wv-attrib { border: 0; padding: 0; margin: 0; background: none; }

/* ---------- sign up (account.js), eval round 2 B5-03 and B5-15 ----------
   The terms box beside its label in normal case, the error beside the
   button. */
label.checkbox {
  display: inline-flex; align-items: flex-start; gap: 8px; margin: 0;
  font: 400 13.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink);
}
label.checkbox input[type="checkbox"] { width: auto; flex: none; margin: 3px 0 0; }
.terms-field { display: flex; align-items: flex-start; gap: 6px; }
.form-out:empty { display: none; }
.form-out .errbox { margin: 0 0 12px; }
input[aria-invalid="true"] { border-color: var(--red); }