/* ==========================================================================
   Oceanus motion + responsive primitives (ARQ patterns, vanilla CSS).
   Loaded after tokens.css. Breakpoint for sheets/tables is 820px to match
   the chat handover. Do not pad body with safe-area — chrome does that.
   ========================================================================== */

.scroll-touch {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.oc-tap {
  min-height: var(--tap-min, 44px);
  min-width: var(--tap-min, 44px);
}
@media (hover: none) and (pointer: coarse) {
  .oc-tap:active { transform: scale(0.98); }
}

.oc-press {
  transition:
    transform var(--dur-press, 120ms) var(--ease-out, ease),
    background var(--dur-ui, 200ms) var(--ease-out, ease),
    border-color var(--dur-ui, 200ms) var(--ease-out, ease),
    color var(--dur-ui, 200ms) var(--ease-out, ease);
}
.oc-press:active { transform: scale(0.98); }

.nav-item,
.act-tab,
.user-menu-item,
.lang-pop-item,
.lang-pop-btn,
.oc-cmdp__item,
.oc-cmdp-trigger,
.oc-ss-opt,
.chat-pop li,
.chat-model-pop li.mdl,
.chat-tier-pop li.mdl,
.pf-btn,
.dd-btn,
.th-d-mini,
.im-mention-item {
  transition:
    transform var(--dur-press, 120ms) var(--ease-out, ease),
    background var(--dur-ui, 200ms) var(--ease-out, ease),
    border-color var(--dur-ui, 200ms) var(--ease-out, ease),
    color var(--dur-ui, 200ms) var(--ease-out, ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover,
  .act-tab:hover,
  .user-menu-item:hover,
  .lang-pop-item:hover,
  .oc-cmdp__item:hover,
  .oc-ss-opt:hover,
  .chat-pop li:hover,
  .chat-model-pop li.mdl:hover {
    transform: none;
  }
}
.nav-item:active,
.act-tab:active,
.user-menu-item:active,
.lang-pop-item:active,
.oc-cmdp__item:active,
.oc-ss-opt:active,
.chat-pop li:active,
.chat-model-pop li.mdl:active,
.pf-btn:active,
.dd-btn:active,
.th-d-mini:active {
  transform: scale(0.98);
}
@media (hover: none), (pointer: coarse) {
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-ghost:hover,
  .btn-danger:hover {
    transform: none;
  }
}

/* Anchored popovers — opacity/transform, never display-toggle mid-frame */
.oc-pop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transform-origin: var(--oc-pop-origin, top right);
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out),
    visibility 0s linear var(--dur-ui);
}
.oc-pop.is-open,
.oc-pop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out),
    visibility 0s linear 0s;
}
@keyframes oc-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes oc-pop-in-center {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 820px) {
  .wl-row-btn,
  .th-d-mini,
  .dd-btn,
  .dd-cockpit-memo,
  .dd-cockpit-tab,
  .pf-btn,
  .cal-btn,
  .cal-cell {
    min-height: var(--tap-min, 44px);
  }
  .wl-row-btn,
  .cal-btn {
    min-width: var(--tap-min, 44px);
  }
}

body.oc-scroll-lock,
body.oc-chat-lock {
  overflow: hidden;
}

/* ---------- Sheet: phone bottom / wide right drawer ---------- */

.oc-sheet {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  pointer-events: none;
}
.oc-sheet.is-open,
.oc-sheet:not([hidden]) {
  display: block;
  pointer-events: auto;
}
.oc-sheet[hidden] { display: none !important; }

.oc-sheet__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay, rgba(12, 14, 18, 0.55));
  cursor: pointer;
  animation: oc-fade-in var(--dur-ui, 200ms) var(--ease-out, ease);
}

.oc-sheet__panel {
  position: absolute;
  background: var(--bg-elevated, #161b22);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.oc-sheet__handle {
  display: none;
  width: 40px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 70%, var(--text-muted));
  flex-shrink: 0;
}

.oc-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}
.oc-sheet__title {
  margin: 0;
  font-size: var(--fs-md, 14px);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: -0.01em;
}
.oc-sheet__close {
  appearance: none;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--r-md, 6px);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oc-sheet__close:hover { background: var(--bg-elevated-2); color: var(--text-primary); }

.oc-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px;
}

@media (max-width: 820px) {
  .oc-sheet__handle { display: block; }
  .oc-sheet__panel {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 88dvh;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border-default);
    border-bottom: none;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    animation: oc-sheet-up var(--dur-sheet, 320ms) var(--ease-out, ease);
  }
  .oc-sheet__body {
    max-height: calc(88dvh - 4rem);
    padding-bottom: 8px;
  }
}

@media (min-width: 821px) {
  .oc-sheet__panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(520px, 100%);
    height: 100%;
    max-height: none;
    border-radius: 0;
    border-left: 1px solid var(--border-default);
    animation: oc-sheet-in var(--dur-sheet, 320ms) var(--ease-out, ease);
    padding-top: var(--sat-fix, env(safe-area-inset-top, 0px));
    padding-bottom: var(--sab-fix, env(safe-area-inset-bottom, 0px));
  }
}

@keyframes oc-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes oc-sheet-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes oc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* More-tray sheet sits above the command tray. */
.act-more-sheet.oc-sheet { z-index: 29000; }
.act-more-sheet .act-more-sheet__nav,
.act-more-sheet .oc-sheet__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding-top: 8px;
}
.act-more-sheet .oc-sheet__body a,
.act-more-sheet .act-more-sheet__nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.act-more-sheet .oc-sheet__body a:hover,
.act-more-sheet .oc-sheet__body a:active,
.act-more-sheet .act-more-sheet__nav a:hover,
.act-more-sheet .act-more-sheet__nav a:active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  text-decoration: none;
}

/* Calendar / portfolio / chat overlays reuse sheet geometry on phone. */
@media (max-width: 820px) {
  .cal-drawer:not([hidden]) { z-index: 29000; }
  .cal-drawer-backdrop {
    background: var(--overlay, rgba(12, 14, 18, 0.55));
    animation: oc-fade-in var(--dur-ui, 200ms) var(--ease-out, ease);
  }
  .cal-drawer-panel {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: 88dvh;
    border-left: none;
    border-top: 1px solid var(--border-default);
    border-radius: 16px 16px 0 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    animation: oc-sheet-up var(--dur-sheet, 320ms) var(--ease-out, ease);
  }
  .cal-drawer-head { padding: 12px 16px; }
  .cal-drawer-head h3 { font-size: var(--fs-md, 14px); }
  .cal-drawer-head .cal-btn { min-height: var(--tap-min, 44px); min-width: var(--tap-min, 44px); }

  .cal-modal:not([hidden]) .cal-modal-backdrop {
    background: var(--overlay, rgba(12, 14, 18, 0.55));
    animation: oc-fade-in var(--dur-ui, 200ms) var(--ease-out, ease);
  }
  .cal-modal:not([hidden]) .cal-modal-panel {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100%;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    animation: oc-sheet-up var(--dur-sheet, 320ms) var(--ease-out, ease);
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .pf-modal.active {
    display: block;
    align-items: stretch;
    padding: 0;
    z-index: 29000;
    background: var(--overlay, rgba(12, 14, 18, 0.55));
  }
  .pf-modal .box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    max-height: 88dvh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding: 18px 20px max(18px, env(safe-area-inset-bottom, 0px));
    animation: oc-sheet-up var(--dur-sheet, 320ms) var(--ease-out, ease);
  }
  .pf-modal .actions .pf-btn,
  .pf-modal .actions button {
    min-height: var(--tap-min, 44px);
  }

  .chat-modal {
    align-items: flex-end;
    padding: 0;
    background: var(--overlay, rgba(12, 14, 18, 0.55));
  }
  .chat-modal-box,
  .mem-modal .mem-box {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    margin: 0;
    animation: oc-sheet-up var(--dur-sheet, 320ms) var(--ease-out, ease);
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Card-stack tables (research / ICOS; not quote matrices) ---------- */

@media (max-width: 820px) {
  table.oc-table thead { display: none; }
  table.oc-table,
  table.oc-table tbody { display: block; width: 100%; }
  table.oc-table tbody tr {
    display: block;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-xl, 10px);
    background: var(--bg-elevated, #161b22);
  }
  table.oc-table tbody tr[hidden] { display: none !important; }
  table.oc-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--border-muted, var(--border-default));
    padding: 6px 0;
    text-align: right;
    min-width: 0;
  }
  table.oc-table tbody td:last-child { border-bottom: 0; }
  table.oc-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 42%;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  table.oc-table tbody td:not([data-label])::before,
  table.oc-table tbody td[data-label=""]::before { content: none; }
  table.oc-table tbody td[colspan] {
    display: block;
    text-align: center;
  }
  table.oc-table tbody td[colspan]::before { content: none; }
}

/* ---------- Metric strip 4 → 2 ---------- */

.oc-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 821px) {
  .oc-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.oc-metrics.oc-metrics--5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 821px) {
  .oc-metrics.oc-metrics--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.oc-metrics.oc-metrics--6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 821px) {
  .oc-metrics.oc-metrics--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

#th-exec-strip.oc-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 821px) {
  #th-exec-strip.oc-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- Phase 6.4: the column decides, not the window ----------
   The viewport rules above stay, because they are right for a metric strip
   that is not inside a query container. Where one is — the research page
   column declares `container-name: th` — its own width wins, and these rules
   come later so they override the viewport answer in both directions.

   This is the difference between "the window is 1600px" and "the column you
   are reading is 780px because the chat drawer is open", which is the state
   this app spends most of its time in. */
@container th (max-width: 820px) {
  .oc-metrics,
  .oc-metrics.oc-metrics--5,
  .oc-metrics.oc-metrics--6,
  #th-exec-strip.oc-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container th (min-width: 821px) {
  .oc-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .oc-metrics.oc-metrics--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .oc-metrics.oc-metrics--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #th-exec-strip.oc-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Shared toast (above command tray + home indicator) ---------- */

.oc-toast-host {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--command-tray-pad, 0px) + 12px);
  z-index: 30050;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  align-items: stretch;
}
@media (min-width: 821px) {
  .oc-toast-host {
    left: auto;
    right: 16px;
    width: min(420px, 92vw);
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }
}
.oc-toast {
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  font-size: var(--fs-sm, 13px);
  animation: oc-toast-in var(--dur-ui, 200ms) var(--ease-out, ease);
}
.oc-toast.is-ok {
  border-color: color-mix(in srgb, var(--success) 55%, var(--border-default));
  background: var(--success-bg);
  color: var(--success);
}
.oc-toast.is-info {
  border-color: color-mix(in srgb, var(--info) 55%, var(--border-default));
  background: var(--info-bg);
  color: var(--info);
}
.oc-toast.is-warn {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border-default));
  background: var(--warning-bg);
  color: var(--warning);
}
.oc-toast.is-bad {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}
@keyframes oc-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Chat sheet easing (keep 65dvh / 820 handover) ---------- */

#chat-drawer.chat-no-motion,
.content-right.chat-no-motion {
  transition: none !important;
}

@media (min-width: 821px) {
  .content-right.mode-dock,
  .content-right {
    transition: none;
  }
  .content-wrapper.chat-sliding {
    overflow: visible !important;
  }
  .content-wrapper.chat-sliding .content-right.mode-dock {
    z-index: 30;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.28);
  }
}

@media (max-width: 820px) {
  .content-right.mode-dock,
  .content-right {
    transition: transform var(--dur-sheet, 400ms) var(--ease-sheet, cubic-bezier(0.32, 0.72, 0, 1)) !important;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0.01ms;
    --dur-ui: 0.01ms;
    --dur-pop: 0.01ms;
    --dur-sheet: 0.01ms;
    --tr-fast: 0.01ms linear;
    --tr-base: 0.01ms linear;
    --tr-slow: 0.01ms linear;
  }
  html *,
  html *::before,
  html *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .oc-tap:active { transform: none; }
}


/* ==========================================================================
   Cross-document navigation (Phase 3)
   @view-transition { navigation: auto } lives in responsive.css and gives the
   root a cross-fade. This names the one element that should persist across
   documents: the ticker you clicked becomes the ticker in the header you land
   on. nav-vt.js puts the name on the clicked anchor; the destination wears it
   permanently, because only one element there can.
   ========================================================================== */
/* Quote tick — one-line viewport; two stacked values, track slides. */
.oc-tick {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
  vertical-align: bottom;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
div.oc-tick { display: block; }
.oc-tick__track {
  display: block;
}
.oc-tick__val {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .oc-tick__track {
    transition: none !important;
    transform: none !important;
  }
}

#th-mh-ticker {
  view-transition-name: oc-vt-symbol;
}
::view-transition-group(oc-vt-symbol) {
  animation-duration: var(--dur-sheet, 360ms);
  animation-timing-function: var(--ease-sheet, cubic-bezier(0.32, 0.72, 0, 1));
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}