/* OREC workshop deck — layers Simocean DOE theme + small org fixes.
 *
 * Dark (default): @import sea-stack-dark.css + #+REVEAL_THEME: black
 * Light:          @import sea-stack-light.css + #+REVEAL_THEME: white
 *
 * Match the protected-static DOE deck:
 *   simoceanxyz/public/protected-static/doe-updates/2025-q4/
 */

@import url("./sea-stack-dark.css");
/* @import url("./sea-stack-light.css"); */

/* ---------------------------------------------------------------------------
   Org / export hygiene (not in the Simocean theme)
   --------------------------------------------------------------------------- */

.reveal .tag {
  display: none !important;
}

.reveal .figure-number,
.reveal p:has(> .figure-number) {
  display: none !important;
}

.reveal div.figure {
  margin: 0.4em 0 0 0;
  padding: 0;
}

.reveal div.figure > p:first-child {
  margin: 0;
}

/* Inline HTML grids (capabilities slide) — keep readable on dark */
.reveal section div[style*="display:grid"] ul {
  text-align: left;
}

/* Tall workflow infographic — relax default 55vh cap from sea-stack theme */
.reveal section img[src*="workflow_seastack_vs_siloed"] {
  max-height: 78vh;
  width: auto;
  max-width: 96%;
  object-fit: contain;
}

/* Wide monthly-report TikZ PNG — theme caps img height; Org :width is overridden here
   (width:auto keeps aspect ratio). Tune max-height / max-width to fit the slide. */
.reveal section img[src*="architecture_tikz_monthly_report"] {
  display: block;
  margin: 0 auto;
  max-height: 50vh;
  width: auto;
  max-width: min(82vw, 960px);
  height: auto;
  object-fit: contain;
}

/* TALOS Phase 10 taper-draft dashboard — wide PNG; relax default 55vh cap */
.reveal section img[src*="fig_talos_phase10_taper_draft_sweep"] {
  display: block;
  margin: 0 auto;
  max-height: 52vh;
  width: auto;
  max-width: min(88vw, 1000px);
  height: auto;
  object-fit: contain;
}

/* design_exploration_loop.svg — wide shallow strip; global max-height:55vh often
   dominates so Org #+ATTR_HTML :width feels like it “does nothing”. Keep width
   from the exported HTML attribute only; cap height here instead of 55vh. */
.reveal section img[src*="design_exploration_loop"] {
  display: block;
  margin: 0 auto;
  max-height: 32vh;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   OREC 2026 workshop theme framework
   --------------------------------------------------------------------------- */

.orec-theme-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 0.6em;
}

.orec-theme-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.55em, 1.4vw, 0.9em);
  width: 100%;
  max-width: min(92vw, 48em);
  margin: 0 auto;
  text-align: left;
}

.orec-theme-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left-width: 4px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
  padding: 0.62em 0.72em 0.64em;
  min-width: 0;
}

.orec-theme-card h4 {
  margin: 0 0 0.12em;
  font-size: clamp(0.58em, 1.2vw, 0.74em);
  line-height: 1.18;
  letter-spacing: 0.02em;
}

.orec-theme-card p.orec-theme-subtitle {
  margin: 0 0 0.32em;
  font-size: clamp(0.42em, 0.88vw, 0.52em);
  line-height: 1.2;
  letter-spacing: 0.02em;
  opacity: 0.58;
  font-weight: 500;
}

.orec-theme-card ul {
  margin: 0;
  padding-left: 1.05em;
  font-size: clamp(0.46em, 0.95vw, 0.58em);
  line-height: 1.32;
  opacity: 0.82;
}

.orec-theme-card p:not(.orec-theme-subtitle) {
  margin: 0.15em 0 0;
  font-size: clamp(0.47em, 0.98vw, 0.6em);
  line-height: 1.32;
  opacity: 0.82;
}

.orec-theme-card--fidelity {
  border-left-color: rgba(125, 211, 252, 0.86);
}

.orec-theme-card--interop {
  border-left-color: rgba(45, 212, 191, 0.86);
}

.orec-theme-card--validation {
  border-left-color: rgba(167, 139, 250, 0.86);
}

.orec-theme-card--deployment {
  border-left-color: rgba(251, 191, 36, 0.86);
}

.orec-theme-tag {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.18em 0.52em 0.16em;
  margin: 0 0.35em 0.35em 0;
  font-size: clamp(0.38em, 0.78vw, 0.5em);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.78;
}

.orec-theme-tag--fidelity {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.42);
}

.orec-theme-tag--interop {
  color: #5eead4;
  border-color: rgba(94, 234, 212, 0.42);
}

.orec-theme-tag--validation {
  color: #c4b5fd;
  border-color: rgba(196, 181, 253, 0.42);
}

.orec-theme-tag--deployment {
  color: #fcd34d;
  border-color: rgba(252, 211, 77, 0.42);
}

.orec-prompt {
  max-width: min(88vw, 42em);
  margin: 0.7em auto 0;
  text-align: center;
  font-size: clamp(0.58em, 1.25vw, 0.76em);
  line-height: 1.36;
  opacity: 0.84;
}

/* ---------------------------------------------------------------------------
   5sa end-to-end workflow walkthrough (flowchart + stepped content)
   --------------------------------------------------------------------------- */

.orec-flow-walk {
  max-width: min(95vw, 60em);
  margin: 0.1em auto 0;
}

.orec-flow-chart {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.35em;
  margin: 0 auto 0.9em;
  flex-wrap: nowrap;
  width: 100%;
}

.orec-flow-box {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.5em 0.3em;
  font-size: clamp(0.42em, 0.9vw, 0.58em);
  line-height: 1.22;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.5;
  transition: opacity 0.25s ease, border-color 0.25s ease,
    background 0.25s ease, box-shadow 0.25s ease;
}

.orec-flow-box.active {
  border-color: rgba(142, 202, 230, 0.9);
  background: rgba(10, 28, 38, 0.55);
  box-shadow: 0 0 14px rgba(142, 202, 230, 0.28);
  opacity: 1;
  font-weight: 600;
}

.orec-flow-arrow {
  display: flex;
  align-items: center;
  opacity: 0.55;
  font-size: clamp(0.55em, 1.1vw, 0.8em);
}

.orec-flow-content {
  position: relative;
  min-height: 50vh;
}

.orec-flow-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.orec-flow-panel img {
  max-height: 42vh;
  max-width: 92%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
}

.orec-flow-panel[data-step="seastack"] img {
  max-height: 32vh;
  max-width: 70%;
}

.orec-flow-panel .orec-flow-images {
  display: flex;
  gap: 0.8em;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.orec-flow-panel .orec-flow-images img {
  max-height: 38vh;
  max-width: 46%;
}

.orec-flow-panel .orec-flow-caption {
  margin-top: 0.8em;
  font-size: clamp(0.55em, 1.15vw, 0.7em);
  line-height: 1.4;
  opacity: 0.88;
  max-width: 38em;
}

/* Placeholder panels (BEM, outputs) — slightly more muted styling. */
.orec-flow-panel--placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  padding: 1em;
}

/* Deck footer URLs — top-right so the stack does not crowd slide titles on the left. */
.orec-deck-footer-urls {
  position: fixed;
  top: 10px;
  right: 72px;
  z-index: 30;
  max-width: min(52vw, 28em);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: right;
  pointer-events: auto;
}

.orec-deck-footer-urls a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  white-space: nowrap;
}

.orec-deck-footer-urls a:hover {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.orec-deck-footer-urls a.orec-deck-footer-urls__secondary {
  color: rgba(255, 255, 255, 0.4);
}

.orec-deck-footer-urls a.orec-deck-footer-urls__secondary:hover {
  color: rgba(255, 255, 255, 0.78);
}

.orec-deck-footer-urls__sep {
  color: rgba(255, 255, 255, 0.35);
  user-select: none;
  margin: 0 0.6em;
}

@media (max-width: 900px) {
  .orec-deck-footer-urls {
    right: 12px;
    max-width: min(70vw, 22em);
    font-size: 11px;
  }
}