/* Fluxo do personagem, prévia de animação, exportação, entrada e administração (character.js, player.js,
   auth.js, admin.js). Só variáveis de token: sem cor literal e sem seletor de tema. */

/* ---------- Entrada ---------- */
.auth-options{display:flex;flex-direction:column;gap:var(--spacingL)}
.auth-divider{display:flex;align-items:center;gap:var(--spacingM);color:var(--colorNeutralForeground3);font:var(--typeCaption1)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}

/* ---------- Lista e cabeçalho do personagem ---------- */
.char-list-head{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--spacingL)}
.char-list-head p{margin-top:var(--spacingXS)}
.char-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingM) var(--spacingXL);margin-bottom:var(--spacingXL)}
.char-head h1{font:var(--typeTitle3);min-width:0;overflow-wrap:anywhere}
.char-head .library-back{margin-right:calc(var(--spacingS) * -1)}
.section-heading a + a{margin-left:0}

/* ---------- Etapas ---------- */
.stepper{margin-left:auto}
.stepper ol{display:flex;flex-wrap:wrap;gap:var(--spacingXS);margin:0;padding:0;list-style:none}
.step{display:inline-flex;align-items:center;gap:var(--spacingS);min-height:40px;padding:0 var(--spacingMNudge);border:0;border-bottom:3px solid transparent;background:transparent;color:var(--colorNeutralForeground2);font:var(--typeBody1);cursor:pointer;white-space:nowrap}
.step:hover{color:var(--colorNeutralForeground2Hover);background:var(--colorSubtleBackgroundHover)}
.step[aria-current="step"]{color:var(--colorNeutralForeground1);font-weight:var(--fontWeightSemibold);border-bottom-color:var(--colorCompoundBrandStroke)}
.step-index{display:inline-grid;place-items:center;width:22px;height:22px;border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusCircular);font:var(--typeCaption1Strong)}
.step[aria-current="step"] .step-index{background:var(--colorBrandBackground);border-color:transparent;color:var(--colorNeutralForegroundOnBrand)}
.step-index .icon{width:14px;height:14px}

/* ---------- Palco do personagem ---------- */
.char-panel{display:flex;flex-direction:column;gap:var(--spacingM);min-width:0}
.char-panel .section-heading{margin-bottom:0}
.char-stage{display:flex;max-height:460px;overflow:auto;border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium)}
.char-stage:focus-visible{outline-offset:2px}
.char-stage.compact{flex:none;max-height:none}
.char-art{flex:none;margin:auto;max-width:none;image-rendering:pixelated}
.char-empty-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingXL)}
.char-empty-row > div{flex:1 1 240px;min-width:0}

/* ---------- Direções: uma célula por vista ---------- */
.char-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--spacingM);margin:0;padding:0;list-style:none}
.char-cell{display:flex;flex-direction:column;gap:var(--spacingXS);min-width:0}
.char-cell-art{display:grid;place-items:center;min-height:120px;padding:var(--spacingS);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);overflow:hidden}
.cell-sprite{display:block;width:var(--labCellW);height:var(--labCellH);max-width:100%;background-image:var(--labSheetSrc);background-repeat:no-repeat;background-size:var(--labSheetW) var(--labSheetH);background-position:var(--labSheetX) var(--labSheetY);image-rendering:pixelated}
.char-cell-name{font:var(--typeBody1Strong);text-align:center}

/* ---------- Animações e prévia ---------- */
.anim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--spacingL)}
.anim-card{display:flex;flex-direction:column;gap:var(--spacingS);min-width:0;padding:var(--spacingM);box-shadow:var(--shadow4)}
.anim-card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--spacingXS)}
.player{display:flex;flex-direction:column;gap:var(--spacingS);min-width:0}
.player-stage{display:grid;place-items:center;min-height:160px;padding:var(--spacingS);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);overflow:auto}
.player-canvas{display:block;max-width:none;image-rendering:pixelated}
.player-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacingM)}
.library-preview{display:flex;flex-direction:column;gap:var(--spacingS)}

/* ---------- Custo, confirmação e tarefa ---------- */
.flow{display:flex;flex-direction:column;gap:var(--spacingM);min-width:0}
.flow-quote{display:flex;flex-direction:column;gap:var(--spacingXS);padding:var(--spacingM);border:var(--strokeWidthThin) solid var(--colorBrandStroke1);border-radius:var(--borderRadiusMedium);background:var(--colorBrandBackground2)}
.flow-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--spacingS)}
.flow-line > span{color:var(--colorNeutralForeground2)}
.flow-actions{display:flex;flex-direction:column;gap:var(--spacingS)}
.flow-job{align-items:flex-start;flex-wrap:wrap}
.flow-job-body{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:var(--spacingXS)}
.flow-job-body .mono{overflow-wrap:anywhere}

/* ---------- Exportar ---------- */
.export-formats{display:flex;flex-direction:column;gap:var(--spacingS)}
.export-format{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacingXXS);width:100%;padding:var(--spacingS) var(--spacingM);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);text-align:left;cursor:pointer}
.export-format:hover:not(:disabled){background:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover)}
.export-format[aria-pressed="true"]{background:var(--colorBrandBackground2);border-color:var(--colorBrandStroke1)}
.export-format:disabled{background:var(--colorNeutralBackgroundDisabled);color:var(--colorNeutralForegroundDisabled);cursor:not-allowed}
.export-format:disabled .field-help{color:var(--colorNeutralForegroundDisabled)}
.export-files{display:flex;flex-direction:column;gap:var(--spacingXXS);margin:0;padding:var(--spacingS) var(--spacingM);border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);list-style:none;font-size:12px;overflow-wrap:anywhere}

/* ---------- Administração ---------- */
.admin-layout{display:flex;flex-direction:column;gap:var(--spacingL);margin-top:var(--spacingL)}
.admin-section{display:flex;flex-direction:column;gap:var(--spacingM);min-width:0}
.admin-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacingM);margin:0;padding:0;list-style:none}
.admin-card{display:flex;flex-direction:column;gap:var(--spacingXS);padding:var(--spacingM)}
.admin-card strong{font:var(--typeTitle3);font-family:var(--fontFamilyMonospace)}
.admin-form{display:flex;flex-direction:column;gap:var(--spacingM);padding-top:var(--spacingM);border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2)}
.admin-grant-cell{min-width:260px}
.admin-grant{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--spacingS)}
.admin-grant .field{flex:1 1 90px;min-width:90px}
.admin-grant .field-error{flex:1 1 100%}

/* ---------- Telas estreitas ---------- */
@media (max-width:900px){
  .stepper{margin-left:0;width:100%}
  .stepper ol{width:100%}
  .step{flex:1 1 auto;justify-content:center;min-height:44px;padding:0 var(--spacingS)}
}
@media (max-width:600px){
  .char-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anim-grid{grid-template-columns:minmax(0,1fr)}
  .admin-grant-cell{min-width:220px}
}