/* ══════════════════════════════════════════════════════════════════════════════
   TWF PREMIUM DESIGN LAYER v1.0  (C325 / M74)
   ──────────────────────────────────────────────────────────────────────────────
   Single canonical layer. Three goals:
     (1) BRIDGE the three legacy token namespaces (--gold, --twf-*, --color-*)
         so every existing class continues to render. Aliases only — no value
         changes. Nothing in production breaks.
     (2) FILL the missing primitives — focus ring, tap targets, motion canon,
         semantic intent (positive / neutral / caution / critical), and a
         spacing scale that covers the gaps the legacy sets left open
         (28 / 40 / 56 / 64 px).
     (3) EXPOSE premium component classes (modal-v2, btn-*, input-v2,
         segmented, banner-*, section-header, stack, row, kbd) that consume
         ONLY canonical tokens. Future surfaces inherit Fortune-500 polish
         by default — no inline-style drift.

   FORTUNE-500 PRINCIPLES BAKED IN:
     • Whitespace as currency      → 16/24/32/48 rhythm, mobile 12/16/24
     • Single accent               → Gold reserved for ONE primary action / screen
     • Type as voice               → Playfair for declarations, system sans for ops
     • Elevation as hierarchy      → 4 layers, subtle shadows, no harsh borders
     • Motion as confidence        → 220-350ms, cubic-bezier(.16,1,.3,1), short
     • Tap target as respect       → 44px min, 48px primary, NEVER smaller
     • Semantic intent             → never raw color — always intent token

   Load order: AFTER twf-styles-app-core.css so aliases resolve correctly.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── INTENT — semantic color (use these, not raw --gold/--red/--green) ─── */
  --intent-positive:        #10B981;
  --intent-positive-soft:   rgba(16,185,129,.10);
  --intent-positive-strong: #047857;
  --intent-neutral:         #4A4D55;
  --intent-neutral-soft:    rgba(12,18,32,.05);
  --intent-neutral-strong:  #0C1220;
  --intent-caution:         #D97706;
  --intent-caution-soft:    rgba(217,119,6,.10);
  --intent-caution-strong:  #92400E;
  --intent-critical:        #DC2626;
  --intent-critical-soft:   rgba(220,38,38,.08);
  --intent-critical-strong: #991B1B;
  --intent-brand:           #C9A84C;   /* Gold — primary actions only */
  --intent-brand-soft:      rgba(201,168,76,.10);
  --intent-brand-strong:    #8A7530;   /* WCAG AA on white */

  /* ─── SPACING canon — bridges --twf-space-N AND adds --space-N alias ─── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;   /* NEW — fills the 24→32 gap */
  --space-8:  32px;
  --space-10: 40px;   /* NEW */
  --space-12: 48px;   /* NEW */
  --space-14: 56px;   /* NEW */
  --space-16: 64px;   /* NEW */
  --space-20: 80px;   /* NEW */

  /* ─── TAP target — discipline-as-CSS-variable ─── */
  --tap-min:        44px;   /* WCAG 2.5.5 minimum                          */
  --tap-comfort:    48px;   /* Preferred for primary actions               */
  --tap-generous:   56px;   /* Hero CTAs, single-action mobile flows       */

  /* ─── MOTION canon — short distance, slow easing reads "confident" ─── */
  --motion-instant: 80ms;
  --motion-fast:    160ms;
  --motion-base:    220ms;
  --motion-slow:    350ms;
  --motion-glacial: 600ms;
  --motion-ease:        cubic-bezier(.4, 0, .2, 1);
  --motion-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --motion-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ─── ELEVATION — 4 layers, layered shadows for premium feel ─── */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(12,18,32,.04), 0 1px 1px rgba(12,18,32,.03);
  --elev-2: 0 2px 4px rgba(12,18,32,.04), 0 4px 12px rgba(12,18,32,.06);
  --elev-3: 0 6px 16px rgba(12,18,32,.08), 0 12px 32px rgba(12,18,32,.06);
  --elev-4: 0 12px 32px rgba(12,18,32,.12), 0 24px 64px rgba(12,18,32,.10);
  --elev-brand: 0 4px 16px rgba(201,168,76,.18), 0 8px 32px rgba(201,168,76,.10);

  /* ─── RADIUS canon — bridges --radius / --twf-radius-* ─── */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ─── FOCUS ring — single canonical treatment ─── */
  --focus-ring:        0 0 0 3px rgba(201,168,76,.40);
  --focus-ring-offset: 2px;
  --focus-ring-critical: 0 0 0 3px rgba(220,38,38,.40);

  /* ─── TYPE scale — read aloud: "eleven, twelve, thirteen, fifteen…" ─── */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --leading-tight:  1.15;
  --leading-snug:   1.30;
  --leading-normal: 1.45;
  --leading-loose:  1.60;
  --tracking-tight: -0.01em;
  --tracking-wide:  0.06em;
  --tracking-eyebrow: 0.14em;
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Section header (eyebrow + title + optional action)
   Single rule for every page section. Read-aloud pattern, premium spacing.
   ════════════════════════════════════════════════════════════════════════════ */

.twf-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-5) 0;
}
.twf-section-header__text { min-width: 0; }
.twf-section-header__eyebrow {
  font-family: var(--font-body, inherit);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--intent-brand-strong);
  margin: 0 0 var(--space-1) 0;
  line-height: var(--leading-tight);
}
.twf-section-header__title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--intent-neutral-strong);
  margin: 0;
}
.twf-section-header__sub {
  font-size: var(--text-base);
  color: var(--intent-neutral);
  margin: var(--space-1) 0 0 0;
  line-height: var(--leading-normal);
}
.twf-section-header__action { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Button (4 intents × 3 sizes, all 44px+ min-height)
   USAGE: <button class="twf-btn twf-btn--primary twf-btn--md">Save</button>
   ════════════════════════════════════════════════════════════════════════════ */

.twf-btn {
  /* Reset */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 1px solid transparent;
  margin: 0;
  font-family: var(--font-body, inherit);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Sizing — default md */
  min-height: var(--tap-comfort);
  padding: 0 var(--space-5);
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  /* Motion */
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease-out),
    transform var(--motion-fast) var(--motion-ease-out);
}
.twf-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.twf-btn[disabled],
.twf-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.twf-btn--sm {
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}
.twf-btn--lg {
  min-height: var(--tap-generous);
  padding: 0 var(--space-6);
  font-size: var(--text-md);
  border-radius: var(--radius-md);
}
.twf-btn--block { width: 100%; }
.twf-btn--icon {
  padding: 0;
  width: var(--tap-comfort);
  min-width: var(--tap-comfort);
}

/* Intent — primary (ONE per screen) */
.twf-btn--primary {
  background: var(--intent-brand);
  color: #0C1220;
  box-shadow: var(--elev-1);
}
.twf-btn--primary:hover:not([disabled]) {
  background: #BF9D3F;
  box-shadow: var(--elev-2), var(--elev-brand);
  transform: translateY(-1px);
}
.twf-btn--primary:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: var(--elev-1);
}

/* Intent — secondary */
.twf-btn--secondary {
  background: #FFF;
  color: var(--intent-neutral-strong);
  border-color: rgba(12,18,32,.14);
  box-shadow: var(--elev-1);
}
.twf-btn--secondary:hover:not([disabled]) {
  border-color: rgba(12,18,32,.30);
  background: #FAFAF7;
  box-shadow: var(--elev-2);
}

/* Intent — ghost (text-only, for cancel / dismiss) */
.twf-btn--ghost {
  background: transparent;
  color: var(--intent-neutral);
}
.twf-btn--ghost:hover:not([disabled]) {
  background: var(--intent-neutral-soft);
  color: var(--intent-neutral-strong);
}

/* Intent — destructive (only when irreversible) */
.twf-btn--destructive {
  background: var(--intent-critical);
  color: #FFF;
  box-shadow: var(--elev-1);
}
.twf-btn--destructive:hover:not([disabled]) {
  background: var(--intent-critical-strong);
  box-shadow: var(--elev-2);
}
.twf-btn--destructive:focus-visible {
  box-shadow: var(--focus-ring-critical);
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Input / Textarea / Select (v2)
   44px minimum tap area. Single focus pattern.
   ════════════════════════════════════════════════════════════════════════════ */

.twf-input-v2,
.twf-textarea-v2,
.twf-select-v2 {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: var(--tap-comfort);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body, inherit);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--intent-neutral-strong);
  background: #FFF;
  border: 1px solid rgba(12,18,32,.14);
  border-radius: var(--radius-md);
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease-out),
    background-color var(--motion-fast) var(--motion-ease);
}
.twf-input-v2::placeholder,
.twf-textarea-v2::placeholder { color: rgba(12,18,32,.40); }
.twf-input-v2:hover,
.twf-textarea-v2:hover,
.twf-select-v2:hover { border-color: rgba(12,18,32,.30); }
.twf-input-v2:focus-visible,
.twf-textarea-v2:focus-visible,
.twf-select-v2:focus-visible {
  outline: none;
  border-color: var(--intent-brand);
  box-shadow: var(--focus-ring);
}
.twf-textarea-v2 {
  min-height: 112px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  line-height: var(--leading-normal);
}
.twf-select-v2 {
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%230C1220' stroke-width='1.6' d='M2 4l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
}

.twf-field {
  display: block;
  margin: 0 0 var(--space-4) 0;
}
.twf-field__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--intent-neutral-strong);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-tight);
}
.twf-field__hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--intent-neutral);
  margin: var(--space-2) 0 0 0;
  line-height: var(--leading-normal);
}
.twf-field__error {
  display: block;
  font-size: var(--text-sm);
  color: var(--intent-critical-strong);
  margin: var(--space-2) 0 0 0;
  font-weight: 500;
  line-height: var(--leading-normal);
}
.twf-field--has-error .twf-input-v2,
.twf-field--has-error .twf-textarea-v2,
.twf-field--has-error .twf-select-v2 {
  border-color: var(--intent-critical);
}
.twf-field--has-error .twf-input-v2:focus-visible,
.twf-field--has-error .twf-textarea-v2:focus-visible,
.twf-field--has-error .twf-select-v2:focus-visible {
  box-shadow: var(--focus-ring-critical);
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Segmented control (radio group, premium)
   USAGE: <div class="twf-segmented" role="radiogroup">
            <button class="twf-segmented__opt is-selected">…</button>
            <button class="twf-segmented__opt">…</button>
          </div>
   ════════════════════════════════════════════════════════════════════════════ */

.twf-segmented {
  display: inline-flex;
  padding: var(--space-1);
  background: var(--intent-neutral-soft);
  border-radius: var(--radius-md);
  gap: var(--space-1);
}
.twf-segmented__opt {
  appearance: none;
  background: transparent;
  border: none;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  font-family: var(--font-body, inherit);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--intent-neutral);
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease-out);
}
.twf-segmented__opt:hover { color: var(--intent-neutral-strong); }
.twf-segmented__opt.is-selected {
  background: #FFF;
  color: var(--intent-neutral-strong);
  box-shadow: var(--elev-1);
}
.twf-segmented__opt:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Banner (intent-tinted, dismissible)
   For required-acks, informational notes, error states above content.
   USAGE: <aside class="twf-banner twf-banner--required">…</aside>
   ════════════════════════════════════════════════════════════════════════════ */

.twf-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  margin: 0 0 var(--space-5) 0;
  line-height: var(--leading-normal);
}
.twf-banner__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.twf-banner__body { flex: 1; min-width: 0; }
.twf-banner__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--intent-neutral-strong);
  margin: 0 0 var(--space-1) 0;
  line-height: var(--leading-tight);
}
.twf-banner__copy {
  font-size: var(--text-sm);
  color: var(--intent-neutral);
  margin: 0;
}
.twf-banner__actions {
  flex-shrink: 0;
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

.twf-banner--required {
  background: var(--intent-critical-soft);
  border-color: rgba(220,38,38,.20);
}
.twf-banner--required .twf-banner__icon { color: var(--intent-critical-strong); }

.twf-banner--important {
  background: var(--intent-caution-soft);
  border-color: rgba(217,119,6,.22);
}
.twf-banner--important .twf-banner__icon { color: var(--intent-caution-strong); }

.twf-banner--info {
  background: var(--intent-brand-soft);
  border-color: rgba(201,168,76,.25);
}
.twf-banner--info .twf-banner__icon { color: var(--intent-brand-strong); }

.twf-banner--positive {
  background: var(--intent-positive-soft);
  border-color: rgba(16,185,129,.25);
}
.twf-banner--positive .twf-banner__icon { color: var(--intent-positive-strong); }

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Modal v2 (entrance animation, blurred backdrop)
   Markup pattern:
     <div class="twf-modal-v2-backdrop" data-action="call:closeModalV2">
       <div class="twf-modal-v2" role="dialog" aria-modal="true">
         <header class="twf-modal-v2__header">…</header>
         <div    class="twf-modal-v2__body">…</div>
         <footer class="twf-modal-v2__footer">…</footer>
       </div>
     </div>
   ════════════════════════════════════════════════════════════════════════════ */

.twf-modal-v2-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 9000);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(12,18,32,.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: twf-modal-fade var(--motion-base) var(--motion-ease-out);
}
@media (min-width: 720px) {
  .twf-modal-v2-backdrop {
    align-items: center;
    padding: var(--space-8);
  }
}
.twf-modal-v2 {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--space-8));
  background: #FFF;
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: twf-modal-rise var(--motion-slow) var(--motion-ease-out);
}
.twf-modal-v2--wide   { max-width: 720px; }
.twf-modal-v2--narrow { max-width: 440px; }

.twf-modal-v2__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6);
}
.twf-modal-v2__title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--intent-neutral-strong);
  margin: 0;
}
.twf-modal-v2__sub {
  font-size: var(--text-base);
  color: var(--intent-neutral);
  margin: var(--space-2) 0 0 0;
  line-height: var(--leading-normal);
}
.twf-modal-v2__close {
  flex-shrink: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
  color: var(--intent-neutral);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.twf-modal-v2__close:hover {
  background: var(--intent-neutral-soft);
  color: var(--intent-neutral-strong);
}
.twf-modal-v2__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.twf-modal-v2__body {
  padding: 0 var(--space-6) var(--space-6) var(--space-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.twf-modal-v2__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid rgba(12,18,32,.08);
  background: #FAFAF7;
}
.twf-modal-v2__footer--split { justify-content: space-between; }

@keyframes twf-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes twf-modal-rise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Stack & Row (gap utilities; replaces ad-hoc margins)
   USAGE:  <div class="twf-stack twf-stack--4">…</div>   (vertical gap 16)
           <div class="twf-row twf-row--3">…</div>       (horizontal gap 12)
   ════════════════════════════════════════════════════════════════════════════ */

.twf-stack { display: flex; flex-direction: column; }
.twf-stack--1 { gap: var(--space-1); }
.twf-stack--2 { gap: var(--space-2); }
.twf-stack--3 { gap: var(--space-3); }
.twf-stack--4 { gap: var(--space-4); }
.twf-stack--5 { gap: var(--space-5); }
.twf-stack--6 { gap: var(--space-6); }
.twf-stack--8 { gap: var(--space-8); }

.twf-row { display: flex; flex-wrap: wrap; align-items: center; }
.twf-row--1 { gap: var(--space-1); }
.twf-row--2 { gap: var(--space-2); }
.twf-row--3 { gap: var(--space-3); }
.twf-row--4 { gap: var(--space-4); }
.twf-row--5 { gap: var(--space-5); }
.twf-row--6 { gap: var(--space-6); }
.twf-row--between { justify-content: space-between; }
.twf-row--end     { justify-content: flex-end; }
.twf-row--start   { justify-content: flex-start; align-items: flex-start; }

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Status pill (intent-colored, small, semantic)
   USAGE: <span class="twf-pill twf-pill--positive">Confirmed</span>
   ════════════════════════════════════════════════════════════════════════════ */

.twf-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--intent-neutral-soft);
  color: var(--intent-neutral-strong);
  white-space: nowrap;
}
.twf-pill--positive { background: var(--intent-positive-soft); color: var(--intent-positive-strong); }
.twf-pill--caution  { background: var(--intent-caution-soft);  color: var(--intent-caution-strong);  }
.twf-pill--critical { background: var(--intent-critical-soft); color: var(--intent-critical-strong); }
.twf-pill--brand    { background: var(--intent-brand-soft);    color: var(--intent-brand-strong);    }

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Divider (semantic, not decorative <hr>)
   USAGE: <div class="twf-divider"></div>
          <div class="twf-divider twf-divider--label">OR</div>
   ════════════════════════════════════════════════════════════════════════════ */

.twf-divider {
  display: block;
  height: 1px;
  background: rgba(12,18,32,.08);
  margin: var(--space-5) 0;
  border: none;
}
.twf-divider--label {
  height: auto;
  background: transparent;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--intent-neutral);
}
.twf-divider--label::before,
.twf-divider--label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(12,18,32,.08);
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Tap-44 wrapper (defensive sizing for legacy buttons)
   Wrap any small inline action to guarantee tap area without changing visual.
   USAGE: <span class="twf-tap-44"><a href="…">edit</a></span>
   ════════════════════════════════════════════════════════════════════════════ */

.twf-tap-44 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  position: relative;
}
.twf-tap-44 > * {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Spinner (consistent loading indicator)
   USAGE: <span class="twf-spin" aria-hidden="true"></span>
   ════════════════════════════════════════════════════════════════════════════ */

.twf-spin {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(12,18,32,.15);
  border-top-color: var(--intent-brand);
  border-radius: 50%;
  animation: twf-spin var(--motion-glacial) linear infinite;
}
.twf-btn .twf-spin { width: 14px; height: 14px; }
@keyframes twf-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════════
   COMPONENT — Skeleton (consistent loading placeholder)
   USAGE: <div class="twf-skel" style="width:80%;height:14px;"></div>
   ════════════════════════════════════════════════════════════════════════════ */

.twf-skel {
  display: block;
  background: linear-gradient(90deg,
    rgba(12,18,32,.04) 25%,
    rgba(12,18,32,.08) 50%,
    rgba(12,18,32,.04) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: twf-skel-shimmer 1.4s var(--motion-ease) infinite;
}
@keyframes twf-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced motion respect
   When the user has prefers-reduced-motion enabled, kill the entrance
   animations and shimmer. Static surfaces only.
   ════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .twf-modal-v2-backdrop,
  .twf-modal-v2,
  .twf-skel,
  .twf-spin {
    animation: none !important;
  }
  .twf-btn,
  .twf-input-v2,
  .twf-textarea-v2,
  .twf-select-v2,
  .twf-segmented__opt,
  .twf-modal-v2__close {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE — tighten spacing per Fortune-500 mobile-first principle
   Section headers and modal padding compress at <720px so first viewport
   shows more substance.
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .twf-section-header { margin-bottom: var(--space-4); }
  .twf-section-header__title { font-size: var(--text-xl); }
  .twf-modal-v2__header  { padding: var(--space-5) var(--space-5) var(--space-3) var(--space-5); }
  .twf-modal-v2__body    { padding: 0 var(--space-5) var(--space-5) var(--space-5); }
  .twf-modal-v2__footer  { padding: var(--space-4) var(--space-5); }
  .twf-modal-v2__title   { font-size: var(--text-xl); }
}

/* ════════════════════════════════════════════════════════════════════════════
   C328 (M77) — LEGACY MODAL POLISH LAYER
   Re-skins existing .modal-overlay / .modal-content / .modal-title to match
   .twf-modal-v2 without rewriting each modal. Targeted to high-impact
   surface properties — backdrop blur, border radius, shadow elevation,
   title typography. Existing inline overrides still win.
   ════════════════════════════════════════════════════════════════════════════ */

.modal-overlay:not(.twf-modal-v2-backdrop) {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(12, 18, 32, .40) !important;
}
.modal-content:not(.twf-modal-v2) {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--elev-4) !important;
  animation: twf-modal-rise var(--motion-slow) var(--motion-ease-out);
}
.modal-title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: var(--leading-tight) !important;
  color: var(--intent-neutral-strong) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   C328 (M77) — GLOBAL FORM INPUT POLISH
   Lifts every existing <input>, <textarea>, <select> to premium baseline
   (44px height, focus ring, hover state) WITHOUT requiring .twf-input-v2.
   Opt out by adding class="twf-no-polish" or wrapping in [data-no-polish].
   Skips modals/forms that already use the v2 primitives.
   ════════════════════════════════════════════════════════════════════════════ */

input[type="text"]:not(.twf-input-v2):not(.twf-no-polish):not([type="hidden"]),
input[type="email"]:not(.twf-input-v2):not(.twf-no-polish),
input[type="password"]:not(.twf-input-v2):not(.twf-no-polish),
input[type="number"]:not(.twf-input-v2):not(.twf-no-polish),
input[type="tel"]:not(.twf-input-v2):not(.twf-no-polish),
input[type="search"]:not(.twf-input-v2):not(.twf-no-polish),
input[type="date"]:not(.twf-input-v2):not(.twf-no-polish),
input[type="time"]:not(.twf-input-v2):not(.twf-no-polish),
textarea:not(.twf-textarea-v2):not(.twf-no-polish):not(#chatInput),
select:not(.twf-select-v2):not(.twf-no-polish) {
  min-height: var(--tap-min);
  transition: border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-base) var(--motion-ease-out);
}
input[type="text"]:not(.twf-input-v2):not(.twf-no-polish):focus-visible,
input[type="email"]:not(.twf-input-v2):not(.twf-no-polish):focus-visible,
input[type="password"]:not(.twf-input-v2):not(.twf-no-polish):focus-visible,
input[type="number"]:not(.twf-input-v2):not(.twf-no-polish):focus-visible,
input[type="tel"]:not(.twf-input-v2):not(.twf-no-polish):focus-visible,
input[type="search"]:not(.twf-input-v2):not(.twf-no-polish):focus-visible,
input[type="date"]:not(.twf-input-v2):not(.twf-no-polish):focus-visible,
input[type="time"]:not(.twf-input-v2):not(.twf-no-polish):focus-visible,
textarea:not(.twf-textarea-v2):not(.twf-no-polish):focus-visible,
select:not(.twf-select-v2):not(.twf-no-polish):focus-visible {
  outline: none;
  border-color: var(--intent-brand) !important;
  box-shadow: var(--focus-ring);
}

/* ════════════════════════════════════════════════════════════════════════════
   C328 (M77) — INTERACTIVE CARD HOVER GUARANTEE
   Any element marked .twf-interactive lifts on hover (replaces ad-hoc
   transform overrides scattered across cockpit code).
   ════════════════════════════════════════════════════════════════════════════ */

.twf-interactive {
  transition: transform var(--motion-fast) var(--motion-ease-out),
              box-shadow var(--motion-base) var(--motion-ease-out);
  cursor: pointer;
}
.twf-interactive:hover { transform: translateY(-1px); box-shadow: var(--elev-2); }
.twf-interactive:active { transform: translateY(0); box-shadow: var(--elev-1); }
.twf-interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ════════════════════════════════════════════════════════════════════════════
   C331 (M81) — MOBILE BOTTOM-SHEET ENTRANCE + SAFE AREA
   On <720px viewports, twf-modal-v2 rises from the bottom (iOS-style sheet)
   instead of fading in center. Drag indicator handle on top. Respects
   env(safe-area-inset-bottom) so the content doesn't sit under the home bar.
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .twf-modal-v2 {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    max-height: 92vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: twf-sheet-rise var(--motion-slow) var(--motion-ease-out);
  }
  .twf-modal-v2::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 10px auto 0;
    background: rgba(12,18,32,.18);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }
  .twf-modal-v2__footer {
    /* Respect home-bar inset — already handled by parent padding-bottom but
       footer needs to stay visually distinct. */
    border-radius: 0;
  }
  /* Mobile composer (chat) — boost the textarea min-height + tap area */
  #chatInput {
    min-height: var(--tap-min);
    font-size: 16px; /* iOS auto-zoom guard */
    line-height: var(--leading-snug);
  }
  /* Chat quick-reply bar — full-width stack on mobile */
  #twfChatQuickReply .twf-row {
    flex-wrap: wrap;
  }
  #twfChatQuickReply .twf-btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@keyframes twf-sheet-rise {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════════
   C331 (M81) — KEYBOARD-VISIBLE TEXTAREA RESCUE (iOS)
   When the on-screen keyboard appears, scroll the focused textarea/input
   into view automatically. Pure CSS via scroll-margin-top.
   ════════════════════════════════════════════════════════════════════════════ */

.twf-modal-v2 input:focus,
.twf-modal-v2 textarea:focus,
.twf-modal-v2 select:focus {
  scroll-margin-top: var(--space-8);
  scroll-margin-bottom: var(--space-12);
}