/* ── Phase 9 — Utility Design System ──────────────────────────────────────────
   Token-based, so dark mode is automatic. Every OneBox consumes these classes
   via onebox-frame.blade.php. No hardcoded hex; no emoji; one accent only. */

/* ── OneBox Frame ─────────────────────────────────────────────────────────── */
.ob-frame {
  background: var(--ind-card, #fff);
  color: var(--ind-card-foreground, #1f2937);
  border: 1px solid var(--ind-border, #e5e7eb);
  border-radius: var(--ind-radius, 16px);
  padding: 0;
  margin-bottom: 18px;
  box-shadow: var(--ind-shadow-sm, 0 1px 3px rgba(0,0,0,.08));
  font-family: var(--ind-font-sans, inherit);
  overflow: hidden;
}

.ob-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 0;
}

.ob-icon {
  font-size: 1.25rem;
  color: var(--accent, var(--ind-saffron, #E8600A));
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ob-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ind-foreground, #111827);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ob-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ind-muted-foreground, #6b7280);
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}
.ob-action:hover {
  background: var(--ind-muted, #f3f4f6);
  color: var(--ind-foreground, #111827);
}
.ob-action:focus-visible {
  outline: 2px solid var(--accent, var(--ind-saffron, #E8600A));
  outline-offset: 2px;
}
.ob-action .material-symbols-outlined {
  font-size: 1.1rem;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.ob-body {
  padding: 12px 20px 16px;
}

/* ── Footer / Source ──────────────────────────────────────────────────────── */
.ob-footer {
  padding: 0 20px 14px;
  font-size: .72rem;
  color: var(--ind-muted-foreground, #6b7280);
}
.ob-source-link {
  color: var(--accent, var(--ind-saffron, #E8600A));
  text-decoration: none;
}
.ob-source-link:hover {
  text-decoration: underline;
}
.ob-source-text {
  color: var(--ind-muted-foreground, #6b7280);
}

/* ── Type scale (consumed by widgets) ─────────────────────────────────────── */
.ob-result {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--ind-foreground, #111827);
  letter-spacing: -.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.ob-label {
  font-size: .78rem;
  color: var(--ind-muted-foreground, #6b7280);
}
.ob-meta {
  font-size: .72rem;
  color: var(--ind-muted-foreground, #6b7280);
}

/* ── Controls kit ─────────────────────────────────────────────────────────── */
.ob-pill {
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ind-primary-foreground, #fff);
  background: var(--accent, var(--ind-saffron, #E8600A));
  border: none;
  border-radius: 99px;
  padding: 8px 18px;
  min-height: 44px;
  transition: filter 150ms ease, transform 50ms ease;
}
.ob-pill:hover { filter: brightness(1.07); }
.ob-pill:active { transform: translateY(1px); }
.ob-pill:focus-visible {
  outline: 2px solid var(--accent, var(--ind-saffron, #E8600A));
  outline-offset: 2px;
}

.ob-ghost {
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ind-card-foreground, #1f2937);
  background: transparent;
  border: 1px solid var(--ind-border, #e5e7eb);
  border-radius: 99px;
  padding: 7px 15px;
  min-height: 44px;
  transition: background 150ms ease, border-color 150ms ease, transform 50ms ease;
}
.ob-ghost:hover { background: var(--ind-muted, #f3f4f6); }
.ob-ghost:active { transform: translateY(1px); }
.ob-ghost:focus-visible {
  outline: 2px solid var(--accent, var(--ind-saffron, #E8600A));
  outline-offset: 2px;
}

.ob-chip {
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ind-muted-foreground, #6b7280);
  background: transparent;
  border: 1px solid var(--ind-border, #d1d5db);
  border-radius: 99px;
  padding: 5px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: all 120ms ease;
}
.ob-chip[aria-pressed="true"],
.ob-chip.is-on {
  color: var(--accent, var(--ind-saffron, #E8600A));
  border-color: var(--accent, var(--ind-saffron, #E8600A));
  background: color-mix(in srgb, var(--accent, #E8600A) 12%, transparent);
}
.ob-chip:focus-visible {
  outline: 2px solid var(--accent, var(--ind-saffron, #E8600A));
  outline-offset: 2px;
}

/* ── Tools Strip ──────────────────────────────────────────────────────────── */
.ts-strip {
  border-top: 1px solid var(--ind-border, #e5e7eb);
  padding: 12px 20px 14px;
}

.ts-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--ind-border, #e5e7eb);
}

.ts-tab {
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ind-muted-foreground, #6b7280);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}
.ts-tab[aria-selected="true"] {
  color: var(--accent, var(--ind-saffron, #E8600A));
  border-bottom-color: var(--accent, var(--ind-saffron, #E8600A));
}
.ts-tab:hover {
  color: var(--ind-foreground, #111827);
}
.ts-tab:focus-visible {
  outline: 2px solid var(--accent, var(--ind-saffron, #E8600A));
  outline-offset: -2px;
}

.ts-panel-wrap {
  position: relative;
}
.ts-panel-wrap[hidden] { display: none; }

.ts-panel {
  overflow: hidden;
}

.ts-tiles {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0;
}
.ts-tiles::-webkit-scrollbar { display: none; }

.ts-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  max-width: 90px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--ind-muted, #f3f4f6);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--ind-card-foreground, #1f2937);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease, border-color 150ms ease;
}
.ts-tile:hover {
  background: var(--ind-background, #fff);
  border-color: var(--ind-border, #e5e7eb);
}
.ts-tile:focus-visible {
  outline: 2px solid var(--accent, var(--ind-saffron, #E8600A));
  outline-offset: 2px;
}

.ts-tile-icon {
  font-size: 1.4rem;
  color: var(--accent, var(--ind-saffron, #E8600A));
}

.ts-tile-label {
  font-size: .7rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: var(--ind-muted-foreground, #6b7280);
}

.ts-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ind-border, #e5e7eb);
  background: var(--ind-card, #fff);
  color: var(--ind-foreground, #111827);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ind-shadow-sm, 0 1px 3px rgba(0,0,0,.08));
  transition: background 150ms ease;
}
.ts-scroll-btn:hover { background: var(--ind-muted, #f3f4f6); }
.ts-scroll-btn:focus-visible {
  outline: 2px solid var(--accent, var(--ind-saffron, #E8600A));
  outline-offset: 2px;
}
.ts-scroll-left { left: -8px; }
.ts-scroll-right { right: -8px; }
.ts-scroll-btn .material-symbols-outlined { font-size: 1.2rem; }

.ts-toggle {
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ind-muted-foreground, #6b7280);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0 0;
  transition: color 150ms ease;
}
.ts-toggle:hover { color: var(--ind-foreground, #111827); }
.ts-toggle:focus-visible {
  outline: 2px solid var(--accent, var(--ind-saffron, #E8600A));
  outline-offset: 2px;
}
.ts-toggle .material-symbols-outlined { font-size: 1.1rem; }

/* ── Motion ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ob-frame, .ob-frame *,
  .ts-strip, .ts-strip *,
  .ob-action, .ob-pill, .ob-ghost, .ob-chip {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
  .ts-tiles { scroll-behavior: auto; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ob-header { padding: 12px 16px 0; }
  .ob-body { padding: 10px 16px 14px; }
  .ob-footer { padding: 0 16px 12px; }
  .ts-strip { padding: 10px 16px 12px; }
  .ts-tile { min-width: 72px; padding: 8px 6px; }
  .ts-tile-icon { font-size: 1.2rem; }
  .ts-tile-label { font-size: .65rem; }
  .ob-pill, .ob-ghost, .ob-chip { min-height: 44px; }
}

/* ── Share toast ──────────────────────────────────────────────────────────── */
.ob-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ind-foreground, #111827);
  color: var(--ind-card, #fff);
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 99px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.ob-toast.is-visible { opacity: 1; }