/* tools/calc.css — the calculators and generators: inputs on the left, the
   result beside them, live. The result column stays in view while the inputs
   scroll; on a phone it docks at the bottom as a sheet with the headline number
   always showing. Loaded after frame.css. */
.wrap > .ws-head,.wrap > .calc,.wrap > #rateEnd + .krate,.wrap > .krate{width:min(1120px, calc(100vw - 48px)); margin-left:calc(50% - min(1120px, calc(100vw - 48px)) / 2); max-width:none;}
.wrap > .ws-head .ws-sub{max-width:76ch;}
.calc{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:24px; align-items:start; padding:0; margin-top:22px; background:transparent; border:0; box-shadow:none;}
.calc-in{min-width:0; padding:22px 24px 24px; background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
.calc-in > .field:first-child,.calc-in > .grid2:first-child{margin-top:0;}
.calc-out{position:sticky; top:80px; min-width:0; padding:20px 22px 22px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.calc-out .calc-h{color:rgba(255,255,255,.4); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px;}
.calc-out .saveline{border-top:0; margin-top:0; padding-top:0; display:block;}
.calc-out .saveline .s-label{display:block; font-size:12.5px; color:rgba(255,255,255,.55); margin-bottom:4px;}
.calc-out .saveline .s-num{display:block; font-size:36px; font-weight:600; letter-spacing:-1.2px; line-height:1.1; color:#fff; font-variant-numeric:tabular-nums;}
.calc-out .bars{margin-top:18px;}
.calc-out .bar-row{margin-top:12px;}
.calc-out .bar-name{font-size:12.5px; font-weight:500;}
.calc-out .bar-val{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;}
.calc-out .bar-track{height:6px; background:rgba(255,255,255,.08);}
.calc-out .rowline{font-size:12.5px; padding:9px 0; border-top:1px solid rgba(255,255,255,.07); margin:0;}
.calc-out .rowline:first-of-type{border-top:0;}
.calc-out .rows{margin-top:16px; border-top:1px solid rgba(255,255,255,.1);}
.calc-out .rows .rowline:first-child{border-top:0;}
.calc-out .note{font-size:12px; color:rgba(255,255,255,.45); margin-top:14px; line-height:1.55;}
.calc-out .copybtn{margin-top:16px; width:100%; height:42px; display:inline-flex; align-items:center; justify-content:center;}
.calc-out .acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.calc-out .acts .copybtn{flex:1 1 auto; width:auto; margin-top:0;}
.calc-in .gen{margin-top:18px; width:100%; height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:14px;}
.calc-out.empty .calc-empty{color:rgba(255,255,255,.45); font-size:13px; line-height:1.55;}
.calc-out .calc-empty{display:none;}
.calc-out.empty .calc-empty{display:block;}
.calc-out.empty > :not(.calc-h):not(.calc-empty){display:none;}
/* the generators' output is long · it scrolls with the page */
.calc-out.gen{position:static;}
.calc-out .biocard,.calc-out .tagbox{border-radius:0; background:transparent; border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); padding:14px 16px;}
.calc-out .biocard:first-child,.calc-out .tagbox{margin-top:0;}
.calc-out .biocard .cnt{white-space:nowrap; font-family:inherit; font-weight:500; font-variant-numeric:tabular-nums;}
.calc-out .biocard .bar{gap:10px;}
.calc-out .biocard .copybtn{margin-top:0; width:auto; height:36px; padding:0 14px;}
.calc-out .tagbox .copybtn{margin-top:0; width:auto; height:36px; padding:0 12px; font-size:12.5px;}
.calc-out .tagbox .bar{margin-top:14px;}
.calc-out .tagbox{padding:0;}
@media (max-width:1000px){ .calc{grid-template-columns:minmax(0,1fr) 320px;} }
@media (max-width:860px){
  .wrap > .ws-head,.wrap > .calc,.wrap > .krate{width:auto; margin-left:0;}
  .calc{display:block; margin-top:18px;}
  .calc-in{padding:16px 16px 18px;}
  .calc-out{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:30; margin:0; padding:10px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(23,23,26,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:none; border-top:1px solid rgba(255,255,255,.12); max-height:72vh; overflow:auto; overscroll-behavior:contain; transition:max-height .2s;}
  .calc-out:not(.open){max-height:96px; overflow:hidden;}
  .calc-out .calc-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; cursor:pointer;}
  .calc-out .calc-h::after{content:'Details'; text-transform:none; letter-spacing:0; font-size:12.5px; color:#fff;}
  .calc-out.open .calc-h::after{content:'Close';}
  .calc-out .saveline .s-num{font-size:28px;}
  .calc-out .saveline .s-label{font-size:12px; margin-bottom:2px;}
  .calc-out .copybtn{height:44px;}
  body.calc-docked{padding-bottom:120px;}
  .calc-out.empty:not(.open){max-height:72px;}
  /* a generator's result reads inline below the inputs, not in a sheet */
  .calc-out.gen,.calc-out.gen:not(.open){position:static; max-height:none; overflow:visible; padding:16px; margin-top:16px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); border-top:0; backdrop-filter:none;}
  .calc-out.gen .calc-h{cursor:default;} .calc-out.gen .calc-h::after{content:none;}
}