/* ===========================================================================
   Saved Dimensions (dm-*) — Family A.
   Every token below is copied from public/css/evriClaimGen.css and
   public/css/messageTemplates.css, which declare identical values. Nothing here
   is invented.

   SCOPED TO .dm-wrap AND THE dm- PREFIX. This file adds rules; it changes none.
   No existing selector's declarations are touched, so every other screen in the
   app renders byte-for-byte as it did before.

   THE TWO TRAPS THIS FILE HAS TO DEFEND AGAINST — both live in
   public/css/style.css line 1, unscoped, and both bite only on desktop:
     1. input,select,textarea{ … min-width:170px }. min-width BEATS width, so a
        narrow control refuses to shrink. It self-corrects below 1180px because
        public/css/responsive.css line 2228 releases the rule globally — which is
        exactly why it reads as a desktop-only mystery. Every field here carries
        min-width:0.
     2. every button is styled as a large blue pill. A new button family inherits
        that unless it resets background, colour, padding AND margin — .dm-btn,
        .dm-chip, .dm-qty button and .dm-more all reset all four.

   RMS NEVER FOLLOWS THE OPERATING SYSTEM THEME. It goes dark only when the app
   sets html[data-theme="dark"]. There is deliberately NO prefers-color-scheme
   rule anywhere in this file — one would produce a theme the real app cannot
   make, on a machine whose OS is dark.
   =========================================================================== */

.dm-wrap{
  --primary:#0588b6;
  --primary-d:#03658e;
  --grad:linear-gradient(135deg,#03658e,#0588b6);
  --ink:#0f2740;
  --sub:#5b7183;
  --line:#e6edf5;
  --line-s:#cfdcea;
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --card:#fff;
  --field:#fbfdff;
  --soft:#f6f9fc;
  --ok:#0f7b52;   --ok-bg:#eefaf1;   --ok-line:#d8f0df;
  --warn:#9a6700; --warn-bg:#fdf6e7; --warn-line:#f0dcb0;
  --bad:#b42318;  --bad-bg:#fdeceb;  --bad-line:#f6d4d1;
  --info:#2d6b8f; --info-bg:#eef5fb; --info-line:#dcecf6;
  --violet:#6b52a6; --violet-bg:#f3f0fb; --violet-line:#e6dff6;
  max-width:1180px;margin:0 auto;padding:0 0 44px;color:var(--ink);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}
.dm-wrap *{box-sizing:border-box}
.dm-wrap code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}

@keyframes dm-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---- header ---- */
.dm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:4px 0 18px}
.dm-eyebrow{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--primary)}
.dm-title{font-size:25px;font-weight:800;color:var(--ink);margin:4px 0;line-height:1.15}
.dm-sub{font-size:13.5px;color:var(--sub);margin:0;max-width:620px;line-height:1.5}
.dm-count{flex:none;font-size:12.5px;font-weight:700;color:var(--info);background:var(--info-bg);
  border:1px solid var(--info-line);border-radius:999px;padding:7px 14px;white-space:nowrap}
.dm-count.unknown{color:var(--sub);background:var(--soft);border-color:var(--line-s)}

/* ---- notes ----
   Ported from the prototype, with ONE deliberate change. The prototype hardcodes the body
   colour of these notes (#1c4f6e plain, #7a5200 warn) and its dark block never overrides
   them — so in dark mode the warn note is #7a5200 text on a #241c08 background, which is
   very nearly invisible. Every other rule in this file drives colour from a token, so these
   two do too. Cost in light mode: #9a6700 instead of #7a5200, a shade lighter. */
.dm-note{display:flex;align-items:flex-start;gap:10px;background:var(--info-bg);border:1.5px solid var(--info-line);
  color:var(--info);border-radius:14px;padding:12px 15px;font-size:12.5px;line-height:1.55;margin-bottom:14px}
.dm-note b{font-weight:800;color:var(--info)}
.dm-note .i{flex:none;font-size:14px;line-height:1.3;opacity:.75}
.dm-note.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.dm-note.warn b{color:var(--warn)}

/* ---- chips: screen tabs, and the Single/Combinations toggle ---- */
.dm-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dm-wrap .dm-chip{border:1.5px solid var(--line-s);background:#fff;color:#3f5f79;font-size:12.5px;font-weight:700;
  padding:7px 15px;margin:0;border-radius:999px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;
  gap:7px;font-family:inherit;line-height:1.3;min-width:0}
.dm-wrap .dm-chip:hover{border-color:var(--primary);color:var(--primary)}
.dm-wrap .dm-chip.active{background:var(--grad);border-color:transparent;color:#fff}
.dm-wrap .dm-chip.active:hover{color:#fff;filter:brightness(1.05)}

/* ---- toolbar: a card, not loose controls ---- */
.dm-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);
  border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);margin-bottom:14px}
.dm-wrap .dm-select{height:40px;min-width:0;border:1.5px solid var(--line-s);border-radius:10px;padding:0 12px;
  font-size:13px;font-weight:600;color:#33506a;background:#fff;cursor:pointer;font-family:inherit;flex:0 0 220px}
.dm-wrap .dm-select:focus{outline:none;border-color:var(--primary)}
.dm-search{position:relative;flex:1 1 220px;min-width:180px}
.dm-wrap .dm-search input{width:100%;min-width:0;height:40px;border:1.5px solid var(--line-s);border-radius:10px;
  padding:0 12px 0 36px;font-size:13.5px;color:var(--ink);background:var(--field);font-family:inherit}
.dm-wrap .dm-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(5,136,182,.14)}
.dm-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.45;font-size:14px;pointer-events:none}
.dm-tbar-sep{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.dm-unit{font-size:11.5px;font-weight:700;color:var(--sub);background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;white-space:nowrap}
.dm-wrap .dm-date{height:40px;min-width:0;border:1.5px solid var(--line-s);border-radius:10px;padding:0 10px;
  font-size:12.5px;color:#33506a;background:#fff;font-family:inherit}

/* ---- buttons ---- */
.dm-wrap .dm-btn{appearance:none;border:1.5px solid var(--line-s);background:#fff;color:#21506f;font-size:13px;
  font-weight:700;padding:9px 15px;margin:0;border-radius:11px;cursor:pointer;display:inline-flex;align-items:center;
  gap:7px;transition:.15s;font-family:inherit;line-height:1.2;min-width:0}
.dm-wrap .dm-btn:hover{border-color:var(--primary);color:var(--primary)}
.dm-wrap .dm-btn.primary{border-color:transparent;color:#fff;background:var(--grad);box-shadow:0 8px 18px rgba(5,136,182,.28)}
.dm-wrap .dm-btn.primary:hover{filter:brightness(1.05);color:#fff}
.dm-wrap .dm-btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px}

/* DELETE — the only destructive control in this module, and styled to read that way without
   shouting. Quiet until the question is asked: an outline button in the danger colour, pushed to
   the far left of the footer by .dm-foot-gap so it is nowhere near Save. Every property that the
   global `button{color:white}` rule would otherwise win is reset here — background, colour,
   padding and margin — which is the trap documented at the top of this file. */
.dm-wrap .dm-btn.danger-quiet{background:#fff;color:#b42318;border-color:#f0c2bd;margin:0}
.dm-wrap .dm-btn.danger-quiet:hover{background:#fef3f2;color:#912018;border-color:#e0a49d}
.dm-wrap .dm-btn.danger{background:#b42318;color:#fff;border-color:transparent;margin:0}
.dm-wrap .dm-btn.danger:hover{background:#912018;color:#fff}
.dm-wrap .dm-foot-gap{flex:1 1 auto}
/* The confirmation REPLACES the footer rather than floating over it — the shared confirm dialog
   renders underneath this module's modals, so an overlay here would be invisible. */
.dm-wrap .dm-del-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;
  background:#fef3f2;border:1px solid #f0c2bd;border-radius:10px;padding:11px 13px;
  color:#7a271a;font-size:12.5px;line-height:1.45}
.dm-wrap .dm-del-confirm b{color:#912018}
.dm-wrap .dm-del-actions{display:flex;gap:8px;margin-left:auto}
.dm-wrap .dm-btn:disabled{opacity:.55;cursor:default}
.dm-wrap .dm-btn:disabled:hover{border-color:var(--line-s);color:#21506f}

/* ---- panel ---- */
.dm-panel{background:var(--card);border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  overflow:hidden;margin-bottom:14px}
.dm-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 17px;border-bottom:1px solid var(--line);background:var(--soft)}
.dm-panel-t{font-size:14px;font-weight:800;color:var(--ink);line-height:1.3}
.dm-panel-t code{font-weight:600;color:var(--sub);font-size:11.5px}
.dm-panel-n{flex:none;font-size:11.5px;font-weight:800;color:var(--info);background:#fff;
  border:1px solid var(--info-line);border-radius:999px;padding:4px 11px;white-space:nowrap}
.dm-panel-n.unknown{color:var(--sub);border-color:var(--line-s)}

/* ---- table ---- */
.dm-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dm-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.dm-table th{text-align:left;padding:10px 14px;background:var(--soft);color:var(--ink);font-weight:800;
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;border-bottom:1.5px solid var(--line);white-space:nowrap}
.dm-panel-head+.dm-tablewrap .dm-table th{background:#fff}
.dm-table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.dm-table tbody tr:last-child td{border-bottom:0}
.dm-table tbody tr:hover td{background:#f3f9fc}
.dm-table th:nth-child(1),.dm-table td:nth-child(1){width:34%}
.dm-table th:nth-child(2),.dm-table td:nth-child(2){width:22%}
.dm-table th:nth-child(3),.dm-table td:nth-child(3){width:14%}
.dm-table th:nth-child(4),.dm-table td:nth-child(4){width:20%}
.dm-table th:nth-child(5),.dm-table td:nth-child(5){width:10%}
/* Four-column variant (the lookup screen). The widths above are nth-child rules,
   so they have to be overridden explicitly rather than simply left out. */
.dm-t4 th:nth-child(1),.dm-t4 td:nth-child(1){width:30%}
.dm-t4 th:nth-child(2),.dm-t4 td:nth-child(2){width:24%}
.dm-t4 th:nth-child(3),.dm-t4 td:nth-child(3){width:18%}
.dm-t4 th:nth-child(4),.dm-t4 td:nth-child(4){width:28%}
/* The lookup table gained an Edit column in DW4, so it is five wide now, not four. */
.dm-t5 th:nth-child(1),.dm-t5 td:nth-child(1){width:28%}
.dm-t5 th:nth-child(2),.dm-t5 td:nth-child(2){width:22%}
.dm-t5 th:nth-child(3),.dm-t5 td:nth-child(3){width:16%}
.dm-t5 th:nth-child(4),.dm-t5 td:nth-child(4){width:24%}
.dm-t5 th:nth-child(5),.dm-t5 td:nth-child(5){width:10%}
.dm-num{font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.dm-miss{color:#9db0c2}
.dm-meta{font-size:11.5px;color:#90a3b6;margin-top:3px;line-height:1.45}
/* A SKU is a code — wrapping it makes it unreadable. Truncate, full value on hover. */
.dm-sku{font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
/* On the LOOKUP screen the unit lives in the cell, not the column header — every row
   there is a different source and they do not share a unit. */
.dm-u{font-size:11px;font-weight:700;color:#90a3b6;margin-left:2px}
/* The same weight in the other unit. Deliberately quiet and prefixed "=" — it is a
   reading aid, not a second saved value. The big figure is always the one on disk. */
.dm-alt{font-size:11.5px;color:#90a3b6;margin-top:3px;font-variant-numeric:tabular-nums}
.dm-none td{background:#fcfdfe}
.dm-none .dm-srcname{color:#8ba0b4}
.dm-srcname{font-weight:800;color:var(--ink);font-size:13.5px}

/* ---- badges ---- */
.dm-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--info-bg);color:var(--info);border:1px solid var(--info-line)}
.dm-acct{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--violet-bg);color:var(--violet);border:1px solid var(--violet-line)}
.dm-shared{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:700;padding:3px 9px;
  border-radius:999px;background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.dm-by{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--soft);color:var(--sub);border:1px solid var(--line-s);margin-left:6px}

/* ---- a combination cell ---- */
.dm-combo{display:flex;flex-direction:column;gap:4px}
.dm-cline{display:flex;gap:8px;align-items:baseline;min-width:0}
.dm-cq{flex:none;min-width:26px;font-variant-numeric:tabular-nums;font-weight:800;color:var(--primary);font-size:12px}
.dm-cn{font-weight:700;color:var(--ink);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-wrap .dm-more{align-self:flex-start;background:none;border:0;color:var(--primary);font-weight:700;font-size:11.5px;
  cursor:pointer;padding:3px 0 0;margin:0;font-family:inherit;min-width:0}
.dm-wrap .dm-more:hover{text-decoration:underline}
/* Rows whose readable item list was never recorded fall back to the raw key. It is
   shown as what it is — a database key — never dressed up as product names. */
.dm-rawkey{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  color:var(--violet);background:var(--violet-bg);border:1px solid var(--violet-line);border-radius:7px;
  padding:4px 8px;word-break:break-all;white-space:normal}

/* ---- the "Saved in" / quantity switchers ---- */
.dm-qtylabel{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#90a3b6;margin-top:9px}
.dm-qty{display:inline-flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.dm-wrap .dm-qty button{border:1.5px solid var(--line-s);background:#fff;color:#3f5f79;font-size:11px;font-weight:700;
  padding:4px 10px;margin:0;border-radius:999px;cursor:pointer;font-family:inherit;transition:.14s;line-height:1.3;min-width:0}
.dm-wrap .dm-qty button:hover{border-color:var(--primary);color:var(--primary)}
.dm-wrap .dm-qty button.on{background:var(--grad);border-color:transparent;color:#fff}
/* Merging two stores into one row must never hide a disagreement between them — this
   is the one thing the merge could cost, so it is said on the row. AMBER, NOT RED:
   two stores differing is not a failure. */
.dm-differ{margin-top:6px;font-size:11px;font-weight:700;color:var(--warn);background:var(--warn-bg);
  border:1px solid var(--warn-line);border-radius:8px;padding:4px 9px;display:inline-block}

/* ---- empty / loading / failure ---- */
.dm-empty{text-align:center;padding:52px 24px;background:#fff;border:1.5px dashed var(--line-s);
  border-radius:18px;color:var(--sub)}
.dm-empty.inpanel{border:0;border-radius:0;padding:40px 24px}
.dm-emoji{font-size:38px;line-height:1}
.dm-empty h3{margin:13px 0 5px;color:var(--ink);font-size:17px;font-weight:800}
.dm-empty p{margin:0 auto 12px;font-size:13.5px;max-width:580px;line-height:1.6}
.dm-errline{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--bad);
  background:var(--bad-bg);border:1px solid var(--bad-line);border-radius:10px;padding:10px 13px;max-width:580px;
  margin:0 auto 14px;text-align:left;word-break:break-word;line-height:1.5}
.dm-skel{height:13px;border-radius:6px;
  background:linear-gradient(90deg,#eef2f7 25%,#f7fafc 37%,#eef2f7 63%);background-size:400% 100%;
  animation:dm-shimmer 1.4s ease-in-out infinite}

/* ---- comparison strip — AMBER, NEVER RED ---- */
.dm-cmp{background:var(--card);border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:17px 19px;margin-bottom:14px}
.dm-cmp-h{font-size:14px;font-weight:800;color:var(--ink)}
.dm-cmp-s{font-size:12px;color:var(--sub);margin-top:5px;line-height:1.55;max-width:790px}
.dm-cmp-list{margin-top:13px;display:flex;flex-direction:column;gap:5px}
.dm-cmp-row{display:flex;align-items:baseline;gap:14px;padding:10px 13px;border-radius:11px;flex-wrap:wrap;
  background:var(--soft);border:1px solid var(--line)}
.dm-cmp-row.diff{background:var(--warn-bg);border-color:var(--warn-line)}
.dm-cmp-l{flex:none;width:64px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#90a3b6}
.dm-cmp-row.diff .dm-cmp-l{color:#a8834a}
.dm-cmp-v{font-size:14.5px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.dm-cmp-row.diff .dm-cmp-v{color:var(--warn)}
.dm-cmp-tag{flex:none;margin-left:auto;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;
  background:#fff;color:var(--sub);border:1px solid var(--line-s)}
.dm-cmp-row.diff .dm-cmp-tag{background:#f7e9c9;color:#8a5c00;border-color:#e8d09a}
.dm-cmp-who{flex:1 1 100%;font-size:11.5px;color:#90a3b6;font-variant-numeric:tabular-nums}
.dm-cmp-foot{margin-top:12px;font-size:11.5px;color:#90a3b6;line-height:1.55}

/* ---- foot ---- */
.dm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:11.5px;color:#90a3b6;padding:2px 4px}
.dm-foot code{color:var(--sub)}

/* ---- pager ---- */
.dm-pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 14px;background:var(--soft);
  border-top:1px solid var(--line)}
.dm-pager .n{font-size:12px;color:var(--sub);font-weight:700}

/* ===========================================================================
   THE WRITE PATH (DW4) — settings strip, undo toast, edit modal.
   Every rule copied from the prototype's own block except where noted; the
   settings strip has no prototype counterpart (its On/Off pair lives in the
   scaffolding bar, which "would not ship") so it is drawn in the prototype's
   existing chip language rather than a new one.
   =========================================================================== */

/* ---- settings strip ---- */
.dm-settings{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--soft);border:1.5px solid var(--line);border-radius:14px;padding:11px 15px;margin-bottom:14px}
.dm-set-t{font-size:12.5px;font-weight:800;color:var(--ink)}
.dm-set-t .dm-meta{font-weight:600;margin-top:2px}
.dm-settings .dm-set-c{margin-bottom:0}

/* ---- undo toast ---- */
.dm-undo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  /* var(--ok), not a literal — the same reason .dm-note's colours were tokenised in DW3: the dark
     block redefines tokens only, so a hardcoded #1c5437 here would be dark-on-dark. */
  background:var(--ok-bg);border:1.5px solid var(--ok-line);color:var(--ok);border-radius:14px;
  padding:12px 15px;margin:14px 0;font-size:12.5px;line-height:1.55}
.dm-undo b{font-weight:800}
.dm-undo-b{display:flex;gap:8px;flex:none}

/* ---- modal ---- */
/* z-index is above the app's own overlays on purpose. The shared confirm renders UNDERNEATH module
   modals because of a z-index conflict, which is exactly why undo is a toast and never a nested
   confirm raised from in here — it would be invisible and the screen would look frozen. */
.dm-modal{position:fixed;inset:0;z-index:100050;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;pointer-events:none;transition:opacity .18s}
.dm-modal.show{opacity:1;pointer-events:auto}
.dm-modal-bg{position:absolute;inset:0;background:rgba(13,32,51,.48)}
.dm-modal-shell{position:relative;background:var(--card);border-radius:18px;width:min(880px,100%);max-height:92vh;
  overflow:hidden;box-shadow:0 30px 70px rgba(9,26,43,.35);display:flex;flex-direction:column}
.dm-modal-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;
  justify-content:space-between;gap:14px}
.dm-modal-head h3{margin:0;font-size:17px;font-weight:800;color:var(--ink);line-height:1.3;word-break:break-word}
.dm-modal-head .s{font-size:12.5px;color:var(--sub);margin-top:4px;line-height:1.5}
/* All four reset, or it inherits the global blue pill. */
.dm-wrap .dm-x{border:0;background:transparent;font-size:20px;cursor:pointer;color:#8aa0b4;line-height:1;
  padding:4px 7px;margin:0;border-radius:8px;font-family:inherit;min-width:0}
.dm-wrap .dm-x:hover{background:#eef2f6;color:#33506a}
.dm-modal-body{padding:18px 20px;overflow-y:auto}
/* Six columns so L/W/H take one row (2 each) and the grams/kg pair takes the next (3 each).
   Five equal boxes read as an accident; two tidy rows read as a decision. */
.dm-fields{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:6px}
.dm-f2{grid-column:span 2}
.dm-f3{grid-column:span 3}
.dm-field label{display:block;font-size:12px;font-weight:800;color:#45607a;margin:0 0 6px}
.dm-field label .t{float:right;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:var(--soft);color:#90a3b6;border:1px solid var(--line)}
.dm-field label .t.stored{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
/* min-width:0 is REQUIRED. style.css line 1 puts min-width:170px on EVERY input, unscoped, and
   min-width beats width — four number fields in a six-column grid is the exact shape that hits it. */
.dm-field input{width:100%;min-width:0;border:1.5px solid var(--line-s);border-radius:10px;padding:10px 12px;
  font-size:13.5px;font-family:inherit;color:var(--ink);background:var(--field)}
.dm-field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(5,136,182,.13)}
/* Spinner arrows eat a sixth of a narrow box and nobody nudges a parcel 1 g at a time. */
.dm-field input[type=number]{-moz-appearance:textfield;appearance:textfield}
.dm-field input[type=number]::-webkit-outer-spin-button,
.dm-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dm-was{font-size:12px;color:#90a3b6;margin:0 0 14px;line-height:1.55}
.dm-items{background:var(--soft);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.dm-modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:flex-end;gap:10px;background:var(--field)}
/* A refusal, in the same note language as the rest — tokenised so dark mode stays readable. */
.dm-note.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.dm-note.bad b{color:var(--bad)}

/* ===========================================================================
   MOBILE — the house gate is @media (max-width:1180px). The table reflows into
   cards, the header row is hidden, and each cell prints its own label. Every
   desktop rule above is untouched.
   =========================================================================== */
@media (max-width:1180px){
  /* TRAP 3, and the prototype could not have known about it: style.css puts
     table{min-width:900px} on EVERY table on mobile so wide tables scroll
     sideways. responsive.css neutralises it, but only for `.tab table:not([class])`
     — an UNCLASSED table. Ours is .dm-table, so it kept the 900px floor and every
     card came out 894px wide inside a 299px panel. Cards must never be wider than
     the panel, so the floor is released here the same way the house does it. */
  .dm-table{table-layout:auto;min-width:0!important}
  .dm-table th,.dm-table td{width:auto!important}
  .dm-table thead{display:none}
  .dm-table,.dm-table tbody,.dm-table tr,.dm-table td{display:block;width:100%}
  /* width:auto, NOT the 100% the row inherits from the rule above: a card is
     width:100% PLUS a 12px margin each side, so it overhangs its own panel by 12px
     and the panel grows a scrollbar it should never have. */
  .dm-table tr{border:1.5px solid var(--line);border-radius:14px;margin:12px;padding:4px 2px;background:#fff;width:auto}
  .dm-table tr:hover td{background:transparent}
  /* white-space:normal is the other half of trap 3 — style.css also sets
     th,td{white-space:nowrap} on mobile, which is right for a table that scrolls
     sideways and wrong for a card that must wrap. Without it the disagreement chip's
     sentence runs 180px past the panel. The prototype only ever reset this on three
     named children because a standalone page never met the global. */
  .dm-table td{border:0;padding:8px 14px;white-space:normal}
  .dm-table td::before{content:attr(data-l);display:block;font-size:10px;font-weight:800;text-transform:uppercase;
    letter-spacing:.05em;color:#90a3b6;margin-bottom:4px}
  /* The SKU (or the combination) is the card's heading — it needs no label above it. */
  .dm-table td:first-child::before{display:none}
  .dm-table td:first-child{padding-top:12px}
  .dm-table td:first-child .dm-sku,.dm-table td:first-child .dm-srcname{font-size:15px;white-space:normal}
  /* A combination is the card heading here, so it may wrap — desktop truncation
     would hide most of a five-product mix on a phone. */
  .dm-table td:first-child .dm-cn{white-space:normal}
  .dm-wrap .dm-table td:last-child .dm-btn{width:100%;justify-content:center}
  .dm-wrap .dm-select,.dm-search{flex:1 1 100%;max-width:none}
  .dm-tbar-sep{display:none}
  .dm-panel-head{flex-direction:column;gap:8px}
  .dm-cmp-l{flex:1 1 100%;width:auto}
  .dm-cmp-tag{margin-left:0}

  /* THE MODAL, NARROW. The 6-column rhythm has no room here — two even boxes, spans released,
     exactly as the prototype does it. This is the shape that walks into the global
     min-width:170px on every input: four number fields side by side in a 375px viewport. The
     .dm-field input rule above carries min-width:0, which is what makes two-up possible at all. */
  .dm-fields{grid-template-columns:1fr 1fr}
  .dm-f2,.dm-f3{grid-column:span 1}
  .dm-modal{padding:10px}
  .dm-modal-shell{width:100%;max-height:96vh}
  .dm-settings{flex-direction:column;align-items:stretch;gap:10px}
  .dm-undo{flex-direction:column;align-items:stretch}
  .dm-undo-b{justify-content:flex-end}
  /* The edit cell is the last column and reflows to a full-width card row like the others. */
  .dm-wrap .dm-table td:last-child .dm-btn{width:100%;justify-content:center}
}

/* One column below 560px — two number boxes plus their labels stop fitting. Straight from the
   prototype, which has the same breakpoint for the same reason. */
@media (max-width:560px){ .dm-fields{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .dm-skel{animation:none!important} }

/* ===========================================================================
   DARK THEME — driven ONLY by html[data-theme="dark"], which the app sets.
   There is deliberately no prefers-color-scheme rule: RMS never follows the OS.
   Only the tokens are redefined; no rule is duplicated.
   =========================================================================== */
html[data-theme="dark"] .dm-wrap{
  --ink:#e6edf6; --sub:#9fb0c4; --line:#243049; --line-s:#2f3d59;
  --card:#162133; --field:#111a2b; --soft:#1a2438;
  --shadow:0 10px 30px rgba(0,0,0,.3);
  --info-bg:#14283a; --info-line:#25405a; --info:#7cc4f5;
  --ok-bg:#0f2318; --ok-line:#1f4030; --ok:#86efac;
  --warn-bg:#241c08; --warn-line:#5b4a1f; --warn:#fcd34d;
  --bad-bg:#2a1416; --bad-line:#5b2a2f; --bad:#fca5a5;
  --violet-bg:#1e1b34; --violet-line:#372f57; --violet:#c4b5fd;
}
html[data-theme="dark"] .dm-wrap .dm-chip,
html[data-theme="dark"] .dm-wrap .dm-btn,
html[data-theme="dark"] .dm-wrap .dm-select,
html[data-theme="dark"] .dm-wrap .dm-date,
html[data-theme="dark"] .dm-wrap .dm-qty button,
html[data-theme="dark"] .dm-wrap .dm-panel-n,
html[data-theme="dark"] .dm-wrap .dm-cmp-tag{background:#1d2941;color:#cdd9e8}
html[data-theme="dark"] .dm-wrap .dm-empty,
html[data-theme="dark"] .dm-wrap .dm-table tr{background:var(--card)}
html[data-theme="dark"] .dm-wrap .dm-panel-head+.dm-tablewrap .dm-table th{background:var(--card)}
html[data-theme="dark"] .dm-wrap .dm-table tbody tr:hover td{background:#1d2941}
html[data-theme="dark"] .dm-wrap .dm-none td{background:#141d2e}