/* Recipe Macro Calculator (/recipe-macro-calculator/, tools/site/macro_tool.py + tool.js). Tokens and base classes come from style.css. */
main [hidden]{display:none!important}
.mt-hero{max-width:980px;padding-top:40px!important}
.mt-hero h1{font-size:clamp(50px,9vw,100px);max-width:11ch}
.mt-hero .lede{margin:14px 0 0}
.mt-tool{padding-top:22px!important}

/* ── form ── */
.mt-box{display:grid;gap:18px;max-width:980px;padding:16px;border:1.5px solid var(--ink);background:var(--paper)}
.mt-lab{display:block;margin:0 0 8px;font:800 13px/1.2 var(--disp);letter-spacing:1.4px;text-transform:uppercase}
.mt-box textarea,.mt-box input{display:block;width:100%;margin:0;padding:13px 14px;border:1.5px solid var(--hair);border-radius:14px;outline:0;background:var(--paper);color:var(--ink);font:500 16px/1.45 var(--text);-webkit-appearance:none;appearance:none}
.mt-box textarea{min-height:236px;resize:vertical}
.mt-box textarea:focus,.mt-box input:focus{border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 22%,transparent)}
.mt-box ::placeholder{color:var(--ink3);opacity:1}
.mt-hint{margin:6px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink2)}
.mt-bar{display:grid;gap:16px}
.mt-step{display:flex;width:max-content;border:1.5px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--paper)}
.mt-step:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 22%,transparent)}
.mt-box .mt-step input{width:66px;height:52px;padding:0;border:0;border-radius:0;text-align:center;font:900 26px/1 var(--disp);box-shadow:none;-moz-appearance:textfield;appearance:textfield}
.mt-step input::-webkit-outer-spin-button,.mt-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mt-step button{width:52px;border:0;background:var(--surface);color:var(--ink);font:600 24px/1 var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mt-step button:active{background:var(--hair)}
.mt-acts{display:grid;gap:10px}
.mt-acts .btn,.mt-shares .btn,.mt-how .btn{border:0;font-family:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mt-box .btn.ghost,.mt-acts .btn.ghost,.mt-shares .btn.ghost,.mt-how .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.mt-acts .btn{width:100%}
.mt-acts .btn:disabled{opacity:.7;cursor:progress}
.mt-acts .btn:focus-visible,.mt-shares .btn:focus-visible,.mt-how .btn:focus-visible,.mt-step button:focus-visible,.mt-again:focus-visible,.mt-edit:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.mt-status{margin:0;font-size:15.5px;font-weight:700}.mt-status:empty{display:none}.mt-status.err{color:var(--red)}
@media (min-width:700px){
.mt-box{padding:22px}
.mt-bar{grid-template-columns:auto minmax(0,1fr);align-items:end}
.mt-acts{display:flex;justify-content:flex-end;flex-wrap:wrap}.mt-acts .btn{width:auto}}

/* ── results ── */
.mt-results{padding-top:44px!important;scroll-margin-top:72px}
.mt-rhead h2{max-width:22ch;font-size:clamp(34px,5.4vw,58px);overflow-wrap:anywhere;outline:0}
.mt-meta{margin:10px 0 14px;font-size:15.5px;color:var(--ink2);overflow-wrap:anywhere}
.mt-meta a{color:var(--ink);font-weight:700}
.mt-cols{display:grid;gap:30px;margin-top:22px}
.mt-col-a,.mt-col-b{min-width:0}
@media (min-width:900px){.mt-cols{grid-template-columns:340px minmax(0,1fr);gap:44px;align-items:start}}
.mt-label .lhead span.on{color:var(--red)}
.mt-delta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:12px 0 0;font:800 13px/1.2 var(--disp);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink2)}
.mt-delta b{font:900 30px/1 var(--disp);letter-spacing:0;text-transform:none;color:var(--red)}

/* ── Feast Mode switch ── */
.mt-fm{margin-top:18px;padding:18px;background:var(--ink);color:var(--paper)}
.mt-fm .eyebrow{margin-bottom:6px;color:var(--red)}
.mt-fmhead{display:flex;gap:16px;align-items:center;justify-content:space-between}
.mt-fmhead b{display:block;font:900 30px/1 var(--disp)}
.mt-fmhead p{margin:6px 0 0;font-size:14.5px;line-height:1.4;color:color-mix(in srgb,var(--paper) 72%,transparent)}
.toggle.mt-toggle{flex:none;width:92px;height:52px;margin:0;padding:0;border:0;cursor:pointer;background:color-mix(in srgb,var(--paper) 26%,transparent);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.toggle.mt-toggle i{top:5px;left:5px;width:42px;height:42px}
.toggle.mt-toggle[aria-checked="true"]{background:var(--red)}
.toggle.mt-toggle[aria-checked="true"] i{transform:translateX(40px)}
.toggle.mt-toggle:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.mt-fmbody{margin-top:16px}
.mt-swaps{margin:12px 0 0;padding:0;list-style:none}
.mt-swap{padding:12px 0;border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent)}
.mt-swapline{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0;font-size:16px;line-height:1.35;overflow-wrap:anywhere}
.mt-swapline s{color:color-mix(in srgb,var(--paper) 55%,transparent)}
.mt-swapline .arr{color:var(--red);font-weight:800}
.mt-swapline b{font-weight:700}
.mt-swapwhy{margin:5px 0 0;font-size:14px;line-height:1.4;color:color-mix(in srgb,var(--paper) 72%,transparent)}
.mt-swapd{margin:6px 0 0;font:800 13px/1.2 var(--disp);letter-spacing:1.1px;text-transform:uppercase;color:var(--red)}
.mt-fmnote{margin:12px 0 0;font-size:13px;line-height:1.4;color:color-mix(in srgb,var(--paper) 60%,transparent)}
.mt-fmnone{margin:0;font-size:14.5px;line-height:1.45;color:color-mix(in srgb,var(--paper) 78%,transparent)}

/* ── line table (stacked rows on phones) ── */
.mt-h3{margin:0 0 6px;font:900 30px/1 var(--disp)}
.mt-sum{margin:0 0 8px;font-size:15px;color:var(--ink2)}
#mt-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mt-table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.mt-table th,.mt-table td{padding:10px 8px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.mt-table thead th{font:800 12px/1.2 var(--disp);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink2);border-bottom:3px solid var(--ink);vertical-align:bottom}
.mt-table th:first-child{padding-left:0}.mt-table td:last-child,.mt-table th:last-child{padding-right:0}
.mt-table .n{text-align:right;white-space:nowrap}
.mt-table tbody th{font-weight:600;overflow-wrap:anywhere}
.mt-match{color:var(--ink2);overflow-wrap:anywhere}
.mt-match small{display:block;font-size:12px;color:var(--ink3)}
.mt-swapto{display:block;margin-top:2px;font-size:13.5px;font-weight:700;color:var(--red)}
.mt-table tr.no .n{color:var(--ink3)}
.mt-table tr.no>th>span:first-child{color:var(--ink2)}
.mt-flag{display:inline-block;margin:6px 6px 0 0;padding:3px 8px 2px;border-radius:99px;font:800 11.5px/1.3 var(--disp);letter-spacing:1px;text-transform:uppercase;vertical-align:middle}
.mt-flag.no{background:var(--red);color:#fff}
.mt-flag.est{background:var(--surface);color:var(--ink)}
.mt-why{display:block;margin-top:4px;font-size:13.5px;font-weight:400;line-height:1.4;color:var(--ink2)}
.mt-edit{padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.mt-table tfoot th,.mt-table tfoot td{border-bottom:0;font-weight:800}
.mt-table tfoot tr:first-child>*{border-top:3px solid var(--ink)}
.mt-table tfoot th span{font-weight:400;color:var(--ink2)}
.mt-table tfoot tr.ps td.n{color:var(--red)}
@media (max-width:699px){
.mt-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mt-table,.mt-table tbody,.mt-table tfoot{display:block}
.mt-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;padding:12px 0;border-bottom:1px solid var(--hair)}
.mt-table th,.mt-table td{display:block;padding:0;border:0}
.mt-table tbody th,.mt-table tfoot th,.mt-table td.mt-match{grid-column:1/-1}
.mt-table td.mt-match:empty{display:none}
.mt-table .n{text-align:left}
.mt-table td.mt-match{font-size:13.5px}
.mt-table td.n:before{content:attr(data-k);margin-right:6px;font:800 11px/1.3 var(--disp);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3)}
.mt-table tfoot tr:first-child{border-top:3px solid var(--ink)}.mt-table tfoot tr:first-child>*{border-top:0}}

/* ── after the result ── */
.mt-exlink{margin:14px 0 0;font-size:15px}.mt-exlink a{font-weight:700}
.mt-cta{display:grid;gap:18px;max-width:980px;margin-top:40px;padding:20px;border:1.5px solid var(--ink)}
.mt-cta h2{font-size:clamp(32px,4.4vw,48px)}
.mt-ctacopy p:not(.soon):not(.eyebrow){margin:10px 0 0;color:var(--ink2)}
@media (min-width:900px){.mt-cta{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:center;padding:26px}}
.mt-shares{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:22px}
.mt-again{padding:8px 0;border:0;background:none;color:var(--ink);font:700 15px var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mt-how,.mt-more{padding-top:52px!important}
.mt-how .btn{margin-top:4px}
.mt-more h2{font-size:clamp(32px,4vw,44px)}

/* motion: short, ease-out, off when reduced */
@media (prefers-reduced-motion:no-preference){
.mt-box textarea,.mt-box input,.mt-step{transition:border-color .15s,box-shadow .15s}
.toggle.mt-toggle{transition:background-color .2s}
.toggle.mt-toggle i{transition:transform .26s cubic-bezier(.23,1,.32,1)}
.mt-acts .btn,.mt-shares .btn{transition:transform .15s cubic-bezier(.23,1,.32,1),opacity .15s}
.mt-results.in .mt-cols,.mt-results.in .mt-rhead{animation:mtin .32s cubic-bezier(.23,1,.32,1)}
.mt-fmbody:not([hidden]){animation:mtin .26s cubic-bezier(.23,1,.32,1)}}
@keyframes mtin{from{opacity:0;transform:translateY(6px)}}