/* Iris — o sistema do Reaction Studio e do Studio Pro (Figma Patterns, página
   Iris 118:200, coleção Iris 48:117), só no herói do nash.work.

   Copiado sem mudança de site/reaction/docs/reaction.css por iris-heroi.py, no
   molde do scripts/iris.py do Nash Social: os tokens escuro e claro, o botão
   .reaction-btn, a folha de menu, o painel .reaction-panel, o Frame .reaction-frame, a Lista .reaction-linha, o item de marcar
   .reaction-menu-marca, a tecla .reaction-kbd e a busca .reaction-galeria-busca. As pílulas do herói não
   vestem o Iris. O tema segue data-tema="claro" do <html>, de nash-theme.js. */

@property --reaction-beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  color-scheme: dark;

  /* letra */
  --reaction-font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --reaction-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --reaction-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* chão e superfícies */
  --reaction-bg: #0a0a0a;
  --reaction-bg-elevated: #111111;
  --reaction-bg-hover: #1f1f1f;
  --reaction-border: #1f1f1f;
  --reaction-panel: rgb(10 10 10 / 0.8);
  --reaction-panel-border: #1f1f1f;
  --reaction-panel-border-strong: #2a2a2a;
  --reaction-panel-shadow: none;
  --reaction-card-shadow: none;
  --reaction-card-shadow-hover: none;
  --reaction-field: #0a0a0a;
  /* 3:1 contra o chão e o painel (WCAG 1.4.11): a borda é o que diz que ali
     é um campo. O foco fica acima dela. */
  --reaction-field-border: #666666;
  --reaction-field-focus: #adadad;

  /* moldura: o bloco claro de 4px por fora e o chão por dentro */
  --reaction-frame-bg: #111111;
  --reaction-frame-border: #1f1f1f;
  --reaction-frame-shadow: none;
  --reaction-inset-bg: #0a0a0a;
  --reaction-inset-border: #1f1f1f;
  --reaction-inset-divider: #1f1f1f;
  --reaction-row-hover: #ffffff10;
  --reaction-ghost: transparent;
  --reaction-ghost-hover: #ffffff10;
  --reaction-ghost-highlight: none;

  /* botões */
  --reaction-control-bg: transparent;
  --reaction-control-border: #1f1f1f;
  --reaction-control-fg: #d6d6d6;
  --reaction-control-hover: #ffffff10;
  --reaction-control-selected-bg: #0a0a0a;
  --reaction-control-selected-border: transparent;
  --reaction-control-selected-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  --reaction-control-raised-shadow: none;
  --reaction-seg-track: rgb(31 31 31 / 0.4);
  --reaction-seg-pill: #0a0a0a;
  --reaction-seg-pill-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  --reaction-highlight-bg: #111111;
  --reaction-highlight-border: #1f1f1f;
  --reaction-highlight-shadow: none;
  --reaction-deps-bg: #111111;
  --reaction-deps-shadow: none;
  --reaction-deps-btn-bg: #1f1f1f;
  --reaction-deps-btn-border: #1f1f1f;
  --reaction-top-bg: #0a0a0a;

  /* texto */
  --reaction-text: #ffffff;
  --reaction-text-link: #ffffff;
  --reaction-text-muted: #d6d6d6;
  --reaction-text-dim: #d6d6d6;
  --reaction-heading: #ffffff;
  --reaction-category: rgb(214 214 214 / 0.64);
  --reaction-accent: #e5e5e5;
  --reaction-accent-strong: #ffffff;
  /* a venda: o aviso de pagamento aprovado e o de erro */
  --reaction-ok: #8cbd97;
  --reaction-erro: #e08a84;
  --reaction-focus: rgb(214 214 214 / 0.55);

  /* etiqueta Novo */
  --reaction-tag-fg: #e0e0e0;
  --reaction-tag-bg: #1f1f1f;
  --reaction-tag-border: #2a2a2a;
  --reaction-tag-shadow: none;

  /* a régua do Personalizar */
  --reaction-cell-bg: transparent;
  --reaction-cell-label: #d6d6d6;
  --reaction-slider-fill: #1f1f1f;
  --reaction-slider-thumb: #e5e5e5;
  --reaction-tick: #1f1f1f;
  --reaction-switch-track: #1f1f1f;
  --reaction-switch-track-on: #e5e5e5;
  --reaction-switch-knob: #d6d6d6;
  --reaction-switch-knob-on: #0a0a0a;
  --reaction-menu-bg: #111111;
  --reaction-menu-border: #1f1f1f;
  --reaction-menu-shadow: 0 8px 32px #00000080;

  /* vidro do topo: a placa da casa (site/css/nash-vidro.css, medida do Figma
     em 2026-09-07) nos tokens desta casca — fundo da página a 62%, desfoque e
     saturação de --nash-surface-blur/--nash-surface-saturation, e o fio de
     luz de 1px que a placa põe na borda de cima (branco a 15%) */
  --reaction-glass: rgb(10 10 10 / 0.62);
  --reaction-glass-blur: 28px;
  --reaction-glass-saturation: 1.85;
  --reaction-glass-line: rgb(255 255 255 / 0.15);

  /* palco: escuro nos dois temas por decisão da casa (os componentes foram
     desenhados sobre preto) */
  --reaction-stage-bg: #0e0e0e;
  --reaction-stage-border: #1f1f1f;
  --reaction-stage-text: #ffffff;
  --reaction-stage-scheme: dark;
  --reaction-stage-fill: #111111;
  --reaction-stage-line: #1f1f1f;
  --reaction-resize-bar: #1f1f1f;
  --reaction-resize-bar-hover: #2a2a2a;
  --reaction-resize-bar-active: #d6d6d6;

  /* código: a sintaxe se diferencia por claridade, dentro da rampa neutra. */
  --reaction-code-bg: #0a0a0a;
  --reaction-code-text: #ffffff;
  --reaction-code-keyword: #e5e5e5;
  --reaction-code-punct: #737373;
  --reaction-code-string: #d6d6d6;
  --reaction-code-attr: #a1a1a1;
  --reaction-prop-name: #ffffff;
  --reaction-prop-type: rgb(214 214 214 / 0.68);
  --reaction-prop-value: #d6d6d6;
  --reaction-prop-chip: #1f1f1f;
  --reaction-prop-chip-ring: inset 0 0 0 1px #2a2a2a;

  /* o botão de chamada: pastilha de uma cor com anel cônico de 1px */
  --reaction-cta-gradient: conic-gradient(from var(--reaction-beam-angle), #5227ff, #b19eef, #ff9ffc, #8b5cf6, #5227ff);
  --reaction-cta-bg: #ffffff;
  --reaction-cta-glow: 82 39 255;
  --reaction-cta-ring: transparent;
  --reaction-cta-fg: #0a0a0a;

  --reaction-explore-bg: #0a0a0a;

  /* raio: a escala sai de --radius: .8rem, em quatro degraus */
  --reaction-radius-xs: 8.8px;
  --reaction-radius-sm: 8.8px;
  --reaction-radius-md: 10.8px;
  --reaction-radius-lg: 12.8px;
  --reaction-radius-xl: 16.8px;
  --reaction-radius-cell: 12.8px;
  --reaction-radius-inset: calc(var(--reaction-radius-lg) - 4px);
  --reaction-radius-full: 999px;

  /* tempo */
  --reaction-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --reaction-dur-press: 0.12s;
  --reaction-dur-menu: 0.2s;
  --reaction-dur-fast: 0.15s;
  --reaction-dur-base: 0.2s;
  --reaction-dur-slow: 0.3s;

  /* grade */
  --reaction-header-height: 60px;
  --reaction-rail-width: 300px;
  --reaction-gap: 32px;
  --reaction-gutter: 32px;
  --reaction-col-max: 1080px;
}

:root[data-tema='claro'] {
  color-scheme: light;
  /* profundidade por degrau de cinza: o chão #f1, o que sobe é branco com
     sombra curta, o que afunda (código, miolo do cartão) é #f6 */

  --reaction-bg: #f1f1f1;
  --reaction-bg-elevated: #ffffff;
  --reaction-bg-hover: #e8e8e8;
  --reaction-border: #e2e2e2;
  --reaction-panel: rgb(241 241 241 / 0.8);
  --reaction-panel-border: #e2e2e2;
  --reaction-panel-border-strong: #d4d4d4;
  --reaction-panel-shadow: none;
  --reaction-card-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  --reaction-gcard-bg: var(--reaction-bg-elevated);
  --reaction-card-shadow-hover: 0 6px 16px rgb(0 0 0 / 0.08);
  --reaction-field: #ffffff;
  --reaction-field-border: #8a8a8a;
  --reaction-field-focus: #414141;

  --reaction-frame-bg: #ffffff;
  --reaction-frame-border: #e2e2e2;
  --reaction-frame-shadow: none;
  --reaction-inset-bg: #f6f6f6;
  --reaction-inset-border: #e5e5e5;
  --reaction-inset-divider: #e5e5e5;
  --reaction-row-hover: #e8e8e8;
  --reaction-ghost: transparent;
  --reaction-ghost-hover: #e8e8e8;
  --reaction-ghost-highlight: none;

  --reaction-control-bg: transparent;
  --reaction-control-border: #e5e5e5;
  --reaction-control-fg: #414141;
  --reaction-control-hover: #e8e8e8;
  --reaction-control-selected-bg: #ffffff;
  --reaction-control-selected-border: transparent;
  --reaction-control-selected-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  --reaction-control-raised-shadow: none;
  --reaction-seg-track: rgb(0 0 0 / 0.05);
  --reaction-seg-pill: #ffffff;
  --reaction-seg-pill-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  --reaction-highlight-bg: #ffffff;
  --reaction-highlight-border: #e5e5e5;
  --reaction-highlight-shadow: none;
  --reaction-deps-bg: #ececec;
  --reaction-deps-shadow: none;
  --reaction-deps-btn-bg: #ffffff;
  --reaction-deps-btn-border: #e5e5e5;
  --reaction-top-bg: #ffffff;

  --reaction-text: #0a0a0a;
  --reaction-text-link: #171717;
  --reaction-text-muted: #414141;
  --reaction-text-dim: #636363;
  --reaction-heading: #171717;
  --reaction-category: rgb(65 65 65 / 0.64);
  --reaction-accent: #171717;
  --reaction-accent-strong: #0a0a0a;
  --reaction-ok: #2f6b45;
  --reaction-erro: #a2322a;
  --reaction-focus: rgb(161 161 161 / 0.55);

  --reaction-tag-fg: #636363;
  --reaction-tag-bg: #f5f5f5;
  --reaction-tag-border: #e5e5e5;
  --reaction-tag-shadow: none;

  --reaction-cell-bg: transparent;
  --reaction-cell-label: #636363;
  --reaction-slider-fill: #eeeeee;
  --reaction-slider-thumb: #171717;
  --reaction-tick: #e5e5e5;
  --reaction-switch-track: #e5e5e5;
  --reaction-switch-track-on: #171717;
  --reaction-switch-knob: #ffffff;
  --reaction-switch-knob-on: #ffffff;
  --reaction-menu-bg: #ffffff;
  --reaction-menu-border: #e5e5e5;
  --reaction-menu-shadow: 0 12px 30px rgb(0 0 0 / 0.1);

  --reaction-glass: rgb(255 255 255 / 0.66);
  --reaction-glass-line: rgb(255 255 255 / 0.5);

  --reaction-stage-fill: #f6f6f6;
  --reaction-stage-line: #e5e5e5;
  --reaction-resize-bar: #e5e5e5;
  --reaction-resize-bar-hover: #a1a1a1;
  --reaction-resize-bar-active: #0a0a0a;

  --reaction-code-bg: #f6f6f6;
  --reaction-code-text: #0a0a0a;
  --reaction-code-keyword: #171717;
  --reaction-code-punct: #a1a1a1;
  --reaction-code-string: #414141;
  --reaction-code-attr: #636363;
  --reaction-prop-name: #0a0a0a;
  --reaction-prop-type: rgb(65 65 65 / 0.68);
  --reaction-prop-value: #171717;
  --reaction-prop-chip: #ececec;
  --reaction-prop-chip-ring: inset 0 0 0 1px #e5e5e5;

  /* no claro a pastilha de chamada inverte: chão escuro, letra clara */
  --reaction-cta-bg: #0a0a0a;
  --reaction-cta-fg: #ffffff;
}

.reaction-btn {
  --reaction-btn-h: 40px;
  --reaction-btn-px: 20px;
  --reaction-btn-bg: var(--reaction-control-bg);
  --reaction-btn-border: var(--reaction-control-border);
  --reaction-btn-fg: var(--reaction-control-fg);
  --reaction-btn-shadow: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: none;
  height: var(--reaction-btn-h);
  padding: 0 var(--reaction-btn-px);
  border: 1px solid var(--reaction-btn-border);
  border-radius: var(--reaction-radius-sm);
  background: var(--reaction-btn-bg);
  box-shadow: var(--reaction-btn-shadow);
  color: var(--reaction-btn-fg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--reaction-dur-fast) var(--reaction-ease-out),
    color var(--reaction-dur-fast) var(--reaction-ease-out),
    border-color var(--reaction-dur-fast) var(--reaction-ease-out),
    transform var(--reaction-dur-press) var(--reaction-ease-out);
}

.reaction-btn[data-size='small'] {
  --reaction-btn-h: 30px;
  --reaction-btn-px: 12px;
  gap: 6px;
  border-radius: 7px;
  font-size: 12px;
}

.reaction-btn[data-size='medium'] {
  --reaction-btn-h: 36px;
  --reaction-btn-px: 16px;
  gap: 8px;
}

.reaction-btn:hover:not(:disabled) {
  --reaction-btn-bg: var(--reaction-control-hover);
  --reaction-btn-fg: var(--reaction-text);
}

.reaction-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.reaction-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.reaction-btn[aria-selected='true'],
.reaction-btn[aria-pressed='true'] {
  --reaction-btn-bg: var(--reaction-control-selected-bg);
  --reaction-btn-border: var(--reaction-control-selected-border);
  --reaction-btn-shadow: var(--reaction-control-selected-shadow);
  --reaction-btn-fg: var(--reaction-accent);
}

.reaction-btn[data-emphasis='raised'] {
  --reaction-btn-shadow: var(--reaction-control-raised-shadow);
  font-size: 13px;
}

.reaction-btn[data-emphasis='ghost'] {
  --reaction-btn-bg: transparent;
  --reaction-btn-border: transparent;
}

.reaction-btn[data-emphasis='ghost']:hover:not(:disabled) {
  --reaction-btn-bg: var(--reaction-ghost-hover);
}

.reaction-btn[data-emphasis='cta'] {
  --reaction-btn-px: 20px;
  --reaction-btn-fg: var(--reaction-cta-fg);
  isolation: isolate;
  border: 1px solid var(--reaction-cta-ring);
  background:
    linear-gradient(var(--reaction-cta-bg), var(--reaction-cta-bg)) padding-box,
    var(--reaction-cta-gradient) border-box;
  box-shadow: 0 6px 20px -8px rgb(var(--reaction-cta-glow) / 0.55);
  font-size: 13px;
  font-weight: 600;
  transition:
    transform var(--reaction-dur-press) var(--reaction-ease-out),
    box-shadow 0.3s ease;
}

.reaction-btn[data-emphasis='cta']:hover {
  --reaction-btn-fg: var(--reaction-cta-fg);
  box-shadow: 0 8px 24px -8px rgb(var(--reaction-cta-glow) / 0.75);
}

.reaction-btn[data-shape='square'] {
  width: var(--reaction-btn-h);
  padding: 0;
}

.reaction-btn .nash-icon {
  width: 16px;
  height: 16px;
}

.reaction-btn[data-size='small'] .nash-icon {
  width: 14px;
  height: 14px;
}

.reaction-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--reaction-panel-border-strong);
  border-radius: 4px;
  background: var(--reaction-control-bg);
  color: var(--reaction-text-dim);
  font-family: var(--reaction-font-system-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.reaction-panel {
  border: 1px solid var(--reaction-panel-border);
  border-radius: var(--reaction-radius-xl);
  background: var(--reaction-panel);
  box-shadow: var(--reaction-panel-shadow);
}

.reaction-panel[data-elevation='card'] {
  box-shadow: var(--reaction-card-shadow);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

.reaction-panel[data-elevation='card']:hover {
  border-color: var(--reaction-panel-border-strong);
  box-shadow: var(--reaction-card-shadow-hover);
}

.reaction-frame {
  padding: 4px;
  border: 1px solid var(--reaction-frame-border);
  border-radius: var(--reaction-radius-lg);
  background: var(--reaction-frame-bg);
  box-shadow: var(--reaction-frame-shadow);
}

.reaction-frame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 8px 12px 10.4px 14.4px;
}

.reaction-frame-title {
  margin: 0;
  color: var(--reaction-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.reaction-frame-meta {
  margin: 0;
  color: var(--reaction-text-dim);
  font-size: 12px;
  font-weight: 500;
}

.reaction-frame-body {
  border: 1px solid var(--reaction-inset-border);
  border-radius: var(--reaction-radius-inset);
  background: var(--reaction-inset-bg);
}

.reaction-nav-count {
  margin-left: 8px;
  color: var(--reaction-text-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.reaction-nav-count:empty {
  display: none;
}

.reaction-galeria-busca {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--reaction-field-border);
  border-radius: var(--reaction-radius-lg);
  background: var(--reaction-field);
  color: var(--reaction-text-dim);
}

.reaction-galeria-busca:focus-within {
  border-color: var(--reaction-field-focus);
  color: var(--reaction-accent);
}

.reaction-galeria-busca .nash-icon {
  width: 16px;
  height: 16px;
}

.reaction-galeria-busca input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--reaction-text);
  font-size: 14px;
}

.reaction-galeria-busca input::placeholder {
  color: var(--reaction-text-dim);
}

.reaction-linha {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px 12px 8px 14px;
  border-top: 1px solid var(--reaction-border);
  transition: background-color var(--reaction-dur-fast) var(--reaction-ease-out);
}

.reaction-linha:first-child {
  border-top: 0;
}

.reaction-linha:hover,
.reaction-linha:focus-within {
  background: var(--reaction-ghost-hover);
}

.reaction-linha-icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--reaction-field-border);
  border-radius: var(--reaction-radius-xs);
  background: var(--reaction-field);
  color: var(--reaction-text-dim);
}

.reaction-linha-icone .nash-icon {
  width: 16px;
  height: 16px;
}

.reaction-linha-corpo {
  min-width: 0;
}

.reaction-linha-nome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.reaction-linha-link {
  overflow: hidden;
  color: var(--reaction-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reaction-linha-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.reaction-linha-texto {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--reaction-text-dim);
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reaction-linha-cat {
  color: var(--reaction-text-dim);
  font-size: 12px;
  white-space: nowrap;
}

.reaction-menu-marca-nome {
  flex: 1;
}

.reaction-menu-marca-caixa {
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--reaction-border);
  border-radius: 4px;
}

.reaction-menu-marca-caixa > .nash-icon {
  width: 12px;
  height: 12px;
  opacity: 0;
}

.reaction-menu-marca[aria-checked='true'] {
  color: var(--reaction-text);
}

.reaction-menu-marca[aria-checked='true'] .reaction-menu-marca-caixa {
  border-color: var(--reaction-text);
  background: var(--reaction-text);
  color: var(--reaction-bg, #0a0a0a);
}

.reaction-menu-marca[aria-checked='true'] .reaction-menu-marca-caixa > .nash-icon {
  opacity: 1;
}

.reaction-menu-marca:disabled {
  opacity: 0.4;
  cursor: default;
}

.reaction-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--reaction-menu-border);
  border-radius: var(--reaction-radius-sm);
  background: var(--reaction-menu-bg);
  box-shadow: var(--reaction-menu-shadow);
  max-height: 296px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  transform-origin: center top;
  animation: reaction-pop-in var(--reaction-dur-menu) var(--reaction-ease-out);
}

.reaction-menu-list[hidden] {
  display: none;
}

.reaction-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--reaction-radius-xs);
  background: none;
  color: var(--reaction-text-muted);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--reaction-dur-fast) var(--reaction-ease-out),
    color var(--reaction-dur-fast) var(--reaction-ease-out);
}

.reaction-menu-item:hover,
.reaction-menu-item[data-active] {
  background: var(--reaction-bg-hover);
  color: var(--reaction-text);
}

.reaction-menu-item[aria-selected='true'] {
  color: var(--reaction-text);
}

@keyframes reaction-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}