/*
  StoreHarmony staff web app shell — the ONE stylesheet every mini app loads.

  This file owns: the design tokens (colours, radii, type), the app chrome
  (header, footer, sign-in, network gate, account sheet, toast) and the
  shared components (.btn, .field, .choice-row, .badge, .banner-error,
  screens, the Home launcher). An app's own <style> block may only add
  styles for its OWN screens; it must never restate a token or re-invent a
  component that exists here.

  Colour follows the store (2026-09-30). The store's General Color Theme —
  two colours, an accent and a frame, the same pair the desktop dashboard
  paints in (design/dashboard/dashboard_color_theming_spec.md) — comes with
  /v1/ping, and shell.js derives the theme tokens below from it the way
  DashboardTheme does on the desktop. The values written here are Harmony
  Blue, the desktop default, for the moment before the first ping.

    --frame      the band: header, Home greeting, sign-in backdrop
    --acc        buttons, selection, the avatar
    --link       link and highlight text        (= --accent-text)
    --tint       icon tiles, selected chips     (= --accent-bg)
    --tint-ink   the icon on a tint

  Content sits on white cards over a light canvas, whatever the frame, so
  every app stays readable on every preset. Dark mode still follows the
  device (prefers-color-scheme), with the band and accent kept on theme.

  Loaded as /sh/app/shell/shell.css (WebClientServlet serves the folder
  like any other client; it has no index.html of its own). logo.svg beside
  it is the StoreHarmony mark.
*/

:root {
  /* ---- theme (Harmony Blue until the ping says otherwise) ---- */
  --acc: #2456E6;
  --on-acc: #FFFFFF;
  --acc-dk: #183998;
  --link: #1B41AD;
  --tint: #E9EEFD;
  --tint-ink: #183998;
  --focus-ring: rgba(36,86,230,0.22);
  --frame: #282828;
  --frame-glow: #273661;
  --on-frame: #F5F5F3;
  --on-frame-muted: #ADADAD;
  --frame-rule: #3E3E3E;
  --frame-chip: #3E3E3E;

  /* ---- neutrals ---- */
  --surface-0: #F3F3F1;
  --surface-1: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;
  --text-primary: #1C1C1B;
  --text-secondary: #55544F;
  --text-muted: #85847D;
  --border: rgba(28,28,27,0.09);
  --border-strong: rgba(28,28,27,0.17);
  --field-bg: rgba(28,28,27,0.045);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-lift: 0 10px 28px rgba(0,0,0,0.14);

  /* ---- semantic: fixed across every theme (spec §5.2) ---- */
  --success-fill: #1E6B43;
  --success-on-fill: #FFFFFF;
  --success-bg: #E3F1E9;
  --success-on-bg: #134A2D;
  --danger-fill: #B42525;
  --danger-on-fill: #FFFFFF;
  --danger-bg: #FDE7E7;
  --danger-on-bg: #6A1414;
  --warn-bg: #FDEFE0;
  --warn-text: #8A4B08;

  /* ---- the names the apps were written against ---- */
  --brand-fill: var(--acc);
  --brand-on-fill: var(--on-acc);
  --accent-bg: var(--tint);
  --accent-text: var(--link);

  --radius: 10px;
  --radius-card: 14px;
  --radius-sheet: 22px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --link: #87A2F1;
    --tint: #1F2A48;
    --tint-ink: #87A2F1;
    --focus-ring: rgba(135,162,241,0.28);
    --frame: #282828;
    --frame-glow: #273661;
    --on-frame: #F1EFE8;
    --on-frame-muted: #ADADAD;
    --frame-rule: #393939;
    --frame-chip: #3E3E3E;

    --surface-0: #141413;
    --surface-1: #1E1E1C;
    --surface-2: #262624;
    --surface-3: #2C2C2A;
    --text-primary: #F1EFE8;
    --text-secondary: #B4B2A9;
    --text-muted: #8C8A83;
    --border: rgba(241,239,232,0.09);
    --border-strong: rgba(241,239,232,0.17);
    --field-bg: rgba(241,239,232,0.07);
    --shadow-card: none;
    --shadow-lift: 0 10px 28px rgba(0,0,0,0.5);

    --success-fill: #2E7A50;
    --success-bg: #17291F;
    --success-on-bg: #A8DDBF;
    --danger-fill: #A23030;
    --danger-bg: #331414;
    --danger-on-bg: #F0B9B9;
    --warn-bg: #3A2A14;
    --warn-text: #EFC084;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---- the chassis: header / body / footer column ---- */
#sh-frame {
  max-width: 440px; margin: 0 auto;
  background: var(--surface-0);
  /* Mobile browsers size 100% (and 100vh) to the FULL screen, including
     the strip hidden behind the address bar — which pushed the footer
     below the visible edge (BUG-0109). dvh is the height actually on
     screen right now; the plain lines stay as the older-browser fallback. */
  min-height: 100%;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
/* A tablet or computer browser: the app is a card on the store's frame. */
@media (min-width: 520px) {
  body { background: var(--frame); }
  #sh-frame {
    margin: 24px auto;
    border-radius: var(--radius-sheet);
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.28);
  }
}

/* ---- header: the store's band ---- */
.sh-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 12px 12px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--frame); color: var(--on-frame);
  border-bottom: 1px solid var(--frame-rule);
}
.sh-brand {
  display: flex; align-items: center; gap: 2px; flex: none;
  color: var(--on-frame-muted); text-decoration: none;
  border-radius: 12px; padding: 2px 4px 2px 0;
}
.sh-brand .sh-back { width: 18px; height: 18px; }
a.sh-brand { cursor: pointer; transition: background 150ms var(--ease); }
a.sh-brand:active { background: var(--frame-chip); }
.sh-logo { display: block; width: 32px; height: 32px; }
.sh-head-titles { min-width: 0; flex: 1; }
.sh-head-app { font-size: 16px; font-weight: 650; line-height: 1.2; letter-spacing: -0.1px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-head-store { font-size: 12px; color: var(--on-frame-muted); margin-top: 1px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sh-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acc); color: var(--on-acc);
  font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  border: 2px solid var(--frame-rule); cursor: pointer;
  font-family: inherit; padding: 0;
  transition: transform 150ms var(--ease);
}
.sh-avatar:active { transform: scale(0.94); }
.sh-avatar.lg { width: 52px; height: 52px; font-size: 18px; border: none; cursor: default; }
#sh-head-user:empty { display: none; }
/* Home: the header runs straight on into the greeting, one band */
#sh-frame.sh-on-home .sh-head { border-bottom-color: transparent; }

#sh-body { flex: 1; padding: 16px; }

.sh-foot {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-muted);
}
.sh-foot-brand { display: inline-flex; align-items: center; gap: 5px; }
.sh-foot-brand img { width: 14px; height: 14px; }
.sh-foot-brand b { font-weight: 650; color: var(--text-secondary); }

/* ---- screens ---- */
.screen { display: none; }
/* A fade only — no slide. Several apps keep fixed-position sheets inside
   their screens, and a transform would re-anchor them mid-animation. */
.screen.active { display: block; animation: sh-fade 200ms ease-out both; }
@keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- entry screens: sign-in, the network gate, and an app's own sign-up
   or welcome screens shown with showEntry (redesigned 2026-10-20).
   Phones: the store's band holds the name, and the form rises over it as a
   sheet that fills the screen. Tablets: the form is a card on the band.
   Laptops: the page splits, the app's panel (.sh-entry-aside, added by
   shell.js from opts.entry) on the left and the form on the right. ---- */
#sh-frame.sh-entry {
  background: radial-gradient(120% 55% at 50% -8%, var(--frame-glow), transparent 70%), var(--frame);
  color: var(--on-frame);
}
#sh-frame.sh-entry .sh-head { display: none; }
#sh-frame.sh-entry #sh-body { padding: 0 !important; max-width: none !important; margin: 0 !important;
                              display: flex; flex-direction: column; }
#sh-frame.sh-entry #sh-body > .screen.active { flex: 1; display: flex; flex-direction: column; }
#sh-frame.sh-entry .sh-foot { border-top: none; background: var(--surface-2); color: var(--text-muted);
                              justify-content: center; gap: 10px; }
#sh-frame.sh-entry .sh-foot-brand b { color: var(--text-secondary); }
.sh-entry-aside { display: none; }

.sh-entry-pad { flex: 1; width: 100%; display: flex; flex-direction: column; }
.sh-brand-block {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: calc(28px + env(safe-area-inset-top)) 24px 26px;
}
.sh-logo-lg { width: 52px; height: 52px; display: block; margin-bottom: 14px;
              animation: sh-pop 420ms var(--ease) both; }
@keyframes sh-pop { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
.sh-wordmark { font-size: 26px; font-weight: 750; letter-spacing: -0.6px; line-height: 1.15; color: var(--on-frame); }
.sh-tagline { font-size: 14.5px; color: var(--on-frame-muted); margin-top: 4px; line-height: 1.4; }

.sh-card {
  background: var(--surface-2); color: var(--text-primary);
  border-radius: 26px 26px 0 0; padding: 28px 22px 22px;
  animation: sh-rise 360ms var(--ease) 60ms both;
}
/* the sheet runs on to the foot of the screen, below the card and its note */
.sh-entry-pad::after { content: ""; flex: 1 0 0; background: var(--surface-2); }
@keyframes sh-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sh-entry-pad > .sh-login-note { background: var(--surface-2); color: var(--text-muted); margin: 0;
                                 padding: 0 22px 20px; text-align: left; }

/* the store this sign-in opens: a small chip above the heading */
.sh-store-row { display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
                padding: 5px 14px 5px 5px; margin-bottom: 18px;
                border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); }
.sh-store-row > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sh-store-mark {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--tint-ink); font-size: 12.5px; font-weight: 700;
}
.sh-store-name { font-size: 13.5px; font-weight: 650; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-store-state { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-fill);
          box-shadow: 0 0 0 3px var(--success-bg); }
.sh-card-rule { height: 1px; background: var(--border); margin: 18px 0; }

.sh-login-title { font-size: 26px; font-weight: 750; letter-spacing: -0.6px; line-height: 1.2; margin: 0; }
.sh-login-sub { font-size: 14.5px; color: var(--text-muted); margin: 6px 0 22px; line-height: 1.5; }
.sh-login-switch { text-align: center; }
.sh-login-switch .link { display: inline-block; margin-top: 16px; }
.sh-login-links { display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: 22px; padding-top: 20px;
                  border-top: 1px solid var(--border); font-size: 14px; color: var(--text-secondary); }
.sh-login-links .link { font-size: 14px; }
.sh-login-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.sh-step { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-text);
            margin-bottom: 10px; }
.sh-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sh-label-row .link { font-size: 13px; }

/* the form itself, on every entry screen */
.sh-card .field { margin-bottom: 16px; }
.sh-card .field label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 7px; }
.sh-card .field input, .sh-card .field select, .sh-card .field textarea {
  height: 50px; border-radius: 12px; background: var(--surface-1); border-color: var(--border-strong); }
.sh-card .field textarea { height: auto; }
.sh-card .field input::placeholder { color: var(--text-muted); opacity: 0.7; }
.sh-card .btn { min-height: 50px; border-radius: 12px; font-size: 16px; }
.sh-card .btn.primary { margin-top: 6px; box-shadow: 0 8px 20px -10px var(--acc); }
.sh-card .banner-error { border-radius: 12px; }
@media (hover: hover) {
  .sh-card .field input:hover:not(:focus) { border-color: var(--text-muted); }
}

/* tablets: the form is a card on the band */
@media (min-width: 520px) {
  #sh-frame.sh-entry { max-width: none; margin: 0; border-radius: 0; box-shadow: none; overflow: visible;
                       min-height: 100vh; min-height: 100dvh; }
  #sh-frame.sh-entry .sh-foot { background: transparent; color: var(--on-frame-muted); }
  #sh-frame.sh-entry .sh-foot-brand b { color: var(--on-frame); }
  .sh-entry-pad { flex: none; max-width: 460px; margin: 0 auto; padding: max(6vh, 24px) 0 24px; }
  .sh-entry-pad::after { content: none; }
  .sh-brand-block { align-items: center; text-align: center; padding: 0 0 24px; }
  .sh-card { flex: none; border-radius: var(--radius-sheet); padding: 32px; border: 1px solid var(--border);
             box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
  .sh-entry-pad > .sh-login-note { background: none; color: var(--on-frame-muted); padding: 18px 16px 0; text-align: center; }
}

/* laptops: the app's panel on the left, the form on the right */
@media (min-width: 960px) {
  #sh-frame.sh-entry { background: var(--surface-2); color: var(--text-primary); }
  #sh-frame.sh-entry .sh-foot { display: none; }
  #sh-frame.sh-entry #sh-body > .screen.active.sh-entry-screen {
    display: grid; grid-template-columns: minmax(420px, 5fr) minmax(0, 6fr); min-height: 100vh; min-height: 100dvh; }
  .sh-entry-aside {
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    position: relative; overflow: hidden; padding: 44px 56px 36px; color: var(--on-frame);
    background:
      radial-gradient(70% 55% at 0% 0%, var(--frame-glow), transparent 70%),
      radial-gradient(60% 50% at 100% 100%, var(--frame-glow), transparent 72%),
      var(--frame);
  }
  .sh-entry-aside::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1.2px); background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 65%); mask-image: linear-gradient(160deg, #000 10%, transparent 65%);
  }
  .sh-entry-aside::after {
    content: ""; position: absolute; right: -90px; bottom: -90px; width: 360px; height: 360px; pointer-events: none;
    background: url(logo.svg) center / contain no-repeat; opacity: 0.05;
  }
  .sh-entry-aside > * { position: relative; z-index: 1; }
  .sh-aside-brand { display: flex; align-items: center; gap: 12px; }
  .sh-aside-brand img { width: 40px; height: 40px; }
  .sh-aside-word { font-size: 19px; font-weight: 750; letter-spacing: -0.3px; line-height: 1.1; }
  .sh-aside-app { font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--on-frame-muted); margin-top: 3px; }
  .sh-aside-body { max-width: 30em; }
  .sh-aside-head { font-size: clamp(32px, 3.2vw, 44px); font-weight: 750; letter-spacing: -1px; line-height: 1.08; color: var(--on-frame); }
  .sh-aside-text { font-size: 17px; line-height: 1.55; color: var(--on-frame-muted); margin: 18px 0 0; }
  .sh-aside-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
  .sh-aside-points li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 550; color: var(--on-frame); }
  .sh-aside-tick { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                   background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); }
  .sh-aside-tick .icon { width: 16px; height: 16px; stroke-width: 2.6; }
  .sh-aside-foot { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--on-frame-muted); }
  .sh-aside-foot b { color: var(--on-frame); font-weight: 650; }

  .sh-entry-screen > .sh-entry-pad { align-self: center; justify-self: center; width: 100%; max-width: 440px;
                                     margin: 0; padding: 48px 28px; }
  .sh-entry-screen > .sh-entry-pad > .sh-brand-block { display: none; }
  .sh-entry-screen .sh-card { background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0; }
  .sh-entry-screen .sh-entry-pad > .sh-login-note { color: var(--text-muted); text-align: left; padding: 20px 0 0; }
  .sh-login-title { font-size: 30px; }
}

/* inputs with a leading icon (sign-in) */
.sh-input { position: relative; }
.sh-input > .icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
}
.field .sh-input input { padding-left: 40px; }
.field .sh-input input.has-eye { padding-right: 46px; }
.sh-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: none; background: none; border-radius: 8px;
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sh-eye:active { background: var(--field-bg); }

/* network gate: the same card, the message inside */
#sh-gate .empty-state { min-height: 0; padding: 28px 20px; }
.sh-gate-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--warn-bg); color: var(--warn-text);
}
.sh-gate-icon .icon { width: 30px; height: 30px; }

/* ---- empty states ---- */
.empty-state {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 12px;
}
.empty-state .headline { font-size: 16px; font-weight: 650; }
.empty-state .explainer { font-size: 13px; color: var(--text-muted); max-width: 260px; line-height: 1.5; }
.empty-state .icon-big { color: var(--text-muted); }

/* ---- shared components ---- */
h2 { font-size: 18px; font-weight: 650; letter-spacing: -0.2px; }
.meta { font-size: 12px; color: var(--text-muted); }
.icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2;
        fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.icon-inline { width: 16px; height: 16px; }
.icon-big { width: 36px; height: 36px; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; border: none; border-radius: var(--radius);
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  background: var(--field-bg); color: var(--text-primary);
  transition: transform 120ms var(--ease), filter 120ms var(--ease), background 150ms var(--ease);
  text-decoration: none;
}
.btn:active:not(:disabled) { transform: scale(0.985); filter: brightness(0.94); }
.btn.success { background: var(--success-fill); color: var(--success-on-fill); }
.btn.danger  { background: var(--danger-fill);  color: var(--danger-on-fill); }
.btn.primary { background: var(--brand-fill);   color: var(--brand-on-fill); }
.btn.ghost   { background: transparent; border: 1px solid var(--border-strong); }
.btn.ghost.danger { background: transparent; color: var(--danger-on-bg); border-color: var(--danger-on-bg); }
.btn.small   { width: auto; min-height: 36px; padding: 0 16px; font-size: 13px; }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: sh-spin 0.8s linear infinite;
}
@keyframes sh-spin { to { transform: rotate(360deg); } }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; font-weight: 550; color: var(--text-secondary); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; height: 46px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--field-bg); color: var(--text-primary);
  font-family: inherit; font-size: 16px; padding: 0 12px; outline: none;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease);
}
.field textarea { height: auto; min-height: 60px; padding: 10px 12px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--acc); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--surface-2);
}

.banner-error {
  background: var(--danger-bg); color: var(--danger-on-bg);
  border-radius: var(--radius); padding: 10px 12px; font-size: 13px; margin-bottom: 12px;
}

.top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.top-bar .back { color: var(--accent-text); text-decoration: none; font-size: 14px; cursor: pointer; }
.footer-link { text-align: center; margin-top: 24px; }
.footer-link a, .link { color: var(--accent-text); text-decoration: none; font-size: 14px; font-weight: 550; cursor: pointer; }

.choice-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--surface-1); border-radius: var(--radius-card);
  padding: 14px 16px; margin-bottom: 8px; cursor: pointer;
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
  transition: transform 120ms var(--ease), background 150ms var(--ease);
}
.choice-row:active { transform: scale(0.99); background: var(--field-bg); }
.choice-row .title { font-size: 15px; font-weight: 600; }
.choice-row .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.choice-row .chev { color: var(--text-muted); flex: none; }
/* Long unbroken text wraps instead of running off the card — a document
   reference such as WRITEOFF:b7d852a9... is one "word" with no space to
   break at. The text block must be allowed to shrink (min-width: 0) before
   a flex row will let it wrap. word-break is the older browsers' spelling. */
.choice-row > :first-child { min-width: 0; flex: 1 1 auto; }
.choice-row > .badge { flex: none; }
.choice-row .title, .choice-row .sub, .wrap-any { overflow-wrap: anywhere; word-break: break-word; }

.badge {
  font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap;
}
.badge.up   { background: var(--success-bg); color: var(--success-on-bg); }
.badge.down { background: var(--danger-bg); color: var(--danger-on-bg); }
.badge.ok   { background: var(--field-bg); color: var(--text-secondary); }

/* ---- toast (shell-owned) ---- */
#sh-toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 70;
  max-width: 400px; margin: 0 auto;
  background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-card); padding: 12px 14px; font-size: 14px;
  display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-lift);
  transform: translateY(160%); visibility: hidden;
  transition: transform 220ms var(--ease), visibility 0s linear 220ms;
}
#sh-toast.show { transform: translateY(0); visibility: visible; transition: transform 220ms var(--ease); }
#sh-toast-msg { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* ---- account sheet (shell-owned: tap your initials in the header) ---- */
.sh-sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; }
.sh-sheet[hidden] { display: none; }
.sh-sheet-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.42);
                  opacity: 0; transition: opacity 220ms var(--ease); }
.sh-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 440px; margin: 0 auto;
  background: var(--surface-2); color: var(--text-primary);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 260ms var(--ease);
  box-shadow: var(--shadow-lift);
}
.sh-sheet.open .sh-sheet-scrim { opacity: 1; }
.sh-sheet.open .sh-sheet-panel { transform: none; }
.sh-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto 16px; }
.sh-sheet-who { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sh-sheet-name { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.sh-sheet-role { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.sh-sheet-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 10px;
  border-radius: var(--radius-card); background: var(--surface-1); border: 1px solid var(--border);
  color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 15px;
}
.sh-sheet-row:active { background: var(--field-bg); }
.sh-sheet-row .ic { width: 34px; height: 34px; border-radius: 10px; flex: none;
                    display: flex; align-items: center; justify-content: center;
                    background: var(--tint); color: var(--tint-ink); }
.sh-sheet-row .grow { flex: 1; }
.sh-sheet-row .chev { color: var(--text-muted); }
.sh-sheet-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 10px; line-height: 1.45; }

/* ---- camera barcode scan (shell-owned: SHShell.scanBarcode) ---- */
.sh-scan { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 65;
           background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center;
           padding: 20px; }
.sh-scan[hidden] { display: none; }
.sh-scan-card {
  width: 100%; max-width: 360px; background: var(--surface-2); color: var(--text-primary);
  border-radius: var(--radius-sheet); padding: 22px 20px 18px; text-align: center;
  box-shadow: var(--shadow-lift); animation: sh-rise 240ms var(--ease) both;
}
.sh-scan-icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
                display: flex; align-items: center; justify-content: center;
                background: var(--tint); color: var(--tint-ink); }
.sh-scan-icon.fail { background: var(--warn-bg); color: var(--warn-text); }
.sh-scan-icon .icon { width: 26px; height: 26px; }
.sh-scan-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid currentColor;
                border-top-color: transparent; animation: sh-spin 0.8s linear infinite; }
.sh-scan-title { font-size: 17px; font-weight: 700; }
.sh-scan-msg { font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
.sh-scan-actions { display: flex; gap: 10px; margin-top: 16px; }
.sh-scan-actions .btn { font-size: 14px; }

/* a camera button beside a search box: <div class="search-row">input…<button class="scan-btn"> */
.scan-btn {
  flex: none; width: 48px; height: 48px; border: none; border-radius: var(--radius);
  background: var(--acc); color: var(--on-acc); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 120ms var(--ease);
}
.scan-btn:active { transform: scale(0.95); }
.scan-btn .icon { width: 22px; height: 22px; }

/* ---- Home launcher (lives here so the tiles are one style forever) ---- */
.home-hero {
  margin: -16px -16px 0; padding: 8px 20px 46px;
  background: var(--frame); color: var(--on-frame);
}
.home-greet { font-size: 14px; color: var(--on-frame-muted); }
.home-name { font-size: 26px; font-weight: 750; letter-spacing: -0.5px; line-height: 1.15; margin-top: 2px;
             overflow-wrap: anywhere; }
.home-sub { font-size: 13px; color: var(--on-frame-muted); margin-top: 6px; }
.home-scan {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-top: 14px; padding: 0 16px 0 12px;
  border: none; border-radius: 999px; background: var(--acc); color: var(--on-acc);
  font-family: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
  transition: transform 120ms var(--ease);
}
.home-scan:active { transform: scale(0.96); }
.home-scan .icon { width: 18px; height: 18px; }

/* the summary card rides up over the band: what needs you, what you last used */
.home-summary {
  position: relative; margin-top: -30px; margin-bottom: 22px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift); padding: 14px;
  animation: sh-rise 380ms var(--ease) both;
}
.home-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.6px;
              text-transform: uppercase; margin-bottom: 8px; }
.home-alert {
  display: flex; align-items: center; gap: 12px; padding: 8px 4px 8px 0; min-height: 50px;
  color: var(--text-primary); text-decoration: none; border-radius: 10px;
  animation: sh-fade 240ms ease-out both;
}
.home-alert + .home-alert { border-top: 1px solid var(--border); }
a.home-alert:active { background: var(--field-bg); }
.home-alert .tile-icon { width: 36px; height: 36px; border-radius: 10px; }
.home-alert .tile-icon .icon { width: 18px; height: 18px; }
.home-alert .grow { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.home-alert .grow small { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 1px; }
.home-alert .chev { color: var(--text-muted); flex: none; }
.home-alert.calm .tile-icon { background: var(--success-bg); color: var(--success-fill); }
.home-alert.calm .grow { color: var(--text-secondary); font-weight: 550; }
.home-alert.ghost .tile-icon, .home-alert.ghost .grow i {
  background: var(--field-bg); animation: sh-pulse 1.2s ease-in-out infinite;
}
.home-alert.ghost .grow i { display: block; height: 12px; width: 60%; border-radius: 6px; }
@keyframes sh-pulse { 50% { opacity: 0.45; } }
.count-pill {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acc); color: var(--on-acc); font-size: 12px; font-weight: 700;
  animation: sh-pop 300ms var(--ease) both;
}
.home-rule { height: 1px; background: var(--border); margin: 10px -14px 12px; }
.home-recent-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
                   margin: 0 -14px; padding: 0 14px 2px; }
.home-recent-row::-webkit-scrollbar { display: none; }
.home-recent-app {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 5px;
  border-radius: 999px; background: var(--field-bg); color: var(--text-primary);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: transform 120ms var(--ease);
}
.home-recent-app:active { transform: scale(0.96); }
.home-recent-app .tile-icon { width: 30px; height: 30px; border-radius: 50%; }
.home-recent-app .tile-icon .icon { width: 16px; height: 16px; }

.home-section { margin-bottom: 22px; animation: sh-rise 380ms var(--ease) both; }
.home-section-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; }
.home-section-head .icon { width: 18px; height: 18px; color: var(--tint-ink); flex: none; }
.home-section-title { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.home-section-note { font-size: 12px; color: var(--text-muted); margin-left: auto; text-align: right; }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 112px; padding: 14px; text-align: left;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--text-primary); text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.home-tile:active { transform: scale(0.97); }
@media (hover: hover) {
  .home-tile:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
}
/* an odd one out spans the row, lying on its side */
.home-tile.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; gap: 14px; }
.home-tile.wide .tile-text { flex: 1; }
.tile-icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--tint-ink);
}
.tile-icon .icon { width: 22px; height: 22px; }
.tile-text { min-width: 0; }
.tile-name { display: block; font-size: 15px; font-weight: 650; line-height: 1.25; letter-spacing: -0.1px; }
.tile-note { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.35; }
.tile-pill { display: contents; }   /* its pill lays out as the tile's own child */
.home-tile .count-pill { position: absolute; top: 12px; right: 12px; }
.home-tile.wide .count-pill { position: static; }
.tile-chev { color: var(--text-muted); flex: none; }
@media (max-width: 330px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-tile { flex-direction: row; align-items: center; min-height: 0; }
  .home-tile .count-pill { position: static; margin-left: auto; }
}
.home-foot-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; text-align: center;
                  padding: 0 16px 6px; }

/* the home launcher on a tablet or laptop (layout: 'wide', 2026-10-20): the
   band runs edge to edge (a shadow paints it past the body's width without
   widening the page), the summary splits in two, the apps fill each row */
@media (min-width: 744px) {
  #sh-frame.sh-wide .home-hero { margin: -20px 0 0; padding: 18px 0 64px;
                                 box-shadow: 0 0 0 100vmax var(--frame); clip-path: inset(0 -100vmax); }
  #sh-frame.sh-wide .home-name { font-size: 32px; }
  #sh-frame.sh-wide .home-summary { margin-top: -40px; padding: 18px 20px; }
  #sh-frame.sh-wide .home-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  #sh-frame.sh-wide .home-tile.wide { grid-column: auto; flex-direction: column; align-items: flex-start; min-height: 112px; gap: 10px; }
  #sh-frame.sh-wide .home-tile.wide .tile-chev { display: none; }
  #sh-frame.sh-wide .home-tile.wide .count-pill { position: absolute; }
  #sh-frame.sh-wide .home-section { margin-bottom: 28px; }
}
@media (min-width: 1024px) {
  #sh-frame.sh-wide .home-hero { margin-top: -24px; }
  #sh-frame.sh-wide .home-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
  #sh-frame.sh-wide .home-summary > .home-label { grid-column: 1; }
  #sh-frame.sh-wide #home-alerts { grid-column: 1; }
  #sh-frame.sh-wide #home-recent-wrap { grid-column: 2; grid-row: 1 / span 2; border-left: 1px solid var(--border); padding-left: 32px; }
  #sh-frame.sh-wide #home-recent-wrap .home-rule { display: none; }
  #sh-frame.sh-wide .home-recent-row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

/* ==================================================================
   Laptop mode (2026-10-20, design/inventory/supplier_portal_plan.md §5).
   An app turns it on with SHShell.init({ layout: 'wide', nav: [...] }):
   the frame gets .sh-wide. Phones (under 744 px) look as before; tablets
   (744-1023 px) get the whole width with the menu as a row along the top;
   laptops (1024 px and up) get the menu down the left and the work beside
   it. Apps that do not ask for it are untouched. Breakpoints and rules:
   design/customers/membership_web_app_plan.md §3.6 (no sideways scroll,
   44 px targets, 16 px inputs, nothing needs a mouse).
   ================================================================== */

/* the menu: a scrolling row of chips on phones and tablets */
.sh-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sh-nav {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 10px 16px 0; background: var(--surface-0);
}
.sh-nav::-webkit-scrollbar { display: none; }
.sh-nav:empty { display: none; }
.sh-nav-item {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--text-secondary);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.sh-nav-item .icon { width: 18px; height: 18px; }
.sh-nav-item.active { background: var(--tint); color: var(--tint-ink); border-color: transparent; }
.sh-nav-item .count-pill { min-width: 20px; height: 20px; font-size: 11px; animation: none; }
.sh-nav-group { display: none; }
#sh-frame.sh-entry .sh-nav { display: none; }

/* tablets: the whole width, the menu along the top */
@media (min-width: 744px) {
  #sh-frame.sh-wide {
    max-width: none; margin: 0; border-radius: 0; box-shadow: none; overflow: visible;
    min-height: 100vh; min-height: 100dvh;
  }
  body.sh-wide-body { background: var(--surface-0); }
  #sh-frame.sh-wide .sh-head { position: sticky; top: 0; z-index: 30; padding-left: 20px; padding-right: 20px; }
  #sh-frame.sh-wide .sh-nav { padding: 12px 24px 0; }
  #sh-frame.sh-wide #sh-body { padding: 20px 24px 28px; width: 100%; max-width: 1180px; margin: 0 auto; }
  #sh-frame.sh-wide.sh-entry #sh-body { max-width: none; }
}

/* laptops: the menu down the left, the work beside it */
@media (min-width: 1024px) {
  #sh-frame.sh-wide .sh-main { flex-direction: row; align-items: stretch; }
  #sh-frame.sh-wide .sh-nav {
    flex: none; width: 236px; flex-direction: column; gap: 2px; overflow: visible;
    padding: 18px 12px; border-right: 1px solid var(--border); background: var(--surface-1);
    position: sticky; top: var(--sh-head-h, 60px); align-self: flex-start;
    height: calc(100vh - var(--sh-head-h, 60px)); height: calc(100dvh - var(--sh-head-h, 60px)); overflow-y: auto;
  }
  #sh-frame.sh-wide.sh-entry .sh-nav { display: none; }
  #sh-frame.sh-wide .sh-nav-item {
    width: 100%; justify-content: flex-start; border: none; border-radius: 10px;
    background: transparent; min-height: 42px; padding: 0 12px;
  }
  #sh-frame.sh-wide .sh-nav-item .count-pill { margin-left: auto; }
  #sh-frame.sh-wide .sh-nav-item.active { background: var(--tint); color: var(--tint-ink); }
  #sh-frame.sh-wide .sh-nav-group {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--text-muted); padding: 14px 12px 6px;
  }
  #sh-frame.sh-wide .sh-nav-group:first-child { padding-top: 2px; }
  #sh-frame.sh-wide #sh-body { padding: 24px 32px 36px; }
}

@media (hover: hover) {
  .sh-nav-item:hover:not(.active) { background: var(--field-bg); color: var(--text-primary); }
  .choice-row:hover { border-color: var(--border-strong); }
  .btn:hover:not(:disabled) { filter: brightness(0.97); }
  .sh-table tbody tr.clickable:hover td { background: var(--field-bg); }
}
.btn:focus-visible, .sh-nav-item:focus-visible, .choice-row:focus-visible, .link:focus-visible,
.sh-table tr.clickable:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px;
}

/* Laptop helpers for screens first made for a phone (2026-10-20).
   wide-only / narrow-only: one of two renderings, a table from 744 px, the
   phone's list below. lap-title: a screen's name, shown on a laptop where the
   menu replaces the "Home" link, which lap-hide hides. A .screen.narrow keeps
   a form's width. lap-cols: the work and a side panel (lap-side, which stays
   in view) side by side; lap-cards: a list of cards that fills the width. */
@media (max-width: 743px) { .wide-only { display: none !important; } }
@media (min-width: 744px) { .narrow-only { display: none !important; } }
.lap-title { display: none; }
@media (min-width: 744px) {
  #sh-frame.sh-wide .screen.narrow { max-width: 640px; }
}
@media (min-width: 1024px) {
  #sh-frame.sh-wide .lap-title { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.3px;
                                 line-height: 1.2; margin: 0; }
  #sh-frame.sh-wide .lap-hide { display: none !important; }
  #sh-frame.sh-wide .top-bar { justify-content: flex-start; gap: 16px; margin-bottom: 16px; }
  #sh-frame.sh-wide .top-bar > :last-child:not(:first-child):not(.lap-title) { margin-left: auto; }
  .lap-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: 24px; align-items: start; }
  .lap-cols > .lap-side { position: sticky; top: calc(var(--sh-head-h, 60px) + 20px);
                          max-height: calc(100vh - var(--sh-head-h, 60px) - 40px); overflow-y: auto;
                          background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card);
                          box-shadow: var(--shadow-card); padding: 16px; }
  .lap-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; align-content: start; }
  .lap-cards > * { margin: 0 !important; }
  .lap-cards > .empty, .lap-cards > .sh-table-empty { grid-column: 1 / -1; }
}

/* a page's heading, with its actions on the right */
.sh-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
                flex-wrap: wrap; margin-bottom: 16px; }
.sh-page-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; }
.sh-page-head .sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* buttons that keep their own width (a row of actions) */
.sh-btnbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sh-btnbar .btn { width: auto; min-height: 44px; padding: 0 18px; }
.sh-btnbar.end { justify-content: flex-end; }

/* a search box with its filters */
.sh-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.sh-toolbar .field { margin-bottom: 0; flex: 1 1 220px; }
.sh-toolbar select, .sh-toolbar input { height: 44px; }

/* figures at a glance */
.sh-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 18px; }
@media (max-width: 479px) { .sh-stats { grid-template-columns: 1fr 1fr; } }
.sh-stat { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card);
           box-shadow: var(--shadow-card); padding: 14px; min-width: 0; }
.sh-stat .label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
/* Tiles wide enough for a figure in the tens of millions of naira on one line. */
.sh-stat .value { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin-top: 4px;
                  font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
@media (max-width: 479px) { .sh-stat .value { font-size: 18px; } }
.sh-stat .note { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* a white card for a block of work */
.sh-panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card);
            box-shadow: var(--shadow-card); padding: 16px; margin-bottom: 14px; min-width: 0; }
.sh-panel > h2 { margin-bottom: 12px; }

/* cards in a grid that widens with the screen */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

/* list and detail side by side on laptops, one under the other below */
.sh-cols { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1024px) {
  .sh-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sh-cols.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sh-cols > .sticky { position: sticky; top: calc(var(--sh-head-h, 60px) + 20px); }
}

/* tables: a real table on tablets and laptops, a card per row on phones.
   Each <td> carries data-label="Column" for the phone view. */
.sh-table-wrap { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card);
                 box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 12px; }
.sh-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sh-table th { text-align: left; font-size: 12px; font-weight: 650; color: var(--text-muted);
               padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-1);
               white-space: nowrap; }
.sh-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top;
               overflow-wrap: break-word; }
.sh-table td.lead, .sh-table td.nowrap { white-space: nowrap; }
.sh-table tbody tr:last-child td { border-bottom: none; }
.sh-table .num, .sh-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-table tr.clickable { cursor: pointer; }
.sh-table tr.selected td { background: var(--tint); }
.sh-table .muted { color: var(--text-muted); font-size: 12px; }
.sh-table-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 14px; }
@media (max-width: 743px) {
  .sh-table-wrap { background: transparent; border: none; box-shadow: none; overflow: visible; }
  .sh-table thead { display: none; }
  .sh-table, .sh-table tbody, .sh-table tr, .sh-table td { display: block; width: 100%; }
  .sh-table tr { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card);
                 box-shadow: var(--shadow-card); padding: 6px 0; margin-bottom: 8px; }
  .sh-table td { border: none; padding: 5px 14px; display: flex; justify-content: space-between; gap: 12px; }
  .sh-table td::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; font-weight: 600;
                         flex: none; max-width: 45%; }
  .sh-table td[data-label=""]::before, .sh-table td:not([data-label])::before { content: none; }
  .sh-table td.lead { font-weight: 650; }
  .sh-table .num { text-align: right; }
}

/* page through a long list */
.sh-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px;
            font-size: 13px; color: var(--text-muted); }
.sh-pager .sh-btnbar .btn { min-height: 38px; }

/* a form or question over the page: centred on tablets and laptops, a sheet
   from the bottom on phones. SHShell.modal() builds it. */
.sh-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 62;
            display: flex; align-items: flex-end; justify-content: center; }
.sh-modal-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.42); }
.sh-modal-panel {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--surface-2); color: var(--text-primary);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-lift);
  animation: sh-rise 240ms var(--ease) both;
}
.sh-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                 padding: 16px 18px 10px; }
.sh-modal-title { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; }
.sh-modal-x { width: 40px; height: 40px; border: none; background: none; border-radius: 10px; cursor: pointer;
              color: var(--text-muted); font-size: 22px; line-height: 1; }
.sh-modal-x:hover { background: var(--field-bg); }
.sh-modal-body { padding: 4px 18px 8px; overflow-y: auto; }
.sh-modal-foot { padding: 10px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.sh-modal-foot .sh-btnbar { justify-content: flex-end; }
@media (max-width: 743px) {
  .sh-modal-foot .sh-btnbar { flex-direction: column-reverse; align-items: stretch; }
  .sh-modal-foot .sh-btnbar .btn { width: 100%; }
}
@media (min-width: 744px) {
  .sh-modal { align-items: center; padding: 24px; }
  .sh-modal-panel { border-radius: var(--radius-sheet); }
  .sh-modal-panel.wide { max-width: 860px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important;
                           transition-duration: 0.01ms !important; }
}