/* IrisFlow interactive components — theme-aware via al-folio CSS variables with fallbacks.
   The variables (--if-*) are defined on each panel container below. */
.if-btn {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.45rem 0.95rem;
  border-radius: 6px;
  background: var(--if-accent);
  color: var(--if-bg) !important;
  text-decoration: none !important;
  font-weight: 500;
  font-size: 0.92rem;
  border: 1px solid var(--if-accent);
  cursor: pointer;
}
.if-btn:hover {
  filter: brightness(1.12);
}

/* shared controls */
.if-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.if-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin-top: 0.7rem;
}
.if-controls button {
  appearance: none;
  border: 1px solid var(--if-line);
  background: var(--if-bg);
  color: var(--if-text);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.if-controls button:hover {
  border-color: var(--if-accent);
}
.if-controls button.if-primary {
  background: var(--if-accent);
  border-color: var(--if-accent);
  color: #fff;
}
.if-controls input[type="range"] {
  accent-color: var(--if-accent);
}

.if-small {
  font-size: 0.76rem;
  color: var(--if-muted);
}

/* ---------------- design studio ---------------- */
.if-studio {
  --if-text: var(--global-text-color, #111);
  --if-muted: var(--global-text-color-light, #828282);
  --if-bg: var(--global-bg-color, #fff);
  --if-card: var(--global-card-bg-color, #fff);
  --if-line: var(--global-divider-color, #e6e6e6);
  --if-accent: var(--global-theme-color, #b509ac);
  --if-r: #d64545;
  --if-t: #2f6fd6;
  margin: 1rem 0 1.4rem;
  border: 1px solid var(--if-line);
  border-radius: 14px;
  background: var(--if-card);
  padding: 0.9rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.if-pill {
  appearance: none;
  border: 1px solid var(--if-line);
  background: var(--if-bg);
  color: var(--if-text);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.if-pill:hover {
  border-color: var(--if-accent);
}
.if-pill.active {
  background: var(--if-accent);
  border-color: var(--if-accent);
  color: var(--if-bg);
}

.if-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.if-hood {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--if-muted);
  line-height: 1.5;
  border-top: 1px dashed var(--if-line);
  padding-top: 0.5rem;
}
.if-hood b {
  color: var(--if-text);
}

/* ---------------- canvas panels: advantages map and joint-flow coupling ---------------- */
.if-idea {
  --if-text: var(--global-text-color, #111);
  --if-muted: var(--global-text-color-light, #828282);
  --if-bg: var(--global-bg-color, #fff);
  --if-card: var(--global-card-bg-color, #fff);
  --if-line: var(--global-divider-color, #e6e6e6);
  --if-accent: var(--global-theme-color, #b509ac);
  --if-r: #d64545;
  --if-t: #2f6fd6;
  margin: 0.8rem 0 1.4rem;
  border: 1px solid var(--if-line);
  border-radius: 14px;
  background: var(--if-card);
  padding: 0.9rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------------- data pipeline plot ---------------- */
.if-pipeline {
  --if-text: var(--global-text-color, #111);
  --if-muted: var(--global-text-color-light, #828282);
  --if-bg: var(--global-bg-color, #fff);
  --if-card: var(--global-card-bg-color, #fff);
  --if-line: var(--global-divider-color, #e6e6e6);
  --if-accent: var(--global-theme-color, #b509ac);
  --if-r: #d64545;
  --if-t: #2f6fd6;
  margin: 0.8rem 0 1.4rem;
  border: 1px solid var(--if-line);
  border-radius: 14px;
  background: var(--if-card);
  padding: 0.6rem 0.9rem 0.9rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.if-pipe-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}
.if-pipe-scroll canvas {
  display: block;
}
.if-pipe-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.6rem;
}
.if-pipe-steps .if-pill {
  font-size: 0.74rem;
  padding: 0.16rem 0.6rem;
}
.if-pipe-narr {
  min-height: 4.6rem;
}

/* ---------------- studio: workflow demo ---------------- */
.if-studio-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  align-items: center;
  margin: 0.1rem 0 0.7rem;
}
.if-studio-run {
  margin: 0.7rem 0 0.2rem;
}
.if-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.if-glabel {
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--if-muted);
  margin-right: 0.1rem;
}
.if-gtitle {
  width: 100%;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--if-text);
}
.if-gval {
  min-width: 1.3rem;
  text-align: center;
  color: var(--if-text);
}
.if-pill .if-swatch {
  width: 10px;
  height: 10px;
  margin-right: 0.3rem;
  vertical-align: -1px;
  border-radius: 3px;
}
.if-studio-run .if-btn {
  margin-top: 0;
}
.if-btn.if-pulse {
  animation: if-pulse 1.4s ease-in-out infinite;
}
@keyframes if-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--if-accent) 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--if-accent) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .if-btn.if-pulse {
    animation: none;
  }
}

/* ---------------- advantages map ---------------- */
.if-map-card {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 0.7rem;
  align-items: start;
  margin: 0.6rem 0.2rem 0.2rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--if-text);
  min-height: 4.8em;
}
.if-map-sw {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 0.3rem;
}
.if-map-card a {
  white-space: nowrap;
}

/* ---------------- live demo: the real model on a Hugging Face Space (live.js) ---------------- */
.if-live {
  --if-text: var(--global-text-color, #111);
  --if-muted: var(--global-text-color-light, #828282);
  --if-bg: var(--global-bg-color, #fff);
  --if-card: var(--global-card-bg-color, #fff);
  --if-line: var(--global-divider-color, #e6e6e6);
  --if-accent: var(--global-theme-color, #b509ac);
  --if-r: #d64545;
  --if-t: #2f6fd6;
  margin: 1rem 0 1.4rem;
  border: 1px solid var(--if-line);
  border-radius: 14px;
  background: var(--if-card);
  padding: 0.9rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.if-live .if-studio-ctl {
  margin: 0.1rem 0 0.6rem;
}
.if-live .if-studio-ctl + .if-studio-ctl {
  margin-top: 0.9rem;
}
/* material picker: one row per family; selected chips are tinted, never-seen ones dashed */
.if-live-mats {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--if-line);
  border-radius: 10px;
}
.if-live-matrow {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}
.if-live-matlabel {
  padding-top: 0.28rem;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--if-muted);
}
.if-live-matchips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
.if-mat {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.16rem 0.55rem;
  border: 1px solid var(--if-line);
  border-radius: 6px;
  background: transparent;
  color: var(--if-muted);
  font-size: 0.8rem;
  line-height: 1.5;
  cursor: pointer;
}
.if-mat .if-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  opacity: 0.4;
}
.if-mat.unseen {
  border-style: dashed;
}
.if-mat:hover {
  border-color: var(--if-accent);
  color: var(--if-text);
}
.if-mat.active {
  color: var(--if-text);
  background: color-mix(in srgb, var(--if-accent) 11%, transparent);
  border-color: color-mix(in srgb, var(--if-accent) 55%, transparent);
}
.if-mat.active .if-swatch {
  opacity: 1;
}
/* n,k data that stop short of the band: greyed out, selection kept for later */
.if-mat.na {
  opacity: 0.38;
  cursor: not-allowed;
}
.if-mat.na:hover {
  border-color: var(--if-line);
  color: var(--if-muted);
}
.if-mat:focus-visible,
.if-mat-del:focus-visible,
.if-linkbtn:focus-visible {
  outline: 2px solid var(--if-accent);
  outline-offset: 1px;
}
.if-mat-add {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--if-accent) 60%, transparent);
  color: var(--if-accent);
  font-weight: 500;
}
.if-mat-own {
  display: inline-flex;
  align-items: center;
}
.if-mat-own .if-mat {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.if-mat-del {
  appearance: none;
  align-self: stretch;
  padding: 0 0.4rem;
  border: 1px solid var(--if-line);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  background: transparent;
  color: var(--if-muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.if-mat-del:hover {
  color: var(--if-text);
}
.if-live-ownnote {
  flex: 1 1 14rem;
  min-width: 0;
}
.if-live-matfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  margin: 0.45rem 0 0.9rem;
}
.if-live-matcount {
  color: var(--if-text);
  font-weight: 500;
}
.if-live-matcount.if-warn {
  color: var(--if-r);
}
.if-linkbtn {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--if-accent);
  font-size: 0.76rem;
  cursor: pointer;
}
.if-linkbtn:hover {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .if-live-matrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
  .if-live-matlabel {
    padding-top: 0;
  }
}

/* the bands: each a pair of number fields, removable when there is more than one */
.if-live-bands .if-group {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}
.if-live-bandlist {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
}
.if-live-band {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.if-live-bands .if-live-num {
  width: 4.6rem;
}
.if-band-del {
  appearance: none;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  color: var(--if-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.if-band-del:hover {
  color: var(--if-text);
}
.if-band-del:focus-visible {
  outline: 2px solid var(--if-accent);
  outline-offset: 1px;
}
.if-live-bands .if-linkbtn {
  margin-left: 0.3rem;
}
.if-live-bands .if-linkbtn:disabled {
  opacity: 0.4;
  cursor: default;
  text-decoration: none;
}

/* panels that swap in place share one grid cell, so the row keeps the height of the tallest */
.if-live-stackcell {
  display: grid;
  flex: 1 1 260px;
  min-width: 0;
}
.if-live-mode {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  visibility: hidden;
}
.if-live-mode.on {
  visibility: visible;
}
/* also the speed menus of the joint and pipeline animations, which have no class of their own */
.if-idea select,
.if-pipeline select,
.if-live-select,
.if-live-num,
.if-live-file {
  font-size: 0.85rem;
  color: var(--if-text);
  background: var(--if-bg);
  border: 1px solid var(--if-line);
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  max-width: 100%;
}
.if-live-num {
  width: 5.2rem;
}
.if-live-file {
  padding: 0.2rem 0.3rem;
}
.if-live-chart,
.if-live-stack {
  width: 100%;
  min-width: 0;
}
.if-live-chart canvas,
.if-live-stack canvas {
  display: block;
}
.if-live-desc {
  min-height: 2.6em;
  margin: 0.3rem 0 0.2rem;
  line-height: 1.4;
}
.if-live .if-pill:disabled {
  opacity: 0.4;
  cursor: default;
}
.if-live .if-studio-run .if-btn:disabled {
  opacity: 0.55;
}
.if-live-status {
  flex: 1 1 14rem;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  line-height: 1.35;
}
.if-live-hf {
  white-space: nowrap;
}
.if-live-out {
  border-top: 1px dashed var(--if-line);
  padding-top: 0.6rem;
  margin-top: 0.4rem;
}
.if-live-outhead {
  margin-bottom: 0.4rem !important;
}
.if-live-picks {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  height: 2.1rem;
  -webkit-overflow-scrolling: touch;
}
.if-live-picks .if-pill {
  flex: 0 0 auto;
}
.if-live-mae {
  color: inherit;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.if-live-hover {
  min-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.1rem 0 0.4rem;
}
.if-live-table {
  height: 13rem;
  overflow-y: auto;
  border: 1px solid var(--if-line);
  border-radius: 8px;
}
.if-live-out.empty .if-live-table {
  border-style: dashed;
}
.if-live-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--if-text);
}
.if-live-table th {
  position: sticky;
  top: 0;
  background: var(--if-card);
  font-weight: 600;
  text-align: left;
  color: var(--if-muted);
  border-bottom: 1px solid var(--if-line);
}
/* "table" in the selector outweighs the theme's `table:not(.table) td`, which sets 1rem text and wide padding */
.if-live-table table th,
.if-live-table table td {
  padding: 0.22rem 0.6rem;
  font-size: inherit;
}
.if-live-table td:last-child,
.if-live-table th:last-child {
  text-align: right;
}
.if-live-table tr.on td {
  background: color-mix(in srgb, var(--if-accent) 12%, transparent);
}
.if-live-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.if-live input[type="range"] {
  accent-color: var(--if-accent);
}
@media (max-width: 600px) {
  .if-live-status {
    min-height: 4em;
  }
}

/* ---------------- story: why IrisFlow (story.js) ---------------- */
.if-story {
  --if-text: var(--global-text-color, #111);
  --if-muted: var(--global-text-color-light, #828282);
  --if-bg: var(--global-bg-color, #fff);
  --if-card: var(--global-card-bg-color, #fff);
  --if-line: var(--global-divider-color, #e6e6e6);
  --if-accent: var(--global-theme-color, #b509ac);
  --if-r: #d64545;
  --if-t: #2f6fd6;
  margin: 0.8rem 0 1.4rem;
  border: 1px solid var(--if-line);
  border-radius: 14px;
  background: var(--if-card);
  padding: 0.9rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.if-story-narr {
  margin-top: 0.6rem;
  border-top: 1px dashed var(--if-line);
  padding-top: 0.55rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--if-text);
}
.if-story-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  margin-top: 0.6rem;
}
.if-story-ctl button {
  appearance: none;
  border: 1px solid var(--if-line);
  background: var(--if-bg);
  color: var(--if-text);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.if-story-ctl button:hover {
  border-color: var(--if-accent);
}
.if-story-ctl .if-story-play {
  background: var(--if-accent);
  border-color: var(--if-accent);
  color: #fff;
}
.if-story-chs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1 1 auto;
}
.if-story-ctl .if-story-ch {
  --p: 0%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--if-accent) 16%, var(--if-bg)) var(--p), var(--if-bg) var(--p));
}
.if-story-ch b {
  color: var(--if-accent);
  margin-right: 0.35rem;
}
.if-story-ctl .if-story-ch[aria-current="step"] {
  border-color: var(--if-accent);
}
.if-story-lang {
  display: inline-flex;
  border: 1px solid var(--if-line);
  border-radius: 999px;
  overflow: hidden;
}
.if-story-ctl .if-story-lang button {
  border: 0;
  border-radius: 0;
  padding: 0.28rem 0.65rem;
}
.if-story-ctl .if-story-lang button[aria-pressed="true"] {
  background: var(--if-accent);
  color: #fff;
}
/* hand-drawn skin (data-if-story="sketch"): warm paper, ink, pigment colours; story.js adds the paper's grain */
.if-story.if-sketch {
  --if-bg: #f6f1e7;
  --if-card: #f6f1e7;
  --if-text: #2a2621;
  --if-muted: #7b7366;
  --if-line: #dcd3c3;
  --if-r: #c4503c;
  --if-t: #3b69ad;
  background-size: 160px 160px;
}
html[data-theme="dark"] .if-story.if-sketch {
  --if-bg: #1f1d1a;
  --if-card: #1f1d1a;
  --if-text: #ece6da;
  --if-muted: #a59d90;
  --if-line: #3f3a33;
  --if-r: #e27561;
  --if-t: #7ea6e6;
}
.if-sketch .if-story-narr {
  font-family: "Source Serif 4", Georgia, "PingFang SC", "Microsoft YaHei", serif;
  font-size: 1.05rem;
}
/* frozen full-window layout used to record the video (#why=<t>,video) */
.if-story.if-story-video {
  position: fixed;
  inset: 0;
  z-index: 99999;
  margin: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--if-bg);
}
.if-story-video .if-story-narr {
  font-size: 1.15rem;
  line-height: 1.5;
  text-align: center;
  border-top: 0;
}
.if-story-video .if-story-ctl {
  display: none;
}