/* komunamiami.com: the "Does it pencil?" calculator for pages other than the homepage.
   Same rules as the homepage's inline copy (index.html, "Calculator — Does it pencil?"): change both. Load after
   elements.css and lotsearch.css (the quote form); .sel is scoped to .calc so it wins over elements.css' select.sel. */
.calc{padding:clamp(32px,4.5vw,56px) 0 clamp(28px,4vw,48px)}
.mk{display:inline-flex;flex-wrap:wrap;border:2px solid var(--ink);max-width:100%}
.mk button{font:600 13px/1 'Archivo',sans-serif;letter-spacing:.24em;text-transform:uppercase;min-height:50px;padding:0 22px;background:transparent;color:var(--ink);border:0;border-right:2px solid var(--ink);cursor:pointer}
.mk button:last-child{border-right:0}
.mk button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.mk button:focus-visible{outline:3px solid var(--blue);outline-offset:-5px}
.mk-note{font-size:16px;color:var(--g1);margin-top:14px;max-width:64ch}
@media (max-width:560px){.mk{display:grid;grid-template-columns:1fr 1.35fr 1.2fr;width:100%}.mk button{padding:0 8px;font-size:11px;letter-spacing:.14em;line-height:1.25}}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(24px,3vw,36px)}
@media (max-width:920px){.calc-grid{grid-template-columns:minmax(0,1fr)}}
.lines{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.ln{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 14px;padding:14px 0;border-top:1px solid var(--g3)}
.ln:first-child{border-top:0}
.ln[hidden]{display:none}
.ln-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.ln-l i{width:14px;height:14px;background:var(--c);flex:none}
.est{font-weight:600;font-size:10px;letter-spacing:.18em;background:var(--yellow);color:var(--ink);padding:4px 7px}
.ln-v{display:flex;align-items:baseline;justify-content:flex-end;gap:2px;font-weight:700;font-size:clamp(18px,1.8vw,22px);font-variant-numeric:tabular-nums}
.ln-v input{font:inherit;width:9ch;text-align:right;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink);padding:4px 0;border-radius:0}
.ln-v input:hover{border-bottom-color:var(--g3)}
.ln-v input:focus{outline:none;border-bottom-color:var(--blue)}
.ln-v input::placeholder{color:var(--g2)}
.ln-sub{grid-column:1/-1;font-size:14px;color:var(--g1)}
.ln.is-off .ln-v,.ln.is-off .ln-sub{opacity:.35;text-decoration:line-through}
.calc .sel{font:600 15px 'Archivo',sans-serif;color:var(--ink);border:2px solid var(--ink);border-radius:0;max-width:100%;padding:10px 38px 10px 12px;-webkit-appearance:none;appearance:none;cursor:pointer;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23161513'/%3E%3C/svg%3E") no-repeat right 12px center}
.calc .sel:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{font:600 11px 'Archivo',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:7px 9px;cursor:pointer;white-space:nowrap}
.skip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.qty{display:inline-flex;align-items:center;border:2px solid var(--ink)}
.qty button{width:38px;height:38px;border:0;background:transparent;color:var(--ink);font:700 18px 'Archivo',sans-serif;cursor:pointer}
.qty button:hover{background:var(--ink);color:var(--paper)}
.qty output{min-width:3.2ch;text-align:center;font-weight:700;font-size:16px}
@media (max-width:560px){
  .ln{grid-template-columns:minmax(0,1fr) auto}
  .ln-l{grid-column:1/-1}
  .ln-v{justify-content:flex-start}
}
.res{border:4px solid var(--ink);padding:clamp(20px,2.6vw,32px);container-type:inline-size}
.res-k{font-weight:600;font-size:13px;letter-spacing:.3em;text-transform:uppercase}
.res-total{font-weight:900;font-stretch:118%;font-size:clamp(30px,3.4vw,52px);font-size:min(80px,12.5cqi);line-height:.95;letter-spacing:-.01em;margin-top:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{display:flex;height:28px;border:2px solid var(--ink);margin-top:18px;overflow:hidden;background:var(--paper)}
.bar i{height:100%;transition:width .45s ease}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}
.res-share{font-size:15px;color:var(--g1);margin-top:12px}
.pen{border-top:2px solid var(--ink);margin-top:24px;padding-top:20px}
.pen-in{display:grid;margin-top:12px}
.pen-in label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;border-bottom:1px solid var(--g3);padding:10px 0}
.pen-in .fld{display:inline-flex;align-items:baseline;gap:2px;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.pen-in input{font:inherit;width:7ch;text-align:right;border:0;border-bottom:2px solid var(--ink);background:transparent;color:var(--ink);padding:2px 0;border-radius:0}
.pen-in input.sm{width:4ch}
.pen-in input:focus{outline:none;border-bottom-color:var(--blue)}
.pen-in input::placeholder{color:var(--g2)}
.pen-be{font-size:16px;margin-top:16px}
.pen-be b{font-weight:800}
.pen-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--ink);margin-top:16px}
.pen-out div{padding:12px 14px;border-right:2px solid var(--ink);min-width:0}
.pen-out div:last-child{border-right:0}
.pen-out dt{font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.pen-out dd{margin:6px 0 0;font-weight:800;font-size:clamp(18px,2vw,24px);font-variant-numeric:tabular-nums}
.verdict{font-weight:900;font-stretch:118%;font-size:clamp(34px,4.4vw,58px);line-height:.9;letter-spacing:-.01em;text-transform:uppercase;margin-top:20px}
.verdict.yes{color:var(--blue)} .verdict.no{color:var(--red)} .verdict.idle{color:var(--g2)}
.res .ctas{margin-top:24px}
.mini{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:18px}
.calc-note{font-size:15px;color:var(--g1);margin-top:22px;max-width:76ch}
