/* Humidity converter. Uses house tokens only; inherits whatever brand it sits in. */
@layer components {
  .hcalc { border: 1px solid var(--rule); padding: var(--sp-6); max-width: 46rem }
  .hcalc-head { display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:baseline;
                justify-content:space-between; margin-bottom:var(--sp-6) }
  .hcalc h3 { font-size:var(--t-h4); line-height:var(--lh-h4) }

  .hcalc-units { display:inline-flex; border:1px solid var(--rule) }
  .hcalc-units button { font:inherit; font-size:var(--t-sm); padding:var(--sp-1) var(--sp-4);
    background:transparent; color:var(--ink-3); border:0; cursor:pointer }
  .hcalc-units button[aria-pressed="true"] { background:var(--ink); color:var(--surface) }

  .hcalc-grid { display:grid; gap:var(--sp-5) }
  @media (min-width:640px){ .hcalc-grid{ grid-template-columns:1fr auto 1fr; align-items:start } }

  .hcalc-side { border-top:2px solid var(--ink); padding-top:var(--sp-4) }
  .hcalc-side[data-role="target"] { border-top-color: var(--accent) }
  .hcalc-side h4 { font-size:var(--t-micro); line-height:var(--lh-micro);
    letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--ink-3);
    font-weight:var(--w-medium); margin-bottom:var(--sp-4) }

  .hcalc-field { display:flex; align-items:baseline; gap:var(--sp-2); margin-bottom:var(--sp-3) }
  .hcalc-field label { font-size:var(--t-sm); color:var(--ink-2); flex:1 }
  .hcalc-field input {
    font:inherit; font-size:var(--t-body); font-variant-numeric:tabular-nums;
    width:5.5rem; text-align:right; padding:var(--sp-2) var(--sp-3);
    background:var(--surface-2, transparent); color:var(--ink);
    border:1px solid var(--rule); border-radius:var(--r-1, 0);
  }
  .hcalc-field input:focus-visible { outline:2px solid var(--focus); outline-offset:2px }
  .hcalc-field .u { font-size:var(--t-sm); color:var(--ink-3); width:1.6rem }

  /* The computed side is a readout, not an input. */
  .hcalc-out { font-size:var(--t-h2); line-height:var(--lh-h2); letter-spacing:var(--tr-h2);
    font-variant-numeric:tabular-nums; color:var(--accent); font-weight:var(--w-medium) }
  .hcalc-out small { font-size:var(--t-body); color:var(--ink-3); font-weight:var(--w-regular) }

  .hcalc-swap { display:flex; align-items:center; justify-content:center; padding-top:var(--sp-8) }
  .hcalc-swap button { font:inherit; font-size:var(--t-sm); cursor:pointer;
    background:transparent; color:var(--ink-2); border:1px solid var(--rule);
    padding:var(--sp-2) var(--sp-4); white-space:nowrap }
  .hcalc-swap button:hover { border-color:var(--ink-3); color:var(--ink) }

  .hcalc-derived { margin-top:var(--sp-6); border-top:1px solid var(--rule); padding-top:var(--sp-4);
    display:grid; gap:var(--sp-3) var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)) }
  .hcalc-derived div { font-size:var(--t-caption); line-height:1rem }
  .hcalc-derived dt { color:var(--ink-3); text-transform:uppercase; letter-spacing:0.06em; font-size:10px }
  .hcalc-derived dd { margin:var(--sp-1) 0 0; color:var(--ink); font-variant-numeric:tabular-nums;
    font-size:var(--t-body) }

  .hcalc-note { margin-top:var(--sp-4); font-size:var(--t-sm); line-height:var(--lh-sm);
    color:var(--ink-2); border-left:2px solid var(--accent); padding-left:var(--sp-4) }
  .hcalc-note[hidden] { display:none }
  .hcalc-foot { margin-top:var(--sp-4); font-size:var(--t-caption); color:var(--ink-3) }
}

/* Light calculator shares the converter chrome. */
@layer components {
  .lcalc { border:1px solid var(--rule); padding:var(--sp-6); max-width:46rem }
  .lcalc h3 { font-size:var(--t-h4); line-height:var(--lh-h4); margin-bottom:var(--sp-5) }
  .lcalc-row { display:grid; gap:var(--sp-4); margin-bottom:var(--sp-4) }
  @media (min-width:640px){ .lcalc-row[data-cols="2"]{ grid-template-columns:1fr 1fr } }
  .lcalc label { display:block; font-size:var(--t-micro); line-height:var(--lh-micro);
    letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--ink-3);
    font-weight:var(--w-medium); margin-bottom:var(--sp-2) }
  .lcalc select, .lcalc input {
    font:inherit; font-size:var(--t-body); width:100%; padding:var(--sp-2) var(--sp-3);
    background:var(--surface-2, transparent); color:var(--ink);
    border:1px solid var(--rule); border-radius:var(--r-1, 0);
    font-variant-numeric:tabular-nums;
  }
  .lcalc select:focus-visible, .lcalc input:focus-visible { outline:2px solid var(--focus); outline-offset:2px }
  .lcalc-pair { display:grid; grid-template-columns:1fr auto 1fr; gap:var(--sp-3); align-items:end }
  .lcalc-eq { padding-bottom:var(--sp-3); color:var(--ink-3); font-size:var(--t-body) }
  .lcalc-verdict { margin-top:var(--sp-5); border-left:2px solid var(--accent);
    padding-left:var(--sp-4); font-size:var(--t-body); line-height:var(--lh-body); color:var(--ink) }
  .lcalc-note { margin-top:var(--sp-2); font-size:var(--t-sm); color:var(--ink-3) }
}