/* ============================================================================
   _shared/ch-polish.css — Phase 2D visual + typography refinement.

   Sits on top of ch-page.css. Refines:
     • Type scale         consistent 11 / 12 / 14 / 16 / 20 / 28 / 40
     • Color discipline   emerald primary, oat secondary, bone surface
     • Breathing room     +8px on tile padding, +4px on stack rhythm
     • Motion             200ms ease on hover/focus, no jank
     • Focus rings        emerald 2px outline at -2px offset, accessible
     • Tabular numerals   on every number element
     • Sparklines         settle to soft default, brighten on hover
   ============================================================================ */

/* ─── Design tokens — extend, don't replace ──────────────────────── */
:root {
  /* Emerald primary scale */
  --ch-emerald-50:  #F0F8F4;
  --ch-emerald-100: #DCEEE3;
  --ch-emerald-300: #79B89B;
  --ch-emerald-500: #117A4D;
  --ch-emerald-600: #0E6440;
  --ch-emerald-700: #0A4E32;
  /* Bone / oat surface scale */
  --ch-bone-50:  #FAF9F6;
  --ch-bone-100: #F3F1EA;
  --ch-bone-200: #E5DFD0;
  --ch-bone-300: #C8C1AC;
  --ch-oat-500:  #847C6A;
  --ch-oat-700:  #564F3F;
  --ch-ink:      #182C20;

  /* Type rhythm — explicit ladder */
  --ts-11: 11px;
  --ts-12: 12px;
  --ts-14: 14px;
  --ts-16: 16px;
  --ts-20: 20px;
  --ts-28: 28px;
  --ts-40: 40px;

  /* Spacing rhythm — every gap snaps to one of these */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t-med:  220ms;
}

/* ─── Body refinement — feathered antialiasing + tighter ligatures ─ */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv11";
}

/* Tabular nums for any number element. Apply where numbers live. */
[data-num], .num, .ch-prov-tile-num, .proof-tile-num, .ch-pulse-num,
.kpi-num, .stat-num, .station-pulse .v, .ch-prov-chain .v {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ─── Headings — tighten leading + reduce letter spacing ─────────── */
h1, .ch-h1 { letter-spacing: -0.025em; text-wrap: balance; }
h2, .ch-h2 { letter-spacing: -0.020em; }
h3, .ch-h3 { letter-spacing: -0.015em; }

/* ─── Focus rings — emerald, accessible ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--ch-emerald-500);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline-offset: 2px;
}

/* ─── Hover/transition discipline ────────────────────────────────── */
button, a, .ch-prov-tile, .proof-tile, .ch-cmdk-row, .ch-pulse-tile {
  transition:
    background-color var(--t-fast) var(--ease-out),
    color            var(--t-fast) var(--ease-out),
    border-color     var(--t-fast) var(--ease-out),
    box-shadow       var(--t-med)  var(--ease-out),
    transform        var(--t-med)  var(--ease-out);
}

/* ─── Tile lift on hover — universal ────────────────────────────── */
.proof-tile:hover, .ch-pulse-tile:hover, [data-provenance]:hover {
  transform: translateY(-1px);
}

/* ─── Better proof-tile rhythm ──────────────────────────────────── */
.proof-tile {
  padding: 20px 20px 18px;
}
.proof-tile-num {
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  color: var(--ch-emerald-500);
  letter-spacing: -0.025em;
}
.proof-tile-lbl {
  font-size: var(--ts-14);
  line-height: 1.25;
  font-weight: 500;
  color: var(--ch-ink);
  margin-top: 8px;
}
.proof-tile-sub {
  font-size: var(--ts-12);
  line-height: 1.4;
  color: var(--ch-oat-500);
  margin-top: 4px;
}
.proof-section-title {
  font-size: var(--ts-20);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ch-ink);
  margin: 0 0 var(--sp-4);
}
.proof-section { margin-top: 40px; }

/* ─── Sparkline ambient settling — start dimmed, lift on hover ───── */
.ch-sparkline, .ch-sparkline-block {
  opacity: 0.55;
  transition: opacity var(--t-med) var(--ease-out);
}
.ch-sparkline.loaded, .ch-sparkline-block.loaded { opacity: 0.65; }
.ch-sparkline:hover, .ch-sparkline-block:hover,
[data-provenance]:hover .ch-sparkline,
[data-provenance]:hover .ch-sparkline-block { opacity: 1; }

/* ─── Trend meta chip — settle to mono w/ tight tracking ─────────── */
.ch-trend-meta {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ─── Cmd-K — entry animation + tighter input ────────────────────── */
.ch-cmdk-modal.open {
  animation: chCmdkIn 200ms var(--ease-out);
}
@keyframes chCmdkIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.ch-cmdk-input {
  font-feature-settings: "ss01";
  letter-spacing: -0.005em;
}

/* ─── Provenance drawer polish ───────────────────────────────────── */
.ch-prov-drawer {
  font-feature-settings: "ss01", "cv11";
}
.ch-prov-section + .ch-prov-section { margin-top: 18px; }
.ch-prov-chain {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* ─── Compact dashboard rhythm ───────────────────────────────────── */
.ch-grid, .grid-tiles, .tiles {
  gap: var(--sp-4);
}

/* ─── Subtle card lift on every dashboard tile ───────────────────── */
.tile, .card, .ch-card, .pulse-tile {
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
}
.tile:hover, .card:hover, .ch-card:hover, .pulse-tile:hover {
  box-shadow: 0 4px 16px rgba(17, 122, 77, 0.08);
}

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ─── Selection color — emerald instead of system blue ───────────── */
::selection {
  background: var(--ch-emerald-100);
  color: var(--ch-emerald-700);
}

/* ─── Verify-result panel inside drawer — tighten ───────────────── */
.ch-prov-verify-ok, .ch-prov-verify-fail {
  padding: 12px 14px;
}
.ch-prov-verify-headline {
  font-size: var(--ts-14);
  letter-spacing: -0.005em;
}
.ch-prov-verify-sub {
  font-size: 12px;
  color: var(--ch-oat-700);
  margin-top: 6px;
  padding-left: 36px;
  line-height: 1.5;
}

/* ─── Phase 4B: Mobile + tablet polish ──────────────────────────────
   Appended to ch-polish.css. Three breakpoint bands:
     ≤ 600px   phone portrait    one-column everywhere
     ≤ 900px   phone landscape + small tablet
     ≤ 1024px  iPad portrait + landscape
   Above 1024px: current desktop layout untouched.
*/

/* Touch-target sizing — every interactive surface ≥ 44×44 on small screens */
@media (max-width: 1024px) {
  button, .ch-btn, .ch-cmdk-row, .ch-iris-btn, .proof-tile, .hpb-tile,
  [role="button"], a.ch-nav-cta, .ch-prov-tile, .pulse-tile {
    min-height: 44px;
  }
  .ch-iris-chip { min-height: 44px; padding: 11px 18px 11px 14px; }
}

/* Iris pill — phone widths: corner moves up to leave room for browser bottom bar
   and softphone widget. Becomes a square tap target. */
@media (max-width: 600px) {
  .ch-iris-chip { bottom: 132px; right: 16px; padding: 10px 14px 10px 12px; }
  .ch-iris-panel {
    right: 16px; left: 16px; bottom: 188px;
    width: auto; max-width: none; max-height: 70vh;
  }
}

/* Provenance drawer — slides UP from bottom on phones rather than from right */
@media (max-width: 600px) {
  .ch-prov-drawer {
    top: auto !important; bottom: 0 !important; right: 0 !important; left: 0 !important;
    width: 100vw !important; height: 88vh !important; max-height: 88vh;
    transform: translateY(100%);
    border-radius: 16px 16px 0 0;
  }
  .ch-prov-drawer.open { transform: translateY(0); }
  .ch-prov-section { padding: 14px 18px; }
  .ch-prov-hd { padding: 14px 18px 12px; }
}

/* Cmd-K modal — full-width on phones, anchored top */
@media (max-width: 600px) {
  .ch-cmdk-modal { top: 6vh; left: 12px; right: 12px; width: auto; transform: none; }
  .ch-cmdk-input { font-size: 16px; }  /* prevent iOS zoom on input focus */
  .ch-cmdk-foot { font-size: 9px; gap: 8px; }
}

/* Tile grids — collapse to single column on phones, 2 cols on tablets */
@media (max-width: 600px) {
  .proof-tiles, .hpb-tiles, .ch-grid, .grid-tiles, .tiles {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .proof-tile, .hpb-tile { padding: 16px 16px 14px; }
  .proof-tile-num, .hpb-num { font-size: 28px; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .proof-tiles, .hpb-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Navbar / topbar — wrap on phones */
@media (max-width: 700px) {
  .ch-nav, .ch-nav-inner, .top-nav {
    flex-wrap: wrap; padding: 10px 14px; gap: 8px;
  }
  .ch-nav-links { gap: 2px; flex-wrap: wrap; }
  .ch-nav-links a { padding: 6px 10px; font-size: 13px; }
  .ch-nav-cta, .ch-nav-cta--ghost { padding: 10px 14px; font-size: 13px; }
}

/* Hero headlines — scale down on phones */
@media (max-width: 700px) {
  .ch-h1 { font-size: 44px !important; line-height: 1.05; }
  .ch-h1--md { font-size: 36px !important; }
  .ch-lede { font-size: 17px; }
}

/* Comms strip + softphone — phones: stack and shrink */
@media (max-width: 600px) {
  .ch-comms-strip { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
  .ch-comms-strip a, .ch-comms-strip button { padding: 8px 10px; font-size: 12px; }
  .softphone-widget {
    bottom: 16px !important; right: 16px !important;
    width: calc(100% - 32px) !important; max-width: 360px;
  }
}

/* Tables — make horizontally scrollable rather than overflow */
@media (max-width: 900px) {
  .ch-table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
}

/* Sparkline — hide inline ones on the smallest phones to avoid crowding */
@media (max-width: 480px) {
  .ch-sparkline { display: none; }
  .ch-sparkline-block { display: block; }
}

/* Hover effects → tap effects on touch devices */
@media (hover: none) {
  .proof-tile:hover, .ch-pulse-tile:hover, [data-provenance]:hover {
    transform: none;  /* no hover-lift on touch — feels janky */
  }
  .proof-tile:active, .ch-pulse-tile:active, [data-provenance]:active {
    transform: scale(0.98);
    transition: transform 80ms ease;
  }
}

/* Drawer backdrop — full opacity on phones, not blurry */
@media (max-width: 600px) {
  .ch-prov-backdrop { backdrop-filter: none; background: rgba(20,16,8,0.65); }
}

/* Inputs — prevent iOS automatic zoom */
@media (max-width: 600px) {
  input[type="text"], input[type="email"], input[type="search"],
  input[type="password"], input[type="tel"], textarea, select {
    font-size: 16px !important;
  }
}

/* Pulse-LIVE indicator — wraps with the number on phones */
@media (max-width: 600px) {
  .ch-live-pill { font-size: 10px; padding: 2px 6px; }
}

/* Safe-area insets (iOS notch) */
@supports (padding: env(safe-area-inset-bottom)) {
  .ch-iris-chip { bottom: calc(132px + env(safe-area-inset-bottom)); }
  .ch-iris-panel { bottom: calc(188px + env(safe-area-inset-bottom)); }
  .softphone-widget { bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
}