/* Dialogs, confirms and sheets, Arc-style (piece 12, 2026-10-29).
 *
 * Arc references: dialog, confirm-popover, hold-to-confirm, drawer,
 * bottom-sheet. Tokens: arc_tokens.css only. Behaviour: arc_dialog.js.
 *
 * 1. .oc-dialog — the surface OceanusSheet.confirmAt / confirm / ask /
 *    notify build: an anchored confirm-popover (12px, like the menus), a
 *    centred dialog (16px) or, on phones, a bottom sheet (16px top corners).
 *    The panel rises 8px from .96 on the smooth curve while the scrim
 *    fades; it leaves shorter, on the exit curve; a reopen mid-exit simply
 *    retargets the transition.
 * 2. .oc-dialog .oc-hold — hold-to-confirm: a fill runs across the button
 *    while it is held; let go early and it drains back.
 * 3. .oc-sheet — the portal's existing sheet (OceanusSheet.open): an Arc
 *    drawer on desktop (floats 8px off the right edge, 16px corners) and an
 *    Arc bottom sheet on phones; opaque raised surface, floating shadow,
 *    a hairline, exits faster than it enters, the phone handle drags.
 *    Scoped with the two-id prefix: desk.css and oceanus.css paint the old
 *    glass panel with !important.
 * PM OS plates (D7) build no .oc-dialog; their pages keep the old sheet.
 */

/* ======================================================================
   1. .oc-dialog
   ====================================================================== */
.oc-dialog-root {
  position: fixed;
  inset: 0;
  z-index: 30100;
  display: grid;
  place-items: center;
  padding: var(--arc-space-4);
  pointer-events: none;
}
.oc-dialog-root[hidden] { display: none; }
.oc-dialog-root.oc-ov-open { pointer-events: auto; }

.oc-dialog__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--arc-background) 58%, transparent);
  opacity: 0;
  transition: opacity var(--arc-dur) var(--arc-ease);
}
.oc-dialog-root.oc-ov-open .oc-dialog__scrim { opacity: 1; }
.oc-dialog-root.oc-ov-leaving .oc-dialog__scrim {
  opacity: 0;
  transition: opacity var(--arc-dur-exit) var(--arc-ease-exit);
}

.oc-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(420px, 100%);
  max-height: calc(100dvh - 2 * var(--arc-space-4));
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--arc-space-5);
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-sheet);
  background: var(--arc-surface-raised);
  color: var(--arc-foreground);
  box-shadow: var(--arc-shadow-floating);
  font-size: var(--arc-text-sm);
  line-height: 1.5;
  letter-spacing: var(--arc-tracking);
  outline: none;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition:
    transform var(--arc-dur-morph) var(--arc-smooth),
    opacity var(--arc-dur) var(--arc-ease);
}
.oc-dialog-root.oc-ov-open .oc-dialog { opacity: 1; transform: none; }
.oc-dialog-root.oc-ov-leaving .oc-dialog {
  opacity: 0;
  transform: translateY(4px) scale(.98);
  transition:
    transform var(--arc-dur-exit) var(--arc-ease-exit),
    opacity var(--arc-dur-exit) var(--arc-ease-exit);
}

.oc-dialog__title {
  margin: 0;
  font-size: var(--arc-text-lg);
  font-weight: var(--arc-weight-strong);
  line-height: 1.35;
  color: var(--arc-foreground);
  overflow-wrap: anywhere;
}
.oc-dialog__body {
  margin: var(--arc-space-2) 0 0;
  color: var(--arc-text-secondary);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.oc-dialog__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.oc-dialog__field {
  display: flex;
  flex-direction: column;
  gap: var(--arc-space-1);
  margin-top: var(--arc-space-3);
}
.oc-dialog__label {
  font-size: var(--arc-text-xs);
  color: var(--arc-text-secondary);
}
.oc-dialog__input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--arc-control-md);
  padding: 6px var(--arc-space-3);
  border: 1px solid var(--arc-border-strong);
  border-radius: var(--arc-radius-control);
  background: var(--arc-background);
  color: var(--arc-foreground);
  font: inherit;
  font-size: var(--arc-text-sm);
  outline: none;
  resize: vertical;
  transition:
    border-color var(--arc-dur-fast) var(--arc-ease),
    box-shadow var(--arc-dur-fast) var(--arc-ease);
}
.oc-dialog__input:focus {
  border-color: var(--arc-accent);
  box-shadow: 0 0 0 3px var(--arc-accent-subtle);
}
.oc-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--arc-space-2);
  margin-top: var(--arc-space-5);
}
.oc-dialog :focus-visible {
  outline: 2px solid var(--arc-focus);
  outline-offset: 2px;
}
.oc-dialog__input:focus-visible { outline: none; }

/* Until the button piece (arc_buttons.css) is on the page, its classes
   still read as buttons here. :where() keeps this at zero specificity, so
   .oc-btn's own rules always win. */
:where(.oc-dialog, .oc-toast-card) :where(.oc-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--arc-control-sm);
  padding: 0 var(--arc-space-3);
  border: 1px solid var(--arc-border-strong);
  border-radius: var(--arc-radius-control);
  background: var(--arc-surface);
  color: var(--arc-foreground);
  font: inherit;
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight-strong);
  cursor: pointer;
}
:where(.oc-dialog) :where(.oc-btn--ghost) { background: transparent; border-color: transparent; color: var(--arc-text-secondary); }
:where(.oc-dialog) :where(.oc-btn--ghost:hover) { background: var(--arc-hover); color: var(--arc-foreground); }
:where(.oc-dialog) :where(.oc-btn--primary) { background: var(--arc-accent); border-color: var(--arc-accent); color: var(--arc-accent-foreground); }
:where(.oc-dialog) :where(.oc-btn--danger) { background: var(--arc-danger); border-color: var(--arc-danger); color: var(--arc-accent-foreground); }
:where(.oc-dialog) :where(.oc-btn:disabled) { opacity: .5; cursor: default; }

/* Anchored confirm-popover: the menus' floating surface (12px). */
.oc-dialog-root--pop {
  inset: auto;
  display: block;
  padding: 0;
  width: 0;
  height: 0;
}
.oc-dialog-root--pop .oc-dialog {
  position: fixed;
  width: min(300px, calc(100vw - 16px));
  padding: var(--arc-space-3) var(--arc-space-4) var(--arc-space-3);
  border-radius: var(--arc-radius-card);
  font-size: var(--arc-text-xs);
  transform: translateY(-4px) scale(.96);
  transition:
    transform var(--arc-dur) var(--arc-smooth),
    opacity var(--arc-dur-fast) var(--arc-ease);
}
.oc-dialog-root--pop .oc-dialog[data-side="top"] { transform: translateY(4px) scale(.96); }
.oc-dialog-root--pop.oc-ov-open .oc-dialog { transform: none; }
.oc-dialog-root--pop.oc-ov-leaving .oc-dialog { transform: scale(.98); }
.oc-dialog-root--pop .oc-dialog__title { font-size: var(--arc-text-sm); }
.oc-dialog-root--pop .oc-dialog__body { margin-top: var(--arc-space-1); }
.oc-dialog-root--pop .oc-dialog__actions { margin-top: var(--arc-space-3); }

/* Phone: a bottom sheet with a handle that drags. */
.oc-dialog-root--sheet {
  place-items: end stretch;
  padding: 0;
}
.oc-dialog-root--sheet .oc-dialog {
  width: 100%;
  max-height: 88dvh;
  padding: var(--arc-space-2) var(--arc-space-5) max(var(--arc-space-5), env(safe-area-inset-bottom, 0px));
  border-bottom: 0;
  border-radius: var(--arc-radius-sheet) var(--arc-radius-sheet) 0 0;
  opacity: 1;
  transform: translateY(100%);
}
.oc-dialog-root--sheet.oc-ov-open .oc-dialog { transform: none; }
.oc-dialog-root--sheet.oc-ov-leaving .oc-dialog {
  opacity: 1;
  transform: translateY(100%);
}
.oc-dialog__handle {
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto var(--arc-space-4);
  border-radius: var(--arc-radius-pill);
  background: var(--arc-border-strong);
  touch-action: none;
  cursor: grab;
}
.oc-dialog__handle::before {           /* a 40px target around the 4px bar */
  content: "";
  display: block;
  height: var(--arc-control-touch);
  margin: -18px -40px 0;
}
.oc-dialog.is-dragging { transition: none; }
.oc-dialog-root--sheet .oc-dialog__actions { flex-direction: column-reverse; }
.oc-dialog-root--sheet .oc-dialog__actions .oc-btn { width: 100%; min-height: var(--arc-control-touch); }
.oc-dialog-root--sheet .oc-dialog__input { min-height: var(--arc-control-touch); font-size: var(--arc-text-lg); }

/* ======================================================================
   2. Hold to confirm
   ====================================================================== */
.oc-hold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.oc-hold .oc-btn__label { position: relative; z-index: 1; }
.oc-hold__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, currentColor 24%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--arc-dur-fast) var(--arc-ease-exit);
  pointer-events: none;
}
/* The fill is a timer, not decoration: it keeps its length when motion is
   reduced, because it is the only sign of how long is left. */
.oc-hold.is-holding .oc-hold__fill,
.oc-hold.is-done .oc-hold__fill {
  transform: scaleX(1);
  transition: transform var(--oc-hold-ms, 800ms) linear;
}
.oc-hold.is-armed { box-shadow: 0 0 0 3px color-mix(in srgb, var(--arc-danger) 30%, transparent); }

/* ======================================================================
   3. The portal sheet (.oc-sheet): Arc drawer / bottom sheet
   ====================================================================== */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__backdrop {
  background: color-mix(in srgb, var(--arc-background) 58%, transparent);
  animation: oc-arc-fade-in var(--arc-dur) var(--arc-ease);
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__panel {
  background: var(--arc-surface-raised) !important;
  border: 1px solid var(--arc-border) !important;
  box-shadow: var(--arc-shadow-floating) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--arc-foreground);
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__head {
  padding: var(--arc-space-4) var(--arc-space-5) var(--arc-space-3);
  border-bottom: 1px solid var(--arc-border-subtle);
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__title {
  font-size: var(--arc-text-lg);
  font-weight: var(--arc-weight-strong);
  letter-spacing: var(--arc-tracking);
  color: var(--arc-foreground);
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__close {
  width: var(--arc-control-sm);
  height: var(--arc-control-sm);
  border: 0;
  border-radius: var(--arc-radius-control);
  background: transparent;
  color: var(--arc-text-secondary);
  transition:
    background-color var(--arc-dur-fast) var(--arc-ease),
    color var(--arc-dur-fast) var(--arc-ease),
    transform var(--arc-dur) var(--arc-spring);
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__close:hover {
  background: var(--arc-hover);
  color: var(--arc-foreground);
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__close:active { transform: scale(.94); }
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__close:focus-visible,
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__panel :focus-visible {
  outline: 2px solid var(--arc-focus);
  outline-offset: 2px;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__body {
  padding: var(--arc-space-4) var(--arc-space-5);
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__handle {
  width: 36px;
  height: 4px;
  margin: var(--arc-space-2) auto 0;
  border-radius: var(--arc-radius-pill);
  background: var(--arc-border-strong);
  touch-action: none;
  cursor: grab;
}
html body .oc-sheet__panel.is-dragging { animation: none !important; transition: none !important; }

/* Desktop: a drawer on the right. Not the company page's X discussion and
   Earnings analysis sheets: those are centred dialogs (top/left 50% and a
   -50% translate in ticker.html / ticker_desk.css); the drawer's top: 8px
   would leave them translated half their height off the top of the screen. */
@media (min-width: 821px) {
  html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet:not(.th-xdiscuss-sheet, .th-earn-sheet) > .oc-sheet__panel {
    top: var(--arc-space-2);
    right: var(--arc-space-2);
    bottom: var(--arc-space-2);
    height: auto;
    border-radius: var(--arc-radius-sheet) !important;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    animation: oc-arc-drawer-in var(--arc-dur-morph) var(--arc-smooth);
  }
  html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet.is-leaving:not(.th-xdiscuss-sheet, .th-earn-sheet) > .oc-sheet__panel {
    animation: oc-arc-drawer-out var(--arc-dur-exit) var(--arc-ease-exit) forwards;
  }
  /* The centred dialogs keep Arc's sheet corners. */
  html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.th-xdiscuss-sheet, .th-earn-sheet) > .oc-sheet__panel {
    border-radius: var(--arc-radius-sheet) !important;
    overflow: hidden;
  }
}
@media (max-width: 820px) {
  html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet__panel {
    border-bottom: 0 !important;
    border-radius: var(--arc-radius-sheet) var(--arc-radius-sheet) 0 0 !important;
    animation: oc-arc-sheet-up var(--arc-dur-morph) var(--arc-smooth);
  }
  html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet.is-leaving .oc-sheet__panel {
    animation: oc-arc-sheet-down var(--arc-dur-exit) var(--arc-ease-exit) forwards;
  }
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-sheet.is-leaving .oc-sheet__backdrop {
  animation: oc-arc-fade-out var(--arc-dur-exit) var(--arc-ease-exit) forwards;
}
html body .oc-sheet.is-leaving { pointer-events: none; }

@keyframes oc-arc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes oc-arc-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes oc-arc-drawer-in {
  from { transform: translateX(calc(100% + var(--arc-space-2))); }
  to { transform: none; }
}
@keyframes oc-arc-drawer-out {
  from { transform: none; opacity: 1; }
  to { transform: translateX(32px); opacity: 0; }
}
@keyframes oc-arc-sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@keyframes oc-arc-sheet-down {
  from { transform: translateY(var(--oc-drag, 0px)); }
  to { transform: translateY(100%); }
}

/* The duration tokens are already 0 under reduced motion; the transforms
   are dropped too so nothing is left mid-gesture. */
@media (prefers-reduced-motion: reduce) {
  .oc-dialog,
  .oc-dialog-root--pop .oc-dialog,
  .oc-dialog-root--pop .oc-dialog[data-side="top"],
  .oc-dialog-root--sheet .oc-dialog,
  .oc-dialog-root.oc-ov-leaving .oc-dialog { transform: none; transition: none; }
  .oc-dialog__scrim { transition: none; }
  html body .oc-sheet__panel,
  html body .oc-sheet__backdrop,
  html body .oc-sheet.is-leaving .oc-sheet__panel { animation: none !important; }
}

@media print {
  .oc-dialog-root { display: none !important; }
}