/* ==========================================================================
   KF Elements — Glasses Cost Calculator (kfe_glasses_cost)
   --------------------------------------------------------------------------
   Registered as `kfe-glasses-cost` from the registry row and loaded only
   where the widget renders (KFE-003). ADR-0014.

   WHAT IT DRAWS: a head, then one white card holding the six fields in two
   columns and the two results side by side, then the line, the links and the
   small print. Every colour and font is a pack token or a widget-scoped
   custom property `--kfe-glasses-cost-<role>` whose default is a pack token,
   so no client colour is a default (ADR-0002 decision 5):

     --kfe-glasses-cost-card     the card's ground         (var(--kfe-white))
     --kfe-glasses-cost-amount   the two amounts' colour   (var(--kfe-heading, var(--kfe-primary)))
     --kfe-glasses-cost-focus    a field's focus ring       (var(--kfe-accent))

   The fields are drawn as kfe_form draws its fields. ARMED, THEN SHOWN: the
   card is hidden until glasses-cost.js adds `is-armed` to the root, so without
   JavaScript no dead form is drawn.
   ========================================================================== */

.kfe .kfe-glasses-cost [hidden] { display: none !important; }

/* ---------- the head ---------- */
.kfe .kfe-glasses-cost .head {
  max-width: 780px;
  margin: 0 auto 44px;
  text-align: var(--kfe-head-align, center);
}
.kfe .kfe-glasses-cost .kfe-glasses-cost-title {
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.8rem, 3.4vw, 2.7rem)));
  line-height: 1.22;
}
.kfe .kfe-glasses-cost .kfe-glasses-cost-intro { margin-top: 18px; color: var(--kfe-muted); }
.kfe .kfe-glasses-cost .kfe-glasses-cost-intro p + p { margin-top: 12px; }

/* ---------- the card ---------- */
.kfe .kfe-glasses-cost-card {
  display: none;
  max-width: 920px;
  margin: 0 auto;
  background: var(--kfe-glasses-cost-card, var(--kfe-white));
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 10px);
  padding: clamp(24px, 4vw, 44px);
}
.kfe .kfe-glasses-cost.is-armed .kfe-glasses-cost-card { display: block; }

.kfe .kfe-glasses-cost-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}
@media (max-width: 640px) {
  .kfe .kfe-glasses-cost-fields { grid-template-columns: 1fr; }
}
.kfe .kfe-glasses-cost-field { display: flex; flex-direction: column; justify-content: flex-end; }
.kfe .kfe-glasses-cost-field label {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--kfe-ink);
  margin-bottom: 8px;
}
.kfe .kfe-glasses-cost-field input,
.kfe .kfe-glasses-cost-field select {
  width: 100%;
  min-height: 48px;
  font: inherit;
  font-size: 16px;
  color: var(--kfe-ink);
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: 8px;
  padding: 12px 15px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.kfe .kfe-glasses-cost-field input:focus,
.kfe .kfe-glasses-cost-field select:focus {
  outline: none;
  border-color: var(--kfe-glasses-cost-focus, var(--kfe-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kfe-glasses-cost-focus, var(--kfe-accent)) 18%, transparent);
}
.kfe .kfe-glasses-cost-field ::placeholder { color: var(--kfe-muted); opacity: 0.8; }

/* ---------- the two results ---------- */
.kfe .kfe-glasses-cost-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--kfe-line);
}
@media (max-width: 640px) {
  .kfe .kfe-glasses-cost-results { grid-template-columns: 1fr; gap: 18px; }
}
.kfe .kfe-glasses-cost-result-label { font-size: 14px; line-height: 1.45; color: var(--kfe-muted); }
.kfe .kfe-glasses-cost .kfe-glasses-cost-amount {
  margin-top: 8px;
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  color: var(--kfe-glasses-cost-amount, var(--kfe-heading, var(--kfe-primary)));
  font-variant-numeric: tabular-nums;
}

/* ---------- under the card ---------- */
.kfe .kfe-glasses-cost-after {
  max-width: 780px;
  margin: 32px auto 0;
  text-align: center;
}
.kfe .kfe-glasses-cost-note { font-size: 17px; color: var(--kfe-ink); }
.kfe .kfe-glasses-cost-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 24px;
}
.kfe .kfe-glasses-cost-acts .kfe-btn,
.kfe .kfe-glasses-cost-acts .kfe-more { min-height: 44px; display: inline-flex; align-items: center; }
.kfe .kfe-glasses-cost-fine {
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--kfe-muted);
}
.kfe .kfe-glasses-cost-fine p + p { margin-top: 8px; }

/* ---------- dark grounds ---------- */
.kfe .kfe-dark .kfe-glasses-cost-note,
.kfe .kfe-dark .kfe-glasses-cost-intro,
.kfe .kfe-dark .kfe-glasses-cost-fine { color: var(--kfe-on-dark); }