/* Toasts, alerts and meters, Arc-style (piece 13, 2026-10-29).
 *
 * Arc references: toast, toast-stack, alert, progress, usage-meter.
 * Tokens: arc_tokens.css only. Behaviour: arc_toast.js.
 *
 * 1. .oc-toast-stack / .oc-toast-card — the one stack every OceanusToast
 *    lands in: bottom right on desktop, top on phones (above the command
 *    tray's reach), newest nearest the edge. A card enters rising 16px from
 *    .96 on the morph spring; it leaves sinking 8px on the exit curve, or
 *    thrown sideways when swiped.
 * 2. Alerts — Mission Control's status banner (.mc-status) as an Arc alert:
 *    a quiet tinted surface, a status icon, title and one line, the action
 *    at the end. Pages' own inline notices keep their markup.
 * 3. Meters — cost-by-model bars and the scout run as Arc usage meter /
 *    progress: a 6px track in the control track tint, an accent fill whose
 *    width glides; the files upload toast as a progress toast. The case
 *    file's run meter is on a PM OS page (html.page-pmos, D7) and is left.
 */

/* ======================================================================
   1. Toast stack
   ====================================================================== */
.oc-toast-stack {
  position: fixed;
  right: var(--arc-space-4);
  bottom: max(var(--arc-space-4), env(safe-area-inset-bottom, 0px));
  z-index: 30200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--arc-space-2);
  width: min(360px, calc(100vw - 2 * var(--arc-space-4)));
  pointer-events: none;
  outline: none;
}
.oc-toast-stack__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.oc-toast-card {
  --oc-tone: var(--arc-text-secondary);
  --oc-tone-subtle: var(--arc-hover);
  --oc-toast-dx: 0px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  gap: var(--arc-space-2) var(--arc-space-3);
  width: 100%;
  padding: 10px var(--arc-space-2) 10px var(--arc-space-3);
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-card);
  background: var(--arc-surface-raised);
  color: var(--arc-foreground);
  box-shadow: var(--arc-shadow-floating);
  font-size: var(--arc-text-sm);
  line-height: 1.45;
  letter-spacing: var(--arc-tracking);
  pointer-events: auto;
  touch-action: pan-y;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition:
    transform var(--arc-dur-morph) var(--arc-spring),
    opacity var(--arc-dur) var(--arc-ease);
}
.oc-toast-card.is-in { opacity: 1; transform: translateX(var(--oc-toast-dx)); }
.oc-toast-card.is-dragging { transition: none; cursor: grabbing; }
.oc-toast-card.is-out {
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition:
    transform var(--arc-dur-exit) var(--arc-ease-exit),
    opacity var(--arc-dur-exit) var(--arc-ease-exit);
}
.oc-toast-card.is-out.is-thrown {
  transform: translateX(var(--oc-toast-dx));
  transition:
    transform var(--arc-dur) var(--arc-ease-enter),
    opacity var(--arc-dur) var(--arc-ease);
}

.oc-toast-card--success { --oc-tone: var(--arc-success); --oc-tone-subtle: var(--arc-success-subtle); }
.oc-toast-card--warning { --oc-tone: var(--arc-warning); --oc-tone-subtle: var(--arc-warning-subtle); }
.oc-toast-card--danger  { --oc-tone: var(--arc-danger);  --oc-tone-subtle: var(--arc-danger-subtle); }
.oc-toast-card--danger  { border-color: color-mix(in srgb, var(--arc-danger) 32%, var(--arc-border)); }

.oc-toast-card__icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: var(--arc-radius-pill);
  background: var(--oc-tone-subtle);
  color: color-mix(in srgb, var(--oc-tone) 84%, var(--arc-foreground));
  font-size: var(--arc-text-2xs);
  font-weight: var(--arc-weight-strong);
  line-height: 1;
}
.oc-toast-card__icon::before { content: "i"; }
.oc-toast-card--success .oc-toast-card__icon::before { content: "\2713"; }
.oc-toast-card--warning .oc-toast-card__icon::before,
.oc-toast-card--danger .oc-toast-card__icon::before { content: "!"; }

.oc-toast-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 1px;
  overflow-wrap: anywhere;
}
.oc-toast-card__title { font-weight: var(--arc-weight-strong); }
.oc-toast-card__title + .oc-toast-card__msg { color: var(--arc-text-secondary); }

.oc-toast-card__action,
.oc-toast-card__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  border: 0;
  border-radius: var(--arc-radius-chip);
  background: transparent;
  color: var(--arc-text-secondary);
  font: inherit;
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight-strong);
  cursor: pointer;
  transition:
    background-color var(--arc-dur-fast) var(--arc-ease),
    color var(--arc-dur-fast) var(--arc-ease),
    opacity var(--arc-dur-fast) var(--arc-ease),
    transform var(--arc-dur) var(--arc-spring);
}
.oc-toast-card__action { padding: 0 var(--arc-space-2); color: var(--arc-accent); }
.oc-toast-card__close { width: 24px; padding: 0; }
.oc-toast-card__close::before { content: "\00d7"; font-size: var(--arc-text-lg); line-height: 1; }
.oc-toast-card__action:hover,
.oc-toast-card__close:hover { background: var(--arc-hover); color: var(--arc-foreground); }
.oc-toast-card__action:active,
.oc-toast-card__close:active { transform: scale(.94); }
.oc-toast-card__action:focus-visible,
.oc-toast-card__close:focus-visible {
  outline: 2px solid var(--arc-focus);
  outline-offset: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .oc-toast-card__close { opacity: 0; }
  .oc-toast-card:hover .oc-toast-card__close,
  .oc-toast-card:focus-within .oc-toast-card__close { opacity: 1; }
}

@media (max-width: 820px) {
  .oc-toast-stack {
    top: calc(var(--sat-fix, env(safe-area-inset-top, 0px)) + var(--arc-space-2));
    bottom: auto;
    left: var(--arc-space-2);
    right: var(--arc-space-2);
    width: auto;
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .oc-toast-card { transform: translateY(-16px) scale(.96); }
  .oc-toast-card.is-out { transform: translateY(-8px) scale(.98); }
  .oc-toast-card__close { width: 32px; height: 32px; }
}

/* The old host from sheet.js never fills once arc_toast.js is on the page;
   if an early toast lands there, it reads the same. */
html body .oc-toast-host .oc-toast {
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-card);
  background: var(--arc-surface-raised);
  color: var(--arc-foreground);
  box-shadow: var(--arc-shadow-floating);
}

/* ======================================================================
   2. Alert — Mission Control's status banner
   ====================================================================== */
html body:is(body, #oc-arc):is(body, #oc-arc-2) .mc-status {
  --oc-tone: var(--arc-success);
  --oc-tone-subtle: var(--arc-success-subtle);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--arc-space-3);
  padding: var(--arc-space-3) var(--arc-space-3) var(--arc-space-3) var(--arc-space-4);
  border: 1px solid color-mix(in srgb, var(--oc-tone) 28%, var(--arc-border));
  border-radius: var(--arc-radius-card);
  background: color-mix(in srgb, var(--oc-tone) 7%, var(--arc-surface));
  box-shadow: none;
  color: var(--arc-foreground);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .mc-status--warn { --oc-tone: var(--arc-warning); --oc-tone-subtle: var(--arc-warning-subtle); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .mc-status--bad { --oc-tone: var(--arc-danger); --oc-tone-subtle: var(--arc-danger-subtle); }
html body:is(body, #oc-arc):is(body, #oc-arc-2) .mc-status .mc-status__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--arc-radius-pill);
  background: var(--oc-tone-subtle);
  color: var(--oc-tone);
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight-strong);
  line-height: 1;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .mc-status .mc-status__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .mc-status .mc-status__text strong {
  font-size: var(--arc-text-sm);
  font-weight: var(--arc-weight-strong);
  color: var(--arc-foreground);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .mc-status .mc-status__text span {
  font-size: var(--arc-text-xs);
  color: var(--arc-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ======================================================================
   3. Usage meters and progress
   ====================================================================== */
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.cost-bar .track, .scout-progress-bar) {
  height: 6px;
  border: 0;
  border-radius: var(--arc-radius-pill);
  background: var(--arc-control-track);
  overflow: hidden;
  box-shadow: none;
}
html:not(.page-pmos) body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.cost-bar .fill, .scout-progress-fill) {
  height: 100%;
  border-radius: inherit;
  background: var(--arc-accent);
  box-shadow: none;
  transition: width var(--arc-dur-morph) var(--arc-smooth);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .cost-bar .amt { font-variant-numeric: tabular-nums; }

/* Files: the upload toast reads as a progress toast. */
html body:is(body, #oc-arc):is(body, #oc-arc-2) #upload-toast {
  border: 1px solid var(--arc-border);
  border-radius: var(--arc-radius-card);
  background: var(--arc-surface-raised);
  color: var(--arc-foreground);
  box-shadow: var(--arc-shadow-floating);
  font-size: var(--arc-text-sm);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) #upload-toast .toast-bar {
  height: 4px;
  border-radius: var(--arc-radius-pill);
  background: var(--arc-control-track);
  overflow: hidden;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) #toast-fill {
  border-radius: inherit;
  background: var(--arc-accent);
  transition: width var(--arc-dur-morph) var(--arc-smooth);
}

@media (prefers-reduced-motion: reduce) {
  .oc-toast-card,
  .oc-toast-card.is-in,
  .oc-toast-card.is-out,
  .oc-toast-card.is-out.is-thrown { transform: none; transition: none; }
  html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.cost-bar .fill, .scout-progress-fill, #toast-fill) { transition: none; }
}

@media print {
  .oc-toast-stack { display: none !important; }
}