:root{
  --bg:#f5f1e8;
  --card:#ffffff;
  --ink:#1f2a25;
  --muted:#718078;
  --accent:#2f6a50;
  --accent-soft:#e7f0ea;
  --line:#e5e5df;
  --warn:#9a6b21;
  --shadow:0 10px 30px rgba(38,48,42,.08);
  --radius:20px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
  background:var(--bg);
  color:var(--ink);
}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{
  min-height:100dvh;
  max-width:720px;
  margin:0 auto;
  padding:env(safe-area-inset-top) 16px calc(92px + env(safe-area-inset-bottom));
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 2px 14px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{margin:0;font-size:24px;letter-spacing:.04em}
.brand p{margin:2px 0 0;color:var(--muted);font-size:12px}
.logo-mark{
  width:48px;height:48px;border-radius:14px;background:var(--card);box-shadow:var(--shadow);
  display:grid;place-items:center;position:relative;overflow:hidden;color:var(--accent)
}
.logo-mark .bread{position:absolute;top:4px;font-size:25px;transform:rotate(-8deg)}
.logo-mark .trays{position:absolute;bottom:4px;line-height:.58;font-size:18px}
.icon-btn{border:0;background:var(--card);width:42px;height:42px;border-radius:14px;box-shadow:var(--shadow)}
.view{display:none}.view.active{display:block}
.card,.result-card,.note-card{
  background:var(--card);border:1px solid rgba(0,0,0,.03);border-radius:var(--radius);box-shadow:var(--shadow)
}
.card.compact{padding:18px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
input,select{
  width:100%;border:1px solid var(--line);background:#fbfcfa;color:var(--ink);
  border-radius:14px;padding:14px 14px;outline:none
}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,106,80,.10)}
.qty-wrap{display:flex;align-items:center;gap:10px}
.qty-wrap input{font-size:30px;font-weight:800;text-align:right;padding:12px}
.qty-wrap span{font-weight:800;min-width:28px}
.service-badge{
  margin:4px 0 16px;padding:10px 12px;border-radius:12px;background:var(--accent-soft);
  color:var(--accent);font-size:13px;font-weight:700
}
.primary-btn,.secondary-btn{
  width:100%;border:0;border-radius:15px;padding:15px 18px;font-weight:800
}
.primary-btn{background:var(--accent);color:white}
.secondary-btn{background:var(--accent-soft);color:var(--accent);margin-top:14px}
.result-card{padding:22px;margin-top:16px;text-align:center}
.result-label{font-size:13px;color:var(--muted);font-weight:700}
.result-line{
  margin:10px 0 8px;font-size:clamp(27px,8.3vw,44px);font-weight:900;letter-spacing:-.045em;
  white-space:nowrap
}
.result-meta{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.hidden{display:none!important}
.recent-block{margin-top:24px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:8px 2px 12px}
.section-head h2{font-size:18px;margin:0}
.text-btn{border:0;background:transparent;color:var(--accent);font-weight:800;font-size:13px}
.record-list{display:flex;flex-direction:column;gap:10px}
.record{
  background:var(--card);border-radius:16px;padding:14px 15px;box-shadow:0 5px 16px rgba(38,48,42,.05);
  border:1px solid rgba(0,0,0,.03)
}
.record-top{display:flex;justify-content:space-between;gap:10px}
.record strong{font-size:15px}.record .big{font-size:18px;font-weight:900;white-space:nowrap}
.record small{color:var(--muted)}
.status{display:inline-block;margin-top:8px;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#f4efe3;color:var(--warn)}
.status.ok{background:var(--accent-soft);color:var(--accent)}
.chart-card{padding:14px;min-height:260px}
canvas{width:100%;height:auto;display:block}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.menu-card{
  border:0;background:var(--card);border-radius:18px;padding:18px;text-align:left;box-shadow:var(--shadow);color:var(--ink)
}
.menu-card span{display:block;font-size:24px;margin-bottom:12px}
.menu-card strong{display:block}.menu-card small{display:block;color:var(--muted);margin-top:4px}
.note-card{padding:16px;margin-top:14px}.note-card p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.bottom-nav{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(720px,100%);
  display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
  border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:20
}
.nav-btn{border:0;background:transparent;color:var(--muted);padding:6px 4px}
.nav-btn span{display:block;font-size:20px}.nav-btn small{font-size:11px;font-weight:700}
.nav-btn.active{color:var(--accent)}
dialog{
  width:min(560px,calc(100% - 28px));border:0;border-radius:22px;padding:18px;box-shadow:0 30px 90px rgba(0,0,0,.25)
}
dialog::backdrop{background:rgba(20,28,24,.45);backdrop-filter:blur(4px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-head h3{margin:0}
.modal-table{width:100%;border-collapse:collapse;font-size:14px}
.modal-table td{padding:10px 4px;border-bottom:1px solid var(--line)}
.modal-table td:first-child{color:var(--muted);width:38%}
.empty{text-align:center;color:var(--muted);padding:70px 10px}
@media (max-width:380px){
  .app-shell{padding-left:10px;padding-right:10px}
  .result-line{font-size:25px}
}

.selector-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.selector-btn{
  position:relative;border:1px solid var(--line);background:#fbfcfa;border-radius:16px;
  padding:13px 34px 13px 13px;text-align:left;color:var(--ink);min-height:70px
}
.selector-btn small{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-bottom:5px}
.selector-btn strong{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selector-btn>span{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:22px}
.pick-list{display:flex;flex-direction:column;gap:8px}
.pick-option{
  width:100%;border:1px solid var(--line);background:#fbfcfa;border-radius:14px;
  padding:15px 14px;display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-weight:800
}
.pick-option span{color:var(--muted);font-size:20px}
@media(max-width:420px){.selector-row{grid-template-columns:1fr}}

.muted{color:var(--muted);font-size:13px;line-height:1.6}
.manage-link{margin-top:14px;min-height:44px;width:100%}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.check-row{display:flex;align-items:center;gap:10px;margin:12px 0 18px;line-height:1.5}
.check-row input{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent)}
.product-detail{display:block;color:var(--muted);font-size:12px;line-height:1.7;font-weight:400;margin-top:6px}
.form-error{color:#a23025;font-size:14px}
.row-actions{display:flex;justify-content:flex-end;gap:14px;padding:2px 8px 6px}
.row-actions button{min-height:44px}
.batch-item{background:white;border-radius:16px;overflow:hidden}
.batch-item .record{box-shadow:none;border:0}
.record-top{flex-direction:column}
.record,.pick-option{overflow-wrap:anywhere}
.record .big{overflow-x:auto;max-width:100%}
.result-line{overflow-x:auto;max-width:100%}
.selector-btn{min-width:0}
button:disabled{opacity:.5;cursor:default}
button:focus-visible{outline:3px solid #b27c28;outline-offset:3px}
dialog{max-height:85dvh;overflow-y:auto}
.modal-head{position:sticky;top:-18px;background:white;padding:8px 0;z-index:1}
.modal-head .icon-btn{flex-shrink:0}
.pick-option{gap:12px;text-align:left;min-height:48px}
.pick-option>span{font-size:14px;flex-shrink:0}
textarea{width:100%;font:inherit;padding:12px;border:1px solid var(--line);border-radius:12px}
input,select{min-width:0;font-size:16px}
@media(max-width:380px){.form-grid{grid-template-columns:1fr}}

.packing-preview,.packing-info{background:#edf4ef;border-radius:12px;padding:14px;line-height:1.7;font-weight:700;color:var(--accent);font-size:14px}.back-link{min-height:44px}.editor-actions{position:sticky;bottom:-18px;background:white;padding:12px 0 6px;border-top:1px solid var(--line);z-index:2}.editor-actions .back-link{width:100%}#modalClose{width:auto;min-width:64px;padding:0 12px;font-size:14px}.form-grid{grid-template-columns:1fr}#productForm{padding-bottom:0}
.recalculate-note{margin:12px;padding:12px;border-radius:10px;background:#fff1d5;color:#784c11;font-size:13px;line-height:1.6}
.share-options{display:grid;gap:10px}.share-choice{display:block;width:100%;padding:16px;border-radius:14px;border:1px solid var(--line);background:#f5f8f5;color:var(--ink);font:inherit;font-weight:700;text-decoration:none;text-align:center}.line-choice{background:#06c755;color:#fff;border-color:#06c755}summary{cursor:pointer;min-height:44px;padding:10px 0}#shareStatus{font-size:14px;line-height:1.6}

/* The transport area contains saved results, visually separate from data entry. */
.transport-results{margin-top:28px;padding:20px 16px 14px;background:#e8f1eb;border:2px solid #9ebda9;border-top:6px solid #2f6a50;border-radius:22px}
.results-kicker{display:inline-block;background:#2f6a50;color:white;font-size:12px;font-weight:800;letter-spacing:.12em;padding:5px 10px;border-radius:7px;margin-bottom:10px}
.transport-results .section-head{margin:0 0 8px;gap:8px}
.transport-results .section-head h2{font-size:22px;color:#244e3b}
.transport-results #batchCount{background:white;color:#2f6a50;font-weight:800;border:1px solid #b5cebd;padding:4px 10px;border-radius:999px;white-space:nowrap}
.results-description{font-size:13px;line-height:1.7;color:#42634f;margin:0 0 8px}
.transport-results #batchDate{color:#42634f;margin:0 0 16px}
.transport-results .batch-item{border:1px solid #bdd1c4;box-shadow:0 3px 10px #244e3b08}
.transport-results .record{padding:16px}
.transport-results .record .big{font-size:clamp(20px,5.5vw,28px);color:#244e3b;margin:8px 0;font-weight:900}
.transport-results .status{color:#2f6a50;background:#e7f0ea}
.transport-results .batch-item:has(.recalculate-note) .status{color:#784c11;background:#fff1d5}
.transport-results .row-actions{border-top:1px solid #edf1ed;margin:0 12px}
.transport-results #shareBatchBtn{background:#2f6a50;color:#fff;line-height:1.5}
.transport-results #newBatchBtn{color:#42634f}
@media(max-width:380px){.transport-results{padding:16px 10px 12px}.transport-results .record{padding:12px}.transport-results .section-head h2{font-size:20px}}

/* Theme surfaces and native input styling. */
:root{color-scheme:light;--chart-line:#2f6a50;--chart-grid:#dfe5e0;--chart-text:#52665a}
.theme-settings{margin:0 0 18px;padding:16px;min-width:0}
.theme-settings legend{font-weight:800;padding:0 6px}
.theme-options{display:flex;flex-wrap:wrap;gap:8px}
.theme-options label{display:flex;align-items:center;gap:7px;min-height:48px;padding:10px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.theme-options label:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.theme-options input{width:18px;height:18px;margin:0;padding:0;accent-color:var(--accent)}
.theme-settings p{margin-bottom:0}
:root[data-theme="dark"]{color-scheme:dark;--bg:#131a17;--card:#202b25;--ink:#edf4ee;--muted:#b2c2b8;--accent:#96dcb4;--accent-soft:#2b4535;--line:#526459;--warn:#f1ca84;--shadow:0 10px 30px #0003;--chart-line:#96dcb4;--chart-grid:#526459;--chart-text:#b2c2b8}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea,[data-theme="dark"] .selector-btn,[data-theme="dark"] .pick-option{background:#18221c;color:var(--ink)}
[data-theme="dark"] input::placeholder{color:#a6b7ac;opacity:1}
[data-theme="dark"] input:disabled{opacity:1;color:var(--muted)}
[data-theme="dark"] .icon-btn{color:var(--ink)}
[data-theme="dark"] .primary-btn{background:#96dcb4;color:#15261c}
[data-theme="dark"] .bottom-nav{background:#1b251ff5}
[data-theme="dark"] dialog,[data-theme="dark"] .modal-head,[data-theme="dark"] .editor-actions{background:var(--card);color:var(--ink)}
[data-theme="dark"] dialog::backdrop{background:#0009}
[data-theme="dark"] .batch-item{background:var(--card)}
[data-theme="dark"] .packing-preview,[data-theme="dark"] .packing-info{background:var(--accent-soft)}
[data-theme="dark"] .status{background:#443722;color:#f1ca84}
[data-theme="dark"] .status.ok{background:var(--accent-soft);color:var(--accent)}
[data-theme="dark"] .form-error{color:#ffb4a9}
[data-theme="dark"] .share-choice{background:#18221c;color:var(--ink)}
[data-theme="dark"] .line-choice{background:#06c755;color:#062d17;border-color:#06c755}
[data-theme="dark"] .transport-results{background:#193426;border-color:#639a79;border-top-color:#96dcb4}
[data-theme="dark"] .results-kicker{background:#96dcb4;color:#15261c}
[data-theme="dark"] .transport-results .section-head h2,[data-theme="dark"] .transport-results .record .big{color:#c3f1d4}
[data-theme="dark"] .transport-results #batchCount{background:#253e2f;color:#c3f1d4;border-color:#639a79}
[data-theme="dark"] .results-description,[data-theme="dark"] .transport-results #batchDate,[data-theme="dark"] .transport-results #newBatchBtn{color:#c0d6c8}
[data-theme="dark"] .transport-results .batch-item{border-color:#526e5b}
[data-theme="dark"] .transport-results .status{background:#2b4535;color:#b8eccb}
[data-theme="dark"] .transport-results .row-actions{border-color:#526459}
[data-theme="dark"] .transport-results #shareBatchBtn{background:#96dcb4;color:#15261c}
[data-theme="dark"] .recalculate-note,[data-theme="dark"] .transport-results .batch-item:has(.recalculate-note) .status{background:#49391e;color:#ffe0a4}

/* Compact history: delivery date is the anchor for each row. */
.bread-logo{width:54px;height:54px;flex-shrink:0;object-fit:contain;background:#fff6e3;border-radius:16px;padding:2px}
#historyList,#recentList{max-width:600px;margin-left:auto;margin-right:auto;gap:7px}
.history-record{display:grid;grid-template-columns:94px minmax(0,1fr);gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);align-items:start}
.history-date{background:var(--accent-soft);color:var(--accent);padding:9px 6px;border-radius:9px;text-align:center;line-height:1.4}
.history-date>span{display:block;font-size:10px;font-weight:700;margin-bottom:3px}
.history-date time{display:flex;flex-direction:column}
.history-date small{font-size:11px}
.history-date strong{font-size:19px;white-space:nowrap}
.history-name{display:flex;align-items:baseline;gap:8px;justify-content:space-between;overflow-wrap:anywhere}
.history-name>strong{font-size:15px}
.history-name>span{font-size:10px;color:var(--muted);flex-shrink:0}
.history-result{font-size:19px;font-weight:800;margin:3px 0;white-space:nowrap;overflow-x:auto}
.history-company{font-size:11px;color:var(--muted);overflow-wrap:anywhere;display:block}
.history-details summary{min-height:32px;font-size:11px;color:var(--accent);padding:7px 0 2px;line-height:1.5}
.history-details p{font-size:12px;color:var(--muted);line-height:1.7;margin:6px 0 2px;overflow-wrap:anywhere}
[data-theme="dark"] .bread-logo{background:#e9d4ac}
@media(max-width:380px){.history-record{grid-template-columns:80px minmax(0,1fr);gap:9px;padding:9px}.history-date strong{font-size:17px}.history-result{font-size:17px}.history-name{flex-wrap:wrap;gap:2px 8px}.brand{gap:8px}.bread-logo{width:48px;height:48px}}

/* Align history rows with the main input cards, retaining compact row height. */
#historyList,#recentList{width:100%;max-width:none;margin-left:0;margin-right:0}
#historyView>.card.compact{margin-bottom:14px}
.brand-home{border:0;background:transparent;color:var(--ink);padding:0;text-align:left;border-radius:12px;min-width:0}
.brand-text{display:block;min-width:0}
.brand-title{display:block;margin:0;font-size:24px;font-weight:700;letter-spacing:.04em}
.brand-tagline{display:block;margin-top:2px;color:var(--muted);font-size:12px}

/* Optional launch scene: stationary center, playful bread, circular reveal. */
html[data-intro="waiting"] .app-shell{visibility:hidden}
html[data-intro] body{overflow:hidden}
.launch-screen{position:fixed;inset:0;z-index:1000;background:var(--bg);color:var(--ink);display:grid;place-items:center;overflow:hidden}
.launch-center{text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:240px}
.launch-bread{width:120px;height:120px;margin:0 auto;transform-origin:50% 95%;animation:bread-hop 1.65s both}
.launch-bread img{display:block;width:120px;height:120px;filter:drop-shadow(0 3px 1px #71432615)}
.launch-shadow{width:76px;height:10px;border-radius:50%;background:#71432626;margin:-1px auto 20px;animation:bread-shadow 1.65s both}
.launch-title{font-size:28px;font-weight:800;letter-spacing:.12em;margin:0 0 6px}
.launch-caption{font-size:13px;color:var(--muted);margin:0}
.launch-skip{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border:1px solid var(--line);background:var(--card);color:var(--accent);border-radius:999px;padding:12px 20px;min-height:46px;white-space:nowrap}
.launch-revealing .launch-center{opacity:0;transition:opacity .12s}
.launch-revealing .launch-skip{opacity:0}
[data-theme="dark"] .launch-shadow{background:#0006}
@keyframes bread-hop{0%{transform:translateY(0) scale(1.06,.94)}17%{transform:translateY(-60px) rotate(-8deg)}31%{transform:translateY(0) scale(1.1,.9)}46%{transform:translateY(-40px) rotate(6deg)}61%{transform:translateY(0) scale(1.07,.93)}74%{transform:translateY(-23px) rotate(-3deg)}87%{transform:translateY(0) scale(1.04,.96)}100%{transform:translateY(0) scale(1)}}
@keyframes bread-shadow{0%,31%,61%,87%,100%{transform:scale(1);opacity:1}17%{transform:scale(.55);opacity:.35}46%{transform:scale(.7);opacity:.5}74%{transform:scale(.85);opacity:.7}}
@media(prefers-reduced-motion:reduce){.launch-bread,.launch-shadow{animation:none}.launch-revealing .launch-center{transition:none}}

/* iOS native date controls must fit the field's content width, including padding. */
#deliveryDate{
  display:block;
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  min-inline-size:0;
  height:52px;
  min-height:52px;
  padding:12px 14px;
  font-size:16px;
  line-height:1.4;
  text-align:left;
}
#deliveryDate::-webkit-date-and-time-value{min-width:0;min-inline-size:0;text-align:left;margin:0}
#deliveryDate::-webkit-datetime-edit{padding:0;min-width:0}