:root{--ink:#14213d;--ink2:#3d4a63;--bg:#fff;--surf:#f4f6fa;--line:#d5dbe6;--acc:#9a3412;--link:#1d4ed8;--base:#1e3a8a;--fringe:#0f766e;--ok:#166534;--warn:#92400e;--r:10px;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--link);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)}
.prose{max-width:58ch}
header.top{border-bottom:1px solid var(--line);background:#fff}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);padding-top:var(--s3);padding-bottom:var(--s3)}
.brand{font-weight:800;color:var(--ink);text-decoration:none;font-size:1.1rem;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.brand svg{flex:none}
nav.main{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4)}
nav.main a{color:var(--ink2);text-decoration:none;padding:6px 2px;min-height:24px;font-weight:600;font-size:.95rem}
nav.main a[aria-current]{color:var(--ink);border-bottom:3px solid var(--acc)}
main{padding:var(--s5) 0 var(--s7)}
.crumbs{font-size:.88rem;color:var(--ink2);margin-bottom:var(--s3)}
.crumbs a{color:var(--ink2)}
h1{font-size:clamp(1.65rem,1.2rem + 2vw,2.4rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--s3)}
h2{font-size:1.4rem;line-height:1.25;margin:var(--s7) 0 var(--s3);letter-spacing:-.01em}
h3{font-size:1.1rem;margin:var(--s5) 0 var(--s2)}
.lead{font-size:1.12rem;color:var(--ink2);max-width:58ch;margin:0 0 var(--s4)}
.byline{font-size:.9rem;color:var(--ink2);margin:0 0 var(--s4)}
.src-by{font-size:.88rem;color:var(--ink2);margin:0 0 var(--s4);max-width:58ch}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* answer card */
.answer{border:1px solid var(--line);border-left:6px solid var(--acc);background:var(--surf);border-radius:var(--r);padding:var(--s4) var(--s5);margin:var(--s4) 0}
.answer p{margin:0;font-size:1.06rem}
.answer .big{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);margin:0 0 var(--s3)}
.answer .big div{min-width:8.5rem}
.answer .big b{display:block;font-size:1.9rem;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.answer .big span{font-size:.85rem;color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 0;padding:0;list-style:none}
.chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.84rem;color:var(--ink2)}
.chips li.okc{border-color:#86efac;color:var(--ok)}
/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin:var(--s4) 0}
.kpi{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);background:#fff}
.kpi b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums}
.kpi span{font-size:.85rem;color:var(--ink2)}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4);padding:0;list-style:none;margin:var(--s4) 0}
.card{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);background:#fff;display:flex;flex-direction:column;gap:6px}
.card h3{margin:0;font-size:1.05rem}
.card p{margin:0;color:var(--ink2);font-size:.94rem}
.tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--acc)}
/* quote */
.quote{border-left:4px solid var(--base);background:#f8fafc;margin:var(--s3) 0;padding:var(--s3) var(--s4);border-radius:0 var(--r) var(--r) 0}
.quote p{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:1.02rem}
.quote cite{display:block;font-style:normal;font-size:.84rem;color:var(--ink2);margin-top:6px}
@media (max-width:480px){
  /* r4 R07: quotes at 390 — 15px (≥12) and less side padding so a packed clause fits 4 lines */
  .quote{padding:var(--s2) var(--s3);margin:var(--s2) 0}
  .quote p{font-size:.9375rem;line-height:1.45}
}

/* steps */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:var(--s4) 0}
ol.steps li{counter-increment:s;position:relative;padding:0 0 var(--s4) 52px;min-height:40px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;display:grid;place-items:center}
ol.steps li b{display:block}
/* callout */
.callout{border:1px solid #fcd34d;background:#fffbeb;border-radius:var(--r);padding:var(--s3) var(--s4);margin:var(--s4) 0;font-size:.95rem}
.callout.mist{border-color:#fecaca;background:#fef2f2}
.callout ul{margin:6px 0 0;padding-left:20px}
/* example box */
.example{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;margin:var(--s4) 0}
.example .exh{font-weight:700;margin:0;padding:var(--s3) var(--s4);background:var(--ink);color:#fff;font-size:1rem}
.example .body{padding:var(--s3) var(--s4)}
.example table{width:100%;border-collapse:collapse}
.example td,.example th[scope=row]{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.example tr.tot td{font-weight:800;border-bottom:0}
/* chart */
figure.chart{margin:var(--s4) 0;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4)}
figure.chart figcaption{font-size:.9rem;color:var(--ink2);margin-bottom:6px}
figure.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:var(--s4);font-size:.85rem;color:var(--ink2);margin-top:6px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
/* table */
.tools{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s3) 0}
.tools input[type=search]{flex:1 1 220px;min-height:44px;padding:8px 12px;border:1px solid #8a94a6;border-radius:8px;font-size:1rem}
button,.btn,a.dl{min-height:44px;padding:8px 14px;border-radius:8px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
button.ghost,a.ghost{background:#fff;color:var(--ink)}
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);max-height:70vh}
table.live{border-collapse:collapse;width:100%;font-size:.94rem}
table.live caption{text-align:left;padding:8px 12px;font-size:.88rem;color:var(--ink2)}
table.live th{position:sticky;top:0;background:#eef2f8;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);z-index:1}
table.live th button{all:unset;cursor:pointer;font-weight:700}
table.live th button:focus-visible{outline:3px solid #f59e0b}
table.live td{padding:7px 10px;border-bottom:1px solid #e8ecf2;vertical-align:top}
table.live tbody tr:nth-child(even){background:#fafbfd}
table.live td.cls{min-width:16rem}
table.live code{font-size:.82rem;color:var(--ink2)}
.count{font-size:.88rem;color:var(--ink2)}
/* tile grid of states */
.tiles{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;margin:var(--s4) 0}
.tile{aspect-ratio:1;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;background:#e7ebf3;color:var(--ink);text-decoration:none;line-height:1.1}
.tile small{font-weight:500;font-size:.75rem;font-variant-numeric:tabular-nums}
a.tile{background:var(--base);color:#fff}
a.tile:hover{background:#172554}
.tile.e{visibility:hidden}
@media (max-width:640px){.tiles{gap:2px}.tile{font-size:.75rem;border-radius:4px}.tile small{display:none}}
/* forms */
form.calc{border:1px solid var(--line);background:var(--surf);border-radius:var(--r);padding:var(--s4);display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}
form.calc label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.92rem}
form.calc input,form.calc select{min-height:44px;padding:8px 10px;border:1px solid #8a94a6;border-radius:8px;font-size:1rem;background:#fff;width:100%}
.out{border:2px solid var(--ink);border-radius:var(--r);padding:var(--s4);margin:var(--s3) 0;background:#fff}
.out .big b{font-size:2rem}
.warn{color:var(--warn);font-weight:600}
.src{font-size:.88rem;color:var(--ink2)}
ul.srcs{font-size:.92rem}
footer{border-top:1px solid var(--line);background:var(--surf);font-size:.88rem;color:var(--ink2);padding:var(--s5) 0}
footer nav{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s2)}
footer a{color:var(--ink2)}
.hero{background:linear-gradient(180deg,#eef2f8,#fff);border-bottom:1px solid var(--line);padding:var(--s6) 0 var(--s5);margin-top:calc(-1*var(--s5));margin-bottom:var(--s5)}
.split{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width:900px){.split{grid-template-columns:3fr 2fr}}
details summary{cursor:pointer;font-weight:600}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
ul.bars{list-style:none;margin:0;padding:0;display:grid;gap:10px}
ul.bars li{display:grid;grid-template-columns:minmax(0,15rem) 1fr auto;gap:4px 12px;align-items:center}
.bl{font-size:.9rem}
.bt{display:flex;height:18px;background:#eef2f8;border-radius:4px;overflow:hidden}
.bt i{display:block;height:100%}.bt i.b{background:#1e3a8a}.bt i.f{background:#0f766e}
.bv{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;font-size:.95rem}
.bv small{display:block;font-weight:400;color:var(--ink2);font-size:.75rem}
@media (max-width:640px){ul.bars li{grid-template-columns:1fr auto}.bl{grid-column:1/-1}}
.tiles{max-width:640px}
.out .big{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:0 0 var(--s3)}
.out .big div{min-width:8.5rem}
.out .big b{display:block;font-size:1.8rem;line-height:1.15;font-variant-numeric:tabular-nums}
.out .big span{font-size:.85rem;color:var(--ink2)}
.out table{width:100%;border-collapse:collapse}.out td{padding:6px 4px;border-bottom:1px solid var(--line)}.out tr.tot td{font-weight:800;border-bottom:0}
@media (max-width:640px){.answer{padding:var(--s3) var(--s4)}.answer .big{gap:var(--s3)}.answer .big div{min-width:0;flex:1 1 100%;display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:baseline}.answer .big b{font-size:1.5rem}.answer .big span{font-size:.82rem}}
.bl code{font-size:.75rem;color:var(--ink2)}
@media (max-width:640px){.hero .kpis{grid-template-columns:repeat(3,1fr);gap:6px}.hero .kpi{padding:8px}.hero .kpi b{font-size:1.15rem}.hero .kpi span{font-size:.75rem}}

/* r1 fixes (Lupa B3-2, B3-3, B4-8) */
[hidden]{display:none!important}
abbr.star{text-decoration:none;color:#b45309;font-weight:800;margin-left:2px;cursor:help}
@media (max-width:480px){.example td{white-space:normal;overflow-wrap:anywhere}.example td.num{white-space:nowrap}}
table.hist{border-collapse:collapse;width:100%;font-size:.94rem}table.hist caption{text-align:left;padding:8px 12px;font-size:.88rem;color:var(--ink2)}table.hist th,table.hist td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}table.hist .num{text-align:right;font-variant-numeric:tabular-nums}

/* ===== v3 visual layer (Rick t490u): house art, framing, motion. Motion only under html.motion
   (set inline before first paint when prefers-reduced-motion is not "reduce"); without JS everything shows. ===== */
.band{display:grid;grid-template-columns:1fr 96px;gap:var(--s3) var(--s5);align-items:center;background:linear-gradient(135deg,#eef2f8 0%,#f8fafc 55%,#fff7e6 100%);border:1px solid var(--line);border-radius:16px;padding:var(--s4) var(--s4);margin:var(--s2) 0 var(--s4)}
.band h1{margin:0 0 var(--s2)}
.band .lead{margin:0}
.band .byline{margin:var(--s2) 0 0}
.band .src-by{margin:4px 0 0}
.art{margin:0;line-height:0}
.art svg.scene{width:100%;height:auto;max-height:230px;display:block}
@media (min-width:820px){.band{grid-template-columns:1.5fr 1fr;padding:var(--s5) var(--s6)}}
@media (max-width:819px){.band .art{align-self:start}}
.herogrid{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:center}
@media (min-width:900px){.herogrid{grid-template-columns:1.4fr 1fr}}
@media (max-width:899px){.herogrid .art{max-width:300px;justify-self:end;margin-top:calc(-1*var(--s3))}.herogrid .art svg.scene{max-height:120px}}
.ico{display:block;flex:none}
.card .ico{color:var(--acc);margin-bottom:2px}
.tag .ico{display:inline-block;vertical-align:-6px;margin-right:4px}
.cards.big .card{padding:var(--s5) var(--s4);border-top:4px solid var(--acc)}
.total{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);padding:var(--s4);border-radius:12px;background:var(--ink);color:#fff;margin:0 0 var(--s3)}
.total b{font-size:clamp(2rem,1.4rem + 3vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fde68a}
.total span{font-size:.95rem;color:#e2e8f0}
.stack{display:flex;height:22px;border-radius:6px;overflow:hidden;margin:var(--s2) 0 var(--s3);background:#eef2f8}
.stack i{display:block;height:100%}
.legend2{display:flex;flex-wrap:wrap;gap:4px var(--s4);font-size:.85rem;color:var(--ink2);margin:0 0 var(--s3);padding:0;list-style:none}
.legend2 i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.flags{list-style:none;padding:0;margin:var(--s3) 0;display:grid;gap:6px}
.flags li{padding:8px 12px;border-radius:8px;background:#f0fdf4;border:1px solid #86efac;font-size:.93rem}
.flags li.w{background:#fffbeb;border-color:#fcd34d}
fieldset.grp{border:0;padding:0;margin:0;display:contents}
form.calc .sub{grid-column:1/-1;font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin:var(--s2) 0 -4px;display:flex;align-items:center;gap:8px}
form.calc .hint{font-weight:400;color:var(--ink2);font-size:.8rem}
/* motion */
html.motion .rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
html.motion .rv.in{opacity:1;transform:none}
html.motion .art .dr{opacity:0}
html.motion .art.in .dr{animation:pwd-draw 1.6s cubic-bezier(.4,0,.2,1) forwards}
html.motion .art.in .dr:nth-of-type(2n){animation-delay:.15s}
html.motion .art.in .dr:nth-of-type(3n){animation-delay:.3s}
@keyframes pwd-draw{from{opacity:0}to{opacity:1}}
html.motion .art rect,html.motion .art circle{transform-box:fill-box;transform-origin:50% 100%}
html.motion .art:not(.in) rect,html.motion .art:not(.in) circle{transform:scaleY(.001)}
html.motion .art.in rect,html.motion .art.in circle{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
html.motion .bt i,html.motion .stack i{transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
html.motion .chart:not(.in) .bt i,html.motion .stack.wait i{transform:scaleX(0)}
html.motion .card{transition:transform .2s ease}
html.motion .card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,33,61,.12)}
html.motion .out.pulse{animation:pwd-pulse .45s ease}
@keyframes pwd-pulse{0%{opacity:.7;transform:scale(.99)}100%{opacity:1;transform:none}}
html.motion .tile{transition:transform .15s ease}
html.motion a.tile:hover{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Lupa r2 B3-2: worked-example tables stack below 480 px (label above, value below) */
@media (max-width:480px){.example table,.example tbody,.example tr,.example td,.example th{display:block;width:auto}.example tr{padding:6px 0;border-bottom:1px solid var(--line)}.example td,.example th{border:0;padding:2px 4px;text-align:left!important;white-space:normal!important}.example td:first-child,.example th[scope=row]{font-size:.85rem;color:var(--ink2);font-weight:400;text-align:left}.example td.num,.example td:last-child{font-weight:700;color:var(--ink)}}
/* bid tool on phones: two inputs per row + a live total pinned to the bottom until the breakdown is on screen */
form.calc[data-calc=bid]{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
form.calc[data-calc=bid] label:has(select){grid-column:1/-1}
.stotal{position:fixed;left:8px;right:8px;bottom:8px;z-index:5;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(20,33,61,.3);font-size:.9rem}
.stotal b{color:#fde68a;font-size:1.25rem;font-variant-numeric:tabular-nums}
.stotal a{color:#fff;font-weight:700}
@media (max-width:819px){.stotal.on{display:flex}}
@media (min-width:820px){form.calc[data-calc=bid] label:has(select){grid-column:auto}}
/* ===== Lupa r2 (13-nov): stacked rate cards on phones, EO badge, colored mod diff, result reserve, official seal, motion on changed rows ===== */
@media (max-width:480px){
 .tscroll{max-height:none;overflow-x:visible;border:0}
 table.live,table.live tbody,table.live tr,table.live td{display:block;width:auto}
 table.live caption{display:block;padding:0 0 8px}
 table.live tr{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:0 0 10px;background:var(--surf);display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 10px}
 table.live tbody tr:nth-child(even){background:var(--surf)}
 table.live td{border:0;padding:0}
 table.live td.cls{grid-column:1/-1;min-width:0;font-weight:600}
 table.live td[data-l]::before{content:attr(data-l);display:block;font-size:.75rem;font-weight:400;color:var(--ink2)}
 table.live td.num{font-size:1rem}
 table.live td.tot{font-weight:800}
 table.live td[data-l="Rate ID"],table.live td[data-l="Effective"]{font-size:.8rem;grid-column:span 1}
 table.hist,table.hist tbody,table.hist tr,table.hist td{display:block;width:auto}
 table.hist tr{border-bottom:1px solid var(--line);padding:8px 0}
 table.hist td{border:0;padding:1px 0;text-align:left!important}
}
.badge.eo{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:#fff7e6;border:1px solid #b45309;color:#7c2d12;font-size:.75rem;font-weight:700;white-space:nowrap}
ins{background:#dcfce7;color:#14532d;text-decoration:none;padding:0 3px;border-radius:3px;font-weight:700}
del{color:#7f1d1d;background:#fee2e2;padding:0 3px;border-radius:3px}
ul.diff li.chg,table.hist tr.chg{border-left:4px solid #15803d;padding-left:8px}
.who{font-size:.9rem;color:var(--ink2);margin:0 0 6px}
.out{min-height:12rem}
.answer .big b{font-size:2.3rem;letter-spacing:-.01em;color:#0b1b3f}
.answer{position:relative}
.answer::after{content:"OFFICIAL SOURCE · RECALCULATED";position:absolute;top:10px;right:12px;font:700 .62rem/1 system-ui,sans-serif;letter-spacing:.08em;color:#14532d;border:1.5px solid #15803d;border-radius:4px;padding:4px 6px;transform:rotate(2deg);background:#f0fdf4}
@media (max-width:640px){.answer::after{position:static;display:inline-block;margin:0 0 8px;transform:none}.answer .big b{font-size:1.75rem}}
@media (prefers-reduced-motion:no-preference){
 html.motion tr.chg,html.motion ul.diff li.chg{animation:pwd-flash 1.6s ease-out 1}
 html.motion .out .big b{animation:pwd-rise .45s cubic-bezier(.2,.7,.2,1)}
}
@keyframes pwd-flash{0%{opacity:.45}100%{opacity:1}}
@keyframes pwd-rise{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
form.contact{display:grid;gap:var(--s3);max-width:40rem;margin:var(--s4) 0}
form.contact label{display:grid;gap:4px;font-weight:600}
form.contact input,form.contact select,form.contact textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);min-height:44px}
form.contact button{justify-self:start;font:inherit;font-weight:700;padding:12px 20px;border:0;border-radius:var(--r);background:var(--acc,#1e3a8a);color:#fff;min-height:44px;cursor:pointer}
form.contact .hp{position:absolute;left:-9999px}
@media (max-width:480px){table.live td.num,table.live td.tot{white-space:normal;overflow-wrap:anywhere}table.live td.tot small{display:block;font-weight:400;font-size:.75rem}}
form.contact input,form.contact select,form.contact textarea{width:100%;max-width:100%;box-sizing:border-box}
.art.gen{margin:0}.art.gen img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 8px 24px rgba(20,33,61,.14)}
html.motion .art.gen img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}html.motion .art.gen:not(.in) img{transform:scale(.985)} /* hero is the LCP: never hidden, only a slight settle */

/* v3.1 generated heroes (Sol): full-width on phones, framed column on desktop */
.band.gen{grid-template-columns:1fr}
.band .answer{margin:var(--s3) 0 0}
.band .answer .big{margin:0 0 var(--s2)}
@media (min-width:820px){.band.gen{grid-template-columns:1.25fr 1fr}}
.band.gen .art.gen img{aspect-ratio:16/9;object-fit:cover}
@media (max-width:899px){.herogrid .art.gen{max-width:none;justify-self:stretch;margin-top:0}}

/* ===== tabla-tarjetas v1 (Bruno, 13-nov): R14 cards on phones; replaces the old thead{left:-9999px} ===== */
/* tabla-tarjetas v1 · Public Works Desk component (Bruno, 2026-11-13)
   Any <table data-tt> becomes a stack of cards at <= 560 px. Desktop keeps a normal table.
   Uses the site tokens when present (--ink, --ink2, --line, --surf, --r); falls back otherwise. */
.tt-wrap{margin:16px 0}
.tt-tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:end;margin:0 0 8px}
.tt-sort{display:none;gap:4px;font-size:.9rem;font-weight:600;color:var(--ink,#14213d)}
.tt-sort select{font:inherit;font-weight:400;min-height:44px;padding:8px 10px;border:1px solid var(--ink2,#3d4a63);border-radius:8px;background:#fff;color:var(--ink,#14213d)}
.tt-sort select:focus-visible{outline:3px solid #b45309;outline-offset:2px}
table[data-tt]{border-collapse:collapse;width:100%;font-size:.94rem;font-variant-numeric:tabular-nums}
table[data-tt] caption{text-align:left;padding:8px 0;font-size:.88rem;color:var(--ink2,#3d4a63)}
table[data-tt] th,table[data-tt] td{padding:8px 10px;border-bottom:1px solid var(--line,#d5dbe6);text-align:left;vertical-align:top}
table[data-tt] thead th{background:#eef2f8;font-weight:700;white-space:nowrap}
table[data-tt] tbody th{font-weight:600}
table[data-tt] .num{text-align:right;white-space:nowrap}
table[data-tt] .tt-key{font-weight:800}
table[data-tt] code{font-size:.84rem;color:var(--ink2,#3d4a63)}
table[data-tt] .tt-meta,table[data-tt] code{white-space:nowrap}
table[data-tt] th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:24px}
table[data-tt] th button:focus-visible{outline:3px solid #b45309;outline-offset:2px}
table[data-tt] th[aria-sort=ascending] button::after{content:"▲";font-size:.7em}
table[data-tt] th[aria-sort=descending] button::after{content:"▼";font-size:.7em}

@media (max-width:560px){
  html.js .tt-sort{display:grid} /* html.js is set inline in <head> (site already does it), so the control is there at first paint: no layout shift; without JS it never shows */
  table[data-tt],table[data-tt] tbody,table[data-tt] tr,table[data-tt] td,table[data-tt] tbody th{display:block;width:auto}
  table[data-tt] caption{display:block;padding:0 0 8px}
  /* header row stays in the accessibility tree but off screen; its buttons are taken out of the tab order by the JS */
  table[data-tt] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  table[data-tt] tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px;padding:12px 14px;margin:0 0 10px;border:1px solid var(--line,#d5dbe6);border-radius:var(--r,10px);background:var(--surf,#f4f6fa)}
  table[data-tt] tbody tr[hidden]{display:none}
  table[data-tt] td,table[data-tt] tbody th{border:0;padding:0;min-width:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  table[data-tt] .num{text-align:left;white-space:normal}
  table[data-tt] .tt-title{grid-column:1/-1;font-size:1rem;font-weight:700;color:var(--ink,#14213d)}
  table[data-tt] .tt-wide{grid-column:1/-1}
  table[data-tt] [data-l]::before{content:attr(data-l);display:block;font-size:.78rem;font-weight:400;color:var(--ink2,#3d4a63);line-height:1.3} /* the site build writes data-l today */
  table[data-tt] [data-label]::before{content:attr(data-label);display:block;font-size:.78rem;font-weight:400;color:var(--ink2,#3d4a63);line-height:1.3}
  table[data-tt] .tt-title::before,table[data-tt] .cls::before{content:none}
  table[data-tt] .cls{grid-column:1/-1;font-weight:600}
  table[data-tt] .tt-key{font-size:1.08rem}
  table[data-tt] .tt-meta{font-size:.84rem;white-space:normal}
  table[data-tt] code{white-space:normal}
  table[data-tt] tbody tr:has(.tt-meta) .tt-meta{grid-column:span 1}
}
/* A flex/grid display does not change what is shown with reduced motion: there is no motion in this component. */

/* ===== herramienta-overtime v1 (Bruno, 13-nov) ===== */
/* herramienta-overtime v1 · Public Works Desk · uses site tokens when present */
.otp{display:grid;gap:12px}
form.otp-form{border:1px solid var(--line,#d5dbe6);background:var(--surf,#f4f6fa);border-radius:var(--r,10px);padding:16px;display:grid;gap:12px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));align-items:start}
.otp-form label{display:grid;gap:4px;font-weight:600;font-size:.95rem;color:var(--ink,#14213d)}
.otp-form .wide{grid-column:1/-1}
.otp-form .hint{font-weight:400;font-size:.82rem;color:var(--ink2,#3d4a63)}
.otp-form input,.otp-form select{font:inherit;font-weight:400;min-height:44px;padding:8px 10px;border:1px solid var(--ink2,#3d4a63);border-radius:8px;background:#fff;color:var(--ink,#14213d);width:100%;max-width:100%;box-sizing:border-box}
.otp-form input:focus-visible,.otp-form select:focus-visible,.otp-actions button:focus-visible{outline:3px solid #b45309;outline-offset:2px}
.otp-form [aria-invalid=true]{border:2px solid #b91c1c;background:#fef2f2}
.otp-form [hidden]{display:none!important}
.otp-out{border:2px solid var(--ink,#14213d);border-radius:var(--r,10px);padding:16px;background:#fff;min-height:15rem}
.otp-big{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 8px}
.otp-big div{min-width:9rem}
.otp-big b{display:block;font-size:clamp(1.6rem,1.2rem + 2vw,2.2rem);line-height:1.15;font-variant-numeric:tabular-nums;color:#0b1b3f}
.otp-big b small{font-size:.55em;font-weight:600;color:var(--ink2,#3d4a63)}
.otp-big span{font-size:.85rem;color:var(--ink2,#3d4a63)}
.otp-src{font-size:.86rem;color:var(--ink2,#3d4a63);margin:4px 0 8px}
.otp-src code{font-size:.8rem}
.otp-msg{color:#9a3412;font-weight:600;margin:8px 0 0}
.otp-notes{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.otp-notes li{padding:8px 12px;border-radius:8px;background:#fffbeb;border:1px solid #d97706;font-size:.93rem}
table.otp-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:8px 0}
table.otp-lines caption{text-align:left;font-size:.82rem;color:var(--ink2,#3d4a63);padding:0 0 4px}
table.otp-lines td{padding:7px 4px;border-bottom:1px solid var(--line,#d5dbe6);vertical-align:top}
table.otp-lines td small{display:block;font-size:.78rem;color:var(--ink2,#3d4a63)}
table.otp-lines td.num{text-align:right;white-space:nowrap;padding-left:12px}
table.otp-lines tr.otp-sub td{font-size:.88rem;color:var(--ink2,#3d4a63);padding-left:16px}
table.otp-lines tr.tot td{font-weight:800;border-bottom:0;font-size:1.05rem}
.otp-mistake{font-size:.9rem;color:var(--ink2,#3d4a63);margin:4px 0 0}
.otp-mistake del{color:#7f1d1d;text-decoration-thickness:2px}
.otp-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.otp-actions button{min-height:44px;padding:8px 14px;border-radius:8px;border:1px solid var(--ink,#14213d);background:#fff;color:var(--ink,#14213d);font:inherit;font-weight:600;cursor:pointer}
.otp-actions button.pri{background:var(--ink,#14213d);color:#fff}
.otp-status{font-size:.88rem;color:var(--ok,#166534);min-height:1.4em}
@media (max-width:480px){.otp-out{padding:12px}.otp-big{gap:8px 20px}.otp-big div{min-width:0;flex:1 1 40%}}
/* phones: short fields two per row so the result starts on the first screen */
@media (max-width:560px){form.otp-form{grid-template-columns:1fr 1fr;gap:10px 12px;padding:12px;align-items:end}.otp-form label{font-size:.9rem}.otp-form .hint{font-size:.78rem}}

/* bid v2 actions (copy / CSV / link) */
.out .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}.out .acts button{min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:.92rem;cursor:pointer}.out .acts button:hover{border-color:var(--ink2)}.out .acts button:focus-visible{outline:3px solid var(--focus,#1d4ed8);outline-offset:2px}.out .acted{font-size:.88rem;color:var(--ink2)}.out textarea{width:100%;min-height:6em}
/* R15 (Lupa r3): body line length ~68ch at any width */
main p,main li:not(.card),main blockquote,.callout,.lead,.byline,.src-by,main dd{max-width:58ch}
/* R03 (Lupa r3): on phones the hero is a 120 px strip so the answer and its source stay in the first screen */
@media (max-width:480px){figure.art.gen img{height:120px;width:100%;object-fit:cover}}


/* wh-347-checker.css (Bruno, SISTEMA/entregas/_componentes) */
/* herramienta (base común v1) · Public Works Desk · uses site tokens when present */
.tl{display:grid;gap:12px}
form.tl-form{border:1px solid var(--line,#d5dbe6);background:var(--surf,#f4f6fa);border-radius:var(--r,10px);padding:16px;display:grid;gap:12px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));align-items:start}
.tl-form label{display:grid;gap:4px;font-weight:600;font-size:.95rem;color:var(--ink,#14213d)}
.tl-form .wide{grid-column:1/-1}
.tl-form .hint{font-weight:400;font-size:.82rem;color:var(--ink2,#3d4a63)}
.tl-form input,.tl-form select{font:inherit;font-weight:400;min-height:44px;padding:8px 10px;border:1px solid var(--ink2,#3d4a63);border-radius:8px;background:#fff;color:var(--ink,#14213d);width:100%;max-width:100%;box-sizing:border-box}
.tl-form input:focus-visible,.tl-form select:focus-visible,.tl-actions button:focus-visible{outline:3px solid #b45309;outline-offset:2px}
.tl-form [aria-invalid=true]{border:2px solid #b91c1c;background:#fef2f2}
.tl-form [hidden]{display:none!important}
.tl-out{border:2px solid var(--ink,#14213d);border-radius:var(--r,10px);padding:16px;background:#fff;min-height:15rem}
.tl-big{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 8px}
.tl-big div{min-width:9rem}
.tl-big b{display:block;font-size:clamp(1.6rem,1.2rem + 2vw,2.2rem);line-height:1.15;font-variant-numeric:tabular-nums;color:#0b1b3f}
.tl-big b small{font-size:.55em;font-weight:600;color:var(--ink2,#3d4a63)}
.tl-big span{font-size:.85rem;color:var(--ink2,#3d4a63)}
.tl-src{font-size:.86rem;color:var(--ink2,#3d4a63);margin:4px 0 8px}
.tl-src code{font-size:.8rem}
.tl-msg{color:#9a3412;font-weight:600;margin:8px 0 0}
.tl-notes{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.tl-notes li{padding:8px 12px;border-radius:8px;background:#fffbeb;border:1px solid #d97706;font-size:.93rem}
table.tl-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:8px 0}
table.tl-lines caption{text-align:left;font-size:.82rem;color:var(--ink2,#3d4a63);padding:0 0 4px}
table.tl-lines td{padding:7px 4px;border-bottom:1px solid var(--line,#d5dbe6);vertical-align:top}
table.tl-lines td small{display:block;font-size:.78rem;color:var(--ink2,#3d4a63)}
table.tl-lines td.num{text-align:right;white-space:nowrap;padding-left:12px}
table.tl-lines tr.tl-sub td{font-size:.88rem;color:var(--ink2,#3d4a63);padding-left:16px}
table.tl-lines tr.tot td{font-weight:800;border-bottom:0;font-size:1.05rem}
.tl-mistake{font-size:.9rem;color:var(--ink2,#3d4a63);margin:4px 0 0}
.tl-mistake del{color:#7f1d1d;text-decoration-thickness:2px}
.tl-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tl-actions button{min-height:44px;padding:8px 14px;border-radius:8px;border:1px solid var(--ink,#14213d);background:#fff;color:var(--ink,#14213d);font:inherit;font-weight:600;cursor:pointer}
.tl-actions button.pri{background:var(--ink,#14213d);color:#fff}
.tl-status{font-size:.88rem;color:var(--ok,#166534);min-height:1.4em}
@media (max-width:480px){.tl-out{padding:12px}.tl-big{gap:8px 20px}.tl-big div{min-width:0;flex:1 1 40%}}
/* phones: short fields two per row so the result starts on the first screen */
@media (max-width:560px){form.tl-form{grid-template-columns:1fr 1fr;gap:10px 12px;padding:12px;align-items:end}.tl-form label{font-size:.9rem}.tl-form .hint{font-size:.78rem}}
/* WH-347 checker: week grid + checks table */
.tl-form fieldset.tl-days{grid-column:1/-1;border:0;padding:0;margin:0;min-width:0}
.tl-form fieldset.tl-days legend{font-weight:600;font-size:.95rem;padding:0;margin:0 0 4px}
.tl-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.tl-week label{font-size:.8rem;font-weight:600;text-align:center}
.tl-week input{text-align:center;padding:8px 2px}
.tl-big.ok div:first-child b{color:var(--ok,#166534)}.tl-big.short div:first-child b{color:#9a3412}
.tl-cap{font-size:.82rem;color:var(--ink2,#3d4a63);margin:12px 0 4px}
ul.tl-checks{list-style:none;margin:0 0 8px;padding:0;font-variant-numeric:tabular-nums}
ul.tl-checks li{display:flex;gap:10px;align-items:baseline;padding:7px 4px;border-bottom:1px solid var(--line,#d5dbe6)}
ul.tl-checks .mk{flex:0 0 1.1rem;font-weight:800}ul.tl-checks .what{flex:1 1 auto;min-width:0}ul.tl-checks .num{flex:0 0 auto;white-space:nowrap}
ul.tl-checks .y{color:var(--ok,#166534)}ul.tl-checks .n{color:#9a3412}
ul.tl-checks small{display:block;font-size:.8rem;color:var(--ink2,#3d4a63)}
.tl-form .tl-sub{grid-column:1/-1;font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--acc,#9a3412);margin:4px 0 -6px}
@media (max-width:560px){.tl-week{gap:4px}.tl-week input{padding:8px 0;font-size:.95rem}}
.tl-out.wh{min-height:39rem}@media (max-width:560px){.tl-out.wh{min-height:54rem}}
.tl-big.warn div:first-child b{color:#9a3412}ul.tl-checks .mk.w{color:#9a3412}

/* bond-premium-estimator.css (Bruno, SISTEMA/entregas/_componentes) */
/* herramienta (base común v1) · Public Works Desk · uses site tokens when present */
.tl{display:grid;gap:12px}
form.tl-form{border:1px solid var(--line,#d5dbe6);background:var(--surf,#f4f6fa);border-radius:var(--r,10px);padding:16px;display:grid;gap:12px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));align-items:start}
.tl-form label{display:grid;gap:4px;font-weight:600;font-size:.95rem;color:var(--ink,#14213d)}
.tl-form .wide{grid-column:1/-1}
.tl-form .hint{font-weight:400;font-size:.82rem;color:var(--ink2,#3d4a63)}
.tl-form input,.tl-form select{font:inherit;font-weight:400;min-height:44px;padding:8px 10px;border:1px solid var(--ink2,#3d4a63);border-radius:8px;background:#fff;color:var(--ink,#14213d);width:100%;max-width:100%;box-sizing:border-box}
.tl-form input:focus-visible,.tl-form select:focus-visible,.tl-actions button:focus-visible{outline:3px solid #b45309;outline-offset:2px}
.tl-form [aria-invalid=true]{border:2px solid #b91c1c;background:#fef2f2}
.tl-form [hidden]{display:none!important}
.tl-out{border:2px solid var(--ink,#14213d);border-radius:var(--r,10px);padding:16px;background:#fff;min-height:15rem}
.tl-big{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 8px}
.tl-big div{min-width:9rem}
.tl-big b{display:block;font-size:clamp(1.6rem,1.2rem + 2vw,2.2rem);line-height:1.15;font-variant-numeric:tabular-nums;color:#0b1b3f}
.tl-big b small{font-size:.55em;font-weight:600;color:var(--ink2,#3d4a63)}
.tl-big span{font-size:.85rem;color:var(--ink2,#3d4a63)}
.tl-src{font-size:.86rem;color:var(--ink2,#3d4a63);margin:4px 0 8px}
.tl-src code{font-size:.8rem}
.tl-msg{color:#9a3412;font-weight:600;margin:8px 0 0}
.tl-notes{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.tl-notes li{padding:8px 12px;border-radius:8px;background:#fffbeb;border:1px solid #d97706;font-size:.93rem}
table.tl-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:8px 0}
table.tl-lines caption{text-align:left;font-size:.82rem;color:var(--ink2,#3d4a63);padding:0 0 4px}
table.tl-lines td{padding:7px 4px;border-bottom:1px solid var(--line,#d5dbe6);vertical-align:top}
table.tl-lines td small{display:block;font-size:.78rem;color:var(--ink2,#3d4a63)}
table.tl-lines td.num{text-align:right;white-space:nowrap;padding-left:12px}
table.tl-lines tr.tl-sub td{font-size:.88rem;color:var(--ink2,#3d4a63);padding-left:16px}
table.tl-lines tr.tot td{font-weight:800;border-bottom:0;font-size:1.05rem}
.tl-mistake{font-size:.9rem;color:var(--ink2,#3d4a63);margin:4px 0 0}
.tl-mistake del{color:#7f1d1d;text-decoration-thickness:2px}
.tl-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tl-actions button{min-height:44px;padding:8px 14px;border-radius:8px;border:1px solid var(--ink,#14213d);background:#fff;color:var(--ink,#14213d);font:inherit;font-weight:600;cursor:pointer}
.tl-actions button.pri{background:var(--ink,#14213d);color:#fff}
.tl-status{font-size:.88rem;color:var(--ok,#166534);min-height:1.4em}
@media (max-width:480px){.tl-out{padding:12px}.tl-big{gap:8px 20px}.tl-big div{min-width:0;flex:1 1 40%}}
/* phones: short fields two per row so the result starts on the first screen */
@media (max-width:560px){form.tl-form{grid-template-columns:1fr 1fr;gap:10px 12px;padding:12px;align-items:end}.tl-form label{font-size:.9rem}.tl-form .hint{font-size:.78rem}}
/* bond premium: rate schedule rows */
.tl-form [hidden]{display:none!important}
.tl-form fieldset.bp-tiers{grid-column:1/-1;border:0;padding:0;margin:0;min-width:0}
.tl-form fieldset.bp-tiers legend{font-weight:600;font-size:.95rem;padding:0;margin:0 0 4px}
.bp-row{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:0 0 6px}
.bp-row label{font-size:.85rem}
.tl-form .bp-add{min-height:44px;padding:8px 14px;border-radius:8px;border:1px solid var(--ink,#14213d);background:#fff;color:var(--ink,#14213d);font:inherit;font-weight:600;cursor:pointer}
.tl-form .bp-add:focus-visible{outline:3px solid #b45309;outline-offset:2px}
.tl-out.bp{min-height:30rem}@media (max-width:560px){.tl-out.bp{min-height:36rem}}
.tl-lines td small{font-size:.8rem;color:var(--ink2,#3d4a63)}
.bp-penal{margin:0 0 8px;font-size:.95rem}.tl-big b{overflow-wrap:anywhere}

/* bid-guarantee-calculator.css (Bruno, SISTEMA/entregas/_componentes) */
/* herramienta (base común v1) · Public Works Desk · uses site tokens when present */
.tl{display:grid;gap:12px}
form.tl-form{border:1px solid var(--line,#d5dbe6);background:var(--surf,#f4f6fa);border-radius:var(--r,10px);padding:16px;display:grid;gap:12px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));align-items:start}
.tl-form label{display:grid;gap:4px;font-weight:600;font-size:.95rem;color:var(--ink,#14213d)}
.tl-form .wide{grid-column:1/-1}
.tl-form .hint{font-weight:400;font-size:.82rem;color:var(--ink2,#3d4a63)}
.tl-form input,.tl-form select{font:inherit;font-weight:400;min-height:44px;padding:8px 10px;border:1px solid var(--ink2,#3d4a63);border-radius:8px;background:#fff;color:var(--ink,#14213d);width:100%;max-width:100%;box-sizing:border-box}
.tl-form input:focus-visible,.tl-form select:focus-visible,.tl-actions button:focus-visible{outline:3px solid #b45309;outline-offset:2px}
.tl-form [aria-invalid=true]{border:2px solid #b91c1c;background:#fef2f2}
.tl-form [hidden]{display:none!important}
.tl-out{border:2px solid var(--ink,#14213d);border-radius:var(--r,10px);padding:16px;background:#fff;min-height:15rem}
.tl-big{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 8px}
.tl-big div{min-width:9rem}
.tl-big b{display:block;font-size:clamp(1.6rem,1.2rem + 2vw,2.2rem);line-height:1.15;font-variant-numeric:tabular-nums;color:#0b1b3f}
.tl-big b small{font-size:.55em;font-weight:600;color:var(--ink2,#3d4a63)}
.tl-big span{font-size:.85rem;color:var(--ink2,#3d4a63)}
.tl-src{font-size:.86rem;color:var(--ink2,#3d4a63);margin:4px 0 8px}
.tl-src code{font-size:.8rem}
.tl-msg{color:#9a3412;font-weight:600;margin:8px 0 0}
.tl-notes{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.tl-notes li{padding:8px 12px;border-radius:8px;background:#fffbeb;border:1px solid #d97706;font-size:.93rem}
table.tl-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:8px 0}
table.tl-lines caption{text-align:left;font-size:.82rem;color:var(--ink2,#3d4a63);padding:0 0 4px}
table.tl-lines td{padding:7px 4px;border-bottom:1px solid var(--line,#d5dbe6);vertical-align:top}
table.tl-lines td small{display:block;font-size:.78rem;color:var(--ink2,#3d4a63)}
table.tl-lines td.num{text-align:right;white-space:nowrap;padding-left:12px}
table.tl-lines tr.tl-sub td{font-size:.88rem;color:var(--ink2,#3d4a63);padding-left:16px}
table.tl-lines tr.tot td{font-weight:800;border-bottom:0;font-size:1.05rem}
.tl-mistake{font-size:.9rem;color:var(--ink2,#3d4a63);margin:4px 0 0}
.tl-mistake del{color:#7f1d1d;text-decoration-thickness:2px}
.tl-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tl-actions button{min-height:44px;padding:8px 14px;border-radius:8px;border:1px solid var(--ink,#14213d);background:#fff;color:var(--ink,#14213d);font:inherit;font-weight:600;cursor:pointer}
.tl-actions button.pri{background:var(--ink,#14213d);color:#fff}
.tl-status{font-size:.88rem;color:var(--ok,#166534);min-height:1.4em}
@media (max-width:480px){.tl-out{padding:12px}.tl-big{gap:8px 20px}.tl-big div{min-width:0;flex:1 1 40%}}
/* phones: short fields two per row so the result starts on the first screen */
@media (max-width:560px){form.tl-form{grid-template-columns:1fr 1fr;gap:10px 12px;padding:12px;align-items:end}.tl-form label{font-size:.9rem}.tl-form .hint{font-size:.78rem}}
/* bid guarantee */
.tl-form details.bg-open{grid-column:1/-1;border:1px solid var(--line,#d5dbe6);border-radius:8px;background:#fff;padding:0 12px}
.tl-form details.bg-open summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.tl-form details.bg-open summary:focus-visible{outline:3px solid #b45309;outline-offset:2px}
.tl-form details.bg-open .bg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:12px;padding:0 0 12px;align-items:end}
.tl-big.na b{color:var(--ink2,#3d4a63)}
.bg-after{border-left:4px solid var(--ok,#166534);background:#f0fdf4;padding:8px 12px;border-radius:0 8px 8px 0;margin:8px 0}
.bg-after.bad{border-left-color:#9a3412;background:#fff7ed}
.tl-out.bg{min-height:14rem}@media (max-width:560px){.tl-out.bg{min-height:18rem}}
@media (max-width:560px){.tl-form details.bg-open .bg-grid{grid-template-columns:1fr 1fr}}