/* ==========================================================================
   Consignment — the module's stylesheet
   (consignment.html, consignment-consignee.html, consignment-agreement.html,
    consignment-place.html, consignment-move.html, consignment-invoicing.html,
    consignment-moves.html, consignment-counts.html, consignment-reports.html,
    consignment-inbound.html, consignee-portal.html)

   Spec: prd/V3/consignment/features.md → Page Plan

   Every Consignment page links css/pages/orders.css first and speaks its
   vocabulary: a reading written as words (`.ord-reading`), the bulk bar, the
   key–value grid, the timeline, the document row, the two-sided choice, the
   page-gear dialogs and the hub strip. Consignment moves the same slabs Orders
   ships, so it says them the same way. What is Consignment's own — the
   consignee picker, the record header, the figure bar, the agreement form,
   the placement steps, the aging bars and the portal — is here, under `csg-`.

   TOKENS ONLY, LIGHT THEME ONLY. Every colour is a `var(--color-…)` from
   app.css; radius never passes 7px (memory.md §2); nothing under 10px (§4);
   no inline `style` anywhere on these pages (§14), so every width a figure
   needs travels as an SVG presentation attribute, the way orders.css's fill
   gauge does it.
   ========================================================================== */

/* ---------- Registers -------------------------------------------------------
   Column shares per register under `table-layout: fixed` (which `.data-table`
   sets), summing to 100 so the browser has no slack to hand out. The last
   column is the money and is right-aligned by `.data-table`'s own rule. */
.csg-table--consignees th.col-who      { width: 24%; }
.csg-table--consignees th.col-access   { width: 13%; }
.csg-table--consignees th.col-out      { width: 12%; }
.csg-table--consignees th.col-sold     { width: 12%; }
.csg-table--consignees th.col-age      { width: 10%; }
.csg-table--consignees th.col-next     { width: 17%; }
.csg-table--consignees th.col-status   { width: 12%; }

.csg-table--slabs th.col-check   { width: 4%; }
.csg-table--slabs th.col-slab    { width: 15%; }
.csg-table--slabs th.col-mat     { width: 22%; }
.csg-table--slabs th.col-where   { width: 16%; }
.csg-table--slabs th.col-placed  { width: 12%; }
.csg-table--slabs th.col-days    { width: 7%; }
.csg-table--slabs th.col-status  { width: 13%; }
.csg-table--slabs th.col-price   { width: 11%; }

.csg-table--sold th.col-check  { width: 4%; }
.csg-table--sold th.col-slab   { width: 14%; }
.csg-table--sold th.col-mat    { width: 22%; }
.csg-table--sold th.col-sale   { width: 24%; }
.csg-table--sold th.col-by     { width: 14%; }
.csg-table--sold th.col-status { width: 11%; }
.csg-table--sold th.col-price  { width: 11%; }

.csg-table--moves th.col-move   { width: 14%; }
.csg-table--moves th.col-type   { width: 10%; }
.csg-table--moves th.col-route  { width: 26%; }
.csg-table--moves th.col-slabs  { width: 12%; }
.csg-table--moves th.col-doc    { width: 20%; }
.csg-table--moves th.col-status { width: 18%; }

.csg-table--counts th.col-count  { width: 14%; }
.csg-table--counts th.col-who    { width: 20%; }
.csg-table--counts th.col-by     { width: 16%; }
.csg-table--counts th.col-tally  { width: 18%; }
.csg-table--counts th.col-var    { width: 18%; }
.csg-table--counts th.col-status { width: 14%; }

.csg-table--invoices th.col-inv    { width: 16%; }
.csg-table--invoices th.col-who    { width: 22%; }
.csg-table--invoices th.col-slabs  { width: 20%; }
.csg-table--invoices th.col-src    { width: 18%; }
.csg-table--invoices th.col-status { width: 12%; }
.csg-table--invoices th.col-total  { width: 12%; }

/* A second register under the same hub strip: orders.css merges every card in
   the shell into it, so this one opens with a hairline and its own lead-in to
   read as the panel's next section (memory.md §17). */
.ord-hub ~ .tab-shell > .card.csg-section { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--color-border); }

/* Group rows: one per consignee on the sold register, carrying the subtotal
   and the one action that takes the group's slabs onto an invoice. */
.csg-group td { background: var(--color-control); }
.csg-group__row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.csg-group__name { font-weight: 600; color: var(--color-text); }
.csg-group__sub { margin-left: auto; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.csg-group__sub strong { color: var(--color-text); font-weight: 600; }
.csg-table tbody tr.csg-group { cursor: default; }

/* Row actions written as words in the link blue, the way orders-list.css says
   the Expired row's verbs. */
.csg-acts a { color: var(--color-primary-600); font-weight: 500; }
.csg-acts a:hover { color: var(--color-primary-700); }
.csg-table td .sub a { color: var(--color-primary-600); }

/* A slab's photo beside its material name. */
.csg-mat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.csg-mat img {
  width: 44px; height: 30px; flex: none; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--color-border);
}
.csg-mat .cell-stack { min-width: 0; }

/* ---------- The consignee's mini stock -----------------------------------------
   consignment-consignee.html wears Stock's layout (css/pages/stock.css and
   stock-studio.css): the type strip, the tree rail, the slab cards, the flat
   tables. What is here is only what Stock carries as inline `style` and this
   page may not (memory.md §14). */
.csg-studio .slab-card__img { width: 100%; height: 130px; border: 0; border-radius: 5px 5px 0 0; }
.csg-studio .slab-card__price .subtle { font-weight: 400; }
.csg-studio .card { margin-bottom: 16px; }
.csg-studio .toolbar { border-radius: 0; }
.csg-studio .slab-detail__acts { display: flex; gap: 8px; flex-wrap: nowrap; align-items: stretch; }
.csg-studio a.main, .csg-studio a.sku { cursor: pointer; }
.csg-studio a.sku { font-weight: 600; color: var(--color-primary-700); }
.csg-studio .price-strong { font-weight: 600; }
.csg-so-photo { width: 100%; height: 220px; object-fit: cover; border-radius: 5px; display: block; margin-bottom: 14px; }
.csg-table--so-inv th.col-inv    { width: 24%; }
.csg-table--so-inv th.col-slabs  { width: 40%; }
.csg-table--so-inv th.col-status { width: 18%; }
.csg-table--so-inv th.col-total  { width: 18%; }
.csg-table--so-mov th.col-move   { width: 24%; }
.csg-table--so-mov th.col-route  { width: 54%; }
.csg-table--so-mov th.col-status { width: 22%; }

/* ---------- The record header ----------------------------------------------------
   Crumb, the name with its status, a row of settable fields each with its pencil,
   and the actions top-right. Same shape as order.html's header, said under this
   module's names because order-detail.css belongs to that page. */
.csg-head > :first-child { flex: 1 1 0; min-width: 0; }
.csg-crumb { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; color: var(--color-text-subtle); }
.csg-crumb a { color: var(--color-text-muted); text-decoration: none; }
.csg-crumb a:hover { color: var(--color-primary-700); }
.csg-crumb svg { width: 12px; height: 12px; }
.csg-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.csg-status { font-size: 14px; padding: 5px 12px; }
.csg-status .dot { width: 7px; height: 7px; }
.csg-fields { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 6px; }
.csg-fields .ord-reading { font-size: 12px; }
.csg-field {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; cursor: pointer; text-align: left;
  padding: 2px 6px; margin-left: -6px;
  font: inherit; font-size: 12px; color: inherit; text-decoration: none;
}
.csg-field:hover { border-color: var(--color-border); background: var(--color-surface); color: inherit; }
.csg-field svg { width: 12px; height: 12px; flex: none; color: var(--color-text-subtle); }
.csg-head .page-actions .icon-btn { height: auto; }

/* The path a move walks, and the suggested next step closing the row. */
.csg-path-block { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin-bottom: var(--page-gap); }
.csg-path-block .ord-path { flex: 1 1 auto; min-width: 0; }
.csg-next { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.csg-next svg { width: 14px; height: 14px; flex: none; }
.csg-next strong { color: var(--color-warn-ink); font-weight: 600; }

/* ---------- The figure bar --------------------------------------------------------
   One box, a hairline between readings, the number leading and the word under it
   (memory.md §6). 25px under it, the gap every box above an attached strip takes. */
.csg-stats {
  display: flex; flex-wrap: wrap; align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 25px; overflow: hidden;
}
.csg-stat {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 8px 14px; box-shadow: -1px 0 0 0 var(--color-border);
}
.csg-stat .v { font-size: 15px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.csg-stat .l { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.csg-stat .s { font-size: 11px; color: var(--color-text-subtle); white-space: nowrap; }
.csg-stat--due .v { color: var(--color-warn-ink); }
.csg-stat--bad .v { color: var(--color-danger-ink); }
.csg-stat--ok .v  { color: var(--color-success-ink); }
.csg-stat--gauge { flex: 1 1 240px; min-width: 0; }
.csg-stat--gauge .ord-fill { max-width: none; width: 100%; }

/* Card heads: the name, a reading under it, the actions as one group that wraps. */
.csg-card-head { gap: 12px; flex-wrap: wrap; }
.csg-card-head > div:first-child { min-width: 0; }
.csg-card-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Sections inside one card ------------------------------------------------
   The agreement, the placement and a move read as ONE card with dividers between
   its sections, the label and its description inside the card body. */
.csg-sec { padding: 18px 0; border-top: 1px solid var(--color-border); }
.csg-sec:first-child { border-top: 0; padding-top: 4px; }
.csg-sec:last-child { padding-bottom: 4px; }
.csg-sec__head { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 3px; margin-bottom: 12px; }
.csg-sec__head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.csg-sec__head p { grid-column: 2; margin: 0; font-size: 12px; color: var(--color-text-muted); max-width: 72ch; }
.csg-sec__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
}
.csg-sec.is-done .csg-sec__num { background: var(--color-success-50); border-color: var(--color-success); color: var(--color-success-ink); }

/* Form rows: content-sized fields, several on one row, 14px between rows and
   5px between a label and its control (memory: form rows need room; §9). */
.csg-form { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; }
.csg-form .field { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.csg-form .field label { margin: 0; }
.csg-form .field .hint { font-size: 12px; color: var(--color-text-subtle); }
.csg-w-xs { width: 110px; }
.csg-w-sm { width: 150px; }
.csg-w-md { width: 220px; }
.csg-w-lg { width: 320px; }
.csg-w-xl { width: 440px; max-width: 100%; }

/* A setting row: [switch] [label] [value], read left to right, nothing pushed to
   the far edge (memory.md §5, §16). Two across, the label column sized to its
   words so the value lands right after them. */
.csg-settings { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 14px 48px; }
.csg-setting { display: grid; grid-template-columns: 34px max-content max-content; column-gap: 10px; align-items: center; }
.csg-setting .switch { margin: 0; }
.csg-setting__label { font-size: 13px; color: var(--color-text); }
.csg-setting__label .hint { display: block; font-size: 11px; color: var(--color-text-subtle); }
.csg-setting__value { display: inline-flex; align-items: center; gap: 6px; }
.csg-setting__value[hidden] { display: none; }

/* ---------- Option tiles -------------------------------------------------------------
   A choice with two or three real answers, each a tile on the control ground with
   its own sentence. Nothing is chosen until the user picks (memory: show the
   options, never preselect); the chosen tile takes the primary border. */
.csg-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-width: 760px; }
.csg-option {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--color-control); border: 1px solid var(--color-control-border);
  font: inherit; color: var(--color-text); cursor: pointer;
}
.csg-option:hover { border-color: var(--color-border-strong); }
.csg-option.is-chosen { border-color: var(--color-primary); background: var(--color-primary-50); }
.csg-option svg { width: 18px; height: 18px; flex: none; color: var(--color-text-muted); margin-top: 1px; }
.csg-option.is-chosen svg { color: var(--color-primary); }
.csg-option .t { display: block; font-size: 13px; font-weight: 600; }
.csg-option .d { display: block; margin-top: 2px; font-size: 12px; color: var(--color-text-muted); }
.csg-options--modes { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); max-width: 900px; }

/* ---------- Notes and banners ----------------------------------------------------------
   A sentence on the control ground with an icon: the reading a step leaves behind
   ("Delivery Note DN-CSG-0023 will be generated"). Warn ink for what is waiting. */
.csg-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--color-control); border: 1px solid var(--color-control-border);
  font-size: 12px; color: var(--color-text-muted); max-width: 760px;
}
.csg-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.csg-note strong { color: var(--color-text); font-weight: 600; }
.csg-note--warn { background: var(--color-warn-50); border-color: var(--color-warn); color: var(--color-warn-ink); }
.csg-note--warn strong { color: var(--color-warn-ink); }
.csg-note[hidden] { display: none; }
.csg-banner { margin-bottom: var(--page-gap); max-width: none; align-items: center; flex-wrap: wrap; }
.csg-banner > span { flex: 1 1 320px; }
.csg-banner .btn { flex: none; }

/* The scan field: a wide input with the scan icon, for slab labels. */
.csg-scan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.csg-scan .search { width: 320px; max-width: 100%; }

/* The selection summary under a slab picker: count first, then the words (§6). */
.csg-tally { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; font-size: 13px; color: var(--color-text-muted); }
.csg-tally strong { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Spacing inside a section: a block that follows a form row or a note, and a
   small heading over a table inside a section. A table sitting straight in a
   card section already has the section's padding and takes no inset (§20). */
.csg-gap-top { margin-top: 14px; }
.csg-h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.csg-inset-0 { padding-inline: 0; }
.csg-table--overrides th.col-slab  { width: 14%; }
.csg-table--overrides th.col-mat   { width: 24%; }
.csg-table--overrides th.col-list  { width: 14%; }
.csg-table--overrides th.col-note  { width: 34%; }
.csg-table--overrides th.col-price { width: 14%; }

/* A checklist of slabs inside a dialog: each slab a small box on the control
   ground, packed as many to a row as fit. */
.csg-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; max-height: 260px; overflow: auto; }
.csg-check {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 10px; border-radius: var(--radius);
  background: var(--color-control); border: 1px solid var(--color-control-border);
  font-size: 13px; cursor: pointer;
}
.csg-check .subtle { font-size: 11px; }

/* Page footer actions for a form page. */
.csg-form-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--color-border); margin-top: 4px; }
.csg-form-foot .spacer { flex: 1; }

/* ---------- Bars for reports --------------------------------------------------------------
   A value as a bar: the track on the control ground and the level as an SVG rect
   whose width IS the percentage (no inline style, §14). Label right, bar, figure. */
.csg-bars { display: grid; grid-template-columns: max-content minmax(120px, 1fr) max-content; gap: 8px 12px; align-items: center; font-size: 13px; }
.csg-bars__label { text-align: right; color: var(--color-text); white-space: nowrap; }
.csg-bars__bar { display: block; width: 100%; height: 8px; border-radius: 5px; overflow: hidden; background: var(--color-control); }
.csg-bars__level { fill: var(--color-primary); }
.csg-bars__level.warn { fill: var(--color-warn); }
.csg-bars__level.danger { fill: var(--color-danger); }
.csg-bars__level.ok { fill: var(--color-success); }
.csg-bars__fig { color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.csg-bars__fig .subtle { font-size: 11px; margin-left: 4px; }

/* Aging: four buckets stacked in one bar per consignee. */
.csg-stack { display: block; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; background: var(--color-control); }
.csg-stack .b1 { fill: var(--color-success); }
.csg-stack .b2 { fill: var(--color-primary); }
.csg-stack .b3 { fill: var(--color-warn); }
.csg-stack .b4 { fill: var(--color-danger); }
.csg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--color-text-muted); margin-top: 10px; }
.csg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.csg-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.csg-legend .b1 { background: var(--color-success); }
.csg-legend .b2 { background: var(--color-primary); }
.csg-legend .b3 { background: var(--color-warn); }
.csg-legend .b4 { background: var(--color-danger); }

/* A report inside the hub's shell: a heading, a line under it, the figure.
   Sections, not boxes — the shell is the one white panel (memory.md §13, §17). */
.csg-report { min-width: 0; }
.csg-report h3 { margin: 0; font-size: 15px; font-weight: 600; }
.csg-report .sub { margin: 2px 0 14px; font-size: 12px; color: var(--color-text-muted); }
.csg-report--wide { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.csg-report__head { display: flex; align-items: flex-start; justify-content: flex-start; }
.csg-report__head > div:first-child { flex: 1 1 auto; }
.csg-grid-2 .csg-report { padding-bottom: 6px; }
.tab-shell > .csg-grid-2 { row-gap: 30px; column-gap: 40px; }
.csg-table--movement th.col-who   { width: 30%; }
.csg-table--movement th.col-n     { width: 14%; }
.csg-table--movement th.col-close { width: 14%; }
.csg-table--slow th.col-slab  { width: 18%; }
.csg-table--slow th.col-mat   { width: 20%; }
.csg-table--slow th.col-who   { width: 20%; }
.csg-table--slow th.col-days  { width: 8%; }
.csg-table--slow th.col-next  { width: 22%; }
.csg-table--slow th.col-price { width: 12%; }

/* Two cards side by side on the reports and move pages; one column on a phone. */
.csg-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--page-gap); }
.csg-grid-2 > .card { margin: 0; }
.csg-grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--page-gap); align-items: start; }
.csg-grid-main > * { min-width: 0; }
.csg-grid-main .card { margin: 0; }
.csg-stack-gap { display: flex; flex-direction: column; gap: var(--page-gap); }

/* ---------- Count detail ---------------------------------------------------------------------
   Expected against counted, one row per slab, the variance as a word with its
   dot; the confirmations as two readings, consignee and consignor. */
.csg-confirm { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.csg-confirm span { display: inline-flex; align-items: center; gap: 6px; }
.csg-confirm svg { width: 15px; height: 15px; }
.csg-confirm .is-yes { color: var(--color-success-ink); }
.csg-confirm .is-no { color: var(--color-warn-ink); }

/* ---------- The consignee portal --------------------------------------------------------------
   No sidebar, no portal header: the consignor's name, who the page is for, and the
   platform's mark (order-share.css's strip). One list of slabs; each slab has
   exactly one action, Mark Sold. Cards, because the consignee marks sold from a
   phone in its own yard. */
.csg-portal { max-width: 1100px; margin: 0 auto; padding: 22px 20px 40px; display: flex; flex-direction: column; gap: var(--page-gap); }
.csg-portal__hero h1 { margin: 0 0 4px; font-size: 22px; }
.csg-portal__hero p { margin: 0; font-size: 13px; color: var(--color-text-muted); max-width: 70ch; }
.csg-portal__figs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 13px; color: var(--color-text-muted); }
.csg-portal__figs b { color: var(--color-text); font-weight: 600; margin-right: 5px; font-variant-numeric: tabular-nums; }
.csg-slabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.csg-slab {
  display: flex; flex-direction: column;
  background: var(--color-control); border: 1px solid var(--color-control-border);
  border-radius: var(--radius); overflow: hidden;
}
.csg-slab img { width: 100%; height: 130px; object-fit: cover; display: block; }
.csg-slab__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.csg-slab__id { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.csg-slab__name { font-size: 14px; font-weight: 600; color: var(--color-text); }
.csg-slab__spec { font-size: 12px; color: var(--color-text-muted); }
.csg-slab__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.csg-slab__price { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.csg-slab__foot .btn { margin-left: auto; }
.csg-slab.is-sold { opacity: .78; }
.csg-slab.is-sold img { filter: grayscale(.6); }
.csg-slab[hidden] { display: none; }
.csg-portal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.csg-portal-toolbar .search { width: 280px; max-width: 100%; }

/* ---------- Narrow screens ---------------------------------------------------------------------
   Registers keep their table and scroll inside their wrap; the record header,
   the forms and the two-column layouts stack; touch targets reach 44px. */
@media (max-width: 1100px) {
  .csg-grid-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .csg-settings { grid-template-columns: minmax(0, 1fr); }
  .csg-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .csg-table { min-width: 760px; }
}
@media (max-width: 768px) {
  .csg-w-lg, .csg-w-xl, .csg-w-md { width: 100%; }
  .csg-form .field { flex: 1 1 100%; }
  .csg-slab .btn, .csg-form-foot .btn, .csg-option { min-height: 44px; }
  .csg-bars { grid-template-columns: minmax(0, 1fr) max-content; }
  .csg-bars__label { grid-column: 1 / -1; text-align: left; }
  .csg-stats .csg-stat { flex: 1 1 45%; }
  .csg-portal { padding: 16px 14px 32px; }
}
@media (max-width: 480px) {
  .csg-setting { grid-template-columns: 34px minmax(0, 1fr); }
  .csg-setting__value { grid-column: 2; }
  .csg-slabs { grid-template-columns: minmax(0, 1fr); }
}