/* Fine Mess Supplier Orders — the design system from tokens.json.
   Touch-first: nothing depends on hover, every target is at least 44px,
   and every input is 16px or more so phones do not zoom on focus. */

/* Fira Sans, self-hosted, split latin/greek so a Greek product list
   does not pull the latin file and vice versa. The greek cuts cover
   modern Greek (U+0370-03FF); polytonic lives in separate greek-ext
   files the app has no use for, so the range stops short of it rather
   than claiming coverage these files do not have. */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/FiraSans-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/FiraSans-400-greek.woff2') format('woff2');unicode-range:U+0370-03FF}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/FiraSans-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/FiraSans-500-greek.woff2') format('woff2');unicode-range:U+0370-03FF}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/FiraSans-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/FiraSans-600-greek.woff2') format('woff2');unicode-range:U+0370-03FF}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/FiraSans-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/FiraSans-700-greek.woff2') format('woff2');unicode-range:U+0370-03FF}

:root{
  --oyster:#e8e3dd; --sunken:#d8d0c6; --white:#fffdfa;
  --charcoal:#232323; --muted:#5c5852;
  --brass:#ad8a53; --brass-dark:#8a6e42; --brass-light:#dac18f;
  --border:#c9bda9; --danger:#8a2b1e; --success:#4f6b3f;
  --r:4px; --r-l:6px;
  --font:'Fira Sans',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--oyster);color:var(--charcoal);font-family:var(--font);
     font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--brass-dark);outline-offset:2px}

/* ── Primitives ─────────────────────────────────────────────────── */

.label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-dark)}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     min-height:44px;padding:0 20px;border-radius:var(--r);border:1px solid transparent;
     font:inherit;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;
     transition:background 120ms cubic-bezier(.4,0,.2,1)}
.btn--primary{min-height:52px;padding:0 28px;background:var(--brass);color:var(--charcoal);font-size:17px}
.btn--primary:active{background:var(--brass-dark)}
.btn--secondary{background:var(--white);color:var(--charcoal);border-color:var(--brass)}
.btn--text{min-height:44px;padding:0 4px;background:none;border:none;color:var(--charcoal);
           font-weight:500;text-decoration:underline;text-underline-offset:3px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}

input[type=text],input[type=tel],input[type=number],select,textarea{
  font:inherit;font-size:16px;color:var(--charcoal);background:var(--white);
  border:1px solid var(--border);border-radius:var(--r);min-height:44px;padding:0 10px;width:100%}
textarea{padding:10px;line-height:1.5;min-height:92px;resize:vertical}
select{padding-right:6px}

/* ── Sign in ────────────────────────────────────────────────────── */

/* The whole screen is sized from the viewport so the pad never needs
   scrolling: the gaps give way first, then the keys, down to a 56px
   key on a short phone — still well over the 44px minimum. */
.pin{min-height:100dvh;height:100dvh;display:flex;align-items:center;justify-content:center;
     padding:clamp(12px,3dvh,32px) 20px}
.pin__inner{width:100%;max-width:360px;max-height:100%;text-align:center;
            display:flex;flex-direction:column;justify-content:center;
            gap:clamp(8px,1.6dvh,18px)}
.pin__logo{width:216px;max-width:60%;height:auto;margin:0 auto;display:block}
.pin__kicker{margin:0;font-size:clamp(17px,2.3dvh,21px);font-weight:600;
             letter-spacing:.06em;text-transform:uppercase;color:var(--brass-dark);
             line-height:1.25}
.pin__title{margin:0;font-size:clamp(19px,2.4dvh,24px);font-weight:600;line-height:1.2}
.pin__dots{display:flex;justify-content:center;gap:16px;margin:0}
.pin__dot{width:18px;height:18px;border-radius:999px;border:1.5px solid var(--brass);
          background:transparent;transition:background 120ms}
.pin__dot[data-on]{background:var(--charcoal);border-color:var(--charcoal)}
.pin--bad .pin__dot[data-on]{background:var(--danger);border-color:var(--danger)}
.pin__help{margin:0;min-height:1.45em;font-size:clamp(13px,1.7dvh,14px);
           line-height:1.45;color:var(--muted)}
.pin--bad .pin__help{color:var(--danger)}
.pin__pad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.4dvh,16px)}
.pin__key{height:clamp(56px,9.4dvh,84px);font-size:clamp(24px,3.6dvh,32px);font-weight:500;color:var(--charcoal);background:var(--white);
          border:1px solid var(--border);border-radius:var(--r-l);cursor:pointer;
          font-family:inherit;display:flex;align-items:center;justify-content:center;
          -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pin__key:active{background:var(--sunken)}
.pin__key--blank{border:none;background:none;cursor:default;pointer-events:none}
.pin__foot{margin:0;font-size:clamp(12px,1.6dvh,13px);line-height:1.5;color:var(--muted)}
.pin__alert{margin:0;padding:14px 16px;border-radius:var(--r);text-align:left;
            font-size:15px;line-height:1.5;background:var(--white);
            border:1px solid var(--danger);border-left-width:3px;color:var(--charcoal)}
.pin__alert--locked{border-color:var(--brass)}
.pin__alert strong{display:block;font-weight:600;margin-bottom:2px}
.pin [disabled]{opacity:.4;pointer-events:none}

/* ── Signed-in chrome ───────────────────────────────────────────── */

.top{display:flex;align-items:center;gap:0;min-height:60px;padding:6px 0;
     background:var(--white);border-bottom:1px solid var(--brass-light);
     position:sticky;top:0;z-index:20}
.top__logo{height:20px;width:auto;display:block}
.top__logo--mark{display:none;height:26px}
.top__brand{width:252px;flex:none;display:flex;align-items:center;padding-left:16px}
.top__kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
             color:var(--brass-dark);white-space:nowrap;margin-left:24px}
.top__spacer{flex:1}
.top__who{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;white-space:nowrap}
.top__actions{display:flex;align-items:center;gap:8px;padding-right:16px}
.top__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
          min-width:44px;min-height:44px;padding:0 14px;background:var(--white);
          border:1px solid var(--border);border-radius:var(--r);color:var(--charcoal);
          font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none}
.top__btn:active{background:var(--sunken)}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}

/* The two panels scroll on their own: a 114-row product list must not
   carry the supplier list up out of reach, and picking another supplier
   should not mean scrolling back to the top first. Phones keep the
   ordinary page scroll — there is no side panel there. */
.shell{display:flex;align-items:stretch}
@media (min-width:900px){
  .shell{height:calc(100dvh - 60px);overflow:hidden}
  .side{overflow-y:auto;overscroll-behavior:contain}
  .main{overflow-y:auto;overscroll-behavior:contain}
}

/* Supplier list, tablet landscape and desktop */
.side{width:252px;flex:none;background:var(--white);
      border-right:1px solid var(--brass-light);padding:16px 0}
.side__search{padding:0 12px 12px}
.side__list{list-style:none;margin:0;padding:0}
.side__link{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;
            color:var(--charcoal);text-decoration:none;font-size:15px}
.side__link[aria-current=page]{background:var(--oyster);font-weight:600;
            box-shadow:inset 3px 0 0 var(--brass)}
.side__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side__tag{font-size:12px;color:var(--muted);white-space:nowrap}
.side__tag--bad{color:var(--danger);font-weight:600}

.main{flex:1;min-width:0;padding:24px;max-width:1200px}
.head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.head__name{margin:0;font-size:26px;font-weight:600;line-height:1.2}
.head__to{font-size:13px;color:var(--muted)}
.tabs{display:flex;gap:24px;margin:16px 0 20px;border-bottom:1px solid var(--brass-light)}
.tab{display:inline-flex;align-items:center;height:48px;padding:0 2px;color:var(--muted);
     text-decoration:none;font-size:15px;font-weight:500;border-bottom:2px solid transparent;
     margin-bottom:-1px}
.tab[aria-current=page]{color:var(--charcoal);font-weight:600;border-bottom-color:var(--brass)}

.card{background:var(--white);border:1px solid var(--brass-light);border-radius:var(--r)}

/* Autosave line */
.status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
        padding:10px 16px;font-size:14px;color:var(--muted);
        border-bottom:1px solid var(--brass-light)}
.status__save{display:inline-flex;align-items:center;gap:6px}
.status__save[data-state=saved]{color:var(--success)}
.status__save[data-state=saving]{color:var(--muted)}
.status__save[data-state=offline]{color:var(--danger)}
.status__spacer{flex:1}

/* ── The order table ────────────────────────────────────────────── */

.rows{width:100%;border-collapse:collapse}
.rows th{background:var(--sunken);text-align:left;font-size:12px;font-weight:600;
         letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal);
         padding:10px 12px;white-space:nowrap}
.rows th.num,.rows td.num{text-align:right}
.rows td{padding:6px 12px;border-bottom:1px solid var(--brass-light);vertical-align:middle}
.rows tr:last-child td{border-bottom:none}
.rows__cat td{background:var(--oyster);font-size:12px;font-weight:600;letter-spacing:.12em;
              text-transform:uppercase;color:var(--brass-dark);padding:10px 12px}
.cell-num{max-width:96px;text-align:right}
.cell-desc{min-width:220px;height:44px;min-height:44px;padding:10px;resize:none;
           overflow:hidden;line-height:22px}
.cell-unit{max-width:116px}
/* A filled order amount is the thing the manager scans for */
.amount[data-filled]{border-color:var(--brass);font-weight:600}
.rowdel{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
        background:none;border:none;border-radius:var(--r);color:var(--muted);cursor:pointer}
.rowdel:active{background:var(--sunken)}
.addrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
        margin:8px;background:none;border:none;color:var(--charcoal);font:inherit;
        font-size:15px;font-weight:500;cursor:pointer}

.notes{padding:16px;border-top:1px solid var(--brass-light)}
.notes__label{display:block;margin-bottom:8px;font-size:15px;font-weight:600}
.notes__hint{font-weight:400;color:var(--muted)}
.notes__phone{display:none}

/* Sticky footer with the count and the primary action */
.foot{position:sticky;bottom:0;z-index:10;display:flex;align-items:center;gap:16px;
      flex-wrap:wrap;margin-top:20px;padding:12px 16px;background:var(--white);
      border:1px solid var(--brass-light);border-radius:var(--r)}
.foot__count{flex:1;min-width:200px;font-size:14px;color:var(--muted)}

.alert{display:flex;gap:12px;padding:14px 16px;margin-bottom:16px;background:var(--white);
       border:1px solid var(--danger);border-left-width:3px;border-radius:var(--r);font-size:15px}
.alert--quiet{border-color:var(--brass)}
.alert__body{flex:1}
.alert strong{display:block;font-weight:600;margin-bottom:2px}

.empty{padding:48px 24px;text-align:center}
.empty h2{margin:0 0 8px;font-size:20px;font-weight:600}
.empty p{margin:0 auto 20px;max-width:46ch;color:var(--muted)}

/* ── Phone and tablet portrait ──────────────────────────────────── */
/* Measured off the Order-Phone and Supplier-Picker artboards: card per
   product, the three number fields in equal columns under the name, and
   the supplier chosen from a sheet because there is no room for a list. */

.picker{display:none}

@media (max-width:899px){
  .side{display:none}
  .main{padding:16px}
  .top{padding:6px 12px;gap:10px}
  .top__kicker,.top__logo--wide,.top__label{display:none}
  .top__brand{width:auto;padding-left:0}
  .top__logo--mark{display:block}
  .top__btn{padding:0;width:44px}
  .top__who{font-size:15px;font-weight:500;min-width:0;overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap}
  /* The name sits next to the mark on the left, actions to the right. */
  .top__spacer{order:2}
  .top__who{order:1}
  .top__actions{order:3}

  .head{display:none}            /* the selector names the supplier instead */

  .picker{display:block;margin-bottom:16px}
  .picker__label{display:block;margin-bottom:8px;font-size:12px;font-weight:600;
                 letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .picker__btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;
               padding:0 14px;background:var(--white);border:1px solid var(--border);
               border-radius:var(--r);font:inherit;font-size:17px;font-weight:500;
               color:var(--charcoal);text-align:left;cursor:pointer}
  .picker__btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .picker__chev{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}

  .tabs{gap:0;margin:0 0 16px}
  .tab{flex:1;justify-content:center;font-size:16px}

  .card{background:none;border:none;border-radius:0}
  .status{display:grid;grid-template-columns:1fr auto;align-items:start;gap:2px 12px;
          padding:0 0 12px;border-bottom:none;font-size:13px}
  .status__save{grid-column:1}
  .status .muted{grid-column:1}
  .status__spacer{display:none}
  .status #clear{grid-column:2;grid-row:1 / span 2;align-self:center;min-height:44px}

  /* One card per product. */
  .rows,.rows tbody{display:block;width:100%}
  .rows thead{display:none}
  .rows tr{display:grid;gap:8px 8px;align-items:end;
           grid-template-columns:1fr 1fr 1fr;
           grid-template-areas:"code code del" "desc desc del" "inv amt unit";
           padding:12px 12px 14px 14px;margin-bottom:12px;background:var(--white);
           border:1px solid var(--brass-light);border-radius:var(--r)}
  .rows td{display:flex;flex-direction:column;gap:4px;padding:0;border:none}
  .rows td::before{content:attr(data-label);font-size:11px;font-weight:600;
                   letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .rows td.cell-code{grid-area:code}
  .rows td.cell-code::before,.rows td.cell-descwrap::before{content:none}
  .rows td.cell-descwrap{grid-area:desc}
  .rows td.cell-invwrap{grid-area:inv}
  .rows td.cell-amtwrap{grid-area:amt}
  .rows td.cell-unitwrap{grid-area:unit}
  .rows td.cell-del{grid-area:del;align-items:flex-end;justify-content:flex-start}
  .rows td.cell-del::before{content:none}

  /* The product name reads as the card's title but stays editable. */
  .rows .cell-desc{border:none;background:none;padding:0;min-height:0;height:auto;
                   font-size:17px;font-weight:600;line-height:22px;color:var(--charcoal);
                   overflow:hidden;resize:none}
  .rows .cell-code input{border:none;background:none;padding:0;min-height:0;
                         font-size:13px;color:var(--muted)}
  .rows input.cell-num,.rows select.cell-unit{max-width:none;width:100%;height:48px;font-size:17px}
  .rows input.cell-num{text-align:right}
  .rows tr.rows__cat{display:block;padding:4px 0 8px;margin:0;background:none;
                     border:none;border-radius:0}
  .rows tr.rows__cat td{display:block;padding:0;background:none;font-size:12px;
                        font-weight:600;letter-spacing:.12em;text-transform:uppercase;
                        color:var(--brass-dark)}
  .rows__cat td::before{content:none}

  .addrow{display:flex;justify-content:center;width:100%;margin:0 0 16px;min-height:48px;
          background:var(--white);border:1px solid var(--border);border-radius:var(--r)}

  .notes{padding:0;border-top:none;margin-bottom:8px}
  .notes__desk{display:none}
  .notes__phone{display:block;margin-top:6px;font-size:13px}

  .foot{flex-direction:column;align-items:stretch;gap:8px;background:var(--oyster);
        border:none;border-top:1px solid var(--brass-light);border-radius:0;
        padding:10px 16px calc(10px + env(safe-area-inset-bottom));
        margin:4px -16px 0}
  .foot__count{min-width:0;text-align:center;font-size:13px}
  .btn--primary{width:100%}
}

/* ── The supplier sheet ─────────────────────────────────────────── */

.sheet{position:fixed;inset:0;z-index:50;display:none}
.sheet[open]{display:block}
.sheet__scrim{position:absolute;inset:0;background:rgba(35,35,35,.45)}
.sheet__panel{position:absolute;left:0;right:0;top:0;max-height:88dvh;display:flex;
              flex-direction:column;background:var(--white);
              box-shadow:0 8px 32px rgba(35,35,35,.16)}
.sheet__head{display:flex;align-items:center;gap:12px;padding:14px 16px 10px}
.sheet__title{flex:1;margin:0;font-size:17px;font-weight:600}
.sheet__close{display:inline-flex;align-items:center;justify-content:center;
              width:44px;height:44px;margin-right:-10px;background:none;border:none;
              color:var(--charcoal);cursor:pointer}
.sheet__search{padding:0 16px 10px}
.sheet__list{flex:1;overflow-y:auto;list-style:none;margin:0;padding:0 0 8px;
             overscroll-behavior:contain}
.sheet__link{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px;
             color:var(--charcoal);text-decoration:none;font-size:16px;
             border-bottom:1px solid var(--brass-light)}
.sheet__link[aria-current=page]{background:var(--oyster);font-weight:600}
.sheet__tick{width:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;opacity:0}
.sheet__link[aria-current=page] .sheet__tick{opacity:1}
.sheet__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Dialogs ────────────────────────────────────────────────────── */

.dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
        width:min(440px,calc(100vw - 32px));padding:24px;background:var(--white);
        border-radius:var(--r-l);box-shadow:0 8px 32px rgba(35,35,35,.16)}
.dialog__title{margin:0 0 10px;font-size:19px;font-weight:600;line-height:1.3}
.dialog__body{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--muted)}
.dialog__actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.btn--danger{background:var(--danger);color:var(--white);border-color:var(--danger)}
@media (max-width:480px){
  .dialog__actions{flex-direction:column-reverse}
  .dialog__actions .btn{width:100%}
}

/* A field another manager has just changed, held for a few seconds. */
.justchanged{background:var(--brass-light)!important;
             transition:background 400ms cubic-bezier(.4,0,.2,1)}
.whochanged{display:block;margin-top:4px;font-size:11px;line-height:1.35;color:var(--brass-dark)}
.alsoediting{display:flex;gap:10px;padding:10px 14px;margin-bottom:12px;font-size:14px;
             background:var(--white);border:1px solid var(--brass);border-left-width:3px;
             border-radius:var(--r)}

/* ── Review and send ────────────────────────────────────────────── */

.backlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-bottom:4px;
          color:var(--charcoal);text-decoration:none;font-size:15px;font-weight:500}
.backlink .icon{width:16px;height:16px}
.review__grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);
              gap:28px;align-items:start}
.review__h1{margin:0 0 2px;font-size:26px;font-weight:600;line-height:1.2}
.review__sub{margin:0 0 18px;font-size:19px;color:var(--muted)}
.review__card{padding:0}
.review__to{padding:16px 18px;border-bottom:1px solid var(--brass-light)}
.review__to .label{display:block;margin-bottom:8px}
.review__addr{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:15px;
              word-break:break-all}
.review__addr .icon{width:16px;height:16px;flex:none;color:var(--brass-dark)}
.review__addr--none{color:var(--danger)}
.review__rows{margin:0;padding:14px 18px}
.review__rows > div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;
                    padding:5px 0;font-size:15px}
.review__rows dt{color:var(--muted)}
.review__rows dd{margin:0}
.review__details{border-top:1px solid var(--brass-light)}
.review__details summary{display:flex;align-items:center;min-height:48px;padding:0 18px;
                         font-size:15px;font-weight:500;cursor:pointer}
.review__detailbody{padding:0 18px 16px}
.review__detailbody .label{display:block;margin:10px 0 4px}
.review__detailbody p{margin:0;font-size:14px;line-height:1.55}
.review__bodytext{white-space:pre-line;color:var(--muted)}
.review__sig{margin-top:10px;font-size:13px}
.review__actions{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.review__send,.review__dl{width:100%}
.review__note{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.review__preview{display:flex;flex-direction:column;gap:10px}
.review__preview .label{color:var(--muted)}
.review__pdf{width:100%;height:min(76dvh,900px);border:1px solid var(--border);
             border-radius:var(--r);background:var(--sunken)}
.review__pdf--empty{display:flex;align-items:center;justify-content:center;height:280px;padding:24px;
                    text-align:center}
.review__result{display:flex;flex-direction:column;gap:12px}
.review__result h2{margin:0;font-size:19px;font-weight:600}
.review__result p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.review__result ul{margin:0;padding-left:18px;font-size:15px;color:var(--charcoal)}
.review__ok{border-left:3px solid var(--success)}
.review__bad{border-left:3px solid var(--danger)}
.review__result.card{padding:18px}
.btn--charcoal{background:var(--charcoal);color:var(--oyster);border-color:var(--charcoal)}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;
      border-right-color:transparent;border-radius:999px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Order history ──────────────────────────────────────────────── */

.filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.filter__label{color:var(--muted)}
.filter input[type=date]{width:auto;min-width:150px}
.filter__count{font-size:14px;color:var(--muted)}
.history th{white-space:nowrap}
.history td{font-size:15px}
.history__time{color:var(--muted)}
.history__pdf{white-space:nowrap;text-align:right}
.btn__link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;
           color:var(--charcoal);text-decoration:none;font-size:14px;font-weight:500}
.btn__link .icon{width:16px;height:16px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--sunken);
      font-size:12px;font-weight:600;letter-spacing:.04em}
.pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;
       border-top:1px solid var(--brass-light);font-size:14px;color:var(--muted)}
.pager__links{margin-left:auto;display:flex;gap:8px}
.pager__phone{display:none}

@media (max-width:899px){
  .review__grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .review__preview{order:-1}
  .review__pdf{height:52dvh}
  .pager__desk{display:none}
  .pager__phone{display:inline}
  .history td::before{color:var(--muted)}
  .history__pdf{text-align:left}
  .filter input[type=date]{flex:1}
}


/* ── Editing the order's product list ───────────────────────────── */
/* Removing a product and adding one are kept behind a toggle: the daily
   job is typing amounts, and a bin next to every row invites accidents.
   Both only ever change this order — the master list is untouched. */
.cell-del,.rows__add{display:none}
.rows--edit .cell-del{display:table-cell}
.rows--edit .rows__add{display:table-row}
.rows__add td{padding:4px 8px;border-bottom:1px solid var(--brass-light);background:var(--white)}
.addrow--cat{margin:0;min-height:44px;font-size:14px;color:var(--brass-dark)}
.editnote{margin:0;padding:11px 16px;background:var(--white);
          border-bottom:1px solid var(--danger);border-left:3px solid var(--danger);
          font-size:14px;font-weight:600;color:var(--danger)}
#editmaster[aria-pressed=true]{font-weight:600;color:var(--brass-dark)}

/* The action bar sits on the bottom edge of the viewport, not above it. */
.main{padding-bottom:0}
.foot{position:sticky;bottom:0;margin:20px -24px 0;border-radius:0;border-left:none;
      border-right:none;border-bottom:none;
      padding:12px 24px calc(12px + env(safe-area-inset-bottom))}

@media (max-width:899px){
  .rows--edit .cell-del{display:flex}
  .rows--edit .rows__add{display:block}
  .rows__add td{display:block;padding:0;border:none;background:none}
  .addrow--cat{width:100%;margin-bottom:12px;background:var(--white);
               border:1px dashed var(--border);border-radius:var(--r)}
  .foot{margin:16px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
}

/* ── Full inventory ─────────────────────────────────────────────── */
.full__meta{margin:0 0 6px;font-size:15px}
.full__note{margin:0 0 16px;max-width:70ch;font-size:14px}
.full td{font-size:15px}
.full--off td{color:var(--muted)}
.full--off .icon{display:none}
.full .icon{width:16px;height:16px;color:var(--success)}
.full + .notes{padding:16px;border-top:1px solid var(--brass-light)}
.full + .notes p{margin:6px 0 0;font-size:15px;white-space:pre-line}

/* Room below the record so the last line is not against the viewport. */
.full__end{height:48px}