@font-face{font-family:Comfortaa;src:url("./comfortaa.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("./nunito-sans.woff2") format("woff2");font-weight:400 800;font-display:swap}
:root{font-family:"Nunito Sans",system-ui,sans-serif;color:#183844;background:#eff6f8;line-height:1.45;--green:#276a7c;--line:#cfdee4}*{box-sizing:border-box}body{margin:0}header{background:#184a59;color:#fff}.shell{max-width:900px;margin:auto;padding:16px}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:24px}.eyebrow{font-size:.72rem;letter-spacing:.12em;font-weight:800}.brand{display:block;width:clamp(130px,32vw,190px);height:auto;margin-bottom:12px}h1,h2,p{margin:0}h1,h2{font-family:Comfortaa,"Nunito Sans",system-ui,sans-serif}h1{font-size:clamp(1.65rem,6vw,2.5rem)}.badge{background:#215c6d;border:1px solid #6795a3;border-radius:24px;padding:6px 10px;font-size:.75rem;text-align:center}.panel{background:white;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}.setup,.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.setup p,.controls p{grid-column:1/-1;font-size:.88rem;color:#3e5964;overflow-wrap:anywhere}.setup>div{min-width:0}label{display:block;font-weight:700;font-size:.86rem}input,select,button,.button{font:inherit;color:inherit;border:1px solid #a1b8c2;border-radius:8px;background:white;min-height:44px;padding:8px 10px}input,select{width:100%;margin-top:4px;font-size:16px}button,.button{cursor:pointer;font-size:.88rem;font-weight:750;display:inline-flex;align-items:center;justify-content:center}button:disabled{opacity:.45;cursor:default}.actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.primary{background:var(--green);border-color:var(--green);color:white}#import{position:absolute;width:1px;height:1px;min-height:0;opacity:0;padding:0}.primary:has(+input:focus-visible){outline:3px solid #00b4d9;outline-offset:2px}.controls label:first-child{grid-column:1/-1}.check{grid-column:1/-1;display:flex;gap:8px;align-items:center}.check input{width:19px;min-height:19px;margin:0;accent-color:var(--green)}.intro{padding:28px}.intro p{margin-top:12px;max-width:55ch}.eyebrow{color:var(--green);margin-bottom:8px}.group{font-size:.95rem;padding:8px 12px;margin:14px 0 0;background:#dcecf1;border-radius:8px 8px 0 0}.product{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;background:white;border-bottom:1px solid var(--line);min-height:66px}.product span{display:block;font-size:.78rem;color:#45606b}.product input{width:95px;flex:none;text-align:right;margin:0}.product input[aria-invalid=true]{border:2px solid #a52b27}.remove{margin-top:18px;color:#8c312c}.empty{padding:16px;background:white;border-radius:8px}.error{color:#a52b27!important}@media(max-width:540px){.setup{grid-template-columns:1fr}}

/* Keep the counting controls within thumb reach on a phone. */
[hidden]{display:none!important}
main.shell{max-width:580px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.top{max-width:580px;padding-block:12px}
.brand{width:clamp(105px,29vw,150px);margin-bottom:5px}
h1{font-size:1.3rem}
h2{font-size:1.35rem;overflow-wrap:anywhere;margin:10px 0}
h2:focus{outline:none}
.setup{display:block}
.setup .actions{margin-top:12px}
.actions>*{flex:1}
.actions button{min-width:0}
button,input,select{touch-action:manipulation}
#notice{padding:9px 12px;margin-bottom:10px;background:#e1eef2;border-radius:8px;font-size:.9rem}
.list{display:grid;gap:7px;margin-top:12px}
.list button{justify-content:space-between;text-align:left;width:100%;min-height:52px;padding:9px 13px;gap:8px;font-size:1rem}
.list button small{display:block;font-weight:600;color:#45606b}
.list button .arrow{flex:none;color:#276a7c;font-size:1.25rem}
.list button .row-text{overflow-wrap:anywhere}
.back{color:#276a7c}
.muted,#intro{color:#3e5964}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}
.stats div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0}
.stats span{display:block;font-size:.82rem;color:#3e5964}
.stats strong{display:block;font-size:1.26rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.full{width:100%}
.entry-pad{margin:12px 0 0;padding:11px}
.entry-label{font-size:.85rem;font-weight:750}
.entry-value{font-size:1.55rem;text-align:right;font-variant-numeric:tabular-nums;font-weight:750;margin:4px 0 8px;padding:4px 10px}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.keys button{min-height:46px;font-size:1.25rem;padding:3px;background:#f3f8fa}
.keys button:active,.list button:active{background:#dcecf1}
.pad-actions{margin-top:8px}
#new-product,.product-form{margin-top:14px}
.product-form{display:grid;gap:12px}
#product-search{margin-bottom:14px}
#search-results{max-height:min(45vh,360px);overflow-y:auto;overscroll-behavior:contain;margin-top:4px;padding:4px;border:1px solid var(--line);border-radius:9px;background:#fff}
#search-status{color:#3e5964;font-size:.85rem;margin-top:4px}
#search-status:empty{margin:0}
.category-tools{align-items:end;margin:8px 0}
.category-tools label{flex:2}
.count-column-label{margin-top:10px}
.matrix-scroll{overflow:auto;max-height:65vh;margin-top:12px;border:1px solid var(--line);border-radius:9px;background:white}
#count-matrix{border-spacing:0;font-variant-numeric:tabular-nums;text-align:center;font-size:.9rem}
#count-matrix td,#count-matrix th{padding:6px 9px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
#count-matrix td{min-width:47px}
#count-matrix thead th{position:sticky;top:0;background:#dcecf1;z-index:1}
#count-matrix th:first-child{position:sticky;left:0;text-align:left;min-width:145px;max-width:42vw;background:#eff6f8}
#count-matrix thead th:first-child{z-index:2}
#count-matrix th button{width:100%;border:0;background:transparent;text-align:left;justify-content:space-between;gap:5px;padding:2px}
#count-matrix th small{display:block;font-weight:600}
#count-matrix .uncounted{color:#637d88}

.stats .stock-unit{font-size:.8em;font-weight:650}

.search-field{position:relative}
#search-products{padding-right:50px}
#search-products::-webkit-search-cancel-button{display:none}
#clear-search{position:absolute;right:1px;bottom:1px;min-width:44px;min-height:42px;border:0;background:transparent;font-size:1.35rem;color:#276a7c}

/* Extend the header behind the iPhone status area. */
@media (display-mode:standalone){
  html{background:#184a59}
  body{background:#eff6f8;min-height:100vh}
  header{padding-top:env(safe-area-inset-top)}
}

/* Larger counting targets on iPad, including desktop browser mode. */
.ipad .keys button{min-height:66px;font-size:1.45rem}
.ipad .pad-actions button{min-height:56px}
@media (orientation:landscape) and (max-height:700px){
  .ipad .keys button{min-height:56px}
}

#enter-count{min-height:64px;font-size:1.1rem;margin:14px 0 0}
#sheet-maintenance{margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
#clear-counts{color:#8c312c;font-size:.85rem}
#sheet-maintenance .remove{font-size:.85rem;margin-top:14px}
.estimate-note{font-size:.8rem}

#clear-product-counts{align-self:center;color:#8c312c;font-size:.85rem;min-height:52px;padding:10px}

#count-matrix .product-total{font-weight:800;background:#e5f0f4}

.missing-price-actions{margin-top:12px;align-items:stretch}
.missing-price-actions button{font-size:.85rem}
.price-table-scroll{overflow-x:auto;margin:14px 0}
.price-table{width:100%;border-collapse:collapse;background:#fff;font-size:.85rem;text-align:left}
.price-table th,.price-table td{padding:8px;border:1px solid var(--line);vertical-align:middle}
.price-table thead{background:#dcecf1}
.price-table small{display:block;font-weight:500;color:#45606b}
.price-table input{width:100px;margin:0;text-align:right}