/* ==========================================================================
   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));
  }
}

/* ---------- 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-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; }
}