/*
  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, network gate): the band fills the page ---- */
#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-foot { border-top: none; color: var(--on-frame-muted); justify-content: center; gap: 10px; }
#sh-frame.sh-entry .sh-foot-brand b { color: var(--on-frame); }
.sh-entry-pad {
  width: 100%; max-width: 380px; margin: 0 auto;
  padding: max(5vh, 16px) 4px 12px;
  display: flex; flex-direction: column; align-items: stretch;
}
.sh-brand-block {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-bottom: 22px;
}
.sh-logo-lg { width: 76px; height: 76px; display: block; margin-bottom: 12px;
              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: 24px; font-weight: 700; letter-spacing: -0.4px; color: var(--on-frame); }
.sh-tagline { font-size: 13px; color: var(--on-frame-muted); margin-top: 3px; }

.sh-card {
  background: var(--surface-2); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sheet);
  padding: 20px; box-shadow: var(--shadow-lift);
  animation: sh-rise 360ms var(--ease) 60ms both;
}
@keyframes sh-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.sh-store-row { display: flex; align-items: center; gap: 12px; }
.sh-store-mark {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--tint-ink); font-size: 17px; font-weight: 700;
}
.sh-store-name { font-size: 15px; font-weight: 650; line-height: 1.25; }
.sh-store-state { font-size: 12px; color: var(--text-muted); margin-top: 2px;
                  display: flex; align-items: center; gap: 6px; }
.sh-dot { width: 8px; height: 8px; 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: 16px -20px; }
.sh-login-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.sh-login-sub { font-size: 13px; color: var(--text-muted); margin: 3px 0 16px; }
.sh-login-switch { text-align: center; }
.sh-login-switch .link { display: inline-block; margin-top: 14px; }
.sh-login-links { display: grid; gap: 10px; justify-items: center; margin-top: 14px; }
.sh-login-links .link { margin-top: 0; }
.sh-login-note { font-size: 12px; color: var(--on-frame-muted); text-align: center;
                 margin-top: 16px; line-height: 1.5; padding: 0 12px; }

/* 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.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; }

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