/* Pricing model — scoped styles, loaded ONLY by pricing-model.html. Layout follows the agreed
   mockup (design/size-pricing-calculator-mockup-v5.html). */

/* The tables are far wider than the global .page cap (480px). This scoped modifier widens ONLY
   this screen; the global cap in styles.css is deliberately left alone, as scorecard.css does. */
.page--wide { max-width: 1160px; }

.pm {
  --pm-card: #fff;
  --pm-ink: var(--text, #20262a);
  --pm-ink-2: #5c6560;
  --pm-ink-3: #8b938d;
  --pm-rule: #ded9cd;
  --pm-rule-strong: #c2bbaa;
  --pm-green: #3f6b4a;
  --pm-green-pale: #eaf0e2;
  --pm-rust: #b5432a;
  --pm-rust-pale: #f8e9e5;
  --pm-amber: #8a6414;
  --pm-amber-pale: #fbf1dc;
  --pm-blue: #3b5f75;
  --pm-blue-pale: #e6eef3;
  --pm-tan-deep: #c9a961;
  --pm-field: #fffdf6;
  --pm-field-edge: #e0d5b4;
  font-variant-numeric: tabular-nums;
  color: var(--pm-ink);
}
.pm a.pm-back { color: var(--pm-green); }
.pm h1 { font-size: 21px; font-weight: 650; margin: 0 0 3px; }
.pm .sub { color: var(--pm-ink-3); font-size: 13px; margin: 0 0 14px; max-width: 80ch; }
.pm h2 { font-size: 15px; font-weight: 650; margin: 18px 0 3px; }
.pm .sub2 { color: var(--pm-ink-3); font-size: 12.5px; margin: 0 0 8px; max-width: 82ch; }

.pm-card { background: var(--pm-card); border: 1px solid var(--pm-rule); border-radius: 7px; margin-bottom: 12px; }

/* Config panels (collapsible) */
.pm-panel { background: var(--pm-card); border: 1px solid var(--pm-rule); border-radius: 7px; margin-bottom: 8px; }
.pm-panel > summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 9px; }
.pm-panel > summary::-webkit-details-marker { display: none; }
.pm-panel > summary::before { content: "\203A"; transition: transform .15s; font-size: 18px; color: var(--pm-ink-3); width: 11px; }
.pm-panel[open] > summary::before { transform: rotate(90deg); }
.pm-panel > summary .tail { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--pm-ink-3); text-align: right; }
.pm-panel[open] > summary { border-bottom: 1px solid var(--pm-rule); }

.pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pm-fld { padding: 11px 13px; border-right: 1px solid var(--pm-rule); border-bottom: 1px solid var(--pm-rule); }
.pm-fld label { display: block; font-size: 11.5px; color: var(--pm-ink-3); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.pm-fld .hint { display: block; font-size: 11px; color: var(--pm-ink-3); margin-top: 4px; }
.pm-fld .ro { font-size: 15px; font-weight: 650; padding-top: 3px; }
.pm input[type=number], .pm input[type=text], .pm input[type=date], .pm select {
  width: 100%; padding: 6px 8px; font: inherit; font-size: 14px;
  background: var(--pm-field); border: 1px solid var(--pm-field-edge); border-radius: 4px; color: var(--pm-ink);
}
.pm select { background: #fff; border-color: var(--pm-rule-strong); }
.pm input:focus, .pm select:focus { outline: 2px solid var(--pm-green); outline-offset: 1px; }

/* Tables */
.pm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pm table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 880px; }
.pm th, .pm td { padding: 8px 11px; text-align: right; border-bottom: 1px solid var(--pm-rule); white-space: nowrap; }
.pm th { font-size: 11.5px; font-weight: 600; color: var(--pm-ink-2); border-bottom: 1px solid var(--pm-rule-strong); vertical-align: bottom; line-height: 1.25; }
.pm th.band { text-align: center; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--pm-ink-3); border-bottom: 1px solid var(--pm-rule); padding-bottom: 5px; }
.pm th.band.a { background: var(--pm-blue-pale); color: var(--pm-blue); }
.pm th.band.b { background: var(--pm-green-pale); color: var(--pm-green); }
.pm th.l, .pm td.l { text-align: left; }
.pm td.name { font-weight: 600; }
.pm td.name small { display: block; font-weight: 400; color: var(--pm-ink-3); font-size: 11.5px; }
.pm tbody tr:hover { background: #faf9f5; }
.pm tfoot td { font-weight: 650; background: #f7f6f1; border-top: 1px solid var(--pm-rule-strong); }
.pm .grp { border-left: 1px solid var(--pm-rule-strong); }
.pm td input { width: 82px; text-align: right; }
.pm td.muted, .pm .muted { color: var(--pm-ink-3); }
.pm .pos { color: var(--pm-green); font-weight: 600; }
.pm .neg { color: var(--pm-rust); font-weight: 600; }

.pm-chip { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.pm-chip.off { background: #eef1f0; color: var(--pm-ink-3); }
.pm-chip.warn { background: var(--pm-amber-pale); color: var(--pm-amber); }
.pm-chip.bad { background: var(--pm-rust-pale); color: var(--pm-rust); }

.pm-note { background: #fff; border: 1px solid var(--pm-rule); border-left: 3px solid var(--pm-tan-deep); border-radius: 6px; padding: 10px 13px; font-size: 13px; color: var(--pm-ink-2); margin: 10px 0; }
.pm-note b { color: var(--pm-ink); }
.pm-note.warn { border-left-color: var(--pm-rust); }
.pm-note.info { border-left-color: var(--pm-blue); }

/* Contribution strip */
.pm-strip { display: flex; flex-wrap: wrap; gap: 22px; padding: 14px 16px; }
.pm-strip > div span { display: block; font-size: 12px; color: var(--pm-ink-3); margin-bottom: 2px; }
.pm-strip > div b { font-size: 20px; font-weight: 650; }
.pm-strip > div small { display: block; font-size: 11.5px; color: var(--pm-ink-3); margin-top: 1px; }

.pm-btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.pm button { font: inherit; font-size: 13px; padding: 7px 13px; border-radius: 4px; cursor: pointer; background: #fff; border: 1px solid var(--pm-rule-strong); color: var(--pm-ink); }
.pm button:hover { background: #f1f3f2; }
.pm button.primary { background: var(--pm-green); border-color: var(--pm-green); color: #fff; }
.pm .chk { font-size: 13px; color: var(--pm-ink-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pm .foot { font-size: 12px; color: var(--pm-ink-3); margin-top: 10px; max-width: 84ch; }
.pm-provenance { font-size: 11px; color: var(--pm-ink-3); margin-top: 4px; }
.pm-provenance.missing { color: var(--pm-amber); }