/* Generated by tools/build-mobile.mjs. Do not edit. */
:root{
 --paper:#EDF2EF;--grid:#CBD9D3;--ink:#12201B;--soft:#4C6058;--faint:#8AA096;
 --pen:#C2371F;--pen2:#1F5F7A;--band:#A8C8B4;--line:#B3C7BF;
 --mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,monospace;
 --serif:"Iowan Old Style",Palatino,Georgia,serif;
 --pad:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overscroll-behavior-y:none;overflow-x:hidden;width:100%;max-width:100%}
body{font-family:var(--mono);color:var(--ink);background:var(--paper);
 background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
 background-size:9px 9px;-webkit-font-smoothing:antialiased;font-size:15px}
.wrap{max-width:520px;margin:0 auto;padding:0 14px calc(40px + var(--pad));width:100%}
/* every flex and grid child may shrink: without this, long labels force overflow */
.wrap *{min-width:0}

/* pinned readout */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:2px solid var(--ink);
 padding:10px 0 8px;margin:0 0 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.top .cell{text-align:center}
.top .k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 1px}
.top .v{font-size:clamp(22px,7.5vw,32px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.05;margin:0;overflow-wrap:anywhere}
.top .u{font-size:10px;color:var(--soft)}

h1{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:14px 0 8px;color:var(--soft);font-weight:700}

/* chips */
.picker{width:100%;max-width:100%;min-height:58px;padding:0 40px 0 14px;border:2px solid var(--ink);
 background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:16px;border-radius:0;
 -webkit-appearance:none;appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
 background-position:calc(100% - 20px) 26px,calc(100% - 14px) 26px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.picker:focus{outline:2px solid var(--pen2);outline-offset:2px}
.wide{width:100%;min-height:56px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
 font-family:var(--mono);font-size:14px;letter-spacing:.06em;border-radius:0}
.wide:active{background:var(--ink);color:var(--paper)}
.addrow{display:grid;grid-template-columns:minmax(0,1fr) 62px 46px 46px;gap:6px;align-items:center;
 padding:8px 0;border-bottom:1px solid var(--grid)}
.addrow select,.addrow input{min-height:50px;font-size:13px;padding:0 6px;border:1.5px solid var(--line);
 background:#fff;color:var(--ink);font-family:var(--mono);border-radius:8px;width:100%;-webkit-appearance:none;appearance:none}
.addrow input{text-align:right;font-variant-numeric:tabular-nums}
.addrow button{min-height:50px;border:1.5px solid var(--line);background:transparent;color:var(--ink);
 font-family:var(--mono);font-size:12px;border-radius:8px;min-width:0;padding:0}
textarea{width:100%;font-family:var(--mono);font-size:11px;border:1.5px solid var(--line);padding:8px;
 background:#fff;color:var(--ink);border-radius:0;resize:vertical}

/* dial */
.dialwrap{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 4px;width:100%}
.knob{width:58px;height:58px;flex:0 0 58px;border:2px solid var(--ink);background:transparent;color:var(--ink);
 font-size:28px;line-height:1;border-radius:50%;font-family:var(--mono);touch-action:manipulation}
.knob:active{background:var(--ink);color:var(--paper)}
/* flex:1 with min-width:0 means the dial takes what is left and never forces
   the row wider than the screen, whatever the phone */
#dial{flex:1 1 auto;min-width:0;max-width:264px;height:auto;aspect-ratio:1/1;
 touch-action:none;user-select:none;-webkit-user-select:none}
.dv{font-size:54px;font-weight:700;font-variant-numeric:tabular-nums}
.dl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;fill:var(--faint)}

/* segmented */
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 4px}
.seg button{min-height:54px;border:1.5px solid var(--line);background:transparent;color:var(--ink);
 font-family:var(--mono);font-size:12px;letter-spacing:.02em;padding:0 4px;border-radius:8px;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* stepper rows */
.row{display:grid;grid-template-columns:minmax(0,1fr) 52px 62px 52px;align-items:center;gap:6px;
 padding:9px 0;border-bottom:1px solid var(--grid)}
.row .lab{font-size:13px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .num{text-align:center;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.row button{height:52px;min-width:0;border:1.5px solid var(--line);background:transparent;color:var(--ink);
 font-size:24px;font-family:var(--mono);line-height:1;border-radius:10px}
.row button:active{background:var(--ink);color:var(--paper)}

/* ingredient list */
.ing{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--grid)}
.ing .n{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ing .q{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.ing .q small{font-size:12px;font-weight:400;color:var(--soft)}

.card{border:1.5px solid var(--ink);padding:12px 14px;margin:12px 0}
.card .k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 4px}
.note{font-family:var(--serif);font-size:16px;line-height:1.45;color:var(--soft);margin:0}
.flag{border-left:4px solid var(--pen);padding:10px 12px;margin:8px 0;font-family:var(--serif);font-size:16px;
 line-height:1.4;background:rgba(255,255,255,.55)}
.flag.ok{border-left-color:var(--pen2)}
.toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 8px}
.toggle button{min-height:56px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
 font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;padding:0 4px;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lang{position:absolute;top:10px;right:14px;display:flex;gap:6px;z-index:30}
.lang button{min-height:34px;padding:0 10px;border:1.5px solid var(--line);background:var(--paper);
 color:var(--soft);font-family:var(--mono);font-size:11px;border-radius:17px}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
[hidden]{display:none!important}
footer{margin-top:24px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--faint)}