/* ==========================================================================
   SLP Express - admin and cloud sites
   One stylesheet, phone first (360 px). No inline styles or scripts anywhere:
   the Content-Security-Policy forbids them, so every visual lives here.

   PART 1 is the DESIGN SYSTEM that later milestones reuse (rate upload,
   wholesale country tables, callbacks): tokens, type, components, motion.
   PART 2 is page layout for the M3A screens.
   PART 3 is the M3B rate screens (price lists in admin, wholesale rates in
   cloud), built from PART 1's tokens; its class list is at its start.
   PART 4 is the owners' role picker and the cloud staff Home (2026-09-28).
   PART 5 is the owner's WhatsApp inbox (M3C): the list, a chat, callbacks,
   alerts and saved replies; its class list is at its start.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESIGN SYSTEM - available classes
   Layout    .page  .card  .narrow  .titlebar  .actions  .back-link
   Surfaces  .auth .auth__hero (dark login panel)  .surface-dark  .surface-gold
   Type      .muted  .hint  .num (tabular numbers for prices and counts)
             .accent-gold  .eyebrow
   Buttons   button / .button          gold primary
             .button.secondary          purple outline (on light)
             .positive                  green confirm ("switch on")
             .ghost                     outline on dark surfaces
             .danger                    destructive
             .wide (full width)  button.link (text style, e.g. Sign out)
   Pills     .pill (gold text on dark)  .chip (on dark)
             .badge.good / .bad / .neutral (on light)
   Feedback  .notice (success; its svg.notice__icon draws a check)
             .error (error; slides in)  .field-error
             .is-invalid (input: red border)  .shake (one short shake)
   Data      .facts (dl)  .list .row  .events .event  .table-wrap .table
             .skeleton (loading placeholder with shimmer)
             .page-progress (htmx request bar; also give it .htmx-indicator)
   Brand     .logo-tile (small logo in the header)  .orbit (logo, dotted
             route and plane on the login hero)  .secret  .codes  .qr
   Motion    PART 1d. Only inside prefers-reduced-motion: no-preference;
             transform and opacity only. Keyframes: sl-fade-up sl-slide-in
             sl-draw sl-shake sl-orbit sl-float sl-progress sl-shimmer
   -------------------------------------------------------------------------- */

/* ---- PART 1a. Tokens (slpcouriers.in design system + the logo) ----------- */
:root {
  /* Brand */
  --primary: #4a0072;
  --secondary: #6a0099;
  --logo-purple: #9821c8;
  --gold: #ffd54f;
  --gold-hover: #ffca28;
  --gold-deep: #ffb300;
  --on-gold: #3a2600; /* text on gold: 10.2:1 */
  --orange: #e07020; /* logo orange: icons and large text only (3.2:1 on white) */
  --orange-text: #a3470a; /* orange for small text: 6.1:1 on white */
  --green: #16a34a; /* website green: icons, borders, glows (3.3:1, not for text) */
  --green-strong: #15803d; /* green behind white text: 5.0:1 */
  --green-ink: #14532d;
  --danger: #b91c1c;
  --danger-ink: #991b1b;

  /* Neutrals */
  --text: #333333;
  --muted: #666666;
  --heading: #4a0072;
  --page: #f8f9fa;
  --page-alt: #f4f7f6;
  --white: #ffffff;
  --base: #2a0043; /* the website's page base, behind everything */
  --footer: #111111;
  --line: #ece4f3;
  --input-border: #8c7a9e; /* 3.9:1 against white */

  /* Tints */
  --tint-purple: #f1e7f7;
  --tint-gold: #fff8e1;
  --tint-green: #e7f6ec;
  --tint-red: #fdecec;
  --row-hover: #f6f0fb;

  /* Surfaces */
  --grad-header: linear-gradient(90deg, #4a0072, #6a0099);
  --grad-hero: linear-gradient(180deg, #1a0033 0%, #2d0a4e 50%, #1a0033 100%);
  --grad-hero-overlay: linear-gradient(103deg, rgba(28, 0, 48, 0.9) 0%, rgba(45, 0, 74, 0.78) 42%, rgba(74, 0, 114, 0.52) 72%, rgba(90, 0, 140, 0.42) 100%);
  --grad-card-head: linear-gradient(135deg, #3a0068 0%, #6a0099 100%);
  --grad-dark: linear-gradient(135deg, #3e0061 0%, #4a0072 100%);
  --grad-gold: linear-gradient(135deg, #ffd54f 0%, #ffb300 100%);

  /* Shadows (website values) */
  --shadow-sm: 0 8px 30px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.3);
  --shadow-gold: 0 10px 30px rgba(255, 213, 79, 0.35);
  --shadow-primary: 0 8px 24px rgba(74, 0, 114, 0.25);
  --shadow-header: 0 4px 18px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 10px 30px rgba(74, 0, 114, 0.1);
  --shadow-card-dark: 0 24px 60px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(74, 0, 114, 0.12);
  --shadow-btn-gold: 0 6px 20px rgba(255, 213, 79, 0.32);
  --shadow-btn-green: 0 6px 20px rgba(22, 163, 74, 0.34);

  /* Radii (website values) */
  --r-sm: 6px;
  --r-md: 12px;
  --r-btn: 11px;
  --r-card: 14px;
  --r-lg: 20px;
  --r-xl: 25px;
  --r-pill: 999px;

  /* Type: Poppins first; Telugu falls through to Noto Sans Telugu */
  --font: 'Poppins', 'Noto Sans Telugu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 260ms;
  --t-slow: 380ms;
}

/* ---- PART 1b. Fonts: Poppins, self-hosted (OFL, see /static/fonts/OFL.txt) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/poppins-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/poppins-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/poppins-latin-800-normal.woff2') format('woff2');
}

/* ---- PART 1c. Base and components ---------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--base);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  color: var(--heading);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.5rem;
  margin: 4px 0 14px;
}

h2 {
  font-size: 1.15rem;
  margin: 0 0 10px;
}

a {
  color: var(--secondary);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--primary);
}

img,
svg {
  max-width: 100%;
}

.muted,
.hint {
  color: var(--muted);
}

.hint {
  font-size: 0.9rem;
}

.num,
.facts dd,
.event .muted,
.codes,
.secret {
  font-variant-numeric: tabular-nums;
}

.accent-gold {
  color: var(--gold);
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-text);
}

/* Focus: a gold ring around a purple one, visible on light, dark and gold. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--primary);
}

/* Buttons ---------------------------------------------------------------- */
button,
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 22px;
  margin-top: 18px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--on-gold);
  background: var(--gold);
  border: 2px solid transparent;
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-btn-gold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:hover,
.button:hover {
  color: var(--on-gold);
  background: var(--gold-hover);
}

.button.secondary {
  color: var(--primary);
  background: var(--white);
  border-color: var(--primary);
  box-shadow: none;
}

.button.secondary:hover {
  color: var(--primary);
  background: var(--tint-purple);
}

.positive,
.button.positive {
  color: var(--white);
  background: var(--green-strong);
  box-shadow: var(--shadow-btn-green);
}

.positive:hover,
.button.positive:hover {
  color: var(--white);
  background: var(--green-ink);
}

.ghost,
.button.ghost {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: none;
}

button.danger {
  color: var(--white);
  background: var(--danger);
  box-shadow: 0 6px 20px rgba(185, 28, 28, 0.25);
}

button.danger:hover {
  color: var(--white);
  background: var(--danger-ink);
}

button.link {
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  font-weight: 600;
  color: inherit;
  background: none;
  border: 0;
  box-shadow: none;
}

button.link:hover {
  color: inherit;
  background: rgba(255, 255, 255, 0.1);
}

.wide {
  width: 100%;
}

/* Cards: the website's card - white, gold hairline, a purple head strip with a
   gold title (the card's first heading). The big dark shadow is only used on
   dark surfaces; on light pages it is softened. */
.card {
  background: var(--white);
  border: 2px solid rgba(255, 213, 79, 0.55);
  border-radius: var(--r-card);
  padding: 18px;
  margin: 0 0 18px;
  box-shadow: var(--shadow-card);
}

.card > h1:first-child,
.card > h2:first-child {
  margin: -18px -18px 16px;
  padding: 14px 18px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gold);
  background: var(--grad-card-head);
  border-radius: 12px 12px 0 0;
}

.narrow {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* Pills and chips (on dark), badges (on light) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.badge {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
}

.badge.good {
  color: #166534;
  background: var(--tint-green);
}

.badge.bad {
  color: var(--danger);
  background: var(--tint-red);
}

.badge.neutral {
  color: var(--primary);
  background: var(--tint-purple);
}

/* Forms */
label {
  display: block;
  margin: 16px 0 6px;
  font-weight: 600;
  color: var(--text);
}

input[type='text'],
input[type='password'],
select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px; /* 16px keeps phones from zooming into the field */
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--input-border);
  border-radius: var(--r-md);
}

input[type='text']:hover,
input[type='password']:hover,
select:hover {
  border-color: var(--secondary);
}

input.is-invalid {
  border-color: var(--danger);
  background: #fffafa;
}

/* Notices */
.notice,
.error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-weight: 600;
}

.notice {
  color: var(--green-ink);
  background: var(--tint-green);
  border: 1px solid rgba(22, 163, 74, 0.35);
}

.error {
  color: var(--danger-ink);
  background: var(--tint-red);
  border: 1px solid rgba(185, 28, 28, 0.3);
}

.notice__icon,
.error__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.field-error {
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--danger-ink);
}

/* Values shown once (one-time passwords, 2-step keys, recovery codes) */
.secret {
  padding: 14px;
  text-align: center;
  background: var(--tint-gold);
  border: 2px dashed var(--secondary);
  border-radius: var(--r-md);
}

.secret code,
.codes code {
  font-family: var(--font-mono);
  word-break: break-all;
}

.secret code {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}

.codes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-left: 1.8em;
}

.codes li {
  font-size: 1.05rem;
}

.qr {
  display: block;
  width: 220px;
  height: 220px;
  max-width: 100%;
  margin: 12px auto;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* Facts, lists, history */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 18px;
  margin: 0;
}

.facts dt {
  margin-top: 10px;
  font-weight: 600;
  color: var(--muted);
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list .row {
  padding: 0;
  border-width: 1px;
  overflow: hidden;
}

.list .row a {
  display: block;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.list .row a:hover {
  background: var(--row-hover);
}

.list .row strong {
  color: var(--heading);
}

.badges {
  display: block;
}

.events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.event:last-child {
  border-bottom: 0;
}

.event .badge {
  margin-top: 0;
}

.more {
  padding: 14px 0 0;
  text-align: center;
}

/* Tables (ready for the wholesale rate tables of M3B) */
.table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.table th {
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  font-weight: 700;
  color: var(--heading);
  background: #f3ecf8;
}

.table td {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}

.table .num {
  text-align: right;
}

.table tbody tr:hover {
  background: var(--row-hover);
}

.skeleton {
  position: relative;
  display: block;
  min-height: 1em;
  overflow: hidden;
  color: transparent;
  background: #ece6f3;
  border-radius: var(--r-sm);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
  transform: translateX(-100%);
}

/* htmx: the request bar. htmx's own indicator styles are switched off (CSP),
   so the indicator rules live here. */
.htmx-indicator {
  opacity: 0;
}

.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator {
  opacity: 1;
}

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
}

.page-progress::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.7);
  transform: translateX(-100%);
}

/* Dark and gold surfaces */
.surface-dark {
  color: var(--white);
  background: var(--grad-dark);
}

.surface-dark h1,
.surface-dark h2 {
  color: var(--white);
}

.surface-gold {
  color: var(--on-gold);
  background: var(--grad-gold);
}

/* ---- PART 2. Layout of the M3A screens ------------------------------------ */

/* Header: the website's gradient bar, the logo in a gold-edged tile. */
.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  min-height: 64px;
  padding: 10px 16px;
  color: var(--white);
  background: var(--grad-header);
  box-shadow: var(--shadow-header);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--white);
}

.brand .realm {
  color: var(--gold);
}

.logo-tile {
  display: inline-flex;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 2px;
  overflow: hidden;
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: 10px;
}

.logo-tile__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.logo-tile img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  border-radius: var(--r-sm);
}

.nav a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 3px;
  background: var(--gold);
  border-radius: 3px;
}

.nav form.inline {
  margin: 0;
}

.menu-toggle,
.nav .menu-close {
  display: none;
}

/* Phones: the full menu folds behind a gold menu button (pure CSS, :target). */
@media (max-width: 719.98px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--gold);
    border-radius: var(--r-md);
  }

  .menu-toggle:hover {
    color: var(--gold);
    background: rgba(255, 255, 255, 0.1);
  }

  .nav--collapsible {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 16px 14px;
    background: var(--primary);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--shadow-header);
  }

  .nav--collapsible:target {
    display: flex;
  }

  /* Opening the menu jumps to #main-nav; keep the header in view. */
  .nav--collapsible {
    scroll-margin-top: 120px;
  }

  .nav--collapsible a,
  .nav--collapsible button.link {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
  }

  .nav--collapsible a[aria-current='page']::after {
    right: auto;
    width: 28px;
    bottom: 8px;
  }

  .nav--collapsible .menu-close {
    display: inline-flex;
    align-self: flex-end;
    justify-content: center;
    width: 44px;
    color: var(--gold);
  }

  .nav--collapsible .menu-close::after {
    display: none;
  }
}

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}

.foot {
  padding: 18px 16px 24px;
  font-size: 0.88rem;
  text-align: center;
  color: var(--white);
  background: var(--footer);
}

.titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.titlebar h1 {
  margin: 0;
}

.titlebar .button {
  margin-top: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.actions {
  margin-top: 14px;
}

details.confirm {
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

details.confirm summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

details.confirm form {
  padding-bottom: 14px;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* Sign-in pages: the website's dark hero with the logo on a dotted route. */
body.page-auth .page {
  display: flex;
  flex-direction: column;
  max-width: none;
  padding: 0;
}

.auth {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  gap: 22px;
  min-height: 100%;
  padding: 26px 16px 40px;
  background: var(--grad-hero-overlay), var(--grad-hero);
}

.auth__hero {
  max-width: 460px;
  text-align: center;
  color: var(--white);
}

.auth__title {
  margin: 16px 0 6px;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--gold);
}

.auth__sub {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.82);
}

.auth__hero .pill {
  margin-bottom: 4px;
}

.auth .card {
  width: 100%;
  max-width: 460px;
  margin: 0;
  box-shadow: var(--shadow-card-dark);
}

.orbit {
  --size: 164px;
  --logo: 102px;
  --plane: 22px;
  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 0 auto;
}

.orbit__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orbit__carrier {
  position: absolute;
  inset: 0;
}

.orbit__plane {
  position: absolute;
  top: calc(var(--size) * 0.03 - var(--plane) / 2);
  left: 50%;
  width: var(--plane);
  height: var(--plane);
  margin-left: calc(var(--plane) / -2);
  transform: rotate(90deg);
}

.orbit__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--logo);
  height: var(--logo);
  margin: calc(var(--logo) / -2) 0 0 calc(var(--logo) / -2);
}

.orbit__logo img {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
  border: 3px solid var(--gold);
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35), var(--shadow-gold);
}

@media (min-width: 640px) {
  .page {
    padding: 28px 24px 40px;
  }

  .facts {
    grid-template-columns: max-content 1fr;
  }

  .facts dt {
    margin-top: 0;
  }

  .codes {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .auth {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    align-items: center;
    align-content: center;
    column-gap: 64px;
    min-height: 620px;
    padding: 56px max(32px, calc((100vw - 1100px) / 2));
  }

  .auth__hero {
    justify-self: start;
    text-align: left;
  }

  .auth__hero .orbit {
    --size: 220px;
    --logo: 138px;
    --plane: 26px;
    margin: 0;
  }

  .auth__title {
    font-size: 2.2rem;
  }
}

/* ---- PART 3. Rate screens (M3B) ---------------------------------------------
   Price lists in admin, wholesale rates in cloud. Same tokens, card, buttons and
   motion as PART 1; phone first.
   Layout    .rates-grid (two channel cards from 900 px)  .stack  .sr-only  .date
             .nowrap  .form-width .confirm-width (centred, with their back link)
   Lists     .list-rows .list-row  .panel (.panel--active .panel--empty .panel--draft
             .panel--ready .panel--stop)
   Numbers   .stats .stat (.stat--good .stat--bad .stat--warn)
   Findings  .findings (.findings--error .findings--info)  details.more
             .notice.notice--warn (something waits for a person)
   Changes   .change-table (.change--up .change--down)  .change__pct  .chips .chip-light
   Upload    .steps .step  .choices .choice  .dropzone  .week-fields  .code-box
             .checking (the "checking your file" overlay; CSS only)
   Confirm   .confirm-card .confirm-summary  button.big / .button.big
   Cloud     .rates-hero  .downloads .download  .search  .carrier-grid  .jump
             .rate-table (.section-row)  .pick-list  .dest-list
   Motion    in PART 1d: sl-fly (the plane crossing the checking track)
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stack > * + * {
  margin-top: 12px;
}

.notice.notice--warn {
  color: #5c4300;
  background: var(--tint-gold);
  border-color: rgba(255, 179, 0, 0.5);
}

.notice--warn .error__icon {
  color: #b27b00;
}

.badge.draft {
  color: #6b4e00;
  background: var(--tint-gold);
}

input[type='date'],
input[type='search'] {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--input-border);
  border-radius: var(--r-md);
}

input[type='date']:hover,
input[type='search']:hover {
  border-color: var(--secondary);
}

.intro {
  margin: 0 0 16px;
  color: var(--muted);
}

/* A date never splits at its hyphens ("20-09-" / "2026"); a week may wrap between its dates. */
.date,
.nowrap {
  white-space: nowrap;
}

/* A form or confirmation that reads best at a limited width, and its back link. */
.form-width,
.confirm-width {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.confirm-width {
  max-width: 600px;
}

/* Overview: one card per channel, side by side on wide screens */
.rates-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.rates-grid > .card {
  margin: 0;
}

.card-head-note {
  float: right;
  margin: 2px 0 0 8px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--gold);
  border-radius: var(--r-pill);
}

.panel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  margin: 0 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--page-alt);
}

.panel__icon {
  flex: none;
  width: 34px;
  height: 34px;
  margin-top: 2px;
}

.panel__body {
  min-width: 0;
  flex: 1;
}

.panel__title {
  margin: 0;
  font-weight: 800;
  line-height: 1.3;
}

.panel__big {
  display: block;
  margin: 2px 0;
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.panel p {
  margin: 2px 0 0;
}

.panel .button {
  margin-top: 10px;
}

.panel--active {
  color: var(--green-ink);
  background: var(--tint-green);
  border-color: rgba(22, 163, 74, 0.35);
}

.panel--active .panel__icon {
  color: var(--green-strong);
}

.panel--empty {
  color: var(--muted);
  border-style: dashed;
}

.panel--draft {
  color: #5c4300;
  background: var(--tint-gold);
  border-color: rgba(255, 179, 0, 0.45);
}

.panel--ready {
  color: var(--green-ink);
  background: var(--tint-green);
  border: 2px solid rgba(22, 163, 74, 0.45);
}

.panel--stop {
  color: var(--danger-ink);
  background: var(--tint-red);
  border-color: rgba(185, 28, 28, 0.3);
}

.panel--draft a,
.panel--active a,
.panel--stop a {
  color: inherit;
  font-weight: 700;
}

.list-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-row {
  border-top: 1px solid var(--line);
}

.list-row a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: baseline;
  padding: 12px 4px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-sm);
}

.list-row a:hover {
  background: var(--row-hover);
}

.list-row .badge {
  justify-self: start;
  margin: 0;
}

.list-row__week {
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.list-row__meta {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: var(--muted);
}

.subhead {
  margin: 18px 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-text);
}

/* Count tiles */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.stat {
  padding: 12px 8px;
  text-align: center;
  background: var(--tint-purple);
  border-radius: var(--r-md);
}

.stat__value {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}

.stat--good {
  background: var(--tint-green);
}

.stat--good .stat__value {
  color: var(--green-strong);
}

.stat--bad {
  background: var(--tint-red);
}

.stat--bad .stat__value {
  color: var(--danger);
}

.stat--warn {
  background: var(--tint-gold);
}

.stat--warn .stat__value {
  color: #7a5a00;
}

/* Findings of the checks, in plain words */
.findings {
  list-style: none;
  margin: 0;
  padding: 0;
}

.findings li {
  position: relative;
  padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.findings li:last-child {
  border-bottom: 0;
}

.findings li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-deep);
}

.findings--error li::before {
  background: var(--danger);
}

.findings--info li::before {
  background: var(--input-border);
}

details.more {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

details.more > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}

details.more > summary::-webkit-details-marker {
  display: none;
}

/* A chevron: down when closed, up when open. */
details.more > summary::after {
  content: '';
  width: 9px;
  height: 9px;
  margin: -4px 4px 0 auto;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}

details.more[open] > summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

details.more > :not(summary) {
  margin: 0 14px 12px;
}

/* Changes against the active list */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.chip-light {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--tint-purple);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

.chip-light--up {
  color: var(--danger);
  background: var(--tint-red);
}

.chip-light--down {
  color: #166534;
  background: var(--tint-green);
}

.change-table .change__what {
  min-width: 12em;
  overflow-wrap: anywhere;
}

.change-table .change__what .muted {
  font-size: 0.85rem;
}

.change-table .change__prices {
  font-weight: 700;
  white-space: nowrap;
}

.change__pct {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: var(--r-pill);
}

.change--up .change__pct {
  color: var(--danger);
  background: var(--tint-red);
}

.change--down .change__pct {
  color: #166534;
  background: var(--tint-green);
}

/* Phones: each change is two lines (what; before → after and the change) */
@media (max-width: 719.98px) {
  .change-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .change-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
  }

  .change-table tbody tr:first-child {
    border-top: 0;
  }

  .change-table td {
    padding: 0;
    border: 0;
  }

  .change-table td.change__what {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .change-table td.num {
    text-align: left;
  }

  .change-table td:last-child {
    text-align: right;
  }
}

.card h3 {
  margin: 18px 0 6px;
  font-size: 1rem;
}

/* Files of a list */
.file-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.file-row:last-child {
  border-bottom: 0;
}

.file-row__icon {
  flex: none;
  width: 36px;
  height: 36px;
}

.file-row__name {
  min-width: 0;
  flex: 1 1 200px;
  overflow-wrap: anywhere;
}

.file-row__name span {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}

.file-row .button {
  margin: 0;
  min-height: 44px;
  padding: 8px 14px;
}

/* Upload: numbered steps */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  margin: 0;
  padding: 0 0 22px 46px;
  border: 0;
  min-width: 0;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-weight: 800;
  color: var(--on-gold);
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(255, 179, 0, 0.35);
}

.step::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 38px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}

.step:last-child::after {
  display: none;
}

.step fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.step__title {
  display: block;
  margin: 3px 0 10px;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--heading);
}

.step__title .muted {
  font-weight: 600;
  font-size: 0.9rem;
}

.choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

label.choice {
  position: relative;
  display: block;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.choice input {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  margin: -10px 0 0;
  opacity: 0;
}

.choice__box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 68px;
  padding: 12px 14px 12px 50px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
}

.choice__box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 14px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: var(--white);
  border: 2px solid var(--input-border);
  border-radius: 50%;
}

.choice__box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
}

.choice:hover .choice__box {
  border-color: var(--secondary);
}

.choice input:checked + .choice__box {
  background: var(--tint-purple);
  border-color: var(--primary);
}

.choice input:checked + .choice__box::before {
  border-color: var(--primary);
}

.choice input:checked + .choice__box::after {
  opacity: 1;
  transform: none;
}

.choice input:focus-visible + .choice__box {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.choice__title {
  font-weight: 800;
  color: var(--heading);
}

.choice__hint {
  font-size: 0.88rem;
  color: var(--muted);
}

label.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 150px;
  margin: 0;
  padding: 20px 16px;
  font-weight: 400;
  text-align: center;
  background: linear-gradient(180deg, #fcfaff 0%, #f5eefb 100%);
  border: 2px dashed #bfa5d6;
  border-radius: var(--r-lg);
  cursor: pointer;
}

.dropzone--small {
  min-height: 118px;
}

.dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone:hover,
.dropzone.is-dragover {
  background: var(--tint-purple);
  border-color: var(--secondary);
}

.dropzone:has(.dropzone__input:focus-visible) {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.dropzone__icon {
  display: block;
  width: 46px;
  height: 46px;
}

.dropzone__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--heading);
}

.dropzone__hint {
  font-size: 0.88rem;
  color: var(--muted);
}

.dropzone__chosen {
  max-width: 100%;
  font-weight: 700;
  color: var(--green-ink);
  overflow-wrap: anywhere;
}

.dropzone__chosen:empty {
  display: none;
}

.dropzone__chosen.is-wrong {
  color: var(--danger-ink);
}

/* A chosen workbook (CSS knows a required file input is valid once a file is chosen). */
.dropzone:has(.dropzone__input[required]:valid),
.dropzone.is-chosen {
  background: var(--tint-green);
  border-style: solid;
  border-color: var(--green);
}

.week-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 10px;
}

@media (min-width: 420px) {
  .week-fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.week-fields label {
  margin-top: 0;
  font-size: 0.9rem;
}

.code-box {
  padding: 14px;
  background: var(--tint-gold);
  border: 1px solid rgba(255, 179, 0, 0.45);
  border-radius: var(--r-md);
}

.code-box label {
  margin-top: 8px;
}

.code-box p {
  margin: 0;
}

/* The "checking your file" state: a full-screen branded overlay while the import runs.
   Shown by CSS alone (the valid form whose button was just pressed still has focus), and
   by the upload script's .is-checking class where a browser does not focus buttons. */
.checking {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--white);
  background: var(--grad-hero-overlay), var(--grad-hero);
  opacity: 0;
  visibility: hidden;
}

form.is-checking .checking,
form.upload-form:valid:has(.upload-submit:focus) .checking {
  opacity: 1;
  visibility: visible;
}

.checking__track {
  position: relative;
  width: min(260px, 80vw);
  height: 34px;
  margin-bottom: 18px;
  overflow: hidden;
}

.checking__track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dotted rgba(255, 213, 79, 0.65);
}

.checking__runner {
  position: absolute;
  inset: 0;
}

.checking__plane {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -30px;
  transform: rotate(90deg);
}

.checking__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
}

.checking__hint {
  max-width: 420px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.checking__bar {
  position: relative;
  width: min(260px, 80vw);
  height: 4px;
  margin-top: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
}

.checking__bar::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: var(--gold);
  border-radius: inherit;
  transform: translateX(-100%);
}

/* Confirmations: switch on (green) and undo */
.confirm-card {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.confirm-card--go {
  border-color: rgba(22, 163, 74, 0.55);
}

.confirm-card--go > h1:first-child {
  color: var(--white);
  background: linear-gradient(135deg, #14532d 0%, #15803d 100%);
}

.confirm-summary {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--tint-green);
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: var(--r-md);
}

.confirm-summary--neutral {
  background: var(--tint-purple);
  border-color: var(--line);
}

.confirm-summary p {
  margin: 0;
}

.confirm-summary strong {
  font-variant-numeric: tabular-nums;
}

.confirm-lead {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green-ink);
}

.confirm-summary--neutral .confirm-lead {
  color: var(--heading);
}

.swap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 14px;
}

.swap__item {
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

.swap__item--off {
  background: var(--page-alt);
}

.swap__item--on {
  background: var(--tint-green);
  border-color: rgba(22, 163, 74, 0.35);
}

.swap__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.swap__week {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

button.big,
.button.big {
  min-height: 58px;
  font-size: 1.1rem;
}

/* Cloud: the week's rates */
.rates-hero {
  position: relative;
  margin: 0 0 18px;
  padding: 22px 18px 20px;
  overflow: hidden;
  color: var(--white);
  background: var(--grad-hero-overlay), var(--grad-hero);
  border: 2px solid rgba(255, 213, 79, 0.55);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card-dark);
}

.rates-hero__hello {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  overflow-wrap: anywhere;
}

.rates-hero h1 {
  margin: 0 0 16px;
  font-size: 1.6rem;
  color: var(--gold);
}

.rates-hero__dates {
  display: block;
  margin-top: 6px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.rates-hero__wait {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.rates-hero__wait svg {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--gold);
}

.downloads {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

a.download {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 12px 16px;
  text-align: left;
}

.download__icon {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 4px;
  background: var(--white);
  border-radius: 10px;
}

.download__text {
  min-width: 0;
  flex: 1;
}

.download__label {
  display: block;
  font-size: 1.05rem;
}

.download__file {
  display: block;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.8;
}

.download__arrow {
  flex: none;
  width: 22px;
  height: 22px;
}

.search {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.search input {
  flex: 1;
  min-width: 0;
}

.search button {
  flex: none;
  margin: 0;
}

.search button svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.country-head {
  margin: 0 0 16px;
}

.country-head h1 {
  margin: 0 0 4px;
}

/* Jump links to each carrier's table (phones and tablets; wide screens show all three). */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
}

.jump a:hover {
  background: var(--tint-purple);
  border-color: var(--secondary);
}

.carrier-card {
  scroll-margin-top: 12px;
}

.country-head p {
  margin: 0;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.carrier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.carrier-grid > .card {
  margin: 0;
}

.carrier-card .card-sub {
  margin: -8px 0 10px;
  font-size: 0.88rem;
  color: var(--muted);
}

.rate-table th[scope='row'] {
  font-weight: 600;
  color: var(--text);
  background: none;
  white-space: normal;
  border-top: 1px solid var(--line);
}

.rate-table thead th {
  font-size: 0.85rem;
}

.rate-table .section-row th {
  padding-top: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-text);
  background: var(--white);
  border-top: 1px solid var(--line);
}

.rate-table .section-row th span {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

.rate-table td.num {
  font-weight: 700;
  color: var(--heading);
  white-space: nowrap;
}

.rate-table td.is-empty {
  color: var(--muted);
  font-weight: 400;
}

.rate-table tbody tr:nth-child(odd):not(.section-row) {
  background: #fbf9fd;
}

.pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pick-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 8px 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.pick-list a:hover {
  background: var(--row-hover);
}

.pick-list a::after {
  content: '\203A';
  font-size: 1.4rem;
  color: var(--secondary);
}

/* Admin: destinations */
.dest-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dest {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.dest:last-child {
  border-bottom: 0;
}

.dest__name {
  font-weight: 800;
  color: var(--heading);
}

.dest__name .badge {
  margin: 0 0 0 6px;
}

.dest__carrier {
  font-size: 0.92rem;
}

.dest__carrier b {
  display: inline-block;
  min-width: 52px;
  color: var(--muted);
  font-weight: 700;
}

.dest-head {
  display: none;
}

@media (min-width: 560px) {
  /* Wide enough: the weeks line up after a fixed badge column, the details under the week. */
  .list-row a {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .list-row__meta {
    grid-column: 2;
  }

  .choices {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .downloads {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .swap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 720px) {
  .carrier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rates-hero {
    padding: 28px 28px 26px;
  }

  .rates-hero h1 {
    font-size: 2rem;
  }
}

@media (min-width: 900px) {
  .rates-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .dest,
  .dest-head {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1fr;
    gap: 14px;
  }

  .dest-head {
    padding: 8px 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
  }

  .dest__carrier b {
    display: none;
  }
}

@media (min-width: 1100px) {
  .carrier-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jump {
    display: none;
  }
}

/* Small phones: the search button shows only its icon; its word stays for screen readers. */
@media (max-width: 399.98px) {
  .search button {
    padding: 11px 14px;
  }

  .search button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Phones: a file's download button goes under its name. */
@media (max-width: 559.98px) {
  .file-row {
    flex-wrap: wrap;
  }

  .file-row .button {
    margin-left: 48px;
  }
}

/* ---- PART 4. Owners and cloud staff (M3A amendment 2026-09-28g) --------------
   The owner's create-user form picks the role from cards grouped by site; cloud
   staff get their own Home. Same tokens and components as PART 1 and PART 3.
   Forms     fieldset.role-picker  .role-picker__site  (with .choices .choice)
   Home      .staff-home (hero and account card, side by side from 900 px)
             .staff-hero__text  .staff-route (dotted route, three stops, a plane)
   Motion    in PART 1d: sl-glide (the plane along the staff route)
   -------------------------------------------------------------------------- */

fieldset.role-picker {
  min-width: 0;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

.role-picker legend {
  margin: 0 0 4px;
  padding: 0;
  font-weight: 600;
  color: var(--text);
}

.role-picker > .hint {
  margin: 0;
}

.role-picker__site {
  margin: 14px 0 8px;
  font-weight: 800;
  color: var(--heading);
}

.role-picker__site .muted {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
}

@media (min-width: 560px) {
  .role-picker__choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.staff-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 0 0 18px;
}

.staff-home > * {
  margin: 0;
}

@media (min-width: 900px) {
  .staff-home {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }

  /* The account card is narrow here: each fact reads on its own lines. */
  .staff-home .facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-home .facts dt {
    margin-top: 10px;
  }
}

.staff-hero__text {
  max-width: 34em;
  margin: -6px 0 14px;
  color: rgba(255, 255, 255, 0.86);
}

.staff-route {
  position: relative;
  height: 36px;
  margin: 0 0 16px;
  overflow: hidden;
}

.staff-route::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  border-top: 2px dotted rgba(255, 213, 79, 0.65);
}

.staff-route__stop {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 213, 79, 0.2);
}

.staff-route__stop:nth-child(1) {
  left: 0;
}

.staff-route__stop:nth-child(2) {
  left: 50%;
  margin-left: -5px;
}

.staff-route__stop:nth-child(3) {
  right: 0;
}

.staff-route__runner {
  position: absolute;
  inset: 0;
}

.staff-route__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  transform: rotate(90deg);
}

/* ---- PART 5. The owner's inbox (M3C) -----------------------------------------
   The WhatsApp inbox, a chat, callbacks, alerts and saved replies in admin. iPhone
   first (390 px, Safari): the reply bar sticks to the bottom above the home
   indicator (safe-area insets, viewport-fit=cover), tap targets are 44 px or more,
   the chat's head sticks to the top. From 1024 px the chat gets a side column.
   Same tokens as PART 1.
   Header    .topbar-alerts (bell with the unread count)  .nav-badge
   Tags      .tag (.tag--ai .tag--ai-off .tag--you .tag--other .tag--person
             .tag--lead .tag--special .tag--overdue .tag--due .tag--muted)
   List      .inbox .inbox-head .inbox-search .icon-button .inbox-tabs .inbox-tab
             .inbox-list .convo-list .convo (.convo--unread) .avatar .inbox-empty
   Chat      .chat .chat-head .chat-state .handler (.handler--ai .handler--you …)
             .special-banner .chat-body .chat-info .info-card .info-facts
             .thread .day-sep .msg (.msg--in .msg--out; tones .msg--customer
             .msg--ai .msg--owner .msg--template .msg--other) .bubble .tick
             .msg__problem .number-slot .number-reveal .call-now
   Reply     .reply-bar (.reply-bar--compose --closed --offer) .composer
             .composer__saved .composer__send .sheet .sheet__panel .window-note
             .template-list .template-card .template-form .template-preview .slot
             .reply-offer
   Work      .work-page .work-head .callback-list .callback-item .outcome-form
             .outcome-buttons .outcome-button .alert-list .alert-item
             .reply-list .reply-item .lang-choice .signed-out
   Motion    in the PART 5 motion block: bubbles rise in, the send button presses,
             the unread badge pops, the sheet slides up; transform and opacity only.
   -------------------------------------------------------------------------- */

/* Safe areas: with viewport-fit=cover the page may reach under the notch and the home
   indicator; keep text inside. */
.topbar {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-top: max(10px, env(safe-area-inset-top));
}

.page {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.foot {
  padding-bottom: max(24px, calc(12px + env(safe-area-inset-bottom)));
}

/* Header: the alerts bell, always visible (phones too), and a count on the Inbox link. */
.topbar-alerts {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  color: var(--white);
  border-radius: var(--r-md);
  text-decoration: none;
}

.topbar-alerts:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}

.topbar-alerts__icon {
  width: 26px;
  height: 26px;
}

.topbar-alerts.has-unread {
  color: var(--gold);
}

.topbar-alerts__count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  color: var(--white);
  background: #d9480f;
  border: 2px solid var(--primary);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--on-gold);
  background: var(--gold);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

.nav-badge[hidden] {
  display: none;
}

.nav-badge--alerts {
  color: var(--white);
  background: #d9480f;
}

@media (min-width: 720px) {
  /* One row: the brand, the menu (its links wrap inside it when the window is narrow),
     then the bell. */
  .topbar {
    flex-wrap: nowrap;
    column-gap: 12px;
  }

  .topbar .nav {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .topbar .nav a,
  .topbar .nav button.link {
    padding: 0 7px;
    font-size: 0.95rem;
  }

  .topbar .nav a[aria-current='page']::after {
    left: 7px;
    right: 7px;
  }

  .topbar-alerts {
    order: 3;
    margin-left: 0;
  }
}

/* Tags: small labels on light surfaces (who replies, lead status, overdue). */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary);
  background: var(--tint-purple);
  border-radius: var(--r-pill);
}

.tag--ai {
  color: var(--white);
  background: linear-gradient(135deg, #6a0099 0%, #9821c8 100%);
}

.tag--ai-off {
  color: #5b4b6b;
  background: #ece6f3;
}

.tag--you {
  color: #14532d;
  background: var(--tint-green);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.35);
}

.tag--other {
  color: #5c4300;
  background: var(--tint-gold);
  box-shadow: inset 0 0 0 1px rgba(255, 179, 0, 0.45);
}

.tag--person {
  color: #7c2d12;
  background: #ffedd5;
  box-shadow: inset 0 0 0 1px rgba(224, 112, 32, 0.45);
}

.tag--lead {
  color: var(--secondary);
  background: var(--tint-purple);
}

.tag--special {
  color: #4a2600;
  background: var(--grad-gold);
}

.tag--overdue {
  color: var(--white);
  background: var(--danger);
}

.tag--due {
  color: #7c2d12;
  background: #ffe8cc;
}

.tag--muted {
  color: var(--muted);
  background: #f0edf3;
}

/* Buttons: a small size for cards and toolbars (still 44 px tall to tap). */
button.small,
.button.small {
  min-height: 44px;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 0.92rem;
  box-shadow: none;
}

.button__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

.icon-button {
  flex: none;
  width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
}

.icon-button__icon {
  width: 22px;
  height: 22px;
}

/* ---- the list --------------------------------------------------------------- */
.inbox,
.work-page {
  max-width: 860px;
  margin: 0 auto;
}

.inbox-head {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.inbox-head__title,
.work-head__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.55rem;
}

.inbox-head__icon,
.work-head__icon {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 5px;
  color: var(--primary);
  background: var(--gold);
  border-radius: 10px;
}

.inbox-search {
  display: flex;
  gap: 8px;
}

.inbox-search input {
  flex: 1;
  min-width: 0;
}

.inbox-tabs {
  display: flex;
  gap: 8px;
  margin: 0 -16px 12px;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.inbox-tabs::-webkit-scrollbar {
  display: none;
}

.inbox-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px;
  scroll-snap-align: start;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  background: var(--white);
  border: 1.5px solid #dccfe8;
  border-radius: var(--r-pill);
}

.inbox-tab:hover {
  color: var(--primary);
  border-color: var(--secondary);
}

.inbox-tab[aria-current='page'] {
  color: var(--white);
  background: var(--grad-header);
  border-color: transparent;
  box-shadow: var(--shadow-primary);
}

.inbox-tab__count {
  min-width: 22px;
  padding: 0 7px;
  font-size: 0.78rem;
  line-height: 22px;
  text-align: center;
  color: var(--primary);
  background: var(--tint-purple);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

.inbox-tab[aria-current='page'] .inbox-tab__count {
  color: var(--on-gold);
  background: var(--gold);
}

.inbox-tab--needs_you .inbox-tab__count {
  color: var(--white);
  background: #d9480f;
}

.inbox-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 0 10px;
  padding: 10px 14px;
  font-weight: 600;
  background: var(--tint-purple);
  border-radius: var(--r-md);
}

.inbox-note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.inbox-note--warn {
  color: #5c4300;
  background: var(--tint-gold);
}

.convo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.convo + .convo {
  border-top: 1px solid var(--line);
}

.convo__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
}

.convo__link:hover {
  color: inherit;
  background: var(--row-hover);
}

.avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--gold);
  background: var(--grad-card-head);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px rgba(255, 213, 79, 0.7);
}

.avatar--sm {
  width: 40px;
  height: 40px;
  font-size: 0.9rem;
}

.convo__main {
  display: grid;
  /* One column that never grows past the row: long names and messages are cut with an
     ellipsis instead of pushing the time off the screen. */
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-width: 0;
  gap: 1px;
}

.convo__top,
.convo__bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.convo__name {
  min-width: 0;
  overflow: hidden;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.convo__time {
  flex: none;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.convo--unread .convo__time {
  font-weight: 700;
  color: var(--orange-text);
}

.convo__number {
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.convo__last {
  min-width: 0;
  overflow: hidden;
  font-size: 0.92rem;
  color: #555;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.convo--unread .convo__last {
  font-weight: 600;
  color: var(--text);
}

.convo__who {
  font-weight: 700;
  color: var(--secondary);
}

.convo__unread {
  flex: none;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  color: var(--on-gold);
  background: var(--gold);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(255, 179, 0, 0.45);
  font-variant-numeric: tabular-nums;
}

.convo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.inbox-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 34px 20px;
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  background: var(--white);
  border: 1.5px dashed #dccfe8;
  border-radius: var(--r-card);
}

.inbox-empty__icon {
  width: 44px;
  height: 44px;
  color: var(--logo-purple);
}

.inbox-pager {
  margin-top: 12px;
}

.inbox-foot {
  margin: 12px 0 0;
  font-size: 0.8rem;
  text-align: center;
}

/* ---- the chat ----------------------------------------------------------------- */
body.page-chat {
  background: #f6f1fa;
}

body.page-chat .page {
  max-width: 1200px;
  padding: 0 0 0;
}

body.page-chat .page > .notice {
  margin: 10px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}

body.page-chat .foot {
  display: none;
}

.chat {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
}

.chat-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(4px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(74, 0, 114, 0.08);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}

.chat-head__back {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--primary);
  border-radius: var(--r-md);
}

.chat-head__back:hover {
  background: var(--tint-purple);
}

.chat-head__back-icon {
  width: 24px;
  height: 24px;
}

.chat-head__who {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-width: 0;
}

.chat-head__name {
  margin: 0;
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-head__number {
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.chat-head__chip {
  flex: none;
  max-width: 34%;
}

/* Who replies stays in view under the chat's head while the messages scroll. */
.chat-state {
  position: sticky;
  top: 62px;
  z-index: 19;
  box-shadow: 0 6px 14px rgba(74, 0, 114, 0.07);
}

.handler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
}

.handler__icon {
  display: inline-flex;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
}

.handler__svg {
  width: 100%;
  height: 100%;
}

.handler__text {
  flex: 1;
  min-width: 10em;
  margin: 0;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.35;
}

.handler__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.handler__button {
  min-height: 44px;
  margin: 0;
  padding: 8px 16px;
  font-size: 0.92rem;
  box-shadow: none;
}

.handler--ai,
.handler--ai-off {
  color: var(--primary);
  background: linear-gradient(90deg, #f1e7f7 0%, #faf5fd 100%);
}

.handler--ai .handler__icon {
  color: var(--gold);
  background: var(--grad-card-head);
}

.handler--ai-off .handler__icon {
  color: #5b4b6b;
  background: #e4dcec;
}

.handler--you {
  color: var(--green-ink);
  background: linear-gradient(90deg, #e7f6ec 0%, #f4fbf6 100%);
}

.handler--you .handler__icon {
  color: var(--white);
  background: var(--green-strong);
}

.handler--other,
.handler--person {
  color: #5c3b00;
  background: linear-gradient(90deg, #fff3d6 0%, #fffaf0 100%);
}

.handler--other .handler__icon,
.handler--person .handler__icon {
  color: var(--primary);
  background: var(--gold);
}

.special-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  font-size: 0.9rem;
  font-weight: 700;
  color: #4a2600;
  background: linear-gradient(90deg, #ffd54f 0%, #ffb300 100%);
  overflow-wrap: anywhere;
}

/* In the sticky strip the banner keeps to one line; the lead card has the whole text. */
.chat-state .special-banner span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.special-banner--small {
  margin: 8px 0 0;
  border-radius: var(--r-md);
}

.special-banner__icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.chat-body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

/* Customer, lead and callback: folded under the handler bar on phones. */
.chat-info {
  margin: 10px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}

.chat-info__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}

.chat-info__summary::-webkit-details-marker {
  display: none;
}

.chat-info__summary::after {
  content: '';
  width: 9px;
  height: 9px;
  margin: -4px 2px 0 auto;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}

.chat-info[open] > .chat-info__summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.chat-info__label {
  min-width: 0;
}

.chat-info__icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.chat-info__cards {
  display: grid;
  gap: 10px;
  padding: 0 10px 12px;
}

.info-card {
  padding: 12px 14px;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.info-card.is-overdue {
  border-color: rgba(185, 28, 28, 0.35);
  background: #fff7f7;
}

.info-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-text);
}

.info-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--heading);
  overflow-wrap: anywhere;
}

.info-card__number {
  margin: 2px 0 8px;
  font-variant-numeric: tabular-nums;
}

.info-card__label {
  font-weight: 600;
  color: var(--muted);
}

.masked-number {
  letter-spacing: 0.03em;
}

.info-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.info-card__actions form {
  margin: 0;
}

.info-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.info-card__subtitle {
  margin: 10px 0 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.info-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 14px;
  margin: 0;
  font-size: 0.93rem;
}

.info-facts dt {
  font-weight: 600;
  color: var(--muted);
}

.info-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.is-overdue {
  font-weight: 700;
  color: var(--danger);
}

.quote-facts {
  margin: 0 0 6px;
  font-size: 0.85rem;
}

.quote-options {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quote-options li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.quote-options__price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.quote-options__time {
  font-size: 0.85rem;
  color: var(--muted);
}

.number-slot:empty {
  display: none;
}

.number-reveal {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--tint-gold);
  border: 1.5px dashed rgba(106, 0, 153, 0.45);
  border-radius: var(--r-md);
}

.number-reveal__value {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.number-reveal__note {
  font-size: 0.8rem;
  color: var(--muted);
}

.call-now {
  width: 100%;
  margin: 0;
}

/* The messages. */
.chat-thread {
  flex: 1 0 auto;
  padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
}

.thread {
  display: flex;
  flex-direction: column;
}

.thread__earlier {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

.thread__empty {
  margin: 40px 16px;
  text-align: center;
  color: var(--muted);
}

.thread__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thread__end {
  height: 4px;
  outline: none;
}

.thread__poll {
  display: none;
}

.day-sep {
  display: flex;
  justify-content: center;
  margin: 10px 0 4px;
}

.day-sep span {
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--secondary);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}

.msg {
  display: flex;
  flex-direction: column;
  max-width: 84%;
}

.msg--in {
  align-self: flex-start;
  align-items: flex-start;
}

.msg--out {
  align-self: flex-end;
  align-items: flex-end;
}

.bubble {
  position: relative;
  min-width: 96px;
  max-width: 100%;
  padding: 7px 11px 5px;
  font-size: 0.98rem;
  line-height: 1.45;
  background: var(--white);
  border: 1px solid #ebe3f2;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(42, 0, 67, 0.08);
}

.msg--in .bubble {
  border-top-left-radius: 6px;
}

.msg--out .bubble {
  border-top-right-radius: 6px;
}

.msg--ai .bubble {
  background: #efe3f8;
  border-color: #dcc6ee;
}

.msg--owner .bubble {
  background: #fff2c2;
  border-color: #f5d772;
}

.msg--template .bubble {
  background: #fffaeb;
  border: 1.5px dashed #c49bdc;
}

.msg--other .bubble {
  background: #eef0f3;
  border-color: #dde1e6;
}

.msg--failed .bubble {
  border-color: rgba(185, 28, 28, 0.55);
}

.bubble__label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 2px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--secondary);
}

.msg--owner .bubble__label {
  color: #7a5300;
}

.msg--other .bubble__label {
  color: #4b5563;
}

.bubble__label-icon {
  flex: none;
  width: 14px;
  height: 14px;
}

.bubble__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble__placeholder,
.bubble__values {
  margin: 0;
  font-style: italic;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.bubble__quote {
  display: grid;
  margin: 2px 0 6px;
  padding: 5px 9px;
  font-size: 0.85rem;
  background: rgba(74, 0, 114, 0.06);
  border-left: 3px solid var(--logo-purple);
  border-radius: 6px;
}

.bubble__quote-author {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--secondary);
}

.bubble__quote-text {
  overflow: hidden;
  color: #555;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bubble__photo {
  display: block;
  margin: 2px -5px 6px;
  overflow: hidden;
  border-radius: 12px;
}

.bubble__photo img {
  display: block;
  width: min(250px, 62vw);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #ece6f3;
}

.bubble__audio,
.bubble__video {
  display: block;
  width: min(260px, 64vw);
  max-width: 100%;
  margin: 2px 0 6px;
}

.bubble__video {
  aspect-ratio: 16 / 9;
  background: #1a0033;
  border-radius: 10px;
}

.bubble__file,
.bubble__media-note {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 2px 0 6px;
  padding: 8px 10px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.bubble__file:hover {
  color: var(--primary);
  background: var(--white);
}

.bubble__file-icon {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--secondary);
}

.bubble__file-name {
  flex: 1;
  font-weight: 700;
}

.bubble__file-action {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--secondary);
}

.bubble__media-note {
  font-size: 0.88rem;
  color: var(--muted);
}

.bubble__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: 1px -3px 0 12px;
  font-size: 0.72rem;
  color: #7b6d88;
  font-variant-numeric: tabular-nums;
}

.tick {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tick__icon {
  width: 18px;
  height: 14px;
}

.tick__label {
  font-weight: 600;
}

.tick--sending {
  color: #8c7a9e;
}

.tick--sending .tick__icon {
  width: 13px;
  height: 13px;
}

.tick--sent,
.tick--delivered {
  color: #8c7a9e;
}

.tick--read {
  color: var(--logo-purple);
}

.tick--read .tick__label {
  font-weight: 800;
}

.tick--failed {
  color: var(--danger);
}

.tick--failed .tick__icon,
.tick--uncertain .tick__icon {
  width: 14px;
  height: 14px;
}

.tick--uncertain {
  color: #9a6a00;
}

.msg__problem {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  margin: 4px 2px 2px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

.msg__problem--failed {
  color: var(--danger-ink);
}

.msg__problem--uncertain {
  color: #7a5300;
}

.msg__problem-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.msg__problem-detail {
  display: block;
  font-weight: 400;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---- the reply bar: sticks to the bottom, above the home indicator --------- */
.reply-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  /* A solid background, no backdrop-filter: a filter would become the containing block of
     the fixed sheets inside the bar and pin them to it. */
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(74, 0, 114, 0.1);
}

.composer-form {
  margin: 0;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.composer textarea,
.work-page textarea,
.outcome-form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16 px keeps iPhone Safari from zooming in */
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--input-border);
  border-radius: var(--r-md);
}

.composer textarea {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  max-height: 40vh;
  padding: 11px 16px;
  line-height: 1.4;
  resize: none;
  border-radius: 23px;
}

.composer textarea:disabled {
  color: var(--muted);
  background: #f3eff6;
  border-style: dashed;
}

.work-page textarea,
.outcome-form textarea {
  padding: 10px 14px;
  resize: vertical;
}

.composer__saved,
.composer__send {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
}

.composer__saved {
  color: var(--primary);
  background: var(--tint-purple);
  border: 1.5px solid #dccfe8;
  list-style: none;
}

.composer__saved::-webkit-details-marker {
  display: none;
}

.composer__saved-icon {
  width: 22px;
  height: 22px;
}

.composer__send {
  color: var(--primary);
  background: var(--gold);
  box-shadow: var(--shadow-btn-gold);
}

.composer__send-icon {
  width: 24px;
  height: 24px;
  margin-left: 2px;
}

.composer__send:disabled {
  opacity: 0.6;
  cursor: progress;
}

.reply-bar__note,
.reply-bar__info,
.reply-bar__error,
.window-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 2px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}

.reply-bar__note {
  color: var(--secondary);
}

.reply-bar__note--warn {
  color: #7a5300;
}

.reply-bar__note-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.reply-bar__info {
  padding: 8px 10px;
  color: var(--green-ink);
  background: var(--tint-green);
  border-radius: var(--r-sm);
}

.reply-bar__error {
  padding: 8px 10px;
  color: var(--danger-ink);
  background: var(--tint-red);
  border-radius: var(--r-sm);
}

.reply-bar__error .error__icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.window-note {
  padding: 8px 10px;
  color: #5c4300;
  background: var(--tint-gold);
  border-radius: var(--r-sm);
}

.window-note__icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.reply-bar--closed .composer {
  margin-bottom: 8px;
}

/* Sheets: a <details> that opens as a panel from the bottom. Its summary becomes the
   dimmed backdrop, so a tap outside the panel closes it (no script needed). */
.sheet > summary {
  list-style: none;
}

.sheet > summary::-webkit-details-marker {
  display: none;
}

.sheet__open {
  width: 100%;
  margin: 0;
}

.sheet[open] > summary::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(26, 0, 51, 0.45);
  cursor: default;
}

.sheet__panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  max-height: 78vh;
  max-height: 78dvh;
  padding: 18px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-top: 3px solid var(--gold);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 50px rgba(26, 0, 51, 0.35);
}

.sheet__panel::before {
  content: '';
  display: block;
  width: 44px;
  height: 5px;
  margin: -8px auto 12px;
  background: #d9cde6;
  border-radius: 3px;
}

.sheet__title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--heading);
}

.sheet__empty {
  margin: 8px 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
}

.saved-list,
.template-list {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.saved-item,
.template-card {
  display: grid;
  gap: 3px;
  min-height: 56px;
  padding: 10px 12px;
  color: var(--text);
  text-decoration: none;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.saved-item:hover,
.template-card:hover {
  color: var(--text);
  background: var(--row-hover);
  border-color: #cdb6e0;
}

.saved-item__title,
.template-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--heading);
}

.saved-item__body,
.template-card__preview {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9rem;
  color: #555;
  white-space: pre-wrap;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.template-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.template-card--unsupported {
  opacity: 0.72;
}

.template-card__note {
  font-size: 0.8rem;
  font-weight: 600;
  color: #7a5300;
}

.template-form {
  display: grid;
}

.template-form label {
  margin-top: 12px;
}

.template-form__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--heading);
}

.template-preview {
  margin-top: 16px;
}

.template-preview__label {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-text);
}

.template-preview__bubble {
  max-width: 100%;
  padding: 10px 12px;
  background: #fffaeb;
  border: 1.5px dashed #c49bdc;
  border-radius: 16px 6px 16px 16px;
}

.template-preview__bubble p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.template-preview__header {
  font-weight: 800;
}

.template-preview__footer {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.slot {
  padding: 0 3px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(152, 33, 200, 0.12);
  border-radius: 4px;
}

.slot--filled {
  color: var(--green-ink);
  background: rgba(22, 163, 74, 0.14);
}

.template-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* In the sheet, Send stays reachable while the values are typed. */
.sheet__panel .template-form__actions {
  position: sticky;
  bottom: calc(-18px - env(safe-area-inset-bottom));
  margin: 16px -16px calc(-18px - env(safe-area-inset-bottom));
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
}

.template-form__actions .back-link {
  margin-right: auto;
}

.template-form__actions button,
.template-form__actions .button {
  margin: 0;
}

.reply-offer {
  display: grid;
  gap: 8px;
}

.reply-offer__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--heading);
}

.reply-offer__icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--logo-purple);
}

.reply-offer__text {
  margin: 0;
  font-size: 0.92rem;
}

.reply-offer__message {
  max-height: 30vh;
  margin: 0;
  padding: 8px 12px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #fff2c2;
  border: 1px solid #f5d772;
  border-radius: 14px 4px 14px 14px;
}

.reply-offer__form {
  margin: 0;
}

.reply-offer__form .code-box {
  margin: 0 0 8px;
  padding: 10px 12px;
}

.reply-offer__form .code-box p {
  margin: 0 0 4px;
  font-size: 0.85rem;
}

.reply-offer__form .code-box label {
  margin-top: 6px;
}

.reply-offer__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.reply-offer__actions > * {
  flex: 1;
  margin: 0;
}

.handler-confirm .reply-offer__message {
  margin-bottom: 12px;
}

/* ---- callbacks, alerts, saved replies ------------------------------------------ */
.work-head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.work-head .intro {
  margin: 0;
}

.work-head__action {
  margin: 4px 0 0;
}

.callback-list,
.alert-list,
.reply-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.callback-item,
.reply-item {
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.callback-item--overdue {
  border-left: 5px solid var(--danger);
}

.callback-item--urgent:not(.callback-item--overdue) {
  border-left: 5px solid #d9480f;
}

.callback-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.callback-item__who {
  flex: 1;
  min-width: 0;
}

.callback-item__name {
  margin: 0;
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.callback-item__number {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.callback-item__due {
  display: grid;
  justify-items: end;
  gap: 3px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: right;
}

.callback-item__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 10px 0 0;
  font-size: 0.9rem;
}

.callback-item__lead {
  overflow-wrap: anywhere;
}

.callback-item__tries {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--muted);
}

.callback-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.callback-item__actions form {
  margin: 0;
}

.callback-item__outcome {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.callback-item__outcome > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

.outcome-form label:first-of-type {
  margin-top: 6px;
}

.outcome-form input[type='datetime-local'] {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--input-border);
  border-radius: var(--r-md);
}

.outcome-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

.outcome-buttons legend {
  margin-bottom: 6px;
  padding: 0;
  font-weight: 700;
}

.outcome-button {
  min-height: 48px;
  margin: 0;
  padding: 8px 10px;
  font-size: 0.92rem;
  color: var(--primary);
  background: var(--white);
  border: 1.5px solid #cdb6e0;
  box-shadow: none;
}

.outcome-button:hover {
  color: var(--primary);
  background: var(--tint-purple);
}

.outcome-button--time {
  color: var(--on-gold);
  background: var(--tint-gold);
  border-color: rgba(255, 179, 0, 0.6);
}

.outcome-button--closing {
  color: #5b4b6b;
  background: #f4f1f7;
  border-style: dashed;
}

.alert-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.alert-item--unread {
  border-color: rgba(255, 179, 0, 0.6);
  box-shadow: var(--shadow-card);
}

.alert-item__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  padding: 9px;
  color: var(--primary);
  background: var(--tint-purple);
  border-radius: 50%;
}

.alert-item--special .alert-item__icon {
  color: #4a2600;
  background: var(--grad-gold);
}

.alert-item--urgent .alert-item__icon,
.alert-item--overdue .alert-item__icon {
  color: var(--white);
  background: var(--danger);
}

.alert-item--handover .alert-item__icon {
  color: #7c2d12;
  background: #ffedd5;
}

.alert-item__svg {
  width: 100%;
  height: 100%;
}

.alert-item__title {
  margin: 0;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}

.alert-item--unread .alert-item__title {
  color: var(--heading);
}

.alert-item__detail {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: #555;
  overflow-wrap: anywhere;
}

.alert-item__meta {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.alert-item__meta a {
  font-weight: 700;
}

.alert-item__read,
.alert-item__done {
  grid-column: 2;
  justify-self: start;
  margin: 4px 0 0;
}

.alert-item__done {
  font-size: 0.82rem;
}

.reply-add h2:first-child {
  margin-bottom: 8px;
}

.reply-item--off {
  opacity: 0.75;
  background: var(--page);
}

.reply-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.reply-item__title {
  margin: 0 auto 0 0;
  font-weight: 800;
  color: var(--heading);
  overflow-wrap: anywhere;
}

.reply-item__body {
  margin: 8px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.reply-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}

.reply-item__actions form {
  margin: 0;
}

.reply-item__edit {
  flex: 1 1 100%;
}

.reply-item__edit > summary {
  list-style: none;
}

.reply-item__edit > summary::-webkit-details-marker {
  display: none;
}

.reply-item__edit[open] > summary {
  margin-bottom: 6px;
}

.reply-item__form {
  padding: 4px 0 8px;
}

.lang-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.lang-choice legend {
  margin-bottom: 4px;
  padding: 0;
  font-weight: 600;
}

.lang-choice__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  font-weight: 600;
}

.lang-choice__option input {
  width: 20px;
  height: 20px;
  accent-color: var(--secondary);
}

.work-page input[type='text'] {
  width: 100%;
}

/* After a sign-out: background refreshes stop and say so. */
.signed-out {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 14px 16px;
  color: var(--white);
  background: var(--grad-dark);
  border: 2px solid var(--gold);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
}

.signed-out p {
  margin: 0;
  font-weight: 700;
}

.signed-out .button {
  margin: 0;
}

/* Wide screens: the chat and its cards side by side. */
@media (min-width: 720px) {
  .inbox-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }

  .inbox-search {
    max-width: 420px;
    justify-self: end;
    width: 100%;
  }

  .inbox-tabs {
    margin: 0 0 14px;
    padding: 2px 0 6px;
    flex-wrap: wrap;
  }

  .outcome-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .alert-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .alert-item__read,
  .alert-item__done {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
  }

  .msg {
    max-width: 72%;
  }
}

@media (min-width: 1024px) {
  body.page-chat .page {
    padding: 16px 24px 0;
  }

  .chat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      'head head'
      'state state'
      'thread info'
      'reply info';
    column-gap: 20px;
    min-height: calc(100vh - 80px);
    background: transparent;
  }

  .chat-head {
    grid-area: head;
    top: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card) var(--r-card) 0 0;
  }

  .chat-state {
    grid-area: state;
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--r-card) var(--r-card);
  }

  .chat-body {
    display: contents;
  }

  .chat-thread {
    grid-area: thread;
    padding: 12px 8px;
  }

  /* Below the sticky head (62 px) and who-replies strip. */
  .chat-info {
    grid-area: info;
    position: sticky;
    top: 136px;
    align-self: start;
    max-height: calc(100vh - 156px);
    margin: 16px 0 24px;
    overflow-y: auto;
  }

  .chat-info__summary {
    pointer-events: none;
  }

  .chat-info__summary::after {
    display: none;
  }

  .reply-bar {
    grid-area: reply;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
  }

  .msg {
    max-width: 66%;
  }

  .sheet__panel {
    left: 50%;
    right: auto;
    bottom: 50%;
    width: min(620px, calc(100vw - 48px));
    max-height: 80vh;
    border: 3px solid var(--gold);
    border-radius: 22px;
    transform: translate(-50%, 50%);
  }

  .sheet__panel::before {
    display: none;
  }
}

/* PART 5 motion: one-offs under 400 ms, transform and opacity only. */
@keyframes sl-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sl-pop {
  0% {
    transform: scale(0.6);
  }
  70% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes sl-sheet-up {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .thread__items > .msg:last-child,
  .thread__items > .msg--sending {
    animation: sl-bubble-in 280ms var(--ease-out) backwards;
  }

  .convo__unread,
  .topbar-alerts__count,
  .nav-badge {
    animation: sl-pop 320ms var(--ease-out) backwards;
  }

  .sheet[open] > .sheet__panel {
    animation: sl-sheet-up 260ms var(--ease-out) backwards;
  }

  .composer__send {
    transition: transform var(--t-fast) var(--ease-out);
  }

  .composer__send:active {
    transform: scale(0.92);
  }

  .convo__link {
    transition: background-color var(--t-fast) linear;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .sheet[open] > .sheet__panel {
    animation: none;
  }
}

/* ---- PART 1d. Motion --------------------------------------------------------
   CSS only; transform and opacity only (plus the few-pixel stroke that draws the
   success check). Every one-off animation is at most 400 ms; only the ambient
   loops run longer: the login orbit and float, the request bar and the skeleton
   shimmer. Everything sits inside prefers-reduced-motion: no-preference, and the
   reduce block at the end switches off anything that might remain.
   a  .orbit__carrier / .orbit__logo   plane flies the dotted route, logo floats
   b  .page > *, .auth__hero, .auth .card, .list > .row   fade up, staggered
   c  button, .button, .list .row      hover lift + glow, press to 98 %
   d  .page-progress.htmx-request       gold bar runs while htmx works
   e  .notice, .error, .notice__check  slide in; the check draws itself
   f  .shake                             one short shake (a wrong 2-step code)
   g  .skeleton                          shimmer while M3B loads data
   h  .staff-route__runner               the plane glides along the staff route
                                         (an ambient loop, like the login orbit)
   ---------------------------------------------------------------------------- */
@keyframes sl-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sl-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sl-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sl-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-7px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(2px);
  }
}

@keyframes sl-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sl-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes sl-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(260%);
  }
}

@keyframes sl-shimmer {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* b. Page load. Fill mode "backwards", not "both": the last frame is the element's own
     state anyway, and a transform animation that stays in effect would make the element the
     containing block of any position: fixed child (the upload's full-screen "checking" state). */
  .page > :not(.auth),
  .auth__hero,
  .auth .card,
  .list > .row {
    animation: sl-fade-up var(--t-slow) var(--ease-out) backwards;
  }

  .page > :not(.auth):nth-child(2),
  .auth .card,
  .list > .row:nth-child(2) {
    animation-delay: 70ms;
  }

  .page > :not(.auth):nth-child(3),
  .list > .row:nth-child(3) {
    animation-delay: 130ms;
  }

  .page > :not(.auth):nth-child(n + 4),
  .list > .row:nth-child(n + 4) {
    animation-delay: 180ms;
  }

  /* c. Buttons and rows */
  button:not(.link),
  .button,
  .list .row {
    transition: transform var(--t-fast) var(--ease-out);
  }

  button:not(.link)::after,
  .button::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    box-shadow: 0 10px 30px rgba(255, 213, 79, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease-out);
  }

  .positive::after {
    box-shadow: 0 10px 30px rgba(22, 163, 74, 0.45);
  }

  button.danger::after {
    box-shadow: 0 10px 30px rgba(185, 28, 28, 0.35);
  }

  .button.secondary::after {
    box-shadow: var(--shadow-primary);
  }

  button:not(.link):active,
  .button:active {
    transform: scale(0.98);
  }

  /* e. Notices */
  .notice,
  .error {
    animation: sl-slide-in 320ms var(--ease-out) both;
  }

  .notice__check {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: sl-draw 400ms 180ms var(--ease-out) forwards;
  }

  /* f. A wrong code */
  .shake {
    animation: sl-shake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }

  /* a. Login hero */
  .orbit__carrier {
    animation: sl-orbit 18s linear infinite;
    will-change: transform;
  }

  .orbit__logo {
    animation: sl-float 6s ease-in-out infinite;
  }

  /* d. htmx request bar */
  .page-progress {
    transition: opacity var(--t-fast) linear;
  }

  .page-progress.htmx-request::before {
    animation: sl-progress 1.1s ease-in-out infinite;
  }

  /* g. Skeleton */
  .skeleton::after {
    animation: sl-shimmer 1.4s ease-in-out infinite;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  button:not(.link):hover,
  .button:hover,
  .list .row:hover {
    transform: translateY(-2px);
  }

  button:not(.link):hover::after,
  .button:hover::after {
    opacity: 1;
  }

  button:not(.link):hover:active,
  .button:hover:active {
    transform: translateY(-1px) scale(0.98);
  }
}

/* PART 3 motion (M3B): the checking overlay's plane and bar are ambient loops like the
   login orbit; everything else is a one-off of at most 400 ms, transform and opacity only. */
@keyframes sl-fly {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .checking {
    transition: opacity var(--t-med) var(--ease-out), visibility var(--t-med) linear;
  }

  .checking__runner {
    animation: sl-fly 1.6s ease-in-out infinite;
  }

  .checking__bar::before {
    animation: sl-progress 1.1s ease-in-out infinite;
  }

  .choice__box::after {
    transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  }

  .stats .stat,
  .downloads > li,
  .carrier-grid > .card,
  .rates-grid > .card {
    animation: sl-fade-up var(--t-slow) var(--ease-out) backwards;
  }

  .stats .stat:nth-child(2),
  .downloads > li:nth-child(2),
  .carrier-grid > .card:nth-child(2),
  .rates-grid > .card:nth-child(2) {
    animation-delay: 70ms;
  }

  .stats .stat:nth-child(3),
  .downloads > li:nth-child(n + 3),
  .carrier-grid > .card:nth-child(n + 3) {
    animation-delay: 140ms;
  }

  .panel--active .notice__check {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: sl-draw 400ms 200ms var(--ease-out) forwards;
  }

  .download__arrow {
    transition: transform var(--t-fast) var(--ease-out);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.download:hover .download__arrow {
    transform: translateY(3px);
  }
}

/* PART 4 motion: the plane on the cloud staff Home fades in at one end of its route and
   out at the other; transform and opacity only. */
@keyframes sl-glide {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  12%,
  88% {
    opacity: 1;
  }
  100% {
    transform: translateX(50%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .staff-route__runner {
    animation: sl-glide 7s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}