/* ==========================================================================
   Shamwari Guide PWA - app.css
   Design tokens ported from the Android theme (docs/pwa/android-inventory.md 2).
   Everything is here: tokens, shell, components, utilities. No build step.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand / core (light - inventory 2.1) */
  --sg-primary: #252B16;            /* PrimaryOlive */
  --sg-on-primary: #FBFAF6;         /* Ivory */
  --sg-secondary: #3E4A22;          /* RangerGreen */
  --sg-on-secondary: #FBFAF6;
  --sg-tertiary: #A6843A;           /* MutedGold */
  --sg-bg: #FBFAF6;                 /* Ivory */
  --sg-on-bg: #30351F;              /* DeepOliveText */
  --sg-surface: #FBF9F3;            /* Cream */
  --sg-on-surface: #20221A;         /* Charcoal */
  --sg-surface-variant: #F5F1E8;    /* WarmSand */
  --sg-border: #D8C89B;             /* SoftBorder */
  --sg-card-border: #D8C89B;
  --sg-canvas: #F5F1E8;
  --sg-text: #20221A;
  --sg-muted: #585844;              /* inkMuted */
  --sg-faint: #6A6853;              /* inkFaint (>= 4.5:1 on ivory) */

  /* Semantic (inventory 2.1 extended colours) */
  --sg-danger: #B7352E;
  --sg-on-danger: #FFFFFF;
  --sg-danger-container: #F4DAD6;
  --sg-on-danger-container: #7E241E;
  --sg-success: #4D6B35;
  --sg-success-container: #DCE7C7;
  --sg-on-success-container: #283F17;
  --sg-warning: #C18A2D;
  --sg-warning-container: #F6E6C6;
  --sg-on-warning-container: #573F0E;
  --sg-info: #5D6A62;               /* InfoSlate */
  --sg-info-container: #DCE3DD;
  --sg-on-info-container: #2A322C;
  --sg-pinned: #3E4A22;
  --sg-pinned-container: rgba(62, 74, 34, 0.16);
  --sg-error: #B7352E;

  /* App bar */
  --sg-appbar-bg: #252B16;
  --sg-on-appbar: #FBFAF6;

  /* Radii (inventory 2.3) */
  --sg-r-xs: 6px;
  --sg-r-sm: 10px;
  --sg-r-md: 14px;
  --sg-r-lg: 20px;
  --sg-r-xl: 28px;
  --sg-r-pill: 999px;

  /* Spacing (4dp scale, inventory 2.3) */
  --sg-s-xxs: 2px;
  --sg-s-xs: 4px;
  --sg-s-sm: 8px;
  --sg-s-md: 12px;
  --sg-s-lg: 16px;
  --sg-s-xl: 20px;
  --sg-s-xxl: 24px;
  --sg-s-xxxl: 32px;
  --sg-s-huge: 40px;
  --sg-s-giant: 56px;
  --sg-gutter: 16px;                /* screenH */
  --sg-section: 20px;
  --sg-touch: 48px;
  --sg-fs-chip: 13px;
  --sg-fs-meta: 13px;
  /* Responsive layout (see section 13) */
  --sg-col: 720px;
  --sg-col-wide: 1080px;
  --sg-colw: var(--sg-col);
  --sg-rail-w: 88px;
  --sg-drawer-w: 260px;
  --sg-side-w: 0px;
  --sg-nav-h: var(--sg-bottomnav-h);

  /* Typography (inventory 2.2) */
  --sg-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sg-font-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;

  /* Elevation */
  --sg-shadow-1: 0 1px 2px rgba(32, 34, 26, 0.08), 0 1px 3px rgba(32, 34, 26, 0.06);
  --sg-shadow-2: 0 2px 6px rgba(32, 34, 26, 0.10), 0 4px 12px rgba(32, 34, 26, 0.08);
  --sg-shadow-3: 0 8px 28px rgba(32, 34, 26, 0.22);

  /* Chrome metrics */
  --sg-appbar-h: 56px;
  --sg-bottomnav-h: 60px;
  --sg-safe-top: env(safe-area-inset-top, 0px);
  --sg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sg-safe-left: env(safe-area-inset-left, 0px);
  --sg-safe-right: env(safe-area-inset-right, 0px);

  color-scheme: light;
}

/* Dark mode - the Android app supports it (inventory 2.6: SYSTEM/LIGHT/DARK).
   `data-theme` on <html> is set by app.js; SYSTEM falls through to the media query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sg-primary: #AEB878;
    --sg-on-primary: #23261A;
    --sg-secondary: #D8B15E;
    --sg-on-secondary: #23261A;
    --sg-tertiary: #D8B15E;
    --sg-bg: #16180F;
    --sg-on-bg: #ECE7D6;
    --sg-surface: #1E2114;
    --sg-on-surface: #ECE7D6;
    --sg-surface-variant: #2C3020;
    --sg-border: #4C5140;
    --sg-card-border: #4C5140;
    --sg-canvas: #16180F;
    --sg-text: #ECE7D6;
    --sg-muted: #C0BBA5;
    --sg-faint: #9A9782;
    --sg-danger: #E58C84;
    --sg-on-danger: #44140F;
    --sg-danger-container: #4A241E;
    --sg-on-danger-container: #F7DAD4;
    --sg-success: #9FCB78;
    --sg-success-container: #2C3B20;
    --sg-on-success-container: #D9EBC2;
    --sg-warning: #E3B15A;
    --sg-warning-container: #413011;
    --sg-on-warning-container: #F7E6C2;
    --sg-info: #A7B4AB;
    --sg-info-container: #2A322D;
    --sg-on-info-container: #D6E0D8;
    --sg-pinned: #AEB878;
    --sg-pinned-container: rgba(174, 184, 120, 0.18);
    --sg-error: #E58C84;
    --sg-appbar-bg: #23261A;
    --sg-on-appbar: #ECE7D6;
    --sg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --sg-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
    --sg-shadow-3: 0 8px 28px rgba(0, 0, 0, 0.60);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --sg-primary: #AEB878;
  --sg-on-primary: #23261A;
  --sg-secondary: #D8B15E;
  --sg-on-secondary: #23261A;
  --sg-tertiary: #D8B15E;
  --sg-bg: #16180F;
  --sg-on-bg: #ECE7D6;
  --sg-surface: #1E2114;
  --sg-on-surface: #ECE7D6;
  --sg-surface-variant: #2C3020;
  --sg-border: #4C5140;
  --sg-card-border: #3A3E2C;
  --sg-canvas: #16180F;
  --sg-text: #ECE7D6;
  --sg-muted: #C0BBA5;
  --sg-faint: #9A9782;
  --sg-danger: #E58C84;
  --sg-on-danger: #44140F;
  --sg-danger-container: #4A241E;
  --sg-on-danger-container: #F7DAD4;
  --sg-success: #9FCB78;
  --sg-success-container: #2C3B20;
  --sg-on-success-container: #D9EBC2;
  --sg-warning: #E3B15A;
  --sg-warning-container: #413011;
  --sg-on-warning-container: #F7E6C2;
  --sg-info: #A7B4AB;
  --sg-info-container: #2A322D;
  --sg-on-info-container: #D6E0D8;
  --sg-pinned: #AEB878;
  --sg-pinned-container: rgba(174, 184, 120, 0.18);
  --sg-error: #E58C84;
  --sg-appbar-bg: #23261A;
  --sg-on-appbar: #ECE7D6;
  --sg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sg-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --sg-shadow-3: 0 8px 28px rgba(0, 0, 0, 0.60);
  color-scheme: dark;
}

/* ---------- 2. Reset / base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--sg-bg);
  color: var(--sg-text);
  font-family: var(--sg-font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
}

img, svg, video { max-width: 100%; }
button, input, select, textarea { font-family: inherit; color: inherit; }
a { color: var(--sg-secondary); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0 0 var(--sg-s-sm); }
ul, ol { margin: 0; padding-left: 1.2em; }
:focus-visible { outline: 2px solid var(--sg-tertiary); outline-offset: 2px; }

/* Typography helpers (inventory 2.2) */
.sg-display-lg { font-family: var(--sg-font-serif); font-weight: 600; font-size: 40px; line-height: 46px; letter-spacing: -0.5px; }
.sg-display-md { font-family: var(--sg-font-serif); font-weight: 600; font-size: 32px; line-height: 38px; letter-spacing: -0.25px; }
.sg-display-sm { font-family: var(--sg-font-serif); font-weight: 600; font-size: 26px; line-height: 32px; }
.sg-headline-lg { font-weight: 700; font-size: 26px; line-height: 32px; letter-spacing: -0.2px; }
.sg-headline-md { font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -0.1px; }
.sg-headline-sm { font-weight: 600; font-size: 19px; line-height: 25px; }
.sg-title-lg { font-weight: 600; font-size: 18px; line-height: 24px; }
.sg-title-md { font-weight: 600; font-size: 16px; line-height: 22px; letter-spacing: 0.1px; }
.sg-title-sm { font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0.1px; }
.sg-body-lg { font-size: 16px; line-height: 24px; letter-spacing: 0.15px; }
.sg-body-md { font-size: 14px; line-height: 20px; letter-spacing: 0.15px; }
.sg-body-sm { font-size: 12px; line-height: 16px; letter-spacing: 0.2px; }
.sg-label-lg { font-weight: 600; font-size: 14px; line-height: 18px; letter-spacing: 0.1px; }
.sg-label-md { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.4px; }
.sg-label-sm { font-weight: 500; font-size: 12px; line-height: 14px; letter-spacing: 0.5px; }
.sg-muted { color: var(--sg-muted); }
.sg-faint { color: var(--sg-faint); }
.sg-danger-text { color: var(--sg-danger); }
.sg-center { text-align: center; }
.sg-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sg-break { overflow-wrap: anywhere; word-break: break-word; }
.sg-hide { display: none !important; }
.sg-spacer { flex: 1 1 auto; }
.sg-row { display: flex; align-items: center; gap: var(--sg-s-sm); min-width: 0; }
.sg-col { display: flex; flex-direction: column; gap: var(--sg-s-sm); min-width: 0; }
.sg-wrap { flex-wrap: wrap; }
.sg-gap-xs { gap: var(--sg-s-xs); }
.sg-gap-sm { gap: var(--sg-s-sm); }
.sg-gap-md { gap: var(--sg-s-md); }
.sg-gap-lg { gap: var(--sg-s-lg); }
.sg-mt-sm { margin-top: var(--sg-s-sm); }
.sg-mt-md { margin-top: var(--sg-s-md); }
.sg-mt-lg { margin-top: var(--sg-s-lg); }
.sg-mb-sm { margin-bottom: var(--sg-s-sm); }
.sg-mb-md { margin-bottom: var(--sg-s-md); }
.sg-mb-lg { margin-bottom: var(--sg-s-lg); }

/* ---------- 3. Shell ----------------------------------------------------- */
#app { min-height: 100vh; min-height: 100dvh; }

.sg-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  max-width: 100%;
  overflow: hidden;
  background: var(--sg-bg);
}

.sg-appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sg-s-xs);
  min-height: var(--sg-appbar-h);
  padding-top: var(--sg-safe-top);
  padding-left: calc(var(--sg-s-sm) + var(--sg-safe-left));
  padding-right: calc(var(--sg-s-sm) + var(--sg-safe-right));
  height: calc(var(--sg-appbar-h) + var(--sg-safe-top));
  background: var(--sg-appbar-bg);
  color: var(--sg-on-appbar);
  box-shadow: var(--sg-shadow-1);
}

.sg-appbar__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: var(--sg-s-sm);
}

.sg-appbar__actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

.sg-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--sg-r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.sg-iconbtn:active { background: rgba(127, 127, 127, 0.22); }
.sg-iconbtn:disabled { opacity: 0.45; cursor: default; }
.sg-iconbtn--badged { position: relative; }

.sg-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: var(--sg-bg);
}

.sg-page {
  padding-top: var(--sg-s-lg);
  padding-left: calc(var(--sg-gutter) + var(--sg-safe-left));
  padding-right: calc(var(--sg-gutter) + var(--sg-safe-right));
  padding-bottom: calc(var(--sg-s-xxxl) + var(--sg-safe-bottom));
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sg-section);
}
.sg-page--flush { padding-left: 0; padding-right: 0; }

.sg-section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--sg-muted);
  margin-bottom: var(--sg-s-sm);
}

/* Bottom navigation */
.sg-bottomnav {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  background: var(--sg-surface);
  border-top: 1px solid var(--sg-border);
  padding-bottom: var(--sg-safe-bottom);
  padding-left: var(--sg-safe-left);
  padding-right: var(--sg-safe-right);
  z-index: 30;
}

.sg-bottomnav__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--sg-bottomnav-h);
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--sg-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.sg-bottomnav__item.is-active { color: var(--sg-primary); }
.sg-bottomnav__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  max-width: 100%;
  height: 28px;
  border-radius: var(--sg-r-pill);
  transition: background-color 0.15s ease;
}
.sg-bottomnav__item.is-active .sg-bottomnav__icon { background: var(--sg-surface-variant); }
.sg-bottomnav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Drawer */
.sg-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 17, 10, 0.48);
  border: 0;
  padding: 0;
}

.sg-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 61;
  width: min(300px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--sg-surface);
  box-shadow: var(--sg-shadow-3);
  padding-top: var(--sg-safe-top);
  padding-bottom: var(--sg-safe-bottom);
  padding-left: var(--sg-safe-left);
}

.sg-drawer__header {
  padding: var(--sg-s-xl) var(--sg-s-lg) var(--sg-s-lg);
  background: var(--sg-appbar-bg);
  color: var(--sg-on-appbar);
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-md);
}
.sg-drawer__items { flex: 1 1 auto; overflow-y: auto; padding: var(--sg-s-sm) var(--sg-s-sm) var(--sg-s-md); }
.sg-drawer__footer { flex: 0 0 auto; border-top: 1px solid var(--sg-border); padding: var(--sg-s-sm); }

.sg-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--sg-s-md);
  width: 100%;
  min-height: var(--sg-touch);
  padding: 0 var(--sg-s-md);
  border: 0;
  border-radius: var(--sg-r-pill);
  background: transparent;
  color: var(--sg-text);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.sg-drawer__item.is-active { background: var(--sg-surface-variant); color: var(--sg-primary); font-weight: 600; }
.sg-drawer__item--danger { color: var(--sg-danger); }
.sg-drawer__item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Transitions */
.sg-slide-enter-active, .sg-slide-leave-active { transition: transform 0.22s ease, opacity 0.22s ease; }
.sg-slide-enter-from { transform: translateX(-100%); opacity: 0.4; }
.sg-slide-leave-to { transform: translateX(-100%); opacity: 0.4; }
.sg-fade-enter-active, .sg-fade-leave-active { transition: opacity 0.2s ease; }
.sg-fade-enter-from, .sg-fade-leave-to { opacity: 0; }
.sg-rise-enter-active, .sg-rise-leave-active { transition: transform 0.24s ease, opacity 0.24s ease; }
.sg-rise-enter-from, .sg-rise-leave-to { transform: translateY(24px); opacity: 0; }

/* Connectivity banner - persistent, sits under the sticky app bar and (since
   .sg-app itself never scrolls - only .sg-main does) stays in view on every
   screen; position: sticky here is belt-and-braces for that same intent. */
.sg-offline-banner {
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-s-sm);
  padding: 6px var(--sg-s-md);
  background: var(--sg-warning-container);
  color: var(--sg-on-warning-container);
  font-size: 13px;
  font-weight: 600;
  z-index: 29;
}

/* ---------- Acknowledgement banner (MOB-009 / DESIGN 5.13) --------------
   Persistent, not dismissible, full width, >= 48px, danger tone, white text.
   Sits directly under the app bar on every screen of a signed-in shell. */
.sg-ack-banner {
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  width: 100%;
  min-height: 48px;
  padding: var(--sg-s-sm) var(--sg-s-lg);
  border: 0;
  background: var(--sg-danger);
  color: var(--sg-on-danger);   /* #FFFFFF in the light theme; readable in dark */
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 30;
}
.sg-ack-banner:active { filter: brightness(0.92); }
.sg-ack-banner__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ---------- 4. Cards / rows --------------------------------------------- */
.sg-card {
  background: var(--sg-surface);
  border: 1px solid var(--sg-card-border);
  border-radius: var(--sg-r-md);
  box-shadow: var(--sg-shadow-1);
  overflow: hidden;
}
.sg-card__body { padding: var(--sg-s-lg); display: flex; flex-direction: column; gap: var(--sg-s-md); }
.sg-card__body--flush { padding: 0; gap: 0; }
.sg-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sg-s-md);
  padding: var(--sg-s-lg) var(--sg-s-lg) 0;
}
.sg-card__header + .sg-card__body { padding-top: var(--sg-s-md); }
.sg-card__title { font-size: 16px; font-weight: 600; line-height: 22px; }
.sg-card__subtitle { font-size: 13px; color: var(--sg-muted); }
.sg-card__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sg-s-sm);
  padding: var(--sg-s-md) var(--sg-s-lg); border-top: 1px solid var(--sg-border);
}
.sg-card--clickable { cursor: pointer; }
.sg-card--clickable:active { background: var(--sg-surface-variant); }
.sg-card--danger { border-color: var(--sg-danger); border-left-width: 4px; }

.sg-list { display: flex; flex-direction: column; }
.sg-list > .sg-listrow + .sg-listrow { border-top: 1px solid var(--sg-border); }

.sg-listrow {
  display: flex;
  align-items: center;
  gap: var(--sg-s-md);
  width: 100%;
  min-height: var(--sg-touch);
  padding: var(--sg-s-md) var(--sg-s-lg);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: default;
  min-width: 0;
}
.sg-listrow--clickable { cursor: pointer; }
.sg-listrow--clickable:active { background: var(--sg-surface-variant); }
.sg-listrow__leading { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--sg-muted); }
.sg-listrow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-listrow__title { font-size: 15px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.sg-listrow__subtitle { font-size: 13px; line-height: 18px; color: var(--sg-muted); overflow-wrap: anywhere; }
.sg-listrow__trailing { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sg-s-xs); color: var(--sg-faint); }
.sg-listrow.is-disabled { opacity: 0.5; pointer-events: none; }

/* ---------- 5. Chips ----------------------------------------------------- */
.sg-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: var(--sg-r-pill);
  border: 1px solid transparent;
  background: var(--sg-surface-variant);
  color: var(--sg-muted);
  font-size: var(--sg-fs-chip);
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-chip__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sg-chip--outline { background: transparent; border-color: var(--sg-border); color: var(--sg-muted); }
.sg-chip--sm { padding: 2px 8px; font-size: 12px; }
.sg-chip--button { cursor: pointer; }
/* Tappable chips (filters) are real touch targets, not decoration. */
.sg-chip--button, .sg-chip[role="button"] { min-height: 44px; padding: 0 14px; font-size: 13px; }
.sg-chip--selected { background: var(--sg-primary); color: var(--sg-on-primary); border-color: var(--sg-primary); }

/* Tones + per-status utility classes (inventory 2.5) */
.sg-chip--success, .chip--CONFIRMED, .chip--APPROVED, .chip--AVAILABLE, .chip--PASS, .chip--GOOD, .chip--ACTIVE {
  background: var(--sg-success-container); color: var(--sg-on-success-container);
}
.sg-chip--warning, .chip--PENDING_REVIEW, .chip--PENDING, .chip--DUE_SOON, .chip--ATTENTION,
.chip--IMPORTANT, .chip--LIMITED {
  background: var(--sg-warning-container); color: var(--sg-on-warning-container);
}
.sg-chip--danger, .chip--CANCELLED, .chip--NO_SHOW, .chip--REJECTED, .chip--OUT_OF_SERVICE,
.chip--FAIL, .chip--OVERDUE, .chip--CANCELLATION {
  background: var(--sg-danger-container); color: var(--sg-on-danger-container);
}
.sg-chip--info, .chip--COMPLETED, .chip--IN_SERVICE, .chip--SCHEDULED, .chip--GENERAL, .chip--NOTICE {
  background: var(--sg-info-container); color: var(--sg-on-info-container);
}
.sg-chip--neutral, .chip--DRAFT, .chip--FULL, .chip--INACTIVE, .chip--CLOSED {
  background: transparent; border-color: var(--sg-border); color: var(--sg-muted);
}
.chip--PINNED { background: var(--sg-pinned-container); color: var(--sg-pinned); }
.chip--OPEN { background: var(--sg-success-container); color: var(--sg-on-success-container); }

/* ---------- 6. Buttons --------------------------------------------------- */
.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-s-sm);
  min-height: 48px;
  padding: 0 var(--sg-s-xl);
  border: 1px solid transparent;
  border-radius: var(--sg-r-pill);
  background: var(--sg-primary);
  color: var(--sg-on-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  max-width: 100%;
}
.sg-btn:active { opacity: 0.85; }
.sg-btn:disabled, .sg-btn.is-disabled { opacity: 0.5; cursor: default; }
.sg-btn--block { display: flex; width: 100%; }
.sg-btn--outline { background: transparent; color: var(--sg-primary); border-color: var(--sg-border); }
.sg-btn--text { background: transparent; color: var(--sg-primary); border-color: transparent; padding: 0 var(--sg-s-md); min-height: 44px; }
.sg-btn--danger { background: var(--sg-danger); color: var(--sg-on-danger); }
.sg-btn--danger-outline { background: transparent; color: var(--sg-danger); border-color: var(--sg-danger); }
.sg-btn--tonal { background: var(--sg-surface-variant); color: var(--sg-primary); border-color: var(--sg-border); }
.sg-btn--sm { min-height: 40px; padding: 0 var(--sg-s-lg); font-size: 14px; }

.sg-fab {
  position: fixed;
  right: calc(var(--sg-s-lg) + var(--sg-safe-right));
  bottom: calc(var(--sg-bottomnav-h) + var(--sg-s-lg) + var(--sg-safe-bottom));
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: var(--sg-s-sm);
  min-height: 56px;
  padding: 0 var(--sg-s-xl);
  border: 0;
  border-radius: var(--sg-r-lg);
  background: var(--sg-primary);
  color: var(--sg-on-primary);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--sg-shadow-2);
  cursor: pointer;
}
.sg-fab--icon { width: 56px; padding: 0; justify-content: center; }
.sg-shell--admin .sg-fab { bottom: calc(var(--sg-s-lg) + var(--sg-safe-bottom)); }

/* ---------- 7. Forms ----------------------------------------------------- */
.sg-form { display: flex; flex-direction: column; gap: var(--sg-s-lg); }
.sg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sg-field__label { font-size: 13px; font-weight: 600; color: var(--sg-muted); letter-spacing: 0.1px; }
.sg-field__req { color: var(--sg-danger); }
.sg-field__hint { font-size: 12px; color: var(--sg-faint); }
.sg-field__error { font-size: 12px; font-weight: 600; color: var(--sg-danger); }

.sg-input,
.sg-select,
.sg-textarea {
  width: 100%;
  max-width: 100%;
  min-height: var(--sg-touch);
  padding: 12px var(--sg-s-md);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-sm);
  background: var(--sg-surface);
  color: var(--sg-text);
  font-size: 16px; /* prevents iOS zoom */
  line-height: 22px;
  appearance: none;
  -webkit-appearance: none;
}
.sg-textarea { min-height: 96px; resize: vertical; }
.sg-input:focus, .sg-select:focus, .sg-textarea:focus {
  outline: none;
  border-color: var(--sg-primary);
  box-shadow: 0 0 0 2px rgba(62, 74, 34, 0.18);
}
.sg-input::placeholder, .sg-textarea::placeholder { color: var(--sg-faint); }
.sg-input:disabled, .sg-select:disabled, .sg-textarea:disabled { opacity: 0.6; background: var(--sg-surface-variant); }
.sg-field.has-error .sg-input,
.sg-field.has-error .sg-select,
.sg-field.has-error .sg-textarea { border-color: var(--sg-danger); }

.sg-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23585844'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 22px;
}

.sg-input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.sg-input-wrap .sg-input { padding-right: 52px; }
.sg-input-wrap__affix {
  position: absolute;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--sg-r-pill);
  background: transparent;
  color: var(--sg-muted);
  cursor: pointer;
}

.sg-switchrow {
  display: flex;
  align-items: center;
  gap: var(--sg-s-md);
  min-height: var(--sg-touch);
  cursor: pointer;
  min-width: 0;
}
.sg-switchrow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-switchrow__label { font-size: 15px; font-weight: 500; }

.sg-switch {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-pill);
  background: var(--sg-surface-variant);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.sg-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sg-faint);
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.sg-switch.is-on { background: var(--sg-primary); border-color: var(--sg-primary); }
.sg-switch.is-on::after { transform: translateX(20px); background: var(--sg-on-primary); }
.sg-switch:disabled { opacity: 0.5; cursor: default; }

.sg-checkrow {
  display: flex;
  align-items: center;
  gap: var(--sg-s-md);
  min-height: var(--sg-touch);
  cursor: pointer;
  min-width: 0;
}
.sg-checkrow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-checkrow__label { font-size: 15px; font-weight: 500; }
.sg-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--sg-border);
  border-radius: var(--sg-r-xs);
  background: var(--sg-surface);
  color: transparent;
  padding: 0;
  cursor: pointer;
}
.sg-check.is-on { background: var(--sg-primary); border-color: var(--sg-primary); color: var(--sg-on-primary); }
.sg-check:disabled { opacity: 0.55; cursor: default; }
.sg-checkrow.is-locked .sg-checkrow__label { color: var(--sg-muted); }

.sg-searchbar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.sg-searchbar__icon { position: absolute; left: 12px; color: var(--sg-faint); display: inline-flex; pointer-events: none; }
.sg-searchbar .sg-input { padding-left: 44px; padding-right: 44px; border-radius: var(--sg-r-pill); }
.sg-searchbar__clear {
  position: absolute; right: 4px; width: 40px; height: 40px; border: 0; background: transparent;
  color: var(--sg-muted); border-radius: var(--sg-r-pill); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Segmented tabs */
.sg-segmented {
  display: flex;
  width: 100%;
  max-width: 100%;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-pill);
  background: var(--sg-surface-variant);
  overflow-x: auto;
  scrollbar-width: none;
}
.sg-segmented::-webkit-scrollbar { display: none; }
.sg-segmented__item {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--sg-s-md);
  border: 0;
  border-radius: var(--sg-r-pill);
  background: transparent;
  color: var(--sg-muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.sg-segmented__item.is-active { background: var(--sg-surface); color: var(--sg-primary); box-shadow: var(--sg-shadow-1); }

/* ---------- 8. Overlays -------------------------------------------------- */
.sg-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--sg-surface);
  border-radius: var(--sg-r-xl) var(--sg-r-xl) 0 0;
  box-shadow: var(--sg-shadow-3);
  padding-bottom: var(--sg-safe-bottom);
}
.sg-sheet__grip { width: 36px; height: 4px; border-radius: 2px; background: var(--sg-border); margin: var(--sg-s-md) auto var(--sg-s-sm); flex: 0 0 auto; }
.sg-sheet__header {
  display: flex; align-items: center; gap: var(--sg-s-sm);
  padding: 0 var(--sg-s-lg) var(--sg-s-md); flex: 0 0 auto;
}
.sg-sheet__title { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 600; }
.sg-sheet__body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--sg-gutter) var(--sg-s-lg); -webkit-overflow-scrolling: touch; }
.sg-sheet__footer { flex: 0 0 auto; display: flex; gap: var(--sg-s-sm); padding: var(--sg-s-md) var(--sg-gutter); border-top: 1px solid var(--sg-border); }

.sg-dialog-wrap {
  position: fixed;
  inset: 0;
  z-index: 71;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sg-s-xl);
  pointer-events: none;
}
.sg-dialog {
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--sg-surface);
  border-radius: var(--sg-r-lg);
  box-shadow: var(--sg-shadow-3);
  overflow: hidden;
}
.sg-dialog__title { padding: var(--sg-s-xl) var(--sg-s-xl) 0; font-size: 19px; font-weight: 600; }
.sg-dialog__body { padding: var(--sg-s-md) var(--sg-s-xl); overflow-y: auto; font-size: 15px; color: var(--sg-muted); line-height: 22px; }
.sg-dialog__footer { display: flex; justify-content: flex-end; gap: var(--sg-s-sm); padding: var(--sg-s-md) var(--sg-s-lg) var(--sg-s-lg); flex-wrap: wrap; }

/* Toasts */
.sg-toasts {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--sg-bottomnav-h) + var(--sg-s-lg) + var(--sg-safe-bottom));
  z-index: 90;
  width: min(480px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-sm);
  pointer-events: none;
}
.sg-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sg-s-md);
  padding: var(--sg-s-md) var(--sg-s-lg);
  border-radius: var(--sg-r-sm);
  background: #20221A;
  color: #FBFAF6;
  font-size: 14px;
  line-height: 20px;
  box-shadow: var(--sg-shadow-2);
}
.sg-toast__msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sg-toast__action { flex: 0 0 auto; border: 0; background: transparent; color: #D8B15E; font-weight: 700; font-size: 14px; cursor: pointer; }
.sg-toast--success { background: #33512A; color: #FFFFFF; }
.sg-toast--error { background: #8E2A24; color: #FFFFFF; }
.sg-toast--warning { background: #6B4C11; color: #FFF6E2; }

/* ---------- 9. Feedback states ------------------------------------------ */
.sg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sg-s-sm);
  padding: var(--sg-s-xxxl) var(--sg-s-lg);
  color: var(--sg-muted);
}
.sg-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sg-surface-variant);
  color: var(--sg-faint);
  margin-bottom: var(--sg-s-xs);
}
.sg-empty__title { font-size: 17px; font-weight: 600; color: var(--sg-text); }
.sg-empty__msg { font-size: 14px; max-width: 34ch; }

@keyframes sg-shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.sg-skeleton {
  display: block;
  width: 100%;
  border-radius: var(--sg-r-xs);
  background-color: var(--sg-surface-variant);
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: sg-shimmer 1.3s ease-in-out infinite;
}
:root[data-theme="dark"] .sg-skeleton { background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent); }
.sg-skeleton + .sg-skeleton { margin-top: var(--sg-s-sm); }
.sg-skeleton--text { height: 14px; }
.sg-skeleton--title { height: 20px; width: 60%; }
.sg-skeleton--card { height: 96px; border-radius: var(--sg-r-md); }
.sg-skeleton--row { height: 56px; border-radius: var(--sg-r-sm); }
.sg-skeleton--circle { border-radius: 50%; }

@keyframes sg-spin { to { transform: rotate(360deg); } }
.sg-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sg-spin 0.7s linear infinite;
  vertical-align: middle;
}

/* ---------- 10. Avatar / badge ------------------------------------------ */
.sg-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #4E5A30;
  color: #FBFAF6;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.sg-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--sg-r-pill);
  background: var(--sg-danger);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.sg-badge--dot { min-width: 9px; width: 9px; height: 9px; padding: 0; }
.sg-badge--float {
  position: absolute;
  top: -2px;
  left: 50%;
  margin-left: 2px;
  border: 2px solid var(--sg-surface);
}
.sg-appbar .sg-badge--float { border-color: var(--sg-appbar-bg); left: auto; right: 2px; top: 2px; margin-left: 0; }

/* ---------- 11. Auth / splash / install --------------------------------- */
.sg-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sg-s-xxl) + var(--sg-safe-top)) var(--sg-gutter) calc(var(--sg-s-xxl) + var(--sg-safe-bottom));
  background: var(--sg-bg);
  overflow-x: hidden;
}
.sg-auth__inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--sg-s-lg); }
.sg-auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--sg-s-sm); text-align: center; }
.sg-auth__crest { width: 176px; height: auto; }
.sg-auth__title { font-family: var(--sg-font-serif); font-size: 28px; font-weight: 600; letter-spacing: 0.4px; }
.sg-auth__sub { font-size: 14px; color: var(--sg-muted); }
.sg-auth__footer { text-align: center; font-size: 12px; color: var(--sg-faint); }
.sg-auth__notice {
  padding: var(--sg-s-md);
  border-radius: var(--sg-r-sm);
  background: var(--sg-info-container);
  color: var(--sg-on-info-container);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.sg-auth__error {
  padding: var(--sg-s-md);
  border-radius: var(--sg-r-sm);
  background: var(--sg-danger-container);
  color: var(--sg-on-danger-container);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  gap: var(--sg-s-sm);
  align-items: flex-start;
}

.sg-splash {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sg-s-lg);
  background: var(--sg-bg);
  color: var(--sg-primary);
}
.sg-splash .sg-crest { width: 160px; height: auto; }

/* Shamwari Rangers crest: dark lettering on light themes, cream lettering on dark.
   Both images are in the markup; the theme decides which one shows. */
.sg-crest { display: block; max-width: 100%; }
.sg-crest--on-dark { display: none; }
:root[data-theme="dark"] .sg-crest--on-light { display: none; }
:root[data-theme="dark"] .sg-crest--on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sg-crest--on-light { display: none; }
  :root:not([data-theme="light"]) .sg-crest--on-dark { display: block; }
}
.sg-splash__label { font-family: var(--sg-font-serif); font-size: 17px; letter-spacing: 3px; font-weight: 600; text-align: center; }

.sg-install-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sg-s-md);
  padding: var(--sg-s-md) var(--sg-s-lg);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-md);
  background: var(--sg-surface-variant);
  color: var(--sg-text);
  font-size: 14px;
  line-height: 20px;
}
.sg-install-banner__body { flex: 1 1 auto; min-width: 0; }
.sg-install-steps { display: flex; flex-direction: column; gap: var(--sg-s-sm); counter-reset: sgstep; padding: 0; margin: 0; list-style: none; }
/* position-based (not flex) so <strong> stays inline inside the step text */
.sg-install-steps li { position: relative; display: block; padding-left: 34px; font-size: 14px; line-height: 22px; }
.sg-install-steps li::before {
  counter-increment: sgstep;
  content: counter(sgstep);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sg-primary);
  color: var(--sg-on-primary);
  font-size: 12px;
  font-weight: 700;
}
.sg-inline-icon { display: inline-flex; vertical-align: -5px; color: var(--sg-secondary); }

/* ---------- 12. Misc ----------------------------------------------------- */
.sg-kv { display: flex; align-items: baseline; gap: var(--sg-s-md); padding: 6px 0; min-width: 0; }
.sg-kv__k { flex: 0 0 38%; max-width: 38%; font-size: 13px; color: var(--sg-muted); }
.sg-kv__v { flex: 1 1 auto; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.sg-divider { height: 1px; background: var(--sg-border); border: 0; margin: 0; }
.sg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--sg-s-md); }
.sg-stat { padding: var(--sg-s-md); border-radius: var(--sg-r-md); border: 1px solid var(--sg-card-border); background: var(--sg-surface); text-align: center; }
.sg-stat__value { font-size: 24px; font-weight: 700; line-height: 30px; }
.sg-stat__label { font-size: 12px; color: var(--sg-muted); }
.sg-notbuilt { display: flex; flex-direction: column; align-items: center; gap: var(--sg-s-md); padding: var(--sg-s-huge) var(--sg-s-lg); text-align: center; }

@media (min-width: 600px) {
  :root { --sg-gutter: 24px; }
}

/* ---------- ChipMultiSelect (BO-007 experiences / BO-008 guides) --------- */
.sg-multiselect { display: flex; flex-direction: column; gap: var(--sg-s-sm); min-width: 0; }
.sg-multiselect__chips { display: flex; flex-wrap: wrap; gap: var(--sg-s-xs); }
.sg-multiselect__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 44px;
  padding: 4px 14px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-pill);
  background: var(--sg-surface-variant);
  color: var(--sg-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sg-multiselect__chip:active { background: var(--sg-border); }
.sg-multiselect__chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.sg-multiselect__more {
  border: 0;
  background: transparent;
  color: var(--sg-muted);
  font: inherit;
  font-size: 13px;
  min-height: 34px;
  cursor: pointer;
}
.sg-multiselect__count { font-size: 12px; color: var(--sg-muted); font-weight: 600; }
.sg-multiselect__list {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-sm);
  padding: var(--sg-s-xs) var(--sg-s-sm);
}

/* ---------- 12. Batch 2 shared components -------------------------------- */

/* Draft restore bar - DESIGN-2 §5.B.4. Never a dialog; >= 64 px tall, both
   buttons >= 48 px. Reuses the card surface and the existing button classes,
   and introduces no new colour token. */
.sg-draftbar {
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-sm);
  min-height: 64px;
  padding: var(--sg-s-md) var(--sg-s-lg);
  background: var(--sg-info-container);
  color: var(--sg-on-info-container);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-md);
}
.sg-draftbar__text { min-width: 0; }
.sg-draftbar__actions { display: flex; flex-wrap: wrap; gap: var(--sg-s-sm); }
.sg-draftbar__actions .sg-btn { flex: 1 1 auto; min-width: 128px; }

/* Party-size stepper - DESIGN-2 §5.D.2. */
.sg-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-s-md);
  width: 100%;
}
.sg-stepper__btn {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--sg-r-md);
  border: 1px solid var(--sg-border);
  background: var(--sg-surface-variant);
  color: var(--sg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sg-stepper__btn:active { background: var(--sg-border); }
.sg-stepper__btn:disabled { opacity: 0.4; cursor: default; }
.sg-stepper__value,
.sg-stepper__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  border: 0;
  background: transparent;
  color: var(--sg-text);
  font: inherit;
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sg-stepper__input {
  font-size: 28px;
  cursor: text;
  border: 1px solid var(--sg-primary);
  border-radius: var(--sg-r-sm);
  background: var(--sg-surface);
}

/* "Pre-filled" marker - DESIGN-2 §5.D.4. */
.sg-prefilled {
  display: inline-block;
  margin-left: var(--sg-s-sm);
  padding: 1px 8px;
  border-radius: var(--sg-r-pill);
  border: 1px solid var(--sg-border);
  background: var(--sg-surface-variant);
  color: var(--sg-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: none;
  vertical-align: middle;
}

/* ---------- Offline queue + cached reads (DESIGN-2 5.E) ------------------
   One pill, one list, three actions. The pill floats above the bottom nav
   and is the only thing a guide sees until they choose to look. Left-aligned
   (not centered) so it never shares the FAB's right-anchored column, and on
   a screen that also has a primary FAB (.sg-shell--has-fab) it stacks with
   real vertical clearance above it too - belt and braces against overlap. */
.sg-outbox-pill {
  position: fixed;
  left: calc(var(--sg-gutter) + var(--sg-safe-left));
  bottom: calc(var(--sg-bottomnav-h) + var(--sg-safe-bottom) + 10px);
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-s-sm);
  min-height: 48px;
  width: max-content;
  max-width: calc(100vw - (2 * var(--sg-gutter)) - var(--sg-safe-left) - var(--sg-safe-right));
  padding: 0 var(--sg-s-lg);
  border: 1px solid var(--sg-border);
  border-radius: 24px;
  background: var(--sg-surface);
  color: var(--sg-text);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--sg-shadow-2, 0 2px 10px rgba(0, 0, 0, 0.18));
  cursor: pointer;
}
.sg-shell--has-fab .sg-outbox-pill {
  bottom: calc(var(--sg-bottomnav-h) + var(--sg-s-lg) + var(--sg-safe-bottom) + 56px + 12px);
}
.sg-shell--admin.sg-shell--has-fab .sg-outbox-pill {
  bottom: calc(var(--sg-s-lg) + var(--sg-safe-bottom) + 56px + 12px);
}
.sg-outbox-pill__text { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 0; font-size: 14px; line-height: 1.25; text-align: left; }
.sg-outbox-pill__hint { display: block; font-size: 12px; opacity: .85; margin-top: 2px; }
.sg-outbox-pill--warning {
  background: var(--sg-warning-container);
  color: var(--sg-on-warning-container);
  border-color: var(--sg-warning);
}
.sg-outbox-pill--info {
  background: var(--sg-info-container);
  color: var(--sg-on-info-container);
}

/* The `as of` line: muted, one line, never a banner. */
.sg-cache-stamp {
  padding: 2px 0 var(--sg-s-sm);
  color: var(--sg-muted);
  font-size: 13px;
}

/* E2: an optimistic success never claims the office has it. */
.sg-queued-note {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  padding: var(--sg-s-sm) var(--sg-s-md);
  border-radius: var(--sg-r-md);
  background: var(--sg-info-container);
  color: var(--sg-on-info-container);
  font-size: 14px;
}

.sg-outbox-row {
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-md);
  background: var(--sg-surface);
  overflow: hidden;
}
.sg-outbox-row--attention { border-color: var(--sg-warning); }
.sg-outbox-row__head {
  display: flex;
  align-items: center;
  gap: var(--sg-s-md);
  width: 100%;
  min-height: 56px;
  padding: var(--sg-s-md);
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sg-outbox-row__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
/* The status chip is the one thing on the row that must never be clipped. */
.sg-outbox-row__head .sg-chip { flex: 0 0 auto; }
.sg-outbox-row__detail { padding: 0 var(--sg-s-md) var(--sg-s-md); }
.sg-outbox-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-sm);
  padding: 0 var(--sg-s-md) var(--sg-s-md);
}
.sg-outbox-row__actions { display: flex; flex-wrap: wrap; gap: var(--sg-s-sm); }
.sg-outbox-row__actions .sg-btn { flex: 1 1 auto; min-width: 96px; }

/* ---------- Push permission card (DESIGN-2 5.A.6) -----------------------
   In place, never a dialog and never a sheet: the browser's own prompt is
   the only modal a guide should ever see about alerts, and it comes second. */
.sg-push-card {
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-sm);
  margin-top: var(--sg-s-md);
  padding: var(--sg-s-md);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-md);
  background: var(--sg-surface-variant);
}
.sg-push-card__actions { display: flex; flex-wrap: wrap; gap: var(--sg-s-sm); }
.sg-push-card__actions .sg-btn { flex: 1 1 auto; min-width: 128px; }

/* ---------- 13. Responsive layout, sticky actions, pull to refresh -------
   One strategy for every screen size (docs/review/2026-10-04/06-pwa-ux.md):
     phone      bottom nav, one column
     >= 768px   the guide bottom nav becomes a left rail; floating UI (FAB,
                outbox pill) is anchored to the content column, not the screen
     >= 1100px  the admin menu is a permanent left column; admin pages use the
                wider column and grids.
   --sg-side-w is the width of whatever sits left of the content, --sg-colw the
   width of the content column; together they place floating UI beside it. */
.sg-shell__col {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sg-shell--admin { --sg-nav-h: 0px; }
.sg-shell--wide { --sg-colw: var(--sg-col-wide); }
.sg-drawerhost { display: contents; }

.sg-page { max-width: var(--sg-colw); }
.sg-appbar {
  padding-left: max(calc(var(--sg-s-sm) + var(--sg-safe-left)), calc((100% - var(--sg-colw)) / 2 + var(--sg-s-sm)));
  padding-right: max(calc(var(--sg-s-sm) + var(--sg-safe-right)), calc((100% - var(--sg-colw)) / 2 + var(--sg-s-sm)));
}

/* Floating UI follows the content column. */
.sg-fab {
  right: max(calc(var(--sg-s-lg) + var(--sg-safe-right)), calc((100vw - var(--sg-side-w) - var(--sg-colw)) / 2 + var(--sg-s-lg)));
  bottom: calc(var(--sg-nav-h) + var(--sg-s-lg) + var(--sg-safe-bottom));
}
.sg-outbox-pill {
  left: calc(var(--sg-side-w) + max(calc(var(--sg-gutter) + var(--sg-safe-left)), calc((100vw - var(--sg-side-w) - var(--sg-colw)) / 2 + var(--sg-gutter))));
  bottom: calc(var(--sg-nav-h) + var(--sg-safe-bottom) + 10px);
}
.sg-shell--has-fab .sg-outbox-pill,
.sg-shell--admin.sg-shell--has-fab .sg-outbox-pill {
  bottom: calc(var(--sg-nav-h) + var(--sg-s-lg) + var(--sg-safe-bottom) + 56px + 12px);
}

/* Messages appear at the top, under the app bar: never over the button just tapped. */
.sg-toasts {
  top: calc(var(--sg-appbar-h) + var(--sg-safe-top) + var(--sg-s-sm));
  bottom: auto;
}
/* At the top a toast sits over the first list row: let taps on its text go
   through to the row underneath; only its own button takes the tap. */
.sg-toast { pointer-events: none; }
.sg-toast__action { pointer-events: auto; }

/* Pull to refresh indicator */
.sg-ptr {
  position: absolute;
  left: 50%;
  top: calc(var(--sg-appbar-h) + var(--sg-safe-top));
  z-index: 28;
  padding: 8px 16px;
  border-radius: var(--sg-r-pill);
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  box-shadow: var(--sg-shadow-2);
  color: var(--sg-muted);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}
.sg-ptr.is-ready { color: var(--sg-primary); border-color: var(--sg-primary); }

/* Shared sticky action bar: the one big primary action stays under the thumb.
   Sticky inside the scrolling .sg-main, so it sits in normal flow after the
   last field and never covers it. */
.sg-stickybar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-xs);
  margin: var(--sg-s-xs) calc(-1 * (var(--sg-gutter) + var(--sg-safe-right))) 0 calc(-1 * (var(--sg-gutter) + var(--sg-safe-left)));
  padding: var(--sg-s-sm) calc(var(--sg-gutter) + var(--sg-safe-right)) calc(var(--sg-s-md) + var(--sg-safe-bottom)) calc(var(--sg-gutter) + var(--sg-safe-left));
  background: var(--sg-surface);
  border-top: 1px solid var(--sg-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
}
.sg-stickybar__row { display: flex; gap: var(--sg-s-sm); }
.sg-stickybar__row > .sg-btn { flex: 1 1 0; }
.sg-btn--big { min-height: 56px; font-size: 17px; }
.sg-stickybar__done {
  display: flex; align-items: center; justify-content: center; gap: var(--sg-s-sm);
  min-height: 56px; border-radius: var(--sg-r-md);
  background: var(--sg-success-container); color: var(--sg-on-success-container);
  font-size: 16px; font-weight: 700;
}
/* Floating UI sits clear of a sticky bar. */
.sg-app:has(.sg-stickybar) .sg-fab { display: none; }
.sg-app:has(.sg-stickybar) .sg-outbox-pill { bottom: calc(var(--sg-nav-h) + var(--sg-safe-bottom) + 100px); }

/* Mouse and keyboard feedback (laptops). */
@media (hover: hover) {
  .sg-btn:hover:not(:disabled), .sg-drawer__item:hover, .sg-bottomnav__item:hover,
  .sg-chip--button:hover, .sg-segmented__item:hover, .sg-iconbtn:hover {
    filter: brightness(0.94);
  }
  .sg-listrow--clickable:hover, .sg-bk-card:hover, .sg-species-tile:hover { background: var(--sg-surface-variant); }
}

/* Cards on wider screens flow into a grid instead of one long column. */
@media (min-width: 768px) {
  .sg-bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sg-s-md); align-items: start; }
  .sg-stats, .admin-kpi-grid, .sg-bk-quickgrid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

  /* Guide shell: the bottom nav becomes a left rail. */
  .sg-shell--guide { flex-direction: row; --sg-side-w: var(--sg-rail-w); --sg-nav-h: 0px; }
  .sg-shell--guide .sg-bottomnav {
    order: -1;
    flex: 0 0 var(--sg-rail-w);
    width: var(--sg-rail-w);
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--sg-s-xs);
    height: 100%;
    overflow-y: auto;
    padding: calc(var(--sg-s-md) + var(--sg-safe-top)) var(--sg-s-xs) var(--sg-s-md) calc(var(--sg-s-xs) + var(--sg-safe-left));
    border-top: 0;
    border-right: 1px solid var(--sg-border);
  }
  .sg-shell--guide .sg-bottomnav__item { flex: 0 0 auto; min-height: 72px; width: 100%; }

  /* Sheets become a centred panel. */
  .sg-sheet { left: 0; right: 0; margin: 0 auto; width: min(560px, 100%); }
}

@media (min-width: 1100px) {
  .admin-kpi-grid { grid-template-columns: repeat(6, 1fr); }
  /* Admin: the menu is a permanent column, no hamburger. */
  .sg-shell--admin { flex-direction: row; --sg-side-w: var(--sg-drawer-w); }
  .sg-drawerhost { display: flex; order: -1; flex: 0 0 var(--sg-drawer-w); width: var(--sg-drawer-w); height: 100%; }
  .sg-drawerhost .sg-scrim { display: none; }
  .sg-drawerhost .sg-drawer {
    position: static;
    width: 100%;
    z-index: auto;
    box-shadow: none;
    border-right: 1px solid var(--sg-border);
  }
}