/* ============================================================
   The legacy shape language, restored.

   Decided 2026-08-06, reversing the earlier palette-only rule. The shop found the
   Serenity-shaped screens unfamiliar and asked for the single-file app's look back:
   the 2px black outlines, the hard offset shadows, the rotated sticker chips, the
   yellow corner triangle, the black number tab, the uppercase letter-spaced labels.

   Source of truth is `WGL_Quotation_Builder.html`'s own <style> block. Values below
   are its values, not approximations of them.

   SCOPE: everything here is nested under `.s-WglPage` or `.wgl-dlg`, so it reaches
   the six hand-written screens and their dialogs and NOTHING else. Serenity's CRUD
   grid pages keep their framework chrome — nobody asked for the admin tables to be
   restyled, and fighting the theme on those would break on every upgrade.

   Still no colour literals, and — since 2026-08-06 — no theme-fixed ones either.
   Surfaces and ink come from the --s-wgl-* set the two theme files map (see
   theme-light.css / theme-dark.css). Naming --wgl-white here, as this file
   originally did, pins the screen to paper on BOTH themes; that is what made
   every WGL screen read as light-on-white under theme-cosmos-dark.

   Three things stay theme-fixed ON PURPOSE, and are commented where they appear:
   the black title band, the black totals bar, and anything drawn on a yellow
   fill. Those are brand chrome — the legacy's topbar and footer are black in a
   lit shop too — not surfaces that follow the page.
   ============================================================ */

:root {
  /* The 2px outline and hard offset shadow that carry the whole look.
     --s-wgl-edge is black on paper and inverts to --wgl-paper-dim on dark,
     because a black offset on a #1B1B1B panel is nothing at all. */
  --wgl-edge: 2px solid var(--s-wgl-edge);
  --wgl-edge-thin: 1.5px solid var(--s-wgl-hairline);
  --wgl-pop: 2px 2px 0 var(--s-wgl-edge);
  --wgl-pop-hover: 3px 3px 0 var(--s-wgl-edge);
  --wgl-pop-active: 1px 1px 0 var(--s-wgl-edge);
  --wgl-pop-lg: 4px 4px 0 var(--s-wgl-edge);
  --wgl-pop-yellow: 2px 2px 0 var(--wgl-yellow);

  --wgl-r-btn: 9px;
  --wgl-r-card: 16px;
  --wgl-r-input: 9px;
  --wgl-r-chip: 7px;
}

/* ── Buttons ────────────────────────────────────────────────
   The legacy `.btn`, exactly: the border, the offset, and the 1px nudge on hover and
   press that makes the shadow read as a physical lift. */

.s-WglPage .wgl-btn,
.wgl-dlg .wgl-btn {
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  border: var(--wgl-edge);
  border-radius: var(--wgl-r-btn);
  background: var(--s-wgl-surface);
  color: var(--s-wgl-ink);
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: var(--wgl-pop);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.s-WglPage .wgl-btn:hover:not(:disabled),
.wgl-dlg .wgl-btn:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: var(--wgl-pop-hover);
}

.s-WglPage .wgl-btn:active:not(:disabled),
.wgl-dlg .wgl-btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: var(--wgl-pop-active);
}

.s-WglPage .wgl-btn:focus-visible,
.wgl-dlg .wgl-btn:focus-visible {
  outline: 3px solid var(--wgl-yellow);
  outline-offset: 2px;
}

.s-WglPage .wgl-btn:disabled,
.wgl-dlg .wgl-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* sm — a button that sits next to text in a row rather than in a toolbar. This is
   the legacy's own `.stbtn`: 6px/12px at 10.5px with a 1px offset instead of 2px,
   because a full-size shadow on a row action reads as a second card.

   IT HAD TO BE RESTATED HERE. `.wgl-btn-sm` is declared in builder.css at one class
   of specificity and `.s-WglPage .wgl-btn` above is two, so inside a WglPage — which
   is every screen that uses it — the small variant lost the cascade and did nothing
   at all. Four screens ask for it (Products, the studio panels, saved quotations) and
   all four were drawing full-size buttons. Nothing reports a rule that is merely
   outranked. */
.s-WglPage .wgl-btn-sm,
.wgl-dlg .wgl-btn-sm {
  padding: 6px 12px;
  font-size: 10.5px;
  box-shadow: 1px 1px 0 var(--s-wgl-edge);
}

.s-WglPage .wgl-btn-sm:hover:not(:disabled),
.wgl-dlg .wgl-btn-sm:hover:not(:disabled) {
  box-shadow: 2px 2px 0 var(--s-wgl-edge);
}

.s-WglPage .wgl-btn-sm:active:not(:disabled),
.wgl-dlg .wgl-btn-sm:active:not(:disabled) {
  box-shadow: 0 0 0 var(--s-wgl-edge);
}

/* solid — the yellow fill. Black text on yellow, per the contrast rule. Both
   sides of this pair are theme-fixed: a yellow fill carries black type at
   13.4:1 whatever the page behind it is doing. */
.s-WglPage .wgl-btn-primary,
.wgl-dlg .wgl-btn-primary {
  background: var(--wgl-yellow);
  color: var(--wgl-black);
}

/* dark — black fill, yellow text, and a YELLOW offset. The one place the shadow
   is not black, because a black offset on a black button is nothing. Stays
   black on both themes: this button is named for its fill, and on dark it
   still separates from the --wgl-ink2 panel by a full two steps. */
.s-WglPage .wgl-btn-dark,
.wgl-dlg .wgl-btn-dark {
  background: var(--wgl-black);
  color: var(--wgl-yellow);
  border-color: var(--wgl-black);
  box-shadow: var(--wgl-pop-yellow);
}

.s-WglPage .wgl-btn-dark:hover:not(:disabled),
.wgl-dlg .wgl-btn-dark:hover:not(:disabled) {
  box-shadow: 3px 3px 0 var(--wgl-yellow);
}

/* ghost — the quiet one. No offset at all; that is what makes it quiet. */
.s-WglPage .wgl-btn-ghost,
.wgl-dlg .wgl-btn-ghost {
  border-color: var(--s-wgl-hairline);
  box-shadow: none;
  color: var(--s-wgl-ink-dim);
}

.s-WglPage .wgl-btn-ghost:hover:not(:disabled),
.wgl-dlg .wgl-btn-ghost:hover:not(:disabled) {
  border-color: var(--s-wgl-edge);
  color: var(--s-wgl-ink);
  box-shadow: none;
  transform: none;
}

/* --s-danger-text, not --wgl-red: #C0392B is 4.0:1 on #1B1B1B and fails as the
   9px type this button actually carries. The theme swaps in its lifted twin.

   THE STAMP BELONGS TO THE CONFIRMATION, NOT THE TRIGGER. A dialog holds exactly
   one danger button, and it is the last thing between somebody and a deletion.
   There it keeps the whole treatment — the 2px red edge and the red offset. */
.wgl-dlg .wgl-btn-danger {
  color: var(--s-danger-text);
  border-color: var(--s-danger-text);
  box-shadow: 2px 2px 0 var(--s-danger-text);
}

/* On a PAGE the same button is a row verb, drawn once per record, and the archive
   runs twenty-five of them down one column. Twenty-five red-stamped rectangles
   make the loudest thing on the screen the one action nobody opened the list to
   perform, and they were out-shouting the yellow Approve sitting two pixels to
   their left — which is why somebody opened the list.

   So Delete carries the danger in its LABEL and nothing else until you reach for
   it: hairline edge, no offset, no lift. The outline and the wash arrive on hover
   and focus, and the full stamp arrives in the confirm dialog above. That is also
   what builder.css asked for and lost — `.s-WglPage .wgl-btn-danger` beats a bare
   class on specificity whatever order the files load in. */
.s-WglPage .wgl-btn-danger {
  color: var(--s-danger-text);
  border-color: color-mix(in srgb, var(--s-danger-text) 32%, transparent);
  border-width: 1.5px;
  box-shadow: none;
}

.s-WglPage .wgl-btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--s-danger-text) 10%, transparent);
  border-color: var(--s-danger-text);
  box-shadow: none;
  transform: none;
}

.s-WglPage .wgl-btn-danger:active:not(:disabled) {
  background: color-mix(in srgb, var(--s-danger-text) 18%, transparent);
  box-shadow: none;
  transform: none;
}

.s-WglPage .wgl-btn-danger:focus-visible {
  outline-color: var(--s-danger-text);
}

/* The toolbar reuses Serenity's ToolButton markup, so the same treatment has to be
   mapped onto it — but only inside a WGL page.

   That reuse brings one thing that has to be undone. Serenity's toolbar is a
   SEGMENTED control: `.tool-button` carries `margin-left: -1px` so neighbours in a
   `.tool-group` overlap by exactly their 1px border and share one hairline, and only
   the first and last child are given a radius. The treatment below breaks every
   premise of that — 2px border, a radius on all four corners of every button, and a
   2px hard offset shadow. Left alone, the -1px pulls the next button's rounded edge
   on top of the previous one's outline AND its shadow, so grouped buttons read as
   welded together: Charge/Void/Clear cart on the till, Send on WhatsApp/Return
   notice on the quotation builder.

   So the overlap becomes a real gap. Buttons inside a group sit closer than the gap
   BETWEEN groups, which is what still carries the grouping now that the shared
   hairline is gone — proximity doing the job the segmentation used to. */
.s-WglPage .s-Toolbar .tool-group {
  column-gap: 0.4rem;
}

.s-WglPage .s-Toolbar .tool-button {
  margin-left: 0;
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  border: var(--wgl-edge);
  border-radius: var(--wgl-r-btn);
  background: var(--s-wgl-surface);
  color: var(--s-wgl-ink);
  box-shadow: var(--wgl-pop);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.s-WglPage .s-Toolbar .tool-button:hover:not(.disabled) {
  transform: translate(-1px, -1px);
  box-shadow: var(--wgl-pop-hover);
}

.s-WglPage .s-Toolbar .tool-button:active:not(.disabled) {
  transform: translate(1px, 1px);
  box-shadow: var(--wgl-pop-active);
}

/* The primary action on every screen — "New quotation", "Print labels", "Charge" —
   carries add-button, and the legacy made the primary action the yellow one. */
.s-WglPage .s-Toolbar .tool-button.add-button {
  background: var(--wgl-yellow);
  color: var(--wgl-black);
}

.s-WglPage .s-Toolbar .tool-button.disabled {
  opacity: 0.4;
  box-shadow: none;
  transform: none;
}

/* ── The page frame ─────────────────────────────────────────
   The legacy topbar: a black band under a 6px yellow rule. Applied to the WGL
   page's own title bar, not Serenity's header.

   THEME-FIXED, deliberately. This band is brand chrome, the same object as the
   black sidebar rail that the light theme also keeps black — see theme-light's
   --s-sidebar-bg note. Flipping it to paper on light would break the one
   silhouette both themes share. */

.s-WglPage > .grid-title {
  background: var(--wgl-black);
  color: var(--wgl-white);
  border-bottom: 6px solid var(--wgl-yellow);
  padding: 16px 22px; 
}

.s-WglPage > .grid-title .title-text {
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--wgl-white);
}

/* ── Panels ─────────────────────────────────────────────────
   The legacy `.card`. */

/* --wgl-panel-pad-x is declared by builder.css and read by anything that has
   to bleed to this panel's inner edge. Repainting the padding here without
   updating it left the filter band 2px short on both sides. */
.s-WglPage .wgl-panel {
  --wgl-panel-pad-x: 22px;
  background: var(--s-wgl-surface);
  color: var(--s-wgl-ink);
  border: var(--wgl-edge-thin);
  border-radius: var(--wgl-r-card);
  padding: 22px var(--wgl-panel-pad-x);
  box-shadow: none;
}

/* ── The document sheet ────────────────────────────────────────
   The header, the markdown strip and the items are one subject and are drawn as one
   card — see `.wgl-doc-sheet` in builder.css for why.

   It has to be repeated HERE, scoped under `.s-WglPage`, because the rule above
   repaints every panel at this exact specificity and this file loads after
   builder.css. The unscoped version there loses the tie on source order, so the
   panels kept their own 2px outlines inside the sheet and it drew as three boxed
   cards in a box. Same trap the `--wgl-panel-pad-x` note records: this file is the
   last word on what a panel looks like, so anything that un-paints one belongs
   beside it. */
.s-WglPage .wgl-doc-sheet {
  background: var(--s-wgl-surface);
  color: var(--s-wgl-ink);
  border: var(--wgl-edge-thin);
  border-radius: var(--wgl-r-card);
  box-shadow: none;
  overflow: hidden;
}

/* `:where()` so the reset carries the specificity of the sheet alone and does NOT
   outrank the divider rule below it. Written plainly, `> .wgl-panel` is one class more
   specific than `> * + *`, so `border: none` won on every panel child and the sheet
   drew as one tall card with no seam between the supplier and their stock — while the
   ladder, which is not a `.wgl-panel`, got a divider nobody could see because it is
   display:none. */
.s-WglPage .wgl-doc-sheet > :where(.wgl-panel) {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* `> * + *`, NOT `> .wgl-panel + .wgl-panel`. The ladder strip between the header and
   the items is a `.wgl-ladder-panel` and carries no `.wgl-panel` class, so the
   panel-to-panel form matched nothing at all and the sheet drew with no dividers in
   it — a single tall card with no seam between the supplier and their stock.

   On the FOLLOWING child rather than the preceding one, so a hidden child takes its
   own rule with it: the ladder is display:none on anything but an Approved
   consignment, and a rule on the child above would leave a divider under the header
   with nothing beneath it. A display:none child draws no border either, so giving one
   to the hidden ladder costs nothing. */
.s-WglPage .wgl-doc-sheet > * + * {
  border-top: var(--wgl-edge-thin);
}

.s-WglPage .wgl-panel-title {
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
}

/* The sticker chip — a yellow tag, rotated two degrees off true. It is the single
   most recognisable thing on the legacy screen and it costs one transform. */
.s-WglPage .wgl-tagno {
  display: inline-block;
  background: var(--wgl-yellow);
  color: var(--wgl-black);
  border-radius: var(--wgl-r-chip);
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 3px 9px;
  transform: rotate(-2deg);
}

/* ── Fields ─────────────────────────────────────────────────
   Tiny, wide-tracked, uppercase labels over a soft-bordered input. */

.s-WglPage .wgl-field-label,
.wgl-dlg .wgl-field-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-wgl-ink-dim);
  font-weight: 600;
  margin-bottom: 5px;
}

.s-WglPage .wgl-field input.editor:not([type="checkbox"]),
.s-WglPage .wgl-field select.editor,
.s-WglPage .wgl-field textarea.editor,
.wgl-dlg .wgl-field input.editor:not([type="checkbox"]),
.wgl-dlg .wgl-field select.editor,
.wgl-dlg .wgl-field textarea.editor {
  font-size: 13.5px;
  padding: 9px 11px;
  border: var(--wgl-edge-thin);
  border-radius: var(--wgl-r-input);
  background: var(--s-wgl-surface);
  color: var(--s-wgl-ink);
}

.s-WglPage .wgl-field input.editor:not([type="checkbox"]):focus,
.s-WglPage .wgl-field select.editor:focus,
.s-WglPage .wgl-field textarea.editor:focus,
.wgl-dlg .wgl-field input.editor:not([type="checkbox"]):focus,
.wgl-dlg .wgl-field select.editor:focus,
.wgl-dlg .wgl-field textarea.editor:focus {
  outline: none;
  border-color: var(--s-wgl-edge);
  box-shadow: 0 0 0 3px var(--s-wgl-focus-tint);
}

/* ── Checkbox ───────────────────────────────────────────────
   common-theme.css already strips the native control (`appearance: none`)
   and paints a WHITE tick as a background-image when checked. That tick was
   invisible here, because the rules above were painting every `.editor` — a
   checkbox included — with a white ground.

   So the box gets the shape language instead of the text-field treatment:
   the 2px edge, the chip radius, and a black fill when ticked, which is the
   ground that white tick was always drawn for. No second SVG, no colour
   literal — the framework's own image, given something to sit on.

   The CHECKED fill is the one control here that stays black on both themes,
   and for the same reason it was black in the first place: the tick is a white
   PNG that common-theme.css paints, so its ground has to stay dark or the tick
   disappears. Flipping it with the rest of the surfaces would have made every
   ticked box on the dark theme read as empty — the exact bug this block was
   written to fix, reintroduced from the other side. The unchecked ground does
   follow the theme, and the 2px --s-wgl-edge keeps the box visible against a
   #1B1B1B panel. */
.s-WglPage .wgl-field input[type="checkbox"],
.wgl-dlg .wgl-field input[type="checkbox"],
.s-WglPage .wgl-check input[type="checkbox"],
.wgl-dlg .wgl-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: var(--wgl-edge);
  border-radius: 5px;
  background-color: var(--s-wgl-surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76%;
  cursor: pointer;
  transition: background-color var(--s-transition), border-color var(--s-transition);
}

.s-WglPage .wgl-field input[type="checkbox"]:checked,
.wgl-dlg .wgl-field input[type="checkbox"]:checked,
.s-WglPage .wgl-check input[type="checkbox"]:checked,
.wgl-dlg .wgl-check input[type="checkbox"]:checked {
  /* --s-wgl-edge, not --wgl-black: the fill has to invert with the theme, or a
     black box sits on a #1B1B1B panel. The tick inverts with it — the
     framework's own glyph is stroked white for a --bs-primary fill and would
     disappear on the paper-dim fill dark resolves to. See --s-check-tick. */
  background-color: var(--s-wgl-edge);
  border-color: var(--s-wgl-edge);
  background-image: var(--s-check-tick);
}

/* The explained ticks wrap two lines, so the box aligns to the first one rather
   than to the centre of the block — the legacy's `margin: 2px 0 0`. Declared here
   because the shared rule above sets `margin: 0` at the same specificity and loads
   from this file. */
.s-WglPage .wgl-check-explained input[type="checkbox"],
.wgl-dlg .wgl-check-explained input[type="checkbox"] {
  margin-block-start: 2px;
}

.s-WglPage .wgl-field input[type="checkbox"]:focus-visible,
.wgl-dlg .wgl-field input[type="checkbox"]:focus-visible,
.s-WglPage .wgl-check input[type="checkbox"]:focus-visible,
.wgl-dlg .wgl-check input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--wgl-yellow);
  outline-offset: 2px;
}

/* The row reads "[x] Price", so the label is a sentence beside a control, not
   the 9.5px tracked-out eyebrow that sits above a text field. */
.wgl-dlg .wgl-field-check .wgl-field-label,
.s-WglPage .wgl-field-check .wgl-field-label {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--s-wgl-ink);
  cursor: pointer;
}

/* ── Item and cart cards ────────────────────────────────────
   The two details that make a card read as the legacy's: the yellow corner
   triangle, and the black number tab hanging off the left edge. */

.s-WglPage .wgl-item,
.s-WglPage .wgl-product {
  border: var(--wgl-edge-thin);
  border-radius: var(--wgl-r-card);
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

.s-WglPage .wgl-item::after,
.s-WglPage .wgl-product::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent var(--wgl-yellow) transparent transparent;
}

/* Theme-fixed: yellow-on-black is the tab, and it is legible on either panel. */
.s-WglPage .wgl-item-index {
  position: absolute;
  top: 12px;
  left: -6px;
  background: var(--wgl-black);
  color: var(--wgl-yellow);
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 12px 4px 16px;
  border-radius: 0 20px 20px 0;
  letter-spacing: 0.06em;

  /* The tab carries the number AND the barcode now, so it has to lay them out and
     it must not run the width of the card. The legacy's own cap. */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 44px);
}

/* The legacy's `.bcode`: the code on the sticker, on a pale dashed chip inside the
   black tab. Theme-fixed with it — this sits ON the tab, not on the panel, so it
   follows the tab's ground rather than the page's. */
.s-WglPage .wgl-item-code {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--wgl-white);
  border: 1px dashed var(--wgl-gray-lt, #B5B0A6);
  border-radius: 6px;
  padding: 1px 7px;
  color: var(--wgl-black);
}

.s-WglPage .wgl-item-no { white-space: nowrap; }

/* Print label, INSIDE the black tab, beside the code it prints — the legacy's
   `.it-lbl`. It sits on the tab's own ground rather than the panel's, so it is
   theme-fixed with the tab: pale on black, filling to brand yellow on hover.

   Its subject is the chip immediately to its left. As one of six unlabelled icons in
   the far corner of the card, a tag glyph read as "tag this item" at least as readily
   as "print a sticker", which is what the operator reported. */
.s-WglPage .wgl-item-label-slot .wgl-item-act {
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 20px;
  border: 1px solid var(--wgl-gray-lt, #B5B0A6);
  background: transparent;
  color: var(--wgl-white);
  line-height: 1.5;
}

.s-WglPage .wgl-item-label-slot .wgl-item-act:hover,
.s-WglPage .wgl-item-label-slot .wgl-item-act:focus-visible {
  background: var(--wgl-yellow);
  border-color: var(--wgl-yellow);
  color: var(--wgl-black);
}

/* The tab caps itself at `calc(100% - 44px)` so it cannot run the card's width, and
   it now holds three things rather than two. The code chip is the one that gives —
   it already ellipsises, and a truncated barcode beside a readable button beats a
   full barcode beside a button clipped to "Print la". */
.s-WglPage .wgl-item-label-slot { flex: 0 0 auto; }

/* Fit the whole photograph into the preview box.

   `common-theme.css` gives `.file-item .thumb` a 128x96 box, `background-position:
   left top`, and NO `background-size` at all — so a 1200x1200 intake photo is painted
   at its natural size and the frame shows the top-left 128x96 PIXELS of it. On most
   pictures that is a corner of the backdrop, which is why one item read as a blank
   white square and the next one looked fine: nothing about the data differed, only
   what happened to be in the corner.

   `contain` rather than `cover` because the point is to see the whole item — `cover`
   fills the frame and crops whatever does not fit, which is the same failure in a
   politer form. Centred, so a letterboxed photo sits in the middle of its well. */
.s-WglPage .file-item .thumb,
.wgl-dlg .file-item .thumb {
  background-size: contain;
  background-position: center;
}

/* Give the well the LANE's width and the SHOT's shape.

   `contain` above stopped the preview showing a corner of the backdrop; it did not
   stop it wasting the column. The framework's well is a fixed 128x96 inside a
   `width: 132px` `.file-item`, and the item card's photo lane is 11rem — so a
   portrait garment shot, which is every phone photograph taken at a counter, painted
   at 72x96 with dead space on three sides: ~28px inside the well either side of the
   picture, and ~36px of lane to the right of the well that nothing ever used. The
   operator's report was that the container is too large for the picture in it; it was
   both too large and the wrong shape, and the two are the same fact.

   `--wgl-shot-ar` is the image's own naturalWidth/naturalHeight, set by
   `CroppedImageUploadEditor.publishShotRatio` and clamped there to 5:8..8:5 so a
   panorama cannot flatten the card. It falls back to 3:4 until the probe answers,
   which is the crop profile's own shape (75_WGL_crop_profile_portrait.sql) and the
   shape of a garment photographed on a hanger, so the well does not jump.

   Scoped to `.wgl-item-photo` and not to every `.file-item` on the page: the product
   editor's own well (`.wgl-editor-photo`) is `flex: none` with no width of its own, so
   a percentage width there would collapse it to nothing. */
.s-WglPage .wgl-item-photo .file-item { width: 100%; }

.s-WglPage .wgl-item-photo .file-item .thumb {
  width: 100%;
  height: auto;
  aspect-ratio: var(--wgl-shot-ar, 0.75);
}

/* The framework floors its list at 116px whatever it holds (`.s-ImageUploadEditor ul`,
   sized for that 96px well plus a filename). With the well now sized by its own
   picture that floor only draws a gap under it — visible as soon as a portrait shot
   makes the well taller than the floor and the padding stops matching. */
.s-WglPage .wgl-item-photo .s-ImageUploadEditor ul {
  min-height: 0;
  padding: 0.3rem 0 0 0;
}

/* The size claim moves to the button that would apply it — see
   `CroppedImageUploadEditor.showCropButton`. This screen passes `cropOnSelect: false`,
   so nothing here is ever cropped to it unless that button is pressed, and a line
   reading "Target size: 1200 x 1200" under an uncropped photograph is a promise the
   screen does not keep. */
.s-WglPage .wgl-item-photo .crop-dimensions { display: none; }

/* Select File and the delete button stay on ONE row.

   The editor's toolbar is Serenity's `.s-Toolbar > .tool-group`, so it arrives wearing
   the WGL treatment 300 lines up — 2px border, 12px display face, a 0.4rem gap and a
   hard offset shadow — all of which is right on a page toolbar and none of which was
   measured against an 11rem lane. `.tool-group` is `flex-wrap: wrap`, so what fails is
   not the label: the delete button drops to a second line and the pair reads as two
   unrelated controls, one of them a bare red icon under a big black button.

   `nowrap` makes that impossible, and the flex rules below say who gives when the room
   runs out — the LABEL, never the delete button, which is an icon with nothing to
   spare. The clipping is on the button and NOT on the group: these buttons wear the
   2px hard offset shadow, which lies outside their border box, so a group that hid its
   overflow would shave the shadow off the last one. */
.s-WglPage .wgl-item-photo .s-Toolbar,
.s-WglPage .wgl-item-photo .tool-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  column-gap: 0.35rem;
  margin-right: 0;
  min-width: 0;
}

.s-WglPage .wgl-item-photo .tool-button {
  /* The framework pads 0.75rem each side and sets `min-width: 2.4em`; that is 24px
     and a floor this lane cannot spare. */
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  min-width: 0;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.s-WglPage .wgl-item-photo .tool-button.add-file-button {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.s-WglPage .wgl-item-photo .tool-button.delete-button { flex: 0 0 auto; }

/* The positioning context for `.wgl-shot-overlay`, which is the Enhance wand. The
   framework rebuilds this `li` on every populate, which is why the slot inside it is
   re-parented by `CroppedImageUploadEditor.populate` rather than mounted once. */
.s-WglPage .wgl-item-photo .file-item { position: relative; }

/* The dashed photo well. A step DOWN from the panel on both themes — into
   --wgl-paper on light, into --wgl-black on dark — so the well always reads as
   a recess rather than an object. */
.s-WglPage .wgl-item-photo,
.s-WglPage .wgl-product-photo {
  border: 2px dashed var(--s-wgl-hairline);
  border-radius: 12px;
  background: var(--s-wgl-sunken);
  color: var(--s-wgl-ink-mute);
  transition: border-color 0.15s;
}

.s-WglPage .wgl-item-photo:hover,
.s-WglPage .wgl-product-photo:hover {
  border-color: var(--s-wgl-accent-fg);
  color: var(--s-wgl-accent-fg);
}

/* ── Tags ───────────────────────────────────────────────────
   Small, tracked, uppercase. Sold is green, credit and donation are yellow, and
   website-only is white — the legacy's own assignment. */

.s-WglPage .wgl-tag {
  display: inline-block;
  border-radius: 8px;
  padding: 1px 7px;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--wgl-yellow);
  color: var(--wgl-black);
  vertical-align: 1px;
}

/* credit and donation keep the default yellow — the legacy's `.credtag`. */
.s-WglPage .wgl-tag-credit {
  background: var(--wgl-yellow);
  color: var(--wgl-black);
}

.s-WglPage .wgl-tag-sold {
  background: var(--wgl-green);
  color: var(--wgl-white);
}

.s-WglPage .wgl-tag-web {
  background: var(--s-wgl-surface);
  color: var(--s-wgl-ink);
  border: 1px solid var(--s-wgl-hairline);
}

.s-WglPage .wgl-tag-quiet {
  background: var(--s-wgl-surface-2);
  color: var(--s-wgl-ink-dim);
}

/* The item went home in its supplier's bag. It has to live HERE, beside its
   siblings, rather than in screens.css with the rest of the returned-item styling:
   the base `.s-WglPage .wgl-tag` above sets the brand yellow at specificity (0,2,0),
   so a bare `.wgl-tag-returned` loses to it and the chip paints yellow — which reads
   as "store credit", the opposite of what it means.

   It is the one chip allowed red, because it is the one that changes what every
   number on the card means: the line keeps its own figures and contributes none of
   them. Tinted fill with dark text rather than solid, so a dense list of cards does
   not read as an error state. */
.s-WglPage .wgl-tag-returned {
  background: rgba(var(--wgl-red-rgb), 0.14);
  color: var(--s-danger-text, var(--wgl-red));
}

/* An expense somebody fronted and the shop has NOT paid back. Here beside its
   siblings for the same reason `.wgl-tag-returned` is: the base `.s-WglPage .wgl-tag`
   above sets the brand yellow at specificity (0,2,0), and yellow on this chip would
   read as a note about where the money came from rather than as a debt outstanding.

   The second chip allowed red, and on the same grounds — it changes what the row
   means. The line reads as spending and is not: it is a claim on the shop, and it is
   deliberately kept out of the drawer's expected balance until it is repaid. Once it
   is, the chip goes quiet and keeps its sentence. Same tinted fill as its sibling so a
   list of them does not read as an error state. */
.s-WglPage .wgl-tag-owed {
  background: rgba(var(--wgl-red-rgb), 0.14);
  color: var(--s-danger-text, var(--wgl-red));
}

/* The index sticker is `position: absolute` and juts out past the card's left edge,
   so it is OUT OF FLOW and the head's first in-flow child starts underneath it. Any
   chip therefore had its first ~56px hidden behind the black "ITEM 01" tab. Reserve
   the sticker's width once, here, rather than padding the head — the actions on the
   right must stay hard against the other edge. */
.s-WglPage .wgl-item-head .wgl-item-tags {
  margin-inline-start: 4.25rem;
}

/* ── Status pills — the sticker, not the outline ─────────────────
   The legacy `.svst` was a 1.5px tinted outline, and it made the five states
   read as one state: at 9px, "APPROVED" in olive-on-cream and "SUBMITTED" in
   mustard-on-cream are the same object at arm's length, which is the distance
   somebody actually scans an archive from.

   They now take the shape language the rest of this file carries — the 2px
   edge and the hard 2px offset — so a status is a stamped sticker with a fill
   you can name across the room. Same vocabulary as .wgl-btn and .wgl-tagno;
   nothing new is invented for it.

   Fill does the work, so colour is never the only cue: the label spells the
   state out, and the four fills differ in weight as well as hue. */
.s-WglPage .wgl-status-pill,
.wgl-dlg .wgl-status-pill {
  display: inline-block;
  font-family: var(--header-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: var(--wgl-edge);
  border-radius: var(--wgl-r-chip);
  box-shadow: var(--wgl-pop);
  padding: 2px 9px;
  background: var(--s-wgl-surface);
  color: var(--s-wgl-ink);
}

/* Draft is the quiet one — the paper step, so it recedes without losing the
   silhouette that makes it the same family as the rest. */
.s-WglPage .wgl-status-pill.st-draft,
.wgl-dlg .wgl-status-pill.st-draft {
  background: var(--s-wgl-surface-2);
  color: var(--s-wgl-ink);
}

/* Submitted is the state waiting on a person, so it takes the brand fill.
   Yellow is a FILL and always carries black text — 13.4:1. */
.s-WglPage .wgl-status-pill.st-submitted,
.s-WglPage .wgl-status-pill.st-band-1,
.wgl-dlg .wgl-status-pill.st-submitted {
  background: var(--wgl-yellow);
  color: var(--wgl-black);
}

/* --wgl-green with WHITE type, not --wgl-green-lt with black.

   The lifted twin was chosen because #5A7D2A cannot carry black text, and that
   is true — but it put #8FBF4A directly beside #FFD400 in a list that alternates
   between the two, and a saturated lime one row above a saturated yellow is the
   single most vibrating pair on the archive. The deep olive is quieter at the
   same saturation, still reads as a FILL rather than a tint at arm's length,
   and carries white at 4.8:1. It is also the pairing `.wgl-tag-sold` already
   uses eight rules further up, so the shop now has one green instead of two. */
.s-WglPage .wgl-status-pill.st-approved,
.s-WglPage .wgl-status-pill.st-active,
.s-WglPage .wgl-status-pill.st-band-0,
.wgl-dlg .wgl-status-pill.st-approved,
.wgl-dlg .wgl-status-pill.st-active {
  background: var(--wgl-green);
  color: var(--wgl-white);
}

/* ── The markdown ladder's four bands ────────────────────────
   Bands 0, 1 and 3 are the three pairings above and beside this rule, reused
   under a ladder name rather than restated: fresh stock reads like Approved,
   the first markdown reads like Submitted (something is waiting on a person),
   and 90+ reads like Rejected, because a return notice is due and that is the
   one a manager must not scroll past.

   Only band 2 is new, and it is the danger recipe in amber — paper fill, colour
   in the edge and the offset. A third solid fill between the yellow and the red
   would make the aging table three loud rows out of four, and a stamp only
   works while it is rare. */
.s-WglPage .wgl-status-pill.st-band-2 {
  background: var(--s-wgl-surface);
  border-color: var(--wgl-amber);
  box-shadow: 2px 2px 0 var(--wgl-amber);
  color: var(--wgl-amber);
}

/* A red fill dark enough for white text would be the loudest object in a list
   where most rows are fine. The danger button's answer applies here too: keep
   the paper fill and put the colour in the edge and the offset. */
.s-WglPage .wgl-status-pill.st-rejected,
.s-WglPage .wgl-status-pill.st-cancelled,
.s-WglPage .wgl-status-pill.st-expired,
.s-WglPage .wgl-status-pill.st-band-3,
.wgl-dlg .wgl-status-pill.st-rejected,
.wgl-dlg .wgl-status-pill.st-cancelled,
.wgl-dlg .wgl-status-pill.st-expired {
  background: var(--s-wgl-surface);
  border-color: var(--s-danger-text);
  box-shadow: 2px 2px 0 var(--s-danger-text);
  color: var(--s-danger-text);
}

/* The two pills with a SOLID fill — st-submitted's yellow on black, st-approved's
   olive on white — keep that pairing on both themes, because a sticker carries
   its own ground and does not care what the page behind it is doing. That is the
   whole point of having given them a fill.

   This block used to hold a set of `:root.theme-cosmos-dark` counter-overrides
   fighting an identical set in builder.css, which recoloured st-approved to
   --wgl-green-lt ON TOP of a --wgl-green-lt fill — a badge with nothing written
   on it. Both sides are deleted: builder.css now reads --s-success-text /
   --s-danger-text from the theme, and the pair above wins on ordinary
   specificity with nothing to fight. */

/* ── Rationing the stamp ─────────────────────────────────────
   The 2px edge and the hard offset are what make a status read as a stamped
   sticker, and a stamp only works while it is rare.

   Down the archive column it had stopped being rare. Every row carried one,
   most rows carried a second inside their advice line, two rows in four carried
   a stamped Approve, and every row without exception carried a red-stamped
   Delete: five hard-shadowed objects in one screenful, none of them ranked
   against the others. The eye has nowhere to land, so it lands everywhere.

   This file already knew the reason and only ever said it about one case —
   "two stacked stickers on one row is a texture, not a signal". Stacked down
   the PAGE they are the same texture. So the rule gets stated once, properly:

     a pill inside a REPEATED row is information, and lies flat;
     the one stamped object on a row is the thing you have to DECIDE.

   Which leaves exactly one hard offset per archive row — the yellow Approve —
   and nothing at all on the rows that need no decision from anybody. The fills
   are untouched: a fill is what lets somebody name a state across the room, and
   that is the whole reason the tinted-outline version was abandoned on
   2026-08-06. Only the relief goes.

   A document header shows one pill for one document, so the stamp stays there
   in full — BuilderHeader, the rental header, the till's session pill. They
   simply never match the selectors below. */
.s-WglPage .wgl-saved-status .wgl-status-pill,
.s-WglPage .wgl-action .wgl-status-pill,
.s-WglPage .wgl-advice .wgl-status-pill,
.wgl-dlg .wgl-advice .wgl-status-pill {
  box-shadow: none;
  border-width: 1.5px;
}

/* Draft is the state that is waiting on nobody, so in a list it recedes all the
   way to the hairline the card around it is already drawn in. It keeps the ink:
   the outline is what made it shout, not the type. */
.s-WglPage .wgl-saved-status .wgl-status-pill.st-draft {
  border-color: var(--s-wgl-hairline);
}

/* HOW an order was paid, beside WHAT happened to it — the legacy printed CASH /
   CARD / WHISH / OMT on every row of its orders list, and the port had it
   lowercase in the grey timestamp line where nobody reads it.

   It borrows the pill silhouette so it lines up with the status beside it, but
   it is deliberately NOT a state: no outline, a paper ground and secondary ink,
   so a row still has exactly one stamped thing on it. Without that separation a
   Gift row (st-draft, also quiet) and its CASH pill would read as two statuses.

   Higher specificity than the flat-variant rule above on purpose, so it wins
   whatever order the two stylesheets are bundled in. */
.s-WglPage .wgl-saved-status .wgl-status-pill.wgl-pill-tender {
  background: var(--s-wgl-surface-2);
  border-color: transparent;
  color: var(--bs-secondary-color);
  letter-spacing: 0.05em;
}

/* An advice chip sits ON the tint its own level painted the bar with, so a
   full-strength fill inside it is one hue twice at opposite ends of the
   lightness scale — a hot spot on a warm field, which is exactly what made the
   "$0 ITEMS" sticker glare out of its cream band. On a tinted ground the chip
   takes a deeper step of that same tint instead and keeps the panel's own ink,
   which is 13:1 on the pale step rather than flirting with the 4.5:1 floor at
   the 10px this label is actually set in. */
.s-WglPage .wgl-advice .wgl-status-pill.st-submitted,
.wgl-dlg .wgl-advice .wgl-status-pill.st-submitted {
  background: rgba(var(--wgl-yellow-rgb), 0.34);
  border-color: rgba(var(--wgl-yellow-rgb), 0.55);
  color: var(--s-wgl-ink);
}

.s-WglPage .wgl-advice .wgl-status-pill.st-rejected,
.wgl-dlg .wgl-advice .wgl-status-pill.st-rejected {
  background: color-mix(in srgb, var(--s-danger-text) 14%, transparent);
  border-color: color-mix(in srgb, var(--s-danger-text) 40%, transparent);
}

.s-WglPage .wgl-advice .wgl-status-pill.st-draft,
.wgl-dlg .wgl-advice .wgl-status-pill.st-draft {
  border-color: var(--s-wgl-hairline);
}

/* ── Saved rows and chips ───────────────────────────────────── */

.s-WglPage .wgl-saved {
  border: var(--wgl-edge-thin);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--s-wgl-surface);
}

/* The archive's rows carry their advice and their verbs below the button, so
   there the card is the WRAPPER — builder.css explains why. The sticker card
   has to move out with it: left on the button, this rule drew a second 10px
   box inside the wrapper's, with the Delete hanging outside both. The button
   keeps the padding and takes it back as margin so the columns do not shift. */
.s-WglPage .wgl-saved-row {
  border: var(--wgl-edge-thin);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--s-wgl-surface);
}

.s-WglPage .wgl-saved-row:hover { border-color: var(--s-wgl-accent-fg); }

/* The fill follows builder.css onto the row — see the note there for why the button
   could not carry it. Restated in this file's own surface step, and restated for
   `.is-current` too: `.s-WglPage .wgl-saved-row:hover` and
   `.wgl-saved-row.is-current:hover` are both three classes, so the tie goes to
   whichever file loads last, and that is this one. Without the second rule the open
   row would turn grey under the pointer. */
.s-WglPage .wgl-saved-row:not(.is-deleted):hover { background: var(--s-wgl-surface-2); }

.s-WglPage .wgl-saved-row.is-current:not(.is-deleted):hover {
  background: rgba(var(--wgl-yellow-rgb), 0.2);
}

/* The open one, in the panel's own vocabulary — the legacy's
   `.svrow.cur { border-color: var(--yellow); background: var(--ytint); }`.

   Only the border COLOUR, never its width: the row above already owns the edge, and
   the legacy changed the same one property. What separates "open" from "hovered" —
   both of which take the accent edge — is the tint, and a fill reads across a 26rem
   list where a 1.5px edge does not.

   The tint has to be restated HERE even though builder.css already declares it.
   `.s-WglPage .wgl-saved-row` (this file) and `.wgl-saved-row.is-current`
   (builder.css) are both two classes, so specificity ties and source order decides —
   and appsettings.bundles.json loads legacy-shapes after builder. The plain
   `background: var(--s-wgl-surface)` on the row above therefore won, leaving the open
   row on this page — the only page the row appears on — marked by nothing but an edge
   the hover state also draws. Silent, like every CSS class that resolves to nothing. */
.s-WglPage .wgl-saved-row.is-current {
  border-color: var(--s-wgl-accent-fg);
  background: rgba(var(--wgl-yellow-rgb), 0.13);
}



/* The bleed follows builder.css: left/top/bottom only, because the row's verbs now
   sit in a track to the right and the hover tint must not run under them. The
   trailing padding goes with it, or the six columns end 12px short of their six
   headings. */
.s-WglPage .wgl-saved-row > .wgl-saved {
  margin: -9px 0 -9px -12px;
  padding: 9px 0 9px 12px;
  border-color: transparent;
  border-radius: 8px 0 0 8px;
  background: transparent;
}

/* Stacked again — tombstones, and anything narrow enough to have lost its columns. */
.s-WglPage .wgl-saved-row.is-deleted > .wgl-saved {
  margin: -9px -12px 0;
  padding: 9px 12px;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 860px) {
  .s-WglPage .wgl-saved-row > .wgl-saved {
    margin: -9px -12px 0;
    padding: 9px 12px;
    border-radius: 8px 8px 0 0;
  }
}

.s-WglPage .wgl-saved-row > .wgl-saved:hover { background: transparent; }

/* ── The filter band, in the panel's own vocabulary ───────────
   builder.css builds the band out of --bs-tertiary-bg and --bs-border-color,
   which is right for a Serenity surface and wrong inside a WGL panel: the two
   ladders are a step apart, so the band read as a foreign strip laid across the
   card rather than a recess in it. Everything the band is made of therefore
   restates itself in the same --s-wgl-* steps the panel around it uses.

   (When this comment was first written the panel was a hard --wgl-white in both
   themes and the band's Bootstrap tokens put a #2A2A2A strip inside a white
   card. The panel now follows the theme, so the mismatch is only one step —
   but restating it in the panel's own set is still what keeps the two in step
   without either file knowing which theme is loaded.) */
.s-WglPage .wgl-filter-band {
  background: var(--s-wgl-surface-2);
  border-top-color: var(--s-wgl-hairline);
  border-bottom-color: var(--s-wgl-hairline);
}

.s-WglPage .wgl-filter-key {
  color: var(--s-wgl-ink-dim);
}

.s-WglPage .wgl-filter-sep {
  background: var(--s-wgl-hairline);
}

.s-WglPage .wgl-filter-result {
  color: var(--s-wgl-ink-dim);
}

.s-WglPage .wgl-filter-result b {
  color: var(--s-wgl-ink);
}

.s-WglPage .wgl-filter-track {
  background: var(--s-wgl-surface);
  box-shadow: inset 0 0 0 1px var(--s-wgl-hairline);
}

.s-WglPage .wgl-saved-head {
  color: var(--s-wgl-ink-dim);
  border-bottom-color: var(--s-wgl-hairline);
}

/* The band's search field is the same control as every other WGL input, so it
   takes the same box rather than the Serenity one builder.css gives it. */
.s-WglPage .wgl-filter-band .wgl-saved-search input.editor {
  border: var(--wgl-edge-thin);
  border-radius: var(--wgl-r-input);
  background: var(--s-wgl-surface);
  color: var(--s-wgl-ink);
}

.s-WglPage .wgl-filter-band .wgl-saved-search input.editor::placeholder {
  color: var(--s-wgl-ink-dim);
}

.s-WglPage .wgl-filter-band .wgl-saved-search input.editor:focus {
  outline: none;
  border-color: var(--s-wgl-edge);
  box-shadow: 0 0 0 3px var(--s-wgl-focus-tint);
}

.s-WglPage .wgl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 30px;
  padding: 0 0.75rem;
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  border: var(--wgl-edge-thin);
  border-radius: 20px;
  background: var(--s-wgl-surface);
  color: var(--s-wgl-ink-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--s-transition), color var(--s-transition),
              border-color var(--s-transition), box-shadow var(--s-transition);
}

.s-WglPage .wgl-chip:hover {
  background: var(--s-wgl-surface-2);
  border-color: var(--s-wgl-ink-mute);
  color: var(--s-wgl-ink);
}

.s-WglPage .wgl-chip:focus-visible {
  outline: 3px solid var(--wgl-yellow);
  outline-offset: 2px;
}

/* ON — a filter that is actually narrowing the list. It gets the sticker
   treatment, because it is the reason the list got shorter. */
.s-WglPage .wgl-chip-on {
  background: var(--wgl-yellow);
  border: var(--wgl-edge);
  box-shadow: var(--wgl-pop);
  color: var(--wgl-black);
  font-weight: 700;
}

/* ON but neutral — "All" and "Any age" narrow nothing, so they must not shout
   like something that does. Before this, a screen at rest showed two yellow
   chips beside two yellow buttons and yellow meant nothing in particular.
   Now exactly one thing wears the brand fill: a filter that is on. */
.s-WglPage .wgl-chip-neutral.wgl-chip-on {
  background: var(--s-wgl-edge);
  border-color: var(--s-wgl-edge);
  box-shadow: none;
  color: var(--s-wgl-on-edge);
}

/* Inside the ladder track the chips are segments of one control, so they drop
   their own outlines and the track carries the frame. The selected segment
   keeps the brand fill and the edge but not the offset — a hard shadow inside
   a 2px-tall gutter reads as a printing error. */
.s-WglPage .wgl-filter-track .wgl-chip {
  height: 26px;
  padding: 0 0.7rem;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  position: relative;
}
.s-WglPage .wgl-filter-track .wgl-chip:hover {
  background: var(--s-wgl-surface-2);
  border-color: transparent;
}
.s-WglPage .wgl-filter-track .wgl-chip + .wgl-chip::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: var(--s-wgl-hairline);
}
.s-WglPage .wgl-filter-track .wgl-chip-on,
.s-WglPage .wgl-filter-track .wgl-chip-on:hover {
  background: var(--wgl-yellow);
  border: var(--wgl-edge);
  box-shadow: none;
  color: var(--wgl-black);
}
/* Neither side of a selected segment draws a divider against it. */
.s-WglPage .wgl-filter-track .wgl-chip-on::before,
.s-WglPage .wgl-filter-track .wgl-chip-on + .wgl-chip::before { display: none; }

/* Clear reuses the ghost button rather than inventing a fourth chip shape.
   It is absent, not disabled, until there is something to clear. */
.s-WglPage .wgl-filter-clear {
  height: 30px;
  padding: 0 0.65rem;
  font-size: 11px;
}
.s-WglPage .wgl-filter-clear[hidden] { display: none !important; }

/* The count riding inside a chip. Tabular so a two-digit and a one-digit chip
   do not shuffle their labels sideways as the archive is filtered. */
.s-WglPage .wgl-chip-count {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--s-wgl-ink-mute);
}
/* On a yellow fill the count stays black-on-yellow in both themes. The neutral
   chip's fill inverts with --s-wgl-edge, so its count rides --s-wgl-on-edge. */
.s-WglPage .wgl-chip-on .wgl-chip-count { color: rgba(var(--wgl-black-rgb), 0.6); }
.s-WglPage .wgl-chip-neutral.wgl-chip-on .wgl-chip-count {
  color: color-mix(in srgb, var(--s-wgl-on-edge) 60%, transparent);
}

/* ── The totals bar ──────────────────────────────────────────
   The legacy's fixed black footer under a 5px yellow rule, with the figures in
   Space Grotesk and the labels tiny and tracked.

   THEME-FIXED, deliberately — the bottom half of the pair the black title band
   opens. It is the same object in both themes, and on dark it still separates
   from the --wgl-ink2 panels above it by the yellow rule alone. */

.s-WglPage .wgl-totals {
  background: var(--wgl-black);
  color: var(--wgl-white);
  border-top: 5px solid var(--wgl-yellow);
  border-radius: 0;
  padding: 14px 28px;
  gap: 30px;
}

/* SCOPED TO `.wgl-totals`, and that is the whole point of these three rules.
   `.wgl-total` is a label-over-value pair used in two very different places: inside
   `.wgl-totals` it sits on the black bar and needs light type, and on its own it sits
   on a WHITE `.wgl-panel` card. Unscoped, the white below reached both — so the POS
   drawer panel (opening float, cash sales, EXPECTED IN DRAWER) and the dashboard's
   weekly report rendered white on white and showed a column of labels with no
   figures under them. The cashier could not read the number they count the till
   against. The base rules in builder.css already give the card case the body colour;
   these only override it where the ground is actually black. */

.s-WglPage .wgl-totals .wgl-total-label {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wgl-paper-dim-2);
}

.s-WglPage .wgl-totals .wgl-total-value {
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--wgl-white);
}

.s-WglPage .wgl-totals .wgl-total-strong .wgl-total-value {
  color: var(--wgl-yellow);
}

/* ── Dialogs ────────────────────────────────────────────────
   The legacy `.enh-box`: a heavier border and a deeper offset than a card, because
   it sits above everything. */

.wgl-dlg .modal-content,
.wgl-dlg.ui-dialog,
.wgl-dlg .s-Panel {
  border: var(--wgl-edge);
  border-radius: var(--wgl-r-card);
  box-shadow: var(--wgl-pop-lg);
}

.wgl-dlg .modal-title,
.wgl-dlg .ui-dialog-title {
  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
}