/* ============================================================================
   POS SHELL - top bar + full-width mega menu
   Direction 04 from the navigation study: modules run horizontally, each opens
   a full-width panel of its pages in columns, and the grid gets the whole
   viewport width instead of losing 300px to a sidebar.

   Colours come from _content/SARP.DesignSystem/sarp-tokens.css. No literals.
   ========================================================================= */

.pos-shell { min-height: 100vh; background: var(--sarp-page); }

/* ── Top bar ────────────────────────────────────────────────────────────── */

.pos-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sarp-s4);
  height: var(--sarp-topbar-h);
  padding: 0 var(--sarp-s4);
  background: var(--sarp-chrome);
  box-shadow: var(--sarp-e2);
}

/* Brand mark - the four-pane COSMOSOFT square, shared with HRMC. */
.pos-brand {
  display: flex;
  align-items: center;
  gap: var(--sarp-s3);
  flex: 0 0 auto;
  color: var(--sarp-chrome-text);
  text-decoration: none;
}
.pos-brand-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 34px;
  height: 34px;
  padding: 3px;
  border-radius: var(--sarp-r-control);
  background: var(--sarp-n-0);
  box-shadow: var(--sarp-e1);
}
.pos-brand-mark i { display: block; }
.pos-brand-mark i:nth-child(1) { background: var(--sarp-n-800); border-radius: 3px 0 0 0; }
.pos-brand-mark i:nth-child(2) { background: var(--sarp-n-600); border-radius: 0 3px 0 0; }
.pos-brand-mark i:nth-child(3) { background: var(--sarp-n-900); border-radius: 0 0 0 3px; }
.pos-brand-mark i:nth-child(4) { background: var(--sarp-n-500); border-radius: 0 0 3px 0; }
.pos-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.pos-brand-text strong { font-size: 13px; font-weight: var(--sarp-fw-bold); letter-spacing: .04em; }
.pos-brand-text small  { font-size: var(--sarp-fs-eyebrow); color: var(--sarp-chrome-faint); margin-top: 2px; }

/* ── Top bar right: page search, account, sign out ──────────────────────── */

.pos-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sarp-s3);
  flex: 0 0 auto;
  margin-left: auto;
}

.pos-search {
  position: relative;
  width: 210px;
}
.pos-search input {
  width: 100%;
  height: 30px;
  padding: 0 var(--sarp-s3) 0 30px;
  border: 1px solid transparent;
  border-radius: var(--sarp-r-control);
  background: var(--sarp-chrome-hover);
  color: var(--sarp-chrome-text);
  font-size: var(--sarp-fs-data);
}
.pos-search input::placeholder { color: var(--sarp-chrome-faint); }
.pos-search input:focus {
  background: var(--sarp-n-0);
  color: var(--sarp-text);
  border-color: var(--sarp-n-0);
  outline: none;
  box-shadow: none;
}
.pos-search input:focus::placeholder { color: var(--sarp-text-faint); }
.pos-search .material-symbols-outlined {
  position: absolute;
  left: var(--sarp-s2);
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: var(--sarp-chrome-faint);
  pointer-events: none;
}
.pos-search input:focus + .material-symbols-outlined { color: var(--sarp-text-faint); }

/* Result list for the page search - the old header input was decorative. */
.pos-search-results {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  z-index: 45;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--sarp-s1) 0;
  background: var(--sarp-surface);
  border: 1px solid var(--sarp-border);
  border-radius: var(--sarp-r-control);
  box-shadow: var(--sarp-e2);
}
.pos-search-results button {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 6px var(--sarp-s3);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.pos-search-results button:hover,
.pos-search-results button:focus-visible { background: var(--sarp-action-tint); }
.pos-search-results strong { font-size: var(--sarp-fs-body); font-weight: var(--sarp-fw-semi); color: var(--sarp-text-strong); }
.pos-search-results small  { font-size: var(--sarp-fs-caption); color: var(--sarp-text-faint); }
.pos-search-empty { padding: var(--sarp-s3); font-size: var(--sarp-fs-caption); color: var(--sarp-text-faint); }

.pos-account { display: flex; align-items: center; gap: var(--sarp-s2); min-width: 0; }
.pos-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--sarp-brand-tint);
  color: var(--sarp-action);
  font-size: var(--sarp-fs-caption);
  font-weight: var(--sarp-fw-bold);
}
.pos-account-name { display: flex; flex-direction: column; line-height: 1.15; max-width: 130px; }
.pos-account-name strong { font-size: var(--sarp-fs-label); font-weight: var(--sarp-fw-semi); color: var(--sarp-chrome-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-account-name small  { font-size: var(--sarp-fs-eyebrow); color: var(--sarp-chrome-faint); }

.pos-logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 var(--sarp-s3);
  border: 1px solid var(--sarp-chrome-faint);
  border-radius: var(--sarp-r-control);
  color: var(--sarp-chrome-text);
  font-size: var(--sarp-fs-label);
  font-weight: var(--sarp-fw-semi);
  text-decoration: none;
  white-space: nowrap;
}
.pos-logout:hover { background: var(--sarp-n-0); color: var(--sarp-action); border-color: var(--sarp-n-0); }
.pos-logout .material-symbols-outlined { font-size: 15px; }

/* ── Page hero ──────────────────────────────────────────────────────────
   One banner per page, carrying the page name and what the page is for. */

.pos-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sarp-s5);
  padding: var(--sarp-s5) var(--sarp-s5);
  margin-bottom: var(--sarp-s4);
  border-radius: var(--sarp-r-surface);
  background: linear-gradient(100deg, var(--sarp-brand-pressed), var(--sarp-brand));
  color: var(--sarp-n-0);
  box-shadow: var(--sarp-e1);
}
.pos-hero h1 { margin: 0; font-size: 26px; font-weight: var(--sarp-fw-bold); letter-spacing: var(--sarp-ls-title); color: var(--sarp-n-0); }
.pos-hero p  { margin: var(--sarp-s2) 0 0; font-size: var(--sarp-fs-body); color: var(--sarp-brand-tint); max-width: 70ch; }
.pos-hero .sarp-eyebrow { color: var(--sarp-brand-edge); margin-bottom: var(--sarp-s1); }
.pos-hero-actions { display: flex; gap: var(--sarp-s2); flex: 0 0 auto; }
.pos-hero-actions .sarp-btn-primary {
  background: var(--sarp-n-0);
  color: var(--sarp-action);
}
.pos-hero-actions .sarp-btn-primary:hover { background: var(--sarp-brand-tint); }

/* ── Page body ──────────────────────────────────────────────────────────── */

.pos-body {
  max-width: var(--sarp-content-max);
  margin: 0 auto;
  padding: var(--sarp-s4) var(--sarp-s5) var(--sarp-s6);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1240px) {
  .pos-search { width: 170px; }
  .pos-account-name { display: none; }
}

@media (max-width: 1100px) {
  .pos-topbar { flex-wrap: wrap; height: auto; padding: var(--sarp-s2) var(--sarp-s3); }
  .pos-body { padding: var(--sarp-s3); }
  .pos-hero { flex-direction: column; align-items: flex-start; gap: var(--sarp-s3); }
}


@media (max-width: 640px) {
  .pos-search { display: none; }
  .pos-brand-text { display: none; }
  .pos-hero { padding: var(--sarp-s4); }
  .pos-hero h1 { font-size: 20px; }
}

@media print {
  .pos-topbar, .pos-hero-actions { display: none !important; }
  .pos-body { padding: 0; max-width: none; }
}

/* ============================================================================
   MODULE RAIL SHELL
   ----------------------------------------------------------------------------
   Replaces the horizontal mega bar. The bar had to hold seven module labels, a
   search field and the account block on one row, which is why it carried no
   icons and why every module opened a full-width hover panel. A vertical rail
   gives each module a permanent, glanceable home and lets a group expand in
   place, so the operator never loses their position.

   Everything is token-driven, so the whole shell re-skins with the palette.
   ========================================================================== */

.pos-shell {
  --pos-rail: 248px;
  display: grid;
  grid-template-columns: var(--pos-rail) minmax(0, 1fr);
  /* minmax(0,1fr), not 1fr: a bare 1fr floors at min-content, so a tall page
     would still stretch the row and defeat the height cap below. */
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "rail topbar"
    "rail body";
  height: 100vh;
  height: 100dvh;   /* dvh so mobile browser chrome does not clip the rail */
  overflow: hidden; /* the two panes scroll, the shell never does */
  background: var(--sarp-page);
}

/* Visible, self-coloured scrollbar. The default overlay bar fades out and is
   invisible on a touch screen until you already know to swipe - which is how
   the lower half of the rail came to look unreachable. */
.pos-shell .pos-sidebar { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 32%) transparent; }
.pos-shell .pos-sidebar::-webkit-scrollbar { width: 10px; }
.pos-shell .pos-sidebar::-webkit-scrollbar-track { background: rgb(0 0 0 / 16%); }
.pos-shell .pos-sidebar::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 30%);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 6px;
}
.pos-shell .pos-sidebar::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 46%); background-clip: padding-box; }

/* ── Rail ───────────────────────────────────────────────────────────────── */
.pos-shell .pos-sidebar {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sarp-chrome);
  color: var(--sarp-chrome-text);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pos-shell .pos-brand {
  display: flex;
  align-items: center;
  gap: var(--sarp-s3);
  padding: var(--sarp-s4) var(--sarp-s4);
  color: var(--sarp-chrome-text);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}
.pos-shell .pos-brand-text { display: flex; flex-direction: column; min-width: 0; }
.pos-shell .pos-brand-text strong { font-size: var(--sarp-fs-body); letter-spacing: .02em; }
.pos-shell .pos-brand-text small  { font-size: var(--sarp-fs-caption); color: var(--sarp-chrome-faint); }

/* Hierarchy is carried by four devices, not indentation alone - a flat list of
   indented text still reads as one list however far it is pushed:

     1. an indent rail - a hairline dropped from under the parent's icon and run
        down the children, so the subtree visibly hangs off its parent
     2. a recessed ground behind an open group, so it reads as one block
     3. size and weight - parents a step larger and heavier than children
     4. two distinct active states - a child that IS the page (filled pill,
        bright marker) versus a parent that CONTAINS it (tinted, no pill)

   The previous rule set styled .pos-nav-item, .pos-nav-pin and .pos-nav-link
   together, which is why all three levels looked identical. They are now
   separate on purpose. */

.pos-shell .pos-nav { display: flex; flex-direction: column; padding: var(--sarp-s3) 0 var(--sarp-s6); }

.pos-shell .pos-nav-label {
  padding: var(--sarp-s4) var(--sarp-s4) var(--sarp-s2);
  font-size: var(--sarp-fs-eyebrow);
  letter-spacing: var(--sarp-ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--sarp-fw-bold);
  color: var(--sarp-chrome-faint);
}
.pos-shell .pos-nav-divider {
  height: 1px; margin: var(--sarp-s3) var(--sarp-s4);
  background: rgb(255 255 255 / 15%);
}

/* ---- quick access -------------------------------------------------------
   Deliberately a different shape from a module row: no icon column, smaller
   glyph, tighter. A shortcut must not be mistaken for a section. */
.pos-shell .pos-nav-pin {
  display: flex; align-items: center; gap: var(--sarp-s2);
  min-height: 34px;
  padding: 0 var(--sarp-s4);
  border: 0; border-left: 3px solid transparent;
  background: none;
  color: var(--sarp-chrome-text); text-decoration: none;
  font: inherit; font-size: var(--sarp-fs-body); font-weight: var(--sarp-fw-medium);
  opacity: .9;
  transition: background var(--sarp-motion, 140ms ease);
}
.pos-shell .pos-nav-pin .material-symbols-outlined { font-size: 17px; opacity: .55; flex: 0 0 auto; }
.pos-shell .pos-nav-pin:not(.is-active):hover { background: rgb(255 255 255 / 10%); opacity: 1; }
.pos-shell .pos-nav-pin.is-active {
  background: rgb(255 255 255 / 15%);
  border-left-color: var(--sarp-brand-edge);
  font-weight: var(--sarp-fw-semi); opacity: 1;
}
.pos-shell .pos-nav-pin.is-active .material-symbols-outlined { opacity: 1; color: var(--sarp-brand-edge); }

/* ---- module row (direct link or group summary) --------------------------- */
.pos-shell .pos-nav-item {
  display: flex; align-items: center; gap: var(--sarp-s3);
  width: 100%; box-sizing: border-box;
  min-height: 42px;
  padding: 0 var(--sarp-s3) 0 var(--sarp-s4);
  border: 0; border-left: 3px solid transparent;
  background: none;
  color: var(--sarp-chrome-text);
  font: inherit;
  font-size: var(--sarp-fs-section);
  font-weight: var(--sarp-fw-semi);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--sarp-motion, 140ms ease), border-color var(--sarp-motion, 140ms ease);
}
.pos-shell .pos-nav-item .material-symbols-outlined {
  font-size: 21px; opacity: .8; flex: 0 0 22px; text-align: center;
}
.pos-shell .pos-nav-text { flex: 1 1 auto; min-width: 0; }
.pos-shell .pos-nav-item:not(.is-active):hover { background: rgb(255 255 255 / 10%); }

/* a direct-link module that IS the page */
.pos-shell .pos-nav-item.is-active {
  background: rgb(255 255 255 / 16%);
  border-left-color: var(--sarp-brand-edge);
}
.pos-shell .pos-nav-item.is-active .material-symbols-outlined { opacity: 1; color: var(--sarp-brand-edge); }

/* ---- groups -------------------------------------------------------------
   <details> carries its own open state, so a reconnecting circuit cannot
   collapse the operator's menu underneath them. */
.pos-shell .pos-nav-group > summary { list-style: none; }
.pos-shell .pos-nav-group > summary::-webkit-details-marker { display: none; }
.pos-shell .pos-nav-group > summary .caret {
  margin-left: auto; font-size: 20px; opacity: .6; flex: 0 0 20px;
  transition: transform var(--sarp-motion, 140ms ease);
}
.pos-shell .pos-nav-group[open] > summary .caret { transform: rotate(180deg); opacity: .9; }

/* a group that CONTAINS the current page: tinted with a marker, but no pill -
   that distinction is what says "you are inside Counter, on Sales Invoice"
   rather than showing two rows that look equally selected. */
.pos-shell .pos-nav-group.has-active > .pos-nav-item,
.pos-shell .pos-nav-group.has-active > .pos-nav-item:hover {
  background: rgb(255 255 255 / 10%);
  border-left-color: var(--sarp-brand-edge);
}
.pos-shell .pos-nav-group.has-active > .pos-nav-item .material-symbols-outlined:first-child {
  opacity: 1; color: var(--sarp-brand-edge);
}

/* recessed ground + the indent rail dropped from under the parent's icon */
.pos-shell .pos-nav-sub {
  position: relative;
  padding: var(--sarp-s2) 0 var(--sarp-s3);
  background: rgb(0 0 0 / 17%);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 14%), inset 0 -1px 0 rgb(255 255 255 / 5%);
}
.pos-shell .pos-nav-sub::before {
  content: "";
  position: absolute;
  top: var(--sarp-s2); bottom: var(--sarp-s3);
  /* 16px rail padding + 3px active border + half the 22px icon column */
  left: 30px;
  width: 1px;
  background: rgb(255 255 255 / 22%);
}

.pos-shell .pos-nav-section {
  padding: var(--sarp-s3) var(--sarp-s4) var(--sarp-s1) 46px;
  font-size: var(--sarp-fs-eyebrow);
  letter-spacing: var(--sarp-ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--sarp-fw-bold);
  color: var(--sarp-brand-edge);
}
.pos-shell .pos-nav-section:first-child { padding-top: 0; }

/* child page */
.pos-shell .pos-nav-link {
  position: relative;
  display: flex; align-items: center;
  min-height: 36px;
  margin: 1px var(--sarp-s3) 1px 38px;
  padding: 0 var(--sarp-s3);
  border: 0; border-radius: var(--sarp-r-control);
  background: none;
  color: var(--sarp-chrome-text); text-decoration: none;
  font: inherit; font-size: var(--sarp-fs-body); font-weight: var(--sarp-fw-regular);
  opacity: .82;
  transition: background var(--sarp-motion, 140ms ease), opacity var(--sarp-motion, 140ms ease);
}
/* tick joining the child to the rail, so the eye can follow the line */
.pos-shell .pos-nav-link::before {
  content: "";
  position: absolute; left: -8px; top: 50%;
  width: 8px; height: 1px;
  background: rgb(255 255 255 / 22%);
}
.pos-shell .pos-nav-link:not(.is-active):hover { background: rgb(255 255 255 / 11%); opacity: 1; }

/* the current page - the one filled pill in the whole rail */
.pos-shell .pos-nav-link.is-active {
  background: var(--sarp-n-0);
  color: var(--sarp-action);
  font-weight: var(--sarp-fw-semi);
  opacity: 1;
  box-shadow: var(--sarp-e1);
}
.pos-shell .pos-nav-link.is-active::before { background: var(--sarp-brand-edge); height: 2px; }

/* The global focus ring is --sarp-action, which is a dark colour sitting on the
   dark rail: measured 1.69-2.05:1 across the six palettes, so a keyboard
   operator could not see where they were. --sarp-brand-edge is the light accent
   already used for the active marker and clears 3:1 in every palette. */
.pos-shell .pos-sidebar :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--sarp-brand-edge);
  box-shadow: none;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────
   The rail owns identity now, so the bar carries only session controls and can
   be a light surface. */
.pos-shell .pos-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--sarp-s3);
  min-height: 58px;
  padding: 0 var(--sarp-s4);
  background: var(--sarp-surface);
  border-bottom: 1px solid var(--sarp-border);
}
.pos-shell .pos-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sarp-s3);
  margin-left: auto;
  min-width: 0;
}
.pos-shell .pos-nav-toggle { display: none; }

/* Controls were coloured for the old dark bar; on a light surface they need
   surface colours. */
.pos-shell .pos-topbar .pos-search input {
  height: 34px;
  box-sizing: border-box;
  padding-left: 32px;
  background: var(--sarp-surface-sunk);
  color: var(--sarp-text);
  border: 1px solid var(--sarp-border-input);
}
.pos-shell .pos-topbar .pos-search input::placeholder { color: var(--sarp-text-faint); }
.pos-shell .pos-topbar .pos-search .material-symbols-outlined { color: var(--sarp-text-muted); }
.pos-shell .pos-topbar .pos-avatar { background: var(--sarp-action-tint); color: var(--sarp-action-on-tint); }
.pos-shell .pos-topbar .pos-account-name strong { color: var(--sarp-text); }
.pos-shell .pos-topbar .pos-account-name small  { color: var(--sarp-text-faint); }
.pos-shell .pos-topbar .pos-logout {
  background: var(--sarp-action);
  color: var(--sarp-action-text);
  border: 1px solid var(--sarp-action);
}
.pos-shell .pos-topbar .pos-logout:hover {
  background: var(--sarp-action-hover);
  border-color: var(--sarp-action-hover);
  color: var(--sarp-action-text);
}

/* ── Body ───────────────────────────────────────────────────────────────────
   margin:0 auto on a grid item shrink-wraps it to content rather than
   stretching, which collapsed the page to the width of its widest tile. */
.pos-shell .pos-body {
  grid-area: body;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  max-width: none;
  justify-self: stretch;
  padding: var(--sarp-s4) var(--sarp-s5) var(--sarp-s6);
}

.pos-shell .pos-scrim { display: none; }

/* ── Off-canvas below 1100px ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pos-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topbar" "body";
  }
  .pos-shell .pos-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(84vw, var(--pos-rail));
    z-index: 1400;
    transform: translateX(-100%);
    transition: transform var(--sarp-motion, 140ms ease);
  }
  .pos-shell.is-nav-open .pos-sidebar {
    transform: translateX(0);
    box-shadow: 12px 0 34px var(--sarp-shadow);
  }
  .pos-shell.is-nav-open .pos-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 1390;
    background: var(--sarp-scrim);
  }
  .pos-shell .pos-nav-toggle {
    display: grid;
    place-items: center;
    width: 38px; height: 36px;
    border: 0; border-radius: var(--sarp-r-control);
    background: var(--sarp-action-tint);
    color: var(--sarp-action-on-tint);
    cursor: pointer;
  }
  .pos-shell .pos-body { padding: var(--sarp-s3) var(--sarp-s4) var(--sarp-s5); }
}

@media (max-width: 720px) {
  .pos-shell .pos-topbar .pos-search { display: none; }
  .pos-shell .pos-topbar .pos-account-name { display: none; }
  .pos-shell .pos-body { padding: var(--sarp-s3); }
}


/* ── Appearance drawer ──────────────────────────────────────────────────────
   Right-hand panel, same pattern as the HRMC workspace: preview instantly,
   then keep it. Everything is token-driven, so the drawer re-skins itself as
   the user clicks through the palettes. */
.pos-icon-button {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--sarp-border);
  border-radius: 999px;
  background: var(--sarp-action-tint);
  color: var(--sarp-action-on-tint);
  cursor: pointer;
  transition: background var(--sarp-motion, 140ms ease), border-color var(--sarp-motion, 140ms ease);
}
.pos-icon-button:hover { background: var(--sarp-action); color: var(--sarp-action-text); border-color: var(--sarp-action); }
.pos-icon-button .material-symbols-outlined { font-size: 19px; }

.pos-drawer-scrim {
  position: fixed; inset: 0; z-index: 1300;
  background: var(--sarp-scrim);
}
.pos-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1310;
  width: min(92vw, 420px);
  display: flex; flex-direction: column;
  background: var(--sarp-surface);
  border-left: 1px solid var(--sarp-border);
  box-shadow: -18px 0 44px var(--sarp-shadow);
  overflow-y: auto;
}

.pos-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sarp-s3);
  padding: var(--sarp-s5) var(--sarp-s5) var(--sarp-s4);
  border-bottom: 1px solid var(--sarp-border);
}
.pos-drawer-eyebrow {
  display: block;
  font-size: var(--sarp-fs-eyebrow); letter-spacing: var(--sarp-ls-eyebrow);
  text-transform: uppercase; font-weight: 700; color: var(--sarp-action);
}
.pos-drawer-head h2 { margin: var(--sarp-s1) 0 0; font-size: var(--sarp-fs-page-title); color: var(--sarp-text-strong); }
.pos-drawer-head p  { margin: var(--sarp-s1) 0 0; font-size: var(--sarp-fs-data); color: var(--sarp-text-muted); }
.pos-drawer-close {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--sarp-border); border-radius: var(--sarp-r-control);
  background: var(--sarp-surface-sunk); color: var(--sarp-text-muted); cursor: pointer;
}
.pos-drawer-close:hover { background: var(--sarp-action-tint); color: var(--sarp-action-on-tint); }

.pos-palette-list { display: grid; gap: var(--sarp-s2); padding: var(--sarp-s4) var(--sarp-s5); }
.pos-palette {
  display: flex; align-items: center; gap: var(--sarp-s3);
  width: 100%; padding: var(--sarp-s3);
  border: 1px solid var(--sarp-border); border-radius: var(--sarp-r-surface);
  background: var(--sarp-surface); text-align: left; cursor: pointer; font: inherit;
  transition: border-color var(--sarp-motion, 140ms ease), background var(--sarp-motion, 140ms ease);
}
.pos-palette:hover { border-color: var(--sarp-action); }
.pos-palette.is-selected { border-color: var(--sarp-action); background: var(--sarp-action-tint); }

/* Three bands read as a workspace: rail, accent, page. */
.pos-palette-swatch {
  flex: 0 0 auto; width: 58px; height: 40px;
  display: grid; grid-template-columns: 18px 1fr; grid-template-rows: 1fr 1fr;
  border-radius: var(--sarp-r-control); overflow: hidden;
  border: 1px solid var(--sarp-border);
}
.pos-palette-swatch i:nth-child(1) { grid-row: 1 / 3; }
.pos-palette-swatch i:nth-child(2) { grid-column: 2; }
.pos-palette-swatch i:nth-child(3) { grid-column: 2; }

.pos-palette-copy { display: grid; gap: 2px; min-width: 0; }
.pos-palette-copy strong { font-size: var(--sarp-fs-body); color: var(--sarp-text-strong); }
.pos-palette-copy small  { font-size: var(--sarp-fs-caption); color: var(--sarp-text-muted); line-height: 1.4; }
.pos-palette-tick { margin-left: auto; color: var(--sarp-action); font-size: 20px; }

.pos-custom-row {
  display: flex; align-items: center; gap: var(--sarp-s3);
  margin: 0 var(--sarp-s5); padding: var(--sarp-s3);
  border: 1px solid var(--sarp-border); border-radius: var(--sarp-r-surface);
  background: var(--sarp-surface-sunk);
}
.pos-custom-row label { font-size: var(--sarp-fs-data); font-weight: 600; color: var(--sarp-text); }
.pos-custom-row input[type="color"] {
  width: 48px; height: 32px; padding: 0; cursor: pointer;
  border: 1px solid var(--sarp-border-input); border-radius: var(--sarp-r-control); background: none;
}
.pos-custom-row code { margin-left: auto; font-size: var(--sarp-fs-caption); color: var(--sarp-text-muted); }
.pos-custom-note {
  margin: var(--sarp-s2) var(--sarp-s5) 0;
  font-size: var(--sarp-fs-caption); color: var(--sarp-text-faint);
}

.pos-drawer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sarp-s3);
  margin-top: auto; padding: var(--sarp-s4) var(--sarp-s5);
  border-top: 1px solid var(--sarp-border);
}
.pos-drawer-reset {
  padding: var(--sarp-s2) var(--sarp-s3);
  border: 1px solid var(--sarp-border); border-radius: var(--sarp-r-control);
  background: var(--sarp-surface); color: var(--sarp-text); font: inherit;
  font-size: var(--sarp-fs-data); font-weight: 600; cursor: pointer;
}
.pos-drawer-reset:hover { background: var(--sarp-surface-sunk); }
.pos-drawer-save {
  display: inline-flex; align-items: center; gap: var(--sarp-s2);
  padding: var(--sarp-s2) var(--sarp-s4);
  border: 1px solid var(--sarp-action); border-radius: var(--sarp-r-control);
  background: var(--sarp-action); color: var(--sarp-action-text);
  font: inherit; font-size: var(--sarp-fs-data); font-weight: 700; cursor: pointer;
}
.pos-drawer-save:hover { background: var(--sarp-action-hover); border-color: var(--sarp-action-hover); }
.pos-drawer-save .material-symbols-outlined { font-size: 17px; }

@media (max-width: 520px) {
  .pos-drawer { width: 100vw; }
  .pos-drawer-foot { flex-direction: column-reverse; align-items: stretch; }
  .pos-drawer-save, .pos-drawer-reset { justify-content: center; text-align: center; }
}

/* ── Small-screen hardening ────────────────────────────────────────────────
   Grids and tables already collapse and scroll correctly. What was missing is
   the page furniture: a header laid out as a non-wrapping flex row sets a
   width floor and pushes the whole body into horizontal clipping. */
.pos-shell, .pos-shell .pos-body, .pos-shell .pos-body > * { min-width: 0; }
.pos-shell .pos-body :is(h1,h2,h3,p,td,th) { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  .pos-shell .pos-body :is(.page-head, .section-head, .toolbar, .filter-bar) {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sarp-s2);
  }
  .pos-shell .pos-body :is(.toolbar, .filter-bar, .button-row, .row-actions) {
    flex-wrap: wrap;
  }
  /* action groups go full width so they are reachable with a thumb */
  .pos-shell .pos-body :is(.page-head, .section-head) > :last-child:not(:first-child) {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sarp-s2);
  }
  .pos-shell .pos-body .sarp-card { padding: var(--sarp-s3); }
}

@media (max-width: 520px) {
  .pos-shell .pos-body :is(.stat-row, .metric-grid, .kpi-row) {
    grid-template-columns: 1fr !important;
  }
}