/* stocks.fish - moments: live big-trade caption, "Biggest catches" board, share menu, regular toast.
   All classes mo-* (see js/moments.js). Dark only: these float over the reef in every sky mode. */

:root {
  --mo-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --mo-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --mo-ink: #eef2ea;
  --mo-ink-2: #a8bbb9;
  --mo-ink-3: #71898d;
  --mo-brass: #dcb872;
  --mo-brass-dim: rgba(220, 184, 114, .5);
  --mo-glass: #8fe6d1;
  --mo-hair: rgba(190, 222, 226, .15);
  --mo-hair-2: rgba(190, 222, 226, .28);
  --mo-buy: 94, 234, 164;
  --mo-sell: 255, 110, 120;
  --mo-whale: 120, 220, 255;
  --mo-pan-a: rgba(14, 40, 52, .80);
  --mo-pan-b: rgba(4, 18, 27, .76);
  --mo-solid: #0a2330;
  --mo-shadow: 0 18px 40px -16px rgba(0, 0, 0, .75), 0 2px 8px -2px rgba(0, 0, 0, .45);
  --mo-blur: blur(16px) saturate(1.35);
  --mo-gap: clamp(8px, 1.1vw, 16px);
  --mo-sb: env(safe-area-inset-bottom, 0px);
  --mo-sl: env(safe-area-inset-left, 0px);
  --mo-sr: env(safe-area-inset-right, 0px);
}

/* ---------- shared surface ---------- */
.mo-cap, .mo-board, .mo-reg, .mo-menu, .mo-pill {
  position: absolute; color: var(--mo-ink); color-scheme: dark;
  background: linear-gradient(170deg, var(--mo-pan-a), var(--mo-pan-b));
  -webkit-backdrop-filter: var(--mo-blur); backdrop-filter: var(--mo-blur);
  border: 1px solid var(--mo-hair); box-shadow: var(--mo-shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
  font: 400 13px/1.4 var(--mo-serif); font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
.mo-cap[hidden], .mo-board[hidden], .mo-reg[hidden], .mo-menu[hidden] { display: none !important; }
.mo-cap button, .mo-board button, .mo-reg button, .mo-menu button, .mo-pill { font: inherit; color: inherit; cursor: pointer; }
.mo-cap button:focus-visible, .mo-board button:focus-visible, .mo-reg button:focus-visible, .mo-menu button:focus-visible, .mo-pill:focus-visible {
  outline: 1.5px solid var(--mo-brass); outline-offset: 2px;
}
.mo-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mo-ico .f { fill: currentColor; stroke: none; }
.mo-eng { margin: 0; font: 500 9.5px/1.2 var(--mo-mono); letter-spacing: .17em; text-transform: uppercase; color: var(--mo-brass); }
.mo-x {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  background: none; border: 1px solid transparent; color: var(--mo-ink-2); transition: color .2s, border-color .2s;
}
.mo-x:hover { color: var(--mo-ink); border-color: var(--mo-hair-2); }
.mo-ib {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  background: none; border: 1px solid var(--mo-hair); color: var(--mo-ink-2); transition: color .2s, background .2s, border-color .2s;
}
.mo-ib:hover { color: var(--mo-ink); background: var(--mo-hair); border-color: var(--mo-hair-2); }
.mo-ib .mo-ico { width: 15px; height: 15px; }
.mo-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 15px; white-space: nowrap;
  background: rgba(220, 184, 114, .1); border: 1px solid var(--mo-brass-dim); color: var(--mo-brass);
  font: italic 500 13px var(--mo-serif) !important; transition: background .2s;
}
.mo-chip:hover { background: rgba(220, 184, 114, .2); }
.mo-chip .mo-ico { width: 15px; height: 15px; }
.mo-chip.is-done, .mo-menu button.is-done { color: var(--mo-glass); border-color: rgba(143, 230, 209, .5); }

/* ---------- screen-edge pulse when a moment lands ---------- */
.mo-vig {
  position: absolute; inset: 0; z-index: 2; pointer-events: none !important; opacity: 0;
  --t: var(--mo-whale);
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(var(--t), .10) 82%, rgba(2, 8, 14, .55) 100%);
  box-shadow: inset 0 0 14vmin 2vmin rgba(var(--t), .22);
}
.mo-vig[data-tone="buy"] { --t: var(--mo-buy); }
.mo-vig[data-tone="sell"] { --t: var(--mo-sell); }
.mo-vig.is-on { animation: mo-vig 2.8s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes mo-vig { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- the lower-third caption ---------- */
.mo-cap {
  z-index: 3; left: 50%; bottom: calc(clamp(74px, 5.5vw, 96px) + var(--mo-sb));
  width: min(clamp(420px, 44vw, 860px), calc(100vw - 560px));
  transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: start;
  padding: clamp(12px, 1vw, 18px) clamp(14px, 1.2vw, 22px) clamp(12px, 1vw, 16px) clamp(18px, 1.5vw, 26px);
  border-radius: 16px; overflow: hidden;
  --tone: var(--mo-whale);
}
.mo-cap[data-tone="buy"] { --tone: var(--mo-buy); }
.mo-cap[data-tone="sell"] { --tone: var(--mo-sell); }
/* the accent keel on the left edge */
.mo-cap::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--mo-brass), rgb(var(--tone)));
  box-shadow: 0 0 14px rgba(var(--tone), .6);
}
.mo-cap[data-kind="whale"] { border-color: rgba(var(--mo-whale), .35); }
.mo-cap-txt { min-width: 0; grid-column: 1; }
.mo-big {
  margin: 0; font: 500 clamp(19px, 1.25vw + 8px, 38px)/1.12 var(--mo-serif); letter-spacing: -.01em;
  font-variation-settings: 'opsz' 96; text-wrap: balance;
}
.mo-big b { font-style: italic; font-weight: 650; margin-right: .1em; }
.mo-big .mo-emo { font-style: normal; margin-right: .08em; }
.mo-big .mo-dot { color: var(--mo-ink-3); }
.mo-side { font-style: italic; }
.mo-side[data-tone="buy"] { color: rgb(var(--mo-buy)); }
.mo-side[data-tone="sell"] { color: rgb(var(--mo-sell)); }
.mo-small {
  margin: 5px 0 0; font: 400 clamp(10.5px, .35vw + 8px, 13px)/1.4 var(--mo-mono); letter-spacing: .04em; color: var(--mo-ink-2);
}
.mo-small time { color: var(--mo-ink); }
.mo-cap-x { grid-column: 2; grid-row: 1; margin: -4px -6px 0 0; }
.mo-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.mo-btn {
  display: inline-flex; align-items: center; gap: 7px; height: clamp(32px, .6vw + 26px, 40px); padding: 0 14px 0 11px;
  border-radius: 999px; border: 1px solid var(--mo-hair-2); background: rgba(255, 255, 255, .03);
  font: italic 500 clamp(13px, .2vw + 11px, 15px)/1 var(--mo-serif) !important; color: var(--mo-ink); white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.mo-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(190, 222, 226, .45); }
.mo-btn small { font: 400 10px var(--mo-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mo-ink-3); }
.mo-btn:disabled { opacity: .55; cursor: default; }
.mo-btn.is-rec { opacity: 1; border-color: rgba(var(--mo-sell), .55); background: rgba(var(--mo-sell), .12); }
.mo-btn.is-rec .mo-ico { color: rgb(var(--mo-sell)); animation: mo-blink 1s steps(2) infinite; }
.mo-btn[hidden] { display: none; }
.mo-btn-main { background: var(--mo-brass); border-color: var(--mo-brass); color: #1a1408; box-shadow: 0 6px 18px -8px var(--mo-brass); }
.mo-btn-main:hover { background: #e8c887; border-color: #e8c887; }
.mo-timer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left center;
  background: linear-gradient(90deg, rgba(var(--tone), .2), rgba(var(--tone), .8));
  animation: mo-timer var(--mo-left, 9s) linear forwards;
}
.mo-cap.is-held .mo-timer { animation-play-state: paused; }
@keyframes mo-timer { from { transform: scaleX(var(--mo-frac, 1)); } to { transform: scaleX(0); } }
@keyframes mo-blink { 50% { opacity: .25; } }
.mo-cap.is-in { animation: mo-cap-in .7s cubic-bezier(.16, .84, .3, 1) both; }
.mo-cap.is-in .mo-big { animation: mo-rise .7s .08s cubic-bezier(.16, .84, .3, 1) both; }
.mo-cap.is-in .mo-small, .mo-cap.is-in .mo-acts { animation: mo-rise .6s .2s cubic-bezier(.16, .84, .3, 1) both; }
.mo-cap.is-out { animation: mo-cap-out .3s ease-in both; }
@keyframes mo-cap-in {
  from { opacity: 0; transform: translate(-50%, 18px) scale(.98); clip-path: inset(0 50% 0 50% round 16px); }
  to { opacity: 1; transform: translate(-50%, 0); clip-path: inset(0 0 0 0 round 16px); }
}
@keyframes mo-cap-out { to { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- pill + board ---------- */
.mo-pill {
  z-index: 2; top: calc(var(--top, 92px) - 4px); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px 0 11px; margin: 0;
  border-radius: 15px; font: italic 500 13px/1 var(--mo-serif); color: var(--mo-ink-2); white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.mo-pill:hover, .mo-pill.is-on { color: var(--mo-ink); border-color: var(--mo-brass-dim); }
.mo-pill.is-on { color: var(--mo-brass); }
.mo-pill-ic { font-style: normal; font-size: 14px; line-height: 1; }

.mo-board {
  z-index: 4; top: calc(var(--top, 92px) + 34px); left: 50%; transform: translateX(-50%);
  width: min(clamp(360px, 26vw, 480px), calc(100vw - 32px)); max-height: min(66vh, calc(100% - var(--top, 92px) - 250px)); min-height: 220px;
  display: flex; flex-direction: column; padding: 14px 8px 10px 10px; border-radius: 14px; overflow: hidden;
}
.mo-board.is-in { animation: mo-drop .3s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes mo-drop { from { opacity: 0; transform: translate(-50%, -8px); } }
.mo-board-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 6px 10px 8px; }
.mo-board-head h2 { margin: 3px 0 0; font: italic 400 clamp(22px, .6vw + 16px, 28px)/1.05 var(--mo-serif); font-variation-settings: 'opsz' 144; }
.mo-tally { margin: 0 8px; padding: 9px 0 8px; border-top: 1px solid var(--mo-hair); font: 400 12px/1.5 var(--mo-mono); color: var(--mo-ink); }
.mo-tally .mo-eng { margin-right: 6px; }
.mo-tally i { font-style: normal; color: var(--mo-ink-3); }
.mo-tally span:not(.mo-eng) { white-space: nowrap; }
.mo-sum { display: flex; align-items: center; gap: 8px; margin: 0 8px 6px; padding: 7px 0 9px; border-bottom: 1px solid var(--mo-hair); }
.mo-sum-line { flex: 1; min-width: 0; font: 400 12px/1.4 var(--mo-mono); color: var(--mo-ink-2); overflow-wrap: anywhere; }
.mo-rows { list-style: none; margin: 0; padding: 2px 2px 4px 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.mo-row {
  display: grid; grid-template-columns: 18px 26px 1fr auto auto; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 10px; transition: background .2s;
}
.mo-row:hover { background: rgba(255, 255, 255, .04); }
.mo-row + .mo-row { border-top: 1px dashed var(--mo-hair); }
.mo-row:hover + .mo-row, .mo-row:hover { border-top-color: transparent; }
.mo-rank { font: 400 11px var(--mo-mono); color: var(--mo-ink-3); text-align: right; }
.mo-row:nth-child(1) .mo-rank { color: var(--mo-brass); }
.mo-row-emo { font-size: 20px; line-height: 1; text-align: center; }
.mo-row-id { display: flex; flex-direction: column; min-width: 0; }
.mo-row-id b { font: 500 13px/1.2 var(--mo-mono); letter-spacing: .04em; }
.mo-row-id small { display: flex; align-items: center; gap: 5px; font: italic 400 12px/1.3 var(--mo-serif); color: var(--mo-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-dot-s { width: 6px; height: 6px; border-radius: 50%; flex: none; background: rgb(var(--mo-buy)); box-shadow: 0 0 6px rgba(var(--mo-buy), .6); }
.mo-row[data-tone="sell"] .mo-dot-s { background: rgb(var(--mo-sell)); box-shadow: 0 0 6px rgba(var(--mo-sell), .6); }
.mo-row-usd { font: italic 600 clamp(15px, .3vw + 12px, 18px)/1 var(--mo-serif); text-align: right; font-variant-numeric: tabular-nums; }
.mo-row-acts { display: flex; gap: 4px; }
.mo-empty { padding: 18px 10px 20px; font: italic 300 13px/1.45 var(--mo-serif); color: var(--mo-ink-2); text-align: center; }
.mo-foot { margin: 6px 8px 0; padding-top: 8px; border-top: 1px solid var(--mo-hair); font: italic 300 11.5px/1.4 var(--mo-serif); color: var(--mo-ink-3); }

/* ---------- regular toast ---------- */
.mo-reg {
  z-index: 3; top: calc(var(--top, 92px) + 36px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: min(620px, calc(100vw - 32px));
  padding: 8px 8px 8px 12px; border-radius: 14px;
}
.mo-reg.is-in { animation: mo-drop .35s cubic-bezier(.2, .8, .3, 1) both; }
.mo-reg-emo { font-size: 24px; line-height: 1; }
.mo-reg p { margin: 0; min-width: 0; font: italic 400 13.5px/1.35 var(--mo-serif); color: var(--mo-ink-2); }
.mo-reg p .mo-eng { display: block; margin-bottom: 2px; }
.mo-reg p b { color: var(--mo-ink); font-weight: 600; }

/* ---------- share menu ---------- */
.mo-menu { z-index: 9; width: min(272px, calc(100vw - 16px)); padding: 6px; border-radius: 12px; background: var(--mo-solid); }
.mo-menu-txt {
  margin: 2px 4px 6px; padding: 6px 8px 8px; border-bottom: 1px solid var(--mo-hair);
  font: 400 11px/1.45 var(--mo-mono); color: var(--mo-ink-2); overflow-wrap: anywhere;
}
.mo-menu button {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 0 10px; margin: 0;
  border: 0; border-radius: 8px; background: none; text-align: left; color: var(--mo-ink-2);
  font: italic 400 14px var(--mo-serif) !important;
}
.mo-menu button:hover, .mo-menu button:focus-visible { background: var(--mo-hair); color: var(--mo-ink); }
.mo-menu button .mo-ico { color: var(--mo-brass); }

/* ---------- tablets: the gauge takes the left 270px, so the caption sits right of it ---------- */
@media (max-width: 1000px) and (min-width: 601px) {
  .mo-cap { left: calc(270px + var(--mo-sl)); right: calc(16px + var(--mo-sr)); width: auto; transform: none; }
  @keyframes mo-cap-in {
    from { opacity: 0; transform: translateY(18px); clip-path: inset(0 50% 0 50% round 16px); }
    to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 16px); }
  }
  @keyframes mo-cap-out { to { opacity: 0; transform: translateY(10px); } }
}

/* ---------- phones (portrait, and landscape phones <= 500px tall) ---------- */
@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  .mo-cap {
    left: calc(8px + var(--mo-sl)); right: calc(8px + var(--mo-sr)); width: auto; transform: none;
    bottom: calc(118px + var(--mo-sb)); padding: 11px 10px 11px 16px; gap: 8px; border-radius: 14px;
  }
  .mo-big { font-size: clamp(17px, 4.6vw, 22px); }
  .mo-acts { gap: 6px; flex-wrap: nowrap; }
  .mo-btn { height: 34px; padding: 0 10px 0 9px; gap: 5px; font-size: 13px !important; flex: 1 1 auto; justify-content: center; }
  .mo-btn[data-mo^="clip"] > span { display: none; }
  .mo-btn[data-mo^="clip"] small { font-size: 9px; }
  @keyframes mo-cap-in {
    from { opacity: 0; transform: translateY(18px); clip-path: inset(0 50% 0 50% round 14px); }
    to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); }
  }
  @keyframes mo-cap-out { to { opacity: 0; transform: translateY(10px); } }
  /* drawers and sheets from the main UI win the bottom of the screen */
  .tb-gauge.is-open ~ .mo-cap, .tb-card:not([hidden]) ~ .mo-cap { visibility: hidden; }

  .mo-pill {
    top: calc(var(--top, 84px) + 40px); left: auto; right: calc(var(--gap, 8px) + var(--mo-sr)); transform: none;
    width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%;
  }
  .mo-pill-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mo-pill-ic { font-size: 15px; }
  .tb-roster.is-open ~ .mo-pill { visibility: hidden; }

  .mo-board {
    z-index: 6; top: auto; left: 0; right: 0; bottom: 0; transform: none; width: auto; max-height: 80vh;
    border-radius: 18px 18px 0 0; border-bottom: 0; padding: 16px 6px calc(12px + var(--mo-sb)) 8px;
  }
  .mo-board::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--mo-hair-2); }
  .mo-board.is-in { animation: mo-sheet .38s cubic-bezier(.2, .8, .3, 1) both; }
  .mo-row { grid-template-columns: 16px 24px 1fr auto auto; gap: 8px; padding: 7px 6px; }
  .mo-sum { flex-wrap: wrap; }
  .mo-tally .mo-eng { display: block; margin-bottom: 3px; }
  .mo-ib { width: 36px; height: 36px; }

  .mo-reg { top: calc(var(--top, 84px) + 84px); left: calc(8px + var(--mo-sl)); right: calc(8px + var(--mo-sr)); transform: none; max-width: none; }
  .mo-reg.is-in { animation: mo-rise .35s cubic-bezier(.2, .8, .3, 1) both; }
  .mo-reg .mo-chip span { display: none; }
  .mo-reg .mo-chip { padding: 0 8px; }
  /* 40px touch targets; sheets respect the notch and scroll inside */
  .mo-pill { top: calc(var(--top, 84px) + 48px); width: 40px; height: 40px; }
  .mo-ib, .mo-x { width: 40px; height: 40px; }
  .mo-btn { height: 40px; }
  .mo-board { left: var(--mo-sl); right: var(--mo-sr); max-height: min(80%, calc(100% - env(safe-area-inset-top, 0px) - 24px)); overscroll-behavior: contain; }
  .mo-menu button { min-height: 44px; }
  .mo-chip { min-height: 40px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .mo-board { left: 0; right: 0; margin: 0 auto; width: min(600px, 100%); }
}
@keyframes mo-sheet { from { transform: translateY(100%); } }

@media (min-width: 1800px) {
  .mo-pill { height: 34px; font-size: 14.5px; padding: 0 16px 0 13px; border-radius: 17px; }
  .mo-row-id b { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-vig { display: none; }
  .mo-cap.is-in, .mo-cap.is-in .mo-big, .mo-cap.is-in .mo-small, .mo-cap.is-in .mo-acts, .mo-cap.is-out,
  .mo-board.is-in, .mo-reg.is-in, .mo-btn.is-rec .mo-ico { animation: none !important; }
  .mo-timer { display: none; }
}