/* v11.9.1 polish layer — loaded after the base styles AND after the chosen design (themes/*.css),
   so it applies to every design. Presentation only: no layout of data, no logic.
   Sources: Apple "Designing Fluid Interfaces", Emil Kowalski's design-engineering rules,
   and the mobile-native checklist (tap highlight, 16px inputs, hover gating, touch-action). */

:root {
  --k-ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out: instant response, soft landing */
  --k-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --k-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS-like sheet curve */
}

/* ---- Native feel on touch devices ---- */
html {
  -webkit-tap-highlight-color: transparent;  /* no grey flash on every tap */
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;               /* the whole app no longer rubber-bands like a web page */
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Controls: no 300ms tap delay, no text selection or callout on long-press. Content stays selectable. */
button, .tool-btn, .dir-btn, .outcome-btn, .cal-nav-btn, .entry-shot-btn, .theme-toggle-btn,
.trade-account-btn, .btn-sync, .btn-reset, .btn-icon-slim, .btn-save-exec, .export-modal-btn,
.motiv-close, .shot-lightbox-close, [role="button"] {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Press feedback on touch-down, every button, every design. Uses the individual `scale`
   property so it composes with whatever `transform` a design already sets. */
button:not(:disabled):active, .tool-btn:active, .dir-btn:active, .outcome-btn:active,
.cal-nav-btn:active, .entry-shot-btn:active, .theme-toggle-btn:active, .trade-account-btn:active,
.export-modal-btn:active, [role="button"]:active {
  scale: 0.97;
}
.btn-save-exec:not(:disabled):active { scale: 0.98; }
.score-chk:active { scale: 0.9; }

/* iOS zooms the page into any field under 16px and never zooms back. Phones only;
   desktop / the Chrome side panel keep the compact sizes. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
  select, textarea {
    font-size: 16px !important;
  }
}

/* Numbers that change should not jitter sideways. */
.score-value, .calc-results, .highlight-pips, .cal-grid, .equity-stats-row,
input[type="number"], #val-pips, #val-rr, #calc-lots {
  font-variant-numeric: tabular-nums;
}

/* Keyboard users (Chrome extension on desktop) get a clear focus ring; mouse/touch users don't. */
:focus-visible { outline: 2px solid var(--accent-blue, #2962ff); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---- Motion: things arrive, they don't pop ---- */
/* Modals (settings, export, accounts, first setup): fade the scrim, lift the card from 0.96. */
.export-modal-overlay, .shot-lightbox {
  transition: opacity 200ms var(--k-ease-out), display 200ms allow-discrete, overlay 200ms allow-discrete;
}
.export-modal, .trade-account-modal {
  transition: opacity 220ms var(--k-ease-out), scale 220ms var(--k-ease-out), translate 220ms var(--k-ease-out);
}
@starting-style {
  .export-modal-overlay, .shot-lightbox { opacity: 0; }
  .export-modal, .trade-account-modal { opacity: 0; scale: 0.96; }
}
/* On phones, dialogs rise slightly from below (sheet-like) instead of scaling from the centre. */
@media (pointer: coarse) {
  @starting-style {
    .export-modal, .trade-account-modal { scale: 1; translate: 0 18px; }
  }
}

/* Inline panels that the toolbar opens (Lot Size, Calendar, the day's trades) slide in softly. */
.calculator-card, .calendar-card, .trade-details-box, .equity-chart-wrap {
  transition: opacity 220ms var(--k-ease-out), translate 220ms var(--k-ease-out);
}
@starting-style {
  .calculator-card, .calendar-card, .trade-details-box, .equity-chart-wrap { opacity: 0; translate: 0 -6px; }
}

/* Market-session labels: a narrow segment shows "Sydney 6:0…" instead of being cut on both sides. */
.session-track { display: block; text-align: center; line-height: 18px; text-overflow: ellipsis; padding: 0 4px; box-sizing: border-box; }

/* Saved: a short, single confirmation pulse (paired with a haptic tick in polish.js). */
@keyframes kSavedPulse { 0% { scale: 1; } 40% { scale: 1.035; } 100% { scale: 1; } }
.btn-save-exec.k-saved { animation: kSavedPulse 420ms var(--k-ease-out); }

/* ---- Icons that replace emoji (see polish.js) ---- */
.k-ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; margin-inline-end: 0.3em; }
.k-ico svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.k-ico.only { margin-inline-end: 0; }
.k-ico.dot svg { stroke: none; }

/* ---- Designed dialogs (replace the browser's grey alert/confirm boxes) ---- */
.k-dlg-scrim { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 1; transition: opacity 180ms var(--k-ease-out); }
.k-dlg { width: min(340px, 100%); max-height: 80vh; overflow: auto; border-radius: 16px; padding: 20px 18px 14px; background: var(--card-bg, #1e222d); color: var(--text-main, #d1d4dc); border: 1px solid var(--border-color, #2a2e39); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); font-family: inherit; transition: opacity 220ms var(--k-ease-out), scale 220ms var(--k-ease-out), translate 220ms var(--k-ease-out); }
.k-dlg p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.k-dlg .k-row { display: flex; gap: 8px; justify-content: flex-end; }
.k-dlg button { min-width: 88px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border-color, #2a2e39); background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.k-dlg button.k-primary { background: var(--accent-blue, #2962ff); border-color: transparent; color: #fff; }
.k-dlg-scrim.k-out { opacity: 0; }
.k-dlg-scrim.k-out .k-dlg { opacity: 0; scale: 0.97; }
@starting-style {
  .k-dlg-scrim { opacity: 0; }
  .k-dlg { opacity: 0; scale: 0.96; }
}
@media (pointer: coarse) {
  .k-dlg button { min-height: 44px; flex: 1; }
  @starting-style { .k-dlg { scale: 1; translate: 0 18px; } }
}

/* ---- Accessibility: honour the user's system settings ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  :active { scale: 1 !important; }
}
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ---------- Floating dock (built by polish.js) — base look for every design ----------
   Zero specificity (:where) so each design stylesheet can restyle it (Bull vs Bear does). */
:where(html.bb-has-dock) body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
:where(.bb-dock) {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 18px max(8px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px));
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg-color) 85%, transparent) 60%);
  pointer-events: none;
}
:where(.bb-dock-in) {
  pointer-events: auto; max-width: 440px; margin: 0 auto;
  display: grid; grid-template-columns: 58px repeat(3, minmax(46px, 60px)) minmax(0, 1fr); gap: 5px; align-items: center;
  padding: 6px; border-radius: 22px;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--border-color), 0 14px 32px -12px rgba(0, 0, 0, 0.55);
}
:where(.bb-dock) button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; border: 0; cursor: pointer; font: inherit; }
:where(.bb-dock-btn) {
  height: 54px; min-width: 0; padding: 0 1px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; color: var(--text-muted); font-size: 9.5px; font-weight: 600; line-height: 1.05;
}
:where(.bb-dock-btn) span { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center; word-break: keep-all; }
:where(.bb-dock-btn) svg { width: 22px; height: 22px; color: var(--text-main); }
:where(.bb-dock-btn):active { background: color-mix(in srgb, var(--text-main) 8%, transparent); scale: 0.96; }
:where(.bb-dock-save) {
  height: 54px; min-width: 0; padding: 0 10px; border-radius: 16px;
  background: var(--accent-blue); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 20px -8px var(--accent-blue);
}
:where(html:not([data-theme="light"]) .bb-dock-save) { color: #0b0d10; }
:where(.bb-dock-save) span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.bb-dock-save):active { scale: 0.97; }
:where(.bb-dock-score) {
  position: relative; width: 58px; height: 58px; display: grid; place-items: center; align-content: center;
  background: transparent; color: var(--text-main); --tier: var(--accent-blue);
}
:where(.bb-dock[data-tier="aplus"] .bb-dock-score) { --tier: #f5c451; }
:where(.bb-dock[data-tier="a"] .bb-dock-score) { --tier: var(--accent-green); }
:where(.bb-dock[data-tier="b"] .bb-dock-score) { --tier: #8fd65a; }
:where(.bb-dock[data-tier="c"] .bb-dock-score) { --tier: var(--accent-orange); }
:where(.bb-dock[data-tier="d"] .bb-dock-score) { --tier: #f0803a; }
:where(.bb-dock[data-tier="f"] .bb-dock-score) { --tier: var(--accent-red); }
:where(.bb-dock-score) svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
:where(.bb-dock-trk) { fill: none; stroke: var(--border-color); stroke-width: 8; }
:where(.bb-dock-arc) {
  fill: none; stroke: var(--tier); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 276.5; stroke-dashoffset: 276.5;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.9, 0.2, 1), stroke 0.4s;
}
:where(.bb-dock-score) b { position: relative; font-weight: 800; font-size: 19px; line-height: 0.9; }
:where(.bb-dock-score) b small { font-size: 10px; color: var(--text-muted); }
:where(.bb-dock-grade) { position: relative; font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: 0.06em; line-height: 1.1; color: var(--tier); }
:where(.bb-dock-score.bb-pop) { animation: kDockPop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes kDockPop { 40% { transform: scale(1.15); } }
@media (max-width: 380px) {
  :where(.bb-dock-in) { grid-template-columns: 54px repeat(3, 53px) minmax(0, 1fr); gap: 2px; }
  :where(.bb-dock-score) { width: 54px; height: 54px; }
  :where(.bb-dock-btn) { font-size: 9px; letter-spacing: -0.01em; }
  :where(.bb-dock-save) { font-size: 13px; letter-spacing: 0.02em; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) { :where(.bb-dock-arc) { transition: none; } :where(.bb-dock-score.bb-pop) { animation: none; } }

/* ---------- Dock sheets: calculator / calendar / equity open as a floating window ---------- */
.k-sheet-scrim {
  position: fixed; inset: 0; z-index: 940;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.k-sheet-scrim.k-on { opacity: 1; pointer-events: auto; }
html.k-sheet-open .bb-dock { z-index: 960; }
html.k-sheet-open body { overflow: hidden; }
.k-sheet {
  position: fixed !important;
  z-index: 950 !important;
  left: max(8px, env(safe-area-inset-left, 0px)) !important;
  right: max(8px, env(safe-area-inset-right, 0px)) !important;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  width: auto !important;
  max-width: 440px;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  max-height: calc(100dvh - 110px - env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-top: 40px !important;
  border-radius: 22px !important;
  background-color: var(--card-bg) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 0 0 1px var(--border-color), 0 24px 60px -18px rgba(0, 0, 0, 0.7) !important;
  transition: translate 0.32s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.2s;
}
@starting-style { .k-sheet { translate: 0 24px; opacity: 0; } }
.k-sheet-close { display: none; }
.k-sheet.k-own-close { padding-top: revert-layer !important; }
.k-sheet > .k-sheet-close {
  display: grid; place-items: center;
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--text-main) 10%, transparent);
  color: var(--text-main); font-size: 14px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html[dir="rtl"] .k-sheet > .k-sheet-close { right: auto; left: 10px; }
@media (prefers-reduced-motion: reduce) { .k-sheet, .k-sheet-scrim { transition: none; } }