/* ==========================================================================
   TGP Corporate App - Design System v2 (frontend-rework)

   POV: a serious dispatch ledger. Operators live here for hours; chrome
   should vanish. Quiet, dense, scannable. Data is the product.

   Loaded on every page that extends orders/base.html.
   Per-page styles live in static/app/css/pages/*.css.
   The standalone print templates (invoice_print.html, quote_print.html)
   carry their own self-contained styles and do NOT load this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand — TGP (default) */
  --tgp-blue: #68b0e8;
  --tgp-blue-deep: #4a94cf;
  --tgp-navy: #0d3b66;
  --tgp-ink: #25262d;
  --tgp-beige: #fcf1e2;
  --tgp-brass: #c9a45f;

  /* Brand — HWB (Hampers With Bite). These tokens are always defined so
     anything that wants a literal HWB color (e.g. the brand chip) can use
     them regardless of which brand the current page is in. The semantic
     --tgp-* tokens above are overridden under [data-brand="hwb"] further
     down so existing rules using var(--tgp-navy) etc. flip to HWB colours
     automatically when viewing an HWB order/quote. */
  --hwb-orange: #ec5430;
  --hwb-orange-700: #c7421f;
  --hwb-orange-300: #f4886a;
  --hwb-orange-100: #fce2d7;
  --hwb-orange-50: #fff6f1;
  --hwb-ink: #1b1a18;
  --hwb-charcoal: #3a3733;
  --hwb-stone: #6b6660;
  --hwb-mist: #b5afa7;
  --hwb-cream: #f7f1e8;
  --hwb-paper: #fbf7f0;
  --hwb-bottle: #2e4a37;
  --hwb-vine: #5b7a52;
  --hwb-claret: #7a1f2b;
  --hwb-gold: #b8893a;
  --hwb-blush: #e8c8b8;
  --hwb-success: #2f7a4d;
  --hwb-warning: #c68a1f;
  --hwb-danger: #b23a2a;

  /* Surfaces (within ~5% luminance of each other) */
  --surface-page: #f7f8fa;
  --surface-card: #ffffff;
  --surface-alt:  #fafbfc;
  --surface-inset:#f3f4f6;
  --surface-dark: var(--tgp-navy);

  /* Text */
  --text-strong: var(--tgp-navy);
  --text-body:   var(--tgp-ink);
  --text-muted:  #6b7280;
  --text-subtle: #9ca3af;
  --text-on-dark:#ffffff;

  /* Borders */
  --border-hair:   #e5e7eb;
  --border-strong: #d1d5db;
  --border-dark:   #1f3a5a;

  /* Status */
  --ok:    #15803d;
  --warn:  #b45309;
  --bad:   #b91c1c;
  --info:  #1d4ed8;
  --ok-soft:   #f0fdf4;
  --warn-soft: #fffbeb;
  --bad-soft:  #fef2f2;
  --info-soft: #eff6ff;

  /* Type families */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Lora", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --fs-xs:   0.6875rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.5rem;

  /* Radius */
  --r-sm:   3px;
  --r-md:   5px;
  --r-lg:   6px;
  --r-pill: 999px;

  /* Layout */
  --shell-max:   100%;
  --shell-pad-x: 24px;
}


/* --------------------------------------------------------------------------
   Brand override — HWB (Hampers With Bite)

   When the body has data-brand="hwb" (an HWB order or quote is in context),
   remap the semantic --tgp-* tokens to HWB equivalents. Every existing rule
   in this file that uses var(--tgp-navy), var(--tgp-blue) etc. picks up the
   HWB colours automatically without needing per-rule changes. The literal
   --hwb-* tokens above stay accessible for components that want a hard HWB
   colour regardless of context (e.g. the brand chip on a TGP dashboard
   tile that previews an HWB record).

   Surfaces (--surface-page, --surface-card, …) and text neutrals
   (--text-muted, --text-subtle) stay at their default greys — both brands
   share the same operator-grade surface treatment.
   -------------------------------------------------------------------------- */

[data-brand="hwb"] {
  --tgp-blue:       var(--hwb-orange);
  --tgp-blue-deep:  var(--hwb-orange-700);
  --tgp-navy:       var(--hwb-ink);
  --tgp-ink:        var(--hwb-charcoal);
  --tgp-beige:      var(--hwb-cream);
  --tgp-brass:      var(--hwb-gold);

  /* Status colours — HWB has its own status palette that reads warmer. */
  --ok:   var(--hwb-success);
  --warn: var(--hwb-warning);
  --bad:  var(--hwb-danger);
}


/* --------------------------------------------------------------------------
   Reset and global utilities
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
textarea { font-family: inherit; }
a { color: var(--text-strong); text-decoration: none; transition: color .14s ease; }
a:hover { color: var(--tgp-blue-deep); }

h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  font-weight: 600;
  letter-spacing: -0.005em;
}
h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: 1.15;
  color: var(--text-strong);
  letter-spacing: -0.014em;
}
h1 em, h1 .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--tgp-brass);
}

/* Editorial italic - for impact words/phrases mid-paragraph */
.tgp-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--text-strong);
}
.tgp-italic.brass { color: var(--tgp-brass); }
h2 { font-size: var(--fs-xl);  line-height: 1.3; }
h3 { font-size: var(--fs-lg);  line-height: 1.35; font-weight: 600; }
h4 { font-size: var(--fs-md);  line-height: 1.4;  font-weight: 600; }

p { margin: 0; }

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


/* --------------------------------------------------------------------------
   Shell - header, container, footer
   -------------------------------------------------------------------------- */

.tgp-shell-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hair);
}

.tgp-shell-header-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 10px var(--shell-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.tgp-brand-block { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tgp-brand-link  { display: inline-flex; align-items: center; }
.tgp-brand-logo  { height: 28px; display: block; }
/* HWB wordmark has a 2.4:1 aspect with 3 stacked lines of text; at the TGP
   logo's 28px height each line is 8px tall and unreadable. 36px makes each
   line ~12px so HAMPERS/WITH/BITE reads about the same visual weight as
   THE/GOURMET/PANTRY without dominating the header. */
.tgp-brand-logo--hwb { height: 36px; }
.brand-pair {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-pair-divider {
  color: var(--text-muted, #94a3b8);
  font-weight: 300;
  font-size: 20px;
  line-height: 1;
  user-select: none;
}

/* Compact brand pill used on dashboard tiles to scan TGP vs HWB at a glance. */
.brand-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-right: 6px;
}
/* Brand chips always use literal brand colours, NOT the semantic --tgp-*
   tokens — so a TGP chip is always navy and an HWB chip is always orange
   even when previewed on the other brand's page. */
.brand-chip--tgp { background: #0d3b66; }
.brand-chip--hwb { background: var(--hwb-orange); }
.tgp-app-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.005em;
}
.tgp-app-title::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 18px;
  margin-right: 14px;
  vertical-align: -4px;
  background: var(--border-strong);
}

.tgp-auth-block { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.tgp-nav-link { min-width: 0; }
.tgp-refresh-form { margin: 0; display: inline-flex; }
.tgp-auth-copy  { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tgp-auth-copy a, .link {
  color: var(--text-strong);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color .14s ease;
}
.tgp-auth-copy a:hover, .link:hover { border-bottom-color: var(--tgp-blue); }

/* Staff header "Follow-ups" link + due-count badge. */
.tgp-followups-link { display: inline-flex; align-items: center; gap: 6px; }
.tgp-followups-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b3261e;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

main.container,
.container {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 22px var(--shell-pad-x) 20px;
  width: 100%;
}

.footer { padding: 0; }


/* --------------------------------------------------------------------------
   Staff shell — the redesigned nav row (home-redesign handoff §1)

   Scoped to .is-staff so the login page and the customer portal keep the
   original header untouched. The row is a single line at every width down to
   the hamburger breakpoint: brand | nav | right cluster, with the nav's
   overflow living in the Insights menu and the right cluster's inside the
   avatar menu. Nothing here introduces a colour, radius or type size that
   isn't already a token above — the two off-scale values (10px mono badges,
   26px avatar) are geometry, not new scale steps.
   -------------------------------------------------------------------------- */

.tgp-shell-header-inner.is-staff {
  flex-wrap: nowrap;
  gap: 22px;
  padding: 8px 20px;
  justify-content: flex-start;
}
.is-staff .tgp-brand-block { flex: none; gap: 8px; }
/* Smaller than the customer-portal wordmarks: this row now carries six nav
   items and a search field, and the logos were sized for a row that carried
   neither. The 22/28 pair keeps the two marks optically equal — see the note
   on .tgp-brand-logo--hwb above for why HWB runs taller than TGP. */
.is-staff .tgp-brand-logo { height: 22px; }
.is-staff .tgp-brand-logo--hwb { height: 28px; }
.is-staff .brand-pair { gap: 8px; }
.is-staff .brand-pair-divider { font-size: 16px; color: var(--border-strong); }

.tgp-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  /* Scroll rather than clip. The row is `flex-wrap: nowrap` with a fixed-width
     right cluster, so once the items need more than their share the overflow is
     simply INVISIBLE — the last item (Insights, a menu) becomes unreachable with
     no indication that anything is missing. Measured on the 1366px warehouse
     laptops: six items needed 486px against ~397px of room, and the seventh
     (Returns) took it to 631px. This is the same trade the 760px breakpoint
     below already makes, applied at every width; nothing that fits today moves. */
  /* This makes the row a scroll container in BOTH axes (CSS Overflow: one axis
     `auto` computes the other `visible` to `auto`), and a scroll container
     clips absolutely-positioned descendants — which silently killed the two
     nav dropdowns from the day it landed. They are floated out of it now; see
     `.tgp-menu-panel.is-floating` above and `isClipped` in shell.js. Anything
     else hung off a `.tgp-nav-item` needs the same treatment. */
  overflow-x: auto;
  scrollbar-width: none;
}
.tgp-nav::-webkit-scrollbar { display: none; }
.tgp-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.tgp-nav-item:hover { background: var(--surface-inset); }
.tgp-nav-item.is-active {
  font-weight: 700;
  color: var(--text-strong);
  background: var(--surface-inset);
}
/* Plain text, no pill: a badge here is a count you glance at, and six pills in
   a row would read as six alerts. Rendered only when the count is non-zero —
   "Dispatch 0 late" is noise that trains people to stop reading the number. */
.tgp-nav-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
}

/* Dropdowns — one component, two users (Insights and the avatar). */
.tgp-menu { position: relative; display: inline-flex; }
.tgp-menu-caret { font-size: 9px; color: var(--text-subtle); }
.tgp-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1100;
  min-width: 208px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(13, 59, 102, 0.12);
}
.tgp-menu-panel--right { left: auto; right: 0; }
.tgp-menu-panel[hidden] { display: none; }
/* A panel whose menu sits inside a scroll container (the nav row is one — see
   `.tgp-nav`'s overflow-x below) is switched to this by shell.js, which writes
   the top/left inline from the trigger's rect. `position: fixed` is the only
   position an ancestor's overflow cannot clip, and without it BOTH nav menus
   open into nothing: that is what "the storefront button doesn't work/click"
   was on 2026-09-11. The `position` declaration is what does the work; the
   `top`/`left` reset stops the anchored rule and the ≤1080px override fighting
   the inline values. */
.tgp-menu-panel.is-floating { position: fixed; top: auto; left: auto; right: auto; }
.tgp-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-body);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.tgp-menu-item:hover { background: var(--surface-inset); color: var(--text-strong); }
.tgp-menu-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.tgp-menu-rule { display: block; height: 1px; margin: 4px 2px; background: var(--border-hair); }
/* The refresh form is a menu row like any other — strip its wrapper. */
.tgp-menu-panel .tgp-refresh-form { display: block; width: 100%; }

/* Right cluster. */
.tgp-shell-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.tgp-shell-divider {
  width: 1px;
  height: 20px;
  background: var(--border-hair);
  flex: none;
}

/* In-section search (handoff screen 2b). On home the command bar carries the
   full-size version instead; the two never render together. */
.tgp-shell-search { position: relative; flex: none; }
.tgp-shell-search > svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-subtle);
  pointer-events: none;
}
.tgp-shell-search input {
  width: 230px;
  height: 28px;
  padding: 0 12px 0 30px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-strong);
  background: var(--surface-inset);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-pill);
  transition: border-color .15s ease, background .15s ease;
}
.tgp-shell-search input::placeholder { color: var(--text-muted); }
.tgp-shell-search input:focus {
  outline: none;
  background: var(--surface-card);
  border-color: var(--tgp-blue);
}

/* Avatar + its menu. */
.tgp-usermenu-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 4px 0 8px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .14s ease;
}
.tgp-usermenu-trigger:hover { background: var(--surface-inset); }
.tgp-usermenu-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--tgp-navy);
  color: var(--text-on-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
}
/* The follow-ups count came off the nav row with the link; it rides the avatar
   so the number is still somewhere in the chrome on every page. */
.tgp-avatar-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  font-size: 0.62rem;
  border: 2px solid var(--surface-card);
}

/* Global search results dropdown — shared by the in-section field and the
   home command bar (see pages/home.css for the command bar's own geometry). */
.tgp-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1100;
  max-height: 60vh;
  overflow-y: auto;
  padding: 5px;
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(13, 59, 102, 0.12);
}
.tgp-search-results[hidden] { display: none; }
.tgp-search-group-label {
  display: block;
  padding: 8px 10px 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.tgp-search-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-body);
  cursor: pointer;
  transition: background .14s ease;
}
.tgp-search-row:hover,
.tgp-search-row.is-active { background: var(--surface-inset); }
.tgp-search-row-title {
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tgp-search-row-meta {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.tgp-search-empty {
  padding: 12px 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Hamburger — below the narrow breakpoint the nav folds into the avatar-side
   menu rather than wrapping onto a second row. */
.tgp-nav-toggle { display: none; }


/* --------------------------------------------------------------------------
   Stepper - numbered dots on a single line
   -------------------------------------------------------------------------- */

.tgps-stepper-wrap {
  display: none;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-hair);
}
.tgps-stepper-wrap.is-active { display: block; }
.tgps-stepper {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad-x);
}
.tgps-flow {
  display: none;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  align-items: center;
  gap: 0;
}
.tgps-flow.show { display: flex; flex-wrap: wrap; }

.tgps-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.tgps-step .dot {
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.tgps-step .label a,
.tgps-step .label span { color: inherit; }
.tgps-step .label a { transition: color .14s ease; }
.tgps-step .label a:hover { color: var(--text-strong); }

.tgps-step.done .dot {
  background: var(--tgp-navy);
  border-color: var(--tgp-navy);
  color: var(--text-on-dark);
}
.tgps-step.done { color: var(--text-strong); }

.tgps-step.current .dot {
  background: var(--surface-card);
  border-color: var(--tgp-navy);
  border-width: 2px;
  color: var(--tgp-navy);
  box-shadow: 0 0 0 3px var(--surface-page);
}
.tgps-step.current { color: var(--text-strong); font-weight: 600; }

.tgps-divider {
  width: 28px;
  height: 1px;
  background: var(--border-hair);
  align-self: center;
  margin: 0 4px;
}

.tgps-step .tip {
  position: absolute;
  left: 0; top: calc(100% + 6px);
  max-width: 220px;
  background: var(--text-body);
  color: var(--text-on-dark);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  display: none;
  z-index: 20;
  white-space: normal;
}
.tgps-step:hover .tip { display: block; }


/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.tgp-card {
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin: 0;
  box-sizing: border-box;
}

.tgp-card.is-flush { padding: 0; }
.tgp-card.is-tight { padding: 16px 18px; }

/* Hero variants - use sparingly, max one per page */
.tgp-card.is-hero {
  background: var(--tgp-navy);
  border-color: var(--tgp-navy);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}
.tgp-card.is-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tgp-brass);
}
.tgp-card.is-hero h1,
.tgp-card.is-hero h2,
.tgp-card.is-hero h3,
.tgp-card.is-hero p { color: var(--text-on-dark); }
.tgp-card.is-hero p { color: rgba(255,255,255,.78); }
.tgp-card.is-hero .tgp-eyebrow { color: rgba(255,255,255,.62); }
.tgp-card.is-hero h1::after,
.tgp-card.is-hero h2::after { background: var(--tgp-brass); }
.tgp-card.is-hero em,
.tgp-card.is-hero .accent { color: var(--tgp-brass); }

.tgp-card.is-warm {
  background: var(--tgp-beige);
  border-color: #efdcb5;
}

.tgp-card > * + * { margin-top: 14px; }
.tgp-card > .tgp-eyebrow + h1,
.tgp-card > .tgp-eyebrow + h2,
.tgp-card > .tgp-eyebrow + h3 { margin-top: 6px; }
.tgp-card > h1 + p, .tgp-card > h2 + p, .tgp-card > h3 + p { margin-top: 8px; }
.tgp-card > h1::after {
  content: "";
  display: block;
  width: 32px;
  height: 1.5px;
  background: var(--tgp-brass);
  margin-top: 12px;
}

.tgp-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.tgp-card-header > * { margin: 0; }


/* --------------------------------------------------------------------------
   Eyebrow - the signature primitive
   -------------------------------------------------------------------------- */

.tgp-eyebrow {
  display: inline-block;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tgp-eyebrow.brand { color: var(--tgp-blue); }
.tgp-eyebrow.brass { color: var(--tgp-brass); }
.tgp-eyebrow.on-dark { color: rgba(255,255,255,.78); }


/* --------------------------------------------------------------------------
   Hero - one moment of presence per page
   -------------------------------------------------------------------------- */

.tgp-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: 1.15;
  color: var(--text-strong);
  letter-spacing: -0.012em;
  margin: 0;
}
.tgp-hero-title em,
.tgp-hero-title .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--tgp-brass);
}

.tgp-hero-number {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-4xl);
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tgp-hero-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--tgp-brass);
  margin: 14px 0 16px;
}


/* --------------------------------------------------------------------------
   Pills / status chips
   -------------------------------------------------------------------------- */

.tgp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-inset);
  color: var(--text-muted);
  border: 1px solid var(--border-hair);
}
.tgp-pill.soft { background: var(--surface-inset); color: var(--text-muted); }
.tgp-pill.good { background: var(--ok-soft);   color: var(--ok);   border-color: #bbf7d0; }
.tgp-pill.warn { background: var(--warn-soft); color: var(--warn); border-color: #fde68a; }
.tgp-pill.bad  { background: var(--bad-soft);  color: var(--bad);  border-color: #fecaca; }
.tgp-pill.info { background: var(--info-soft); color: var(--info); border-color: #bfdbfe; }
.tgp-pill.brand { background: rgba(104,176,232,.12); color: var(--tgp-navy); border-color: rgba(104,176,232,.35); }
.tgp-pill.mono { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; font-weight: 500; }
/* Sentence-length pill content (e.g. signal "why now" reasons) — uppercase
   shouting is for short status words, not sentences. */
.tgp-pill.sentence { text-transform: none; letter-spacing: 0.01em; font-weight: 500; }


/* --------------------------------------------------------------------------
   Buttons - visible weight communicates intent
   -------------------------------------------------------------------------- */

.btn-primary, .btn-secondary, .btn-danger, .btn-success,
.btn-ghost, .btn-danger-soft, .btn-accent,
button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--tgp-blue);
  color: var(--text-on-dark);
  border-color: var(--tgp-blue);
}
.btn-primary:hover { background: var(--tgp-blue-deep); border-color: var(--tgp-blue-deep); color: var(--text-on-dark); }

.btn-secondary {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-inset); color: var(--text-strong); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-inset); color: var(--text-strong); }

.btn-danger {
  background: var(--bad);
  color: var(--text-on-dark);
  border-color: var(--bad);
}
.btn-danger:hover { background: #991b1b; border-color: #991b1b; color: var(--text-on-dark); }

.btn-danger-soft {
  background: var(--bad-soft);
  color: var(--bad);
  border-color: #fecaca;
}
.btn-danger-soft:hover { background: #fee2e2; color: var(--bad); }

.btn-success {
  background: var(--ok);
  color: var(--text-on-dark);
  border-color: var(--ok);
}
.btn-success:hover { background: #166534; border-color: #166534; color: var(--text-on-dark); }

.btn-accent {
  background: var(--tgp-navy);
  color: var(--text-on-dark);
  border-color: var(--tgp-navy);
}
.btn-accent:hover { background: #0a2d50; border-color: #0a2d50; color: var(--text-on-dark); }

.btn-small {
  height: 28px;
  padding: 0 10px;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}
.btn-large { height: 42px; padding: 0 18px; font-size: var(--fs-md); }

button:disabled, .btn-primary:disabled, .btn-secondary:disabled,
input[type="submit"]:disabled {
  opacity: .55;
  cursor: not-allowed;
}

button:not([class]) {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--border-strong);
}


/* --------------------------------------------------------------------------
   Toolbars / actions / stacks
   -------------------------------------------------------------------------- */

.tgp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tgp-toolbar > * { margin: 0; }

.tgp-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tgp-actions.compact { gap: 6px; }

.tgp-stack { display: grid; gap: 12px; }
.tgp-stack.tight { gap: 8px; }
.tgp-stack.loose { gap: 18px; }

.tgp-field-stack { display: grid; gap: 6px; align-content: start; }
.tgp-field-stack label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tgp-section-copy, .tgp-muted { color: var(--text-muted); }

/* Derived-data freshness stamp ("Signals as of …"), shared by the Customer
   Manager hub and the My-Week worklist via
   ``staff_portal/templates/staff_portal/_signals_freshness.html``. Muted and
   small while the nightly rebuild is keeping up; the stale variant carries
   ``.tgp-pill.warn`` on top of this for its amber, so it reads as a warning
   rather than a caption. Global rather than page-scoped because the two
   surfaces that render it load different page stylesheets. */
.signals-stamp {
  font-size: var(--fs-xs);
  cursor: help;  /* the title carries the absolute time + what to check */
}
.signals-stamp.is-stale { font-weight: 600; }


/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

form { margin: 0; max-width: 100%; }

.tgp-excel-table input,
.tgp-excel-table select,
.tgp-excel-table textarea,
form input[type="text"],
form input[type="number"],
form input[type="date"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="url"],
form select,
form textarea {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.2;
  margin: 0;
  transition: border-color .14s ease, box-shadow .14s ease;
}

form textarea, .tgp-excel-table textarea {
  height: auto;
  min-height: 84px;
  padding: 9px 10px;
  resize: vertical;
  line-height: 1.45;
}

form input[type="file"] {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 7px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  font-size: var(--fs-base);
}

form input[type="radio"], form input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--tgp-navy);
}

.tgp-excel-table input:focus,
.tgp-excel-table select:focus,
.tgp-excel-table textarea:focus,
form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--tgp-blue);
  box-shadow: 0 0 0 2px rgba(104,176,232,.22);
}

.field-error, .errorlist, .error { color: var(--bad); }

.errorlist {
  list-style: none;
  margin: 6px 0 0;
  padding: 7px 10px;
  background: var(--bad-soft);
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.error {
  padding: 7px 10px;
  border-radius: var(--r-md);
  background: var(--bad-soft);
  border: 1px solid #fecaca;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.alert {
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-hair);
  background: var(--surface-card);
  font-size: var(--fs-sm);
}


/* --------------------------------------------------------------------------
   Messages (django.contrib.messages)
   -------------------------------------------------------------------------- */

.messages {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.messages li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-hair);
  background: var(--surface-card);
  font-size: var(--fs-sm);
  white-space: pre-line;
  position: relative;
}
.messages li::before {
  content: "";
  width: 3px;
  align-self: stretch;
  background: var(--text-muted);
  border-radius: 2px;
  flex: none;
}
.messages li.success { border-color: #bbf7d0; background: var(--ok-soft); }
.messages li.success::before { background: var(--ok); }
.messages li.warning { border-color: #fde68a; background: var(--warn-soft); }
.messages li.warning::before { background: var(--warn); }
.messages li.error   { border-color: #fecaca; background: var(--bad-soft); }
.messages li.error::before { background: var(--bad); }
.messages li.info    { border-color: #bfdbfe; background: var(--info-soft); }
.messages li.info::before { background: var(--info); }


/* --------------------------------------------------------------------------
   Excel-style data tables - the core data surface
   -------------------------------------------------------------------------- */

.tgp-excel-wrap {
  border: 1px solid var(--border-hair);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  overflow: auto;
  max-width: 100%;
}

.tgp-excel-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: var(--fs-sm);
}

.tgp-excel-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tgp-navy);
  color: var(--text-on-dark);
  border: none;
  border-bottom: 1px solid var(--border-dark);
  padding: 10px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.tgp-excel-table td {
  border: none;
  border-bottom: 1px solid var(--border-hair);
  border-right: 1px solid var(--border-hair);
  padding: 8px 10px;
  vertical-align: top;
  background: var(--surface-card);
  font-variant-numeric: tabular-nums;
}
.tgp-excel-table td:last-child { border-right: 0; }
.tgp-excel-table tbody tr:last-child td { border-bottom: 0; }

.tgp-excel-table tbody tr:nth-child(even) td { background: var(--surface-alt); }
.tgp-excel-table tbody tr:hover td { background: #f1f5f9; }

.tgp-mono, .tgp-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* --------------------------------------------------------------------------
   Loading overlay
   -------------------------------------------------------------------------- */

.tgp-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(13, 59, 102, 0.62);
  backdrop-filter: blur(4px);
}
.tgp-loading-overlay.show { display: flex; }

.tgp-loading-panel {
  width: min(560px, calc(100vw - 32px));
  padding: 24px 28px;
  border-radius: var(--r-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
}

.tgp-loading-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tgp-loading-spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--tgp-navy);
  animation: tgp-spin .8s linear infinite;
  flex: none;
}
.tgp-loading-title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text-strong); }
.tgp-loading-copy  { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

.tgp-loading-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin: 0 0 10px;
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}

.tgp-loading-progress {
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface-inset);
  margin: 0 0 18px;
}
.tgp-loading-progress-bar {
  width: 14%;
  height: 100%;
  background: var(--tgp-navy);
  transition: width .9s ease;
}

.tgp-loading-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tgp-loading-step {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  border: 1px solid var(--border-hair);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.tgp-loading-step::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: none;
}
.tgp-loading-step.done { color: var(--text-strong); border-color: #bbf7d0; background: var(--ok-soft); }
.tgp-loading-step.done::before { background: var(--ok); }
.tgp-loading-step.active { color: var(--text-strong); border-color: var(--border-strong); background: var(--surface-card); }
.tgp-loading-step.active::before { background: var(--tgp-navy); box-shadow: 0 0 0 3px rgba(13,59,102,.14); }

@keyframes tgp-spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------------------
   Shared metric cards (deduplicated from invoice + send_to_neto)
   -------------------------------------------------------------------------- */

.neto-total-card,
.tgp-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.neto-total-item,
.tgp-metric {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
}

.neto-total-item strong,
.tgp-metric .label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.neto-total-item > span,
.tgp-metric .value {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.tgp-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}
.tgp-section-head .tgp-section-titles { min-width: 0; }
.tgp-section-head .tgp-section-titles > * { margin: 0; }
.tgp-section-head .tgp-section-titles > * + * { margin-top: 4px; }


/* --------------------------------------------------------------------------
   Divider rule
   -------------------------------------------------------------------------- */

.tgp-rule {
  border: 0;
  height: 1px;
  background: var(--border-hair);
  margin: 18px 0;
}
.tgp-rule.brass { background: var(--tgp-brass); margin: 14px 0; height: 1px; width: 36px; }


/* --------------------------------------------------------------------------
   Next-step card preserved (used by gift_message_editor + invoice flows)
   -------------------------------------------------------------------------- */

.next-step-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.next-step-card p { margin: 0; color: var(--text-muted); }


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  :root { --shell-pad-x: 16px; }
  .tgp-shell-header-inner {
    padding-top: 12px; padding-bottom: 12px;
    gap: 8px;
  }
  .tgp-app-title::before { display: none; }
  .tgps-flow { padding: 10px 0; }
  .tgps-divider { width: 14px; }

  /* Staff shell: the first thing to go is the in-section search field (⌘K
     still focuses the command bar on home, and the Customer Manager has its
     own palette), then the name beside the avatar. The nav itself survives —
     it is the whole point of the row. */
  .tgp-shell-header-inner.is-staff { padding: 8px 16px; gap: 14px; }
  .tgp-shell-search { display: none; }
  .tgp-usermenu-name { display: none; }
  .tgp-nav-item { padding: 0 9px; }
}

/* Below 760px the right-hand auth block (nav links + Refresh + greeting) is too
   wide to sit beside the brand; drop it to a full-width second row so the header
   wraps instead of forcing the page body to scroll horizontally. */
@media (max-width: 760px) {
  .tgp-auth-block {
    flex-basis: 100%;
    justify-content: flex-end;
  }

  /* Staff shell: six nav items plus the right cluster no longer fit one line.
     The nav drops to its own full-width row and scrolls horizontally rather
     than wrapping to three lines or hiding items behind a hamburger nobody
     finds — every section stays one gesture away and the badges stay visible.
     The launcher rail (home only) does the same thing below this width; see
     pages/home.css. */
  .tgp-shell-header-inner.is-staff { flex-wrap: wrap; gap: 10px; }
  .is-staff .tgp-shell-right { margin-left: auto; }
  .tgp-nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tgp-nav::-webkit-scrollbar { display: none; }
  .tgp-nav-item { flex: none; }
  /* A panel anchored to a scrolling row would clip; pin it to the row's edge. */
  .tgp-nav-menu .tgp-menu-panel { left: auto; right: 0; }
}

@media (max-width: 720px) {
  main.container, .container { padding: 16px var(--shell-pad-x) 48px; }
  .tgp-card { padding: 16px 18px; }
  .is-staff .tgp-brand-logo { height: 18px; }
  .is-staff .tgp-brand-logo--hwb { height: 24px; }
}

/* ---------------------------------------------------------------------------
   Gift-message editor — live SFTP upload status + Next-step warning (Phase A)
   --------------------------------------------------------------------------- */
.gift-sftp-status {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.gift-sftp-status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
  flex: none;
}
.gift-sftp-status.is-loading,
.gift-sftp-status.is-error   { color: var(--text-muted); background: var(--surface-inset); }
.gift-sftp-status.is-none    { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.gift-sftp-status.is-partial { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.gift-sftp-status.is-done    { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }

.gift-sftp-warn-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(13, 59, 102, 0.62);
  backdrop-filter: blur(4px);
}
.gift-sftp-warn-backdrop[hidden] { display: none; }
.gift-sftp-warn {
  width: 100%; max-width: 440px;
  background: var(--surface-card);
  border-radius: var(--r-md);
  padding: 22px 24px;
  box-shadow: 0 20px 50px rgba(13, 59, 102, 0.28);
}
.gift-sftp-warn h3 { margin: 0 0 8px; }
.gift-sftp-warn p { margin: 0 0 18px; color: var(--text-muted); font-size: var(--fs-sm); }
.gift-sftp-warn-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------------------------------------------------------------------------
   Gift-message editor — SFTP "preview what's on the server" strip + lightbox (Phase B)
   --------------------------------------------------------------------------- */
.gift-sftp-preview { margin-top: 14px; }
.gift-sftp-preview-note { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.gift-sftp-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-top: 10px;
  padding: 10px 2px 6px;
  scroll-snap-type: x proximity;
}
.gift-sftp-thumb {
  flex: 0 0 auto;
  width: 120px;
  margin: 0;
  cursor: pointer;
  scroll-snap-align: start;
  opacity: 0;
  animation: giftSftpThumbIn .28s ease forwards;
}
@keyframes giftSftpThumbIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.gift-sftp-thumb img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color .14s ease;
}
.gift-sftp-thumb:hover img { border-color: var(--tgp-blue); }
.gift-sftp-thumb figcaption {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gift-sftp-lightbox-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 24px;
  background: rgba(13, 30, 50, 0.85);
  backdrop-filter: blur(4px);
}
.gift-sftp-lightbox-backdrop[hidden] { display: none; }
.gift-sftp-lightbox-figure {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 86vw; max-height: 88vh;
}
.gift-sftp-lightbox-figure img {
  max-width: 86vw; max-height: 78vh;
  object-fit: contain;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
}
.gift-sftp-lightbox-figure figcaption { color: #e5e7eb; font-size: var(--fs-sm); }
.gift-sftp-lightbox-close,
.gift-sftp-lightbox-nav {
  flex: none;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.gift-sftp-lightbox-close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; font-size: 26px; }
.gift-sftp-lightbox-nav { width: 48px; height: 48px; font-size: 30px; }
.gift-sftp-lightbox-close:hover,
.gift-sftp-lightbox-nav:hover { background: rgba(255, 255, 255, .24); }

/* Staff header nav links (Customer Manager / Home). */
.tgp-nav-link { white-space: nowrap; }
/* Customer Manager is the primary landing (the hub supersedes the old dashboard). */
.tgp-nav-link--primary { font-weight: 700; color: var(--text-strong); }
.tgp-nav-link--primary:hover { color: var(--tgp-blue-deep); }

/* "New" sticker for freshly-shipped sections. */
.tgp-new-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: #2f8e4d;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
  margin-left: 6px;
}

/* --------------------------------------------------------------------------
   The Help Centre "?" — {% help_tip "slug" %}
   Sits beside a control and opens the matching article in a new tab. It has to
   read as an affordance without competing with the thing it explains, so it is
   quiet until hovered and never changes the height of the row it sits in.
   -------------------------------------------------------------------------- */
.help-tip {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  /* Never let the badge stretch a flex row or a table cell. */
  flex: none;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.help-tip:hover,
.help-tip:focus-visible {
  color: #ffffff;
  background: var(--tgp-blue-deep);
  border-color: var(--tgp-blue-deep);
  text-decoration: none;
  outline: none;
}
.help-tip:focus-visible { box-shadow: 0 0 0 3px rgba(104, 176, 232, .35); }

/* On a dark surface (the navy command bar, a modal header, a table head). */
.tgp-command-bar .help-tip,
thead .help-tip,
.cm-summary .help-tip {
  border-color: rgba(255, 255, 255, .45);
  background: transparent;
  color: rgba(255, 255, 255, .8);
}
.tgp-command-bar .help-tip:hover,
thead .help-tip:hover,
.cm-summary .help-tip:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #ffffff;
  color: #ffffff;
}

/* The account panel's single ? sits at the far end of the tab strip and follows
   whichever tab is open, so twelve panels share one badge. Auto margin rather
   than absolute positioning: .cm-tabs wraps on a narrow screen, and the badge
   should ride along on the last row instead of overlapping a tab. */
.cm-tabs-help {
  margin: 0 4px 8px auto;
  align-self: center;
  flex: none;
}

/* An inline prose link into the Help Centre — {% help_link %}. */
.help-inline { color: var(--tgp-blue-deep); text-decoration: underline; text-underline-offset: 2px; }

/* The "?" rendered as plain text inside help copy (not a link). */
.help-tip-inline {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; border: 1px solid var(--border-strong);
  font-size: 10px; font-weight: 700; vertical-align: middle;
}

/* The permanent Help Centre "?" in the header, beside Log call. Same visual
   language as the contextual .help-tip badges so the two read as one system. */
.tgp-help-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  flex: none;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.tgp-help-btn:hover,
.tgp-help-btn:focus-visible {
  color: #ffffff;
  background: var(--tgp-blue-deep);
  border-color: var(--tgp-blue-deep);
  text-decoration: none;
  outline: none;
}
.tgp-help-btn:focus-visible { box-shadow: 0 0 0 3px rgba(104, 176, 232, .35); }