/* SyntaxFlow — the square footage / metros cuadrados calculator (assets/js/area-ui.js).
   Loaded only by /envelope/square-footage-calculator/ and /es/envolvente/calculadora-metros-cuadrados/. */
.ar-hero{padding-bottom:12px}
.ar-hero .answer{margin-bottom:10px}
.ar-units{margin-bottom:12px}
.ar-rooms{display:grid;gap:12px;margin-bottom:10px}
.ar-room{display:grid;gap:10px;padding:12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.ar-rhead{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:8px;align-items:center}
.ar-rhead input{width:100%;font-weight:650}
.ar-rarea{font-variant-numeric:tabular-nums;font-weight:650;color:var(--ink);white-space:nowrap}
.ar-x{width:44px;height:44px;padding:0;border:1px solid var(--rule-2);border-radius:10px;background:none;color:var(--ink-3);font-size:1.15rem;line-height:1;cursor:pointer}
.ar-x:hover{border-color:var(--fail);color:var(--fail)}
.ar-part{display:grid;gap:8px;padding:10px;border-radius:10px;background:var(--surface-2);border-left:3px solid var(--wd)}
.ar-part.ar-minus{border-left-color:var(--fail)}
.ar-ptop{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto auto;grid-template-areas:"i s g q x";gap:8px;align-items:center}
.ar-ptop > .ar-ico{grid-area:i}.ar-ptop > .ar-shape{grid-area:s}.ar-ptop > .ar-sign{grid-area:g}.ar-ptop > .ar-q{grid-area:q}.ar-ptop > .ar-x{grid-area:x}
.ar-q{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:600}
.ar-q input{width:64px}
.ar-ptop label{display:block;min-width:0}
.ar-ptop select{width:100%}
.ar-ico{width:56px;height:42px;display:block}
.ar-ico .s{fill:color-mix(in srgb,var(--wd) 14%,transparent);stroke:var(--wd);stroke-width:1.5;stroke-linejoin:round}
.ar-ico .h{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 2}
.ar-ico text{font:600 9px var(--font);fill:var(--ink-2);text-anchor:middle;dominant-baseline:middle}
.ar-dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;align-items:end}
.ar-f{display:grid;gap:4px;min-width:0}
.ar-f span{font-size:.82rem;font-weight:560;color:var(--ink-2);line-height:1.3}
.ar-f input{width:100%;min-width:0}
.ar-parea{margin:0;font-size:.86rem;color:var(--ink-3);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ar-parea:empty{display:none}
.ar-adds{display:flex;flex-wrap:wrap;gap:8px}
.ar-adds:empty{display:none}
.ar-add{min-height:44px;padding:8px 12px;border:1px dashed var(--rule-2);border-radius:10px;background:transparent;color:var(--ink-2);font:inherit;font-size:.88rem;cursor:pointer}
.ar-add:hover{border-style:solid;border-color:var(--wd);color:var(--wd)}
.ar-walls{display:grid;gap:8px;padding-top:10px;border-top:1px dashed var(--rule-2)}
.ar-wk{margin:0;font-size:.86rem;font-weight:650;color:var(--ink-2)}
.ar-dims.ar-open{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 72px 44px}
.ar-pair{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.ar-pair select{width:auto;max-width:11em}
.ar-check{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.92rem;color:var(--ink-2);cursor:pointer}
.ar-check input{flex:0 0 20px;width:20px;height:20px;margin:2px 0 0}
.calc input[aria-invalid=true]{border-color:var(--fail);box-shadow:0 0 0 1px var(--fail)}
.calc .btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.calc .btn{min-height:44px;padding:10px 16px;border:1px solid var(--line-2,var(--rule-2));border-radius:var(--r-sm,8px);background:var(--panel,var(--surface));color:var(--text,var(--ink));font:inherit;font-size:.92rem;cursor:pointer}
.calc .btn:hover{border-color:var(--wd);color:var(--wd)}
#lines table{margin:0}
.ar-tot th,.ar-tot td{font-weight:700;color:var(--ink)}
.ar-chart th[scope=row]{font-weight:600;color:var(--ink);background:none}
@media(max-width:600px){
  .ar-ptop{grid-template-columns:44px minmax(0,1fr) auto 44px;grid-template-areas:"i s s x" "g g q q"}
  .ar-ico{width:44px;height:33px}
  .ar-dims{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ar-dims.ar-open{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px}
  .ar-dims.ar-open .ar-oq{grid-column:1 / 3}
  .ar-pair select{max-width:8.5em}
}
@media print{ .ar-add,.ar-x,.calc .btnrow{display:none} }