/* Loaf Ledger — Soft Bakery (Direction B)
   Warm oat/cream, rounded cards, soft shadows, receipt/ledger detailing. */

:root{
  --oat:#F4ECDC; --oat-deep:#EBE0C9; --paper:#FFFDF8; --white:#FFFFFF;
  --ink:#2C2721; --ink-soft:#6E6456; --ink-faint:#9A8E79; --line:#DBCBAA;
  --amber:#BC7B12; --amber-hi:#A2680B; --amber-soft:#F6E7C6;
  --green:#2E7D57; --green-soft:#E1F0E6;
  --gold:#C99A2B; --gold-soft:#F6EBCF;
  --red:#B23A2E; --red-soft:#F6E0DB;
  --sora:'Sora',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --shadow:0 6px 18px -12px rgba(60,45,20,.55);
  --shadow-lg:0 16px 40px -20px rgba(60,45,20,.5);
  --maxw:900px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--oat);color:var(--ink);font-family:var(--body);
  line-height:1.5;min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pos{color:var(--green)} .neg{color:var(--red)} .warn{color:var(--gold)}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}

/* ---------------- top bar / tabs ---------------- */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;
  padding:12px max(16px,env(safe-area-inset-left)) 12px max(16px,env(safe-area-inset-right));
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--sora);font-weight:700;font-size:16px}
.brand .mark{width:26px;height:26px;border-radius:8px;background:var(--amber);color:#fff;
  display:grid;place-items:center;font-size:14px;box-shadow:var(--shadow)}
.view-title{display:none;font-family:var(--sora);font-weight:600;font-size:16px;margin-left:2px}
.toptabs{margin-left:auto;display:flex;gap:4px}
.toptabs button{
  border:none;background:transparent;color:var(--ink-soft);
  font-family:var(--sora);font-weight:500;font-size:13.5px;
  padding:8px 15px;border-radius:22px;transition:background .15s,color .15s;
}
.toptabs button:hover{background:var(--oat-deep)}
.toptabs button.on{background:var(--amber);color:#fff}
.reset-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;
  border:1px solid var(--line);color:var(--ink-soft);font-family:var(--sora);font-weight:600;
  font-size:12px;padding:7px 12px;border-radius:20px;transition:background .15s,color .15s,border-color .15s}
.reset-btn:hover{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.reset-btn svg{width:14px;height:14px}

/* ---------------- layout ---------------- */
.view{max-width:var(--maxw);margin:0 auto;padding:22px 16px 40px;
  animation:fade .18s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.page-h{font-family:var(--sora);font-weight:600;font-size:20px;margin:0 0 3px}
.page-sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 18px}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.card-t{font-family:var(--sora);font-weight:600;font-size:14px;margin:0 0 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-t .sub{font-family:var(--mono);font-size:11px;color:var(--ink-faint);font-weight:400}

/* ---------------- forms ---------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--sora);font-size:10.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-soft)}
.field input,.field select{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 12px;font-size:14px;color:var(--ink);width:100%;
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--amber);
  box-shadow:0 0 0 3px var(--amber-soft)}
.field input::placeholder{color:var(--ink-faint)}
.field .locked{background:var(--oat-deep);color:var(--ink-soft);
  border-style:dashed;display:flex;align-items:center;min-height:44px}

.form-grid{display:grid;gap:12px}
.form-grid>*{min-width:0}
select{max-width:100%}
.grid-buy{grid-template-columns:1.7fr .8fr .7fr .9fr}
.grid-2{grid-template-columns:1fr 1fr}

.btn{background:var(--amber);color:#fff;border:none;border-radius:var(--r-md);
  font-family:var(--sora);font-weight:600;font-size:14px;padding:12px 18px;
  box-shadow:0 6px 14px -7px rgba(188,123,18,.7);transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.block{width:100%;justify-content:center}
.btn.ghost{background:transparent;color:var(--amber-hi);box-shadow:none;
  border:1px solid var(--line)}
.btn.ghost:hover{background:var(--oat-deep)}
.btn.sm{padding:8px 13px;font-size:12.5px;border-radius:var(--r-sm)}
.btn.dashed{background:transparent;color:var(--amber-hi);border:1.5px dashed var(--line);
  box-shadow:none}
.btn.dashed:hover{background:var(--amber-soft);border-color:var(--amber)}

.icon-btn{background:transparent;border:none;color:var(--ink-faint);padding:6px;
  border-radius:8px;line-height:0;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--red-soft);color:var(--red)}

/* ---------------- chips (avg cost) ---------------- */
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{background:var(--white);border:1px solid var(--line);border-radius:22px;
  padding:8px 13px;font-size:12.5px;display:flex;gap:8px;align-items:center;
  box-shadow:0 3px 8px -7px rgba(60,45,20,.6)}
.chip b{font-family:var(--sora);font-weight:600}
.chip .c{font-family:var(--mono);color:var(--amber-hi);font-weight:600}
.chip.empty{color:var(--ink-faint);font-style:italic;box-shadow:none;background:transparent}

/* ---------------- receipt / ledger ---------------- */
.receipt{display:flex;flex-direction:column}
.rrow{display:flex;align-items:center;gap:12px;padding:11px 2px;
  border-bottom:1px dashed var(--line);font-size:13.5px}
.rrow:last-child{border-bottom:none}
.rrow .d{font-family:var(--mono);color:var(--ink-soft);font-size:11.5px;width:52px;flex:none}
.rrow .n{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .q{font-family:var(--mono);color:var(--ink-soft);font-size:12px;white-space:nowrap}
.rrow .a{font-family:var(--mono);font-weight:600;text-align:right;min-width:62px}
.rrow .del{flex:none}

/* ---------------- empty state ---------------- */
.empty{text-align:center;color:var(--ink-faint);padding:26px 14px;font-size:13.5px}
.empty .big{font-family:var(--sora);font-weight:600;color:var(--ink-soft);
  font-size:15px;margin-bottom:4px}

/* ---------------- price meter ---------------- */
.price-out{display:flex;flex-direction:column;gap:14px}
.stat-row{display:flex;gap:12px}
.stat{flex:1;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px}
.stat .k{font-family:var(--sora);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-soft)}
.stat .v{font-family:var(--mono);font-weight:600;font-size:22px;margin-top:4px}
.meter{height:9px;border-radius:6px;position:relative;
  background:linear-gradient(90deg,var(--red) 0 15%,var(--gold) 15% 40%,var(--green) 40% 100%)}
.meter i{position:absolute;top:-4px;width:3px;height:17px;border-radius:2px;
  background:var(--ink);transition:left .25s ease}
.meter-legend{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10px;color:var(--ink-faint);margin-top:5px}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--sora);font-weight:600;
  font-size:12.5px;padding:5px 11px;border-radius:20px}
.pill.pos{background:var(--green-soft);color:var(--green)}
.pill.warn{background:var(--gold-soft);color:var(--gold)}
.pill.neg{background:var(--red-soft);color:var(--red)}
.pill.cost{background:var(--amber-soft);color:var(--amber-hi)}

/* ---------------- recipes ---------------- */
.recipe-card{padding:20px}
.recipe-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.recipe-head .rc{display:flex;align-items:center;gap:8px;flex:none}
.rn-input{flex:1;min-width:0;border:1px solid transparent;background:transparent;
  font-family:var(--sora);font-weight:600;font-size:17px;color:var(--ink);
  padding:5px 7px;border-radius:9px;transition:border-color .15s,background .15s}
.rn-input:hover{background:var(--oat)}
.rn-input:focus{outline:none;background:var(--white);border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.detail-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.detail-head .detail-name{flex:1;min-width:0;border:1px solid transparent;background:transparent;
  padding:3px 6px;border-radius:9px}
.detail-head .detail-name:focus{outline:none;background:var(--white);border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.pill .pu{opacity:.7;font-weight:500;font-size:.85em}

.mini-label{font-family:var(--sora);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-soft);margin-bottom:7px}
.mini-label .ml-sub{text-transform:none;letter-spacing:0;color:var(--ink-faint);font-weight:400}

.lines{margin:2px 0 8px}
.line-edit{display:flex;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px dashed var(--line)}
.line-edit:last-of-type{border-bottom:none}
.line-edit .ln{flex:1;min-width:0;font-weight:500;font-size:13.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.line-edit .lq{width:70px;flex:none}
.line-edit .lq input{padding:7px 8px;font-size:13px;text-align:right;width:100%}
.line-edit .lu{width:28px;flex:none;color:var(--ink-faint);font-size:12px}
.line-edit .lc{font-family:var(--mono);font-weight:600;width:56px;flex:none;text-align:right;font-size:13px}
.add-line{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) auto;gap:9px;
  align-items:end;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.add-line .field{min-width:0}

.yield{background:var(--oat);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px}
.yield-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.yield-lbl{font-family:var(--sora);font-weight:600;font-size:13.5px;color:var(--ink-soft)}
.yield-qty{width:74px;flex:none;background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;font-size:14px;text-align:right}
.yield-unit{flex:1;min-width:90px;background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:8px 11px;font-size:14px}
.yield-qty:focus,.yield-unit:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.yield-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;font-size:13px;color:var(--ink-soft)}
.yield-sum .sep{color:var(--ink-faint)}
.yield-sum b{font-weight:600;color:var(--ink)}
.yield-sum .per b{color:var(--amber-hi)}

/* ---------------- recipes (mobile tiles) ---------------- */
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px;box-shadow:var(--shadow);text-align:left;display:flex;flex-direction:column;
  gap:4px;min-height:94px;transition:transform .05s}
.tile:active{transform:scale(.98)}
.tile .tn{font-family:var(--sora);font-weight:600;font-size:14.5px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tile .tc{font-family:var(--mono);font-size:13px;color:var(--amber-hi);font-weight:600;margin-top:auto}
.tile .tc2{font-family:var(--body);font-size:11px;color:var(--ink-faint)}
.tile.add{border-style:dashed;align-items:center;justify-content:center;color:var(--amber-hi);
  font-family:var(--sora);font-weight:600;box-shadow:none;text-align:center}

/* price context line */
.price-context{font-size:12.5px;color:var(--ink-soft)}
.field label .opt{color:var(--ink-faint);font-weight:400;text-transform:none;letter-spacing:0;font-size:10px}

/* mobile detail header */
.detail-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;
  color:var(--amber-hi);font-family:var(--sora);font-weight:600;font-size:14px;padding:6px 4px}
.detail-name{font-family:var(--sora);font-weight:600;font-size:18px}

/* ---------------- sales ---------------- */
.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.tot{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px;box-shadow:var(--shadow)}
.tot .k{font-family:var(--sora);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft)}
.tot .v{font-family:var(--mono);font-weight:600;font-size:20px;margin-top:5px}

/* ---------------- bottom nav (mobile) ---------------- */
.bottomnav{display:none}

/* ---------------- PIN gate ---------------- */
.pin-gate{position:fixed;inset:0;z-index:200;background:var(--oat);display:flex;
  align-items:center;justify-content:center;padding:24px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.pin-card{width:100%;max-width:320px;background:var(--paper);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--shadow-lg);padding:28px 24px;text-align:center}
.pin-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--sora);font-weight:700;font-size:18px}
.pin-brand .mark{width:28px;height:28px;border-radius:9px;background:var(--amber);color:#fff;
  display:grid;place-items:center;font-size:15px}
.pin-sub{color:var(--ink-soft);font-size:13.5px;margin:6px 0 20px}
.pin-dots{display:flex;gap:14px;justify-content:center;margin-bottom:24px}
.pin-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);
  background:transparent;transition:background .12s,border-color .12s,transform .12s}
.pin-dots i.on{background:var(--amber);border-color:var(--amber);transform:scale(1.05)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pin-pad button{height:60px;border:1px solid var(--line);background:var(--white);border-radius:16px;
  font-family:var(--mono);font-size:22px;color:var(--ink);transition:background .12s,transform .05s}
.pin-pad button:active{background:var(--oat-deep);transform:scale(.97)}
.pin-pad button.blank{border:none;background:transparent;pointer-events:none}
.pin-pad button.act{font-family:var(--sora);font-size:19px;color:var(--ink-soft)}
.pin-shake{animation:pinshake .35s}
@keyframes pinshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

/* ---------------- toast ---------------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:500;
  padding:11px 18px;border-radius:22px;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;max-width:88vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--red)}

/* ---------------- responsive: mobile ---------------- */
@media (max-width:720px){
  .brand-name{display:none}
  .view-title{display:block}
  .toptabs{display:none}
  .reset-btn{margin-left:auto}
  .view{padding-bottom:88px}
  .grid-buy{grid-template-columns:1fr 1fr}
  .grid-buy .field.full{grid-column:1 / -1}

  .bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:var(--paper);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 20px -14px rgba(60,45,20,.5);
  }
  .bottomnav button{flex:1;border:none;background:transparent;color:var(--ink-soft);
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 0 10px;font-family:var(--sora);font-weight:500;font-size:10px}
  .bottomnav button svg{width:22px;height:22px;stroke-width:1.9}
  .bottomnav button.on{color:var(--amber-hi)}
  .bottomnav button.on svg{color:var(--amber)}
}
@media (min-width:721px){
  .bottomnav{display:none !important}
  .only-mobile{display:none !important}
}
@media (max-width:720px){
  .only-desktop{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}