/* ============================================================================
   SELLER HUBIA — MANUAL. Estilos da propria pagina.
   Mundo: sinalizacao de centro de distribuicao. Placa de corredor, numeral de
   doca, endereco de posicao, fita de risco, marcacao de piso.
   ========================================================================= */

.kit-shell { max-width: var(--sh-shell-max); margin-inline: auto; padding-inline: var(--sh-gutter); }

/* --- Placa suspensa: o cabecalho que pende sobre o corredor -------------- */
.kit-overhead {
  position: sticky; top: 0; z-index: 40;
  /* Sem fita aqui: a D-05 proibe duas fitas na mesma dobra, e a do portao vem logo abaixo. */
  background: color-mix(in srgb, var(--deck) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--sh-border-hairline) solid var(--line-marked);
  box-shadow: var(--elev-overhead);
}
.kit-overhead__bar {
  display: flex; align-items: center; gap: var(--sh-space-4);
  min-height: 60px; padding-block: var(--sh-space-2);
}
.kit-brand { display: flex; align-items: center; gap: var(--sh-space-3); text-decoration: none; color: inherit; margin-right: auto; }
.kit-brand svg { width: 26px; height: auto; }
.kit-brand__text {
  font-variation-settings: "wdth" 82;
  font-weight: var(--sh-weight-black);
  font-size: var(--sh-size-sign-4);
  letter-spacing: var(--sh-tracking-sign);
  text-transform: uppercase;
  line-height: 1;
}
.kit-brand__seller { color: var(--wordmark-seller); }
.kit-brand__hub { color: var(--wordmark-hub); }
.kit-brand__ia { color: var(--wordmark-ia); }

/* Diretorio de docas: a navegacao E a placa de corredor. */
.kit-directory { display: flex; flex-wrap: wrap; gap: var(--sh-space-1); padding-block: var(--sh-space-2); }
@media (min-width: 62rem) { .kit-directory { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }
.kit-directory::-webkit-scrollbar { display: none; }
.kit-directory a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--sh-space-3);
  border-radius: var(--sh-radius-xs);
  font-family: var(--sh-font-mono);
  font-variation-settings: "wdth" 75;
  font-size: var(--sh-size-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-tertiary);
  white-space: nowrap;
  border: var(--sh-border-hairline) solid transparent;
  transition: color var(--sh-dur-snap) var(--sh-ease-snap), background-color var(--sh-dur-snap) var(--sh-ease-snap), border-color var(--sh-dur-snap) var(--sh-ease-snap);
}
.kit-directory a:hover { color: var(--ink); background: var(--plate); }
.kit-directory a[aria-current="true"] { color: var(--ink-on-signal); background: var(--signal); border-color: var(--signal); }

.kit-theme {
  display: inline-flex; align-items: center; gap: var(--sh-space-2);
  min-height: 36px; padding-inline: var(--sh-space-3);
  background: transparent; color: var(--ink-secondary);
  border: var(--sh-border-hairline) solid var(--line-marked);
  border-radius: var(--sh-radius-xs); cursor: pointer;
  font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75;
  font-size: var(--sh-size-micro); letter-spacing: 0.08em; text-transform: uppercase;
  transition: color var(--sh-dur-snap) var(--sh-ease-snap), border-color var(--sh-dur-snap) var(--sh-ease-snap);
}
.kit-theme:hover { color: var(--ink); border-color: var(--line-strong); }

/* --- Portao de entrada: a placa de corredor em tamanho real -------------- */
/* Concreto liso. Sinalizacao e plana: nada de grade decorativa sob o titulo. */
.kit-gate { position: relative; padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem); overflow: hidden; }
.kit-gate__inner { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 62rem) { .kit-gate__inner { grid-template-columns: minmax(0, 1fr) auto; } }

.kit-gate__title {
  font-variation-settings: "wdth" 70;
  font-weight: var(--sh-weight-black);
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.86;
  font-size: var(--sh-size-plate);
  margin-bottom: var(--sh-space-5);
}
.kit-gate__title .l1 { display: block; }
/* Cor das palavras: regra de logotipo da D-01. HUB sempre laranja. */
.kit-gate__title .w-seller { color: var(--wordmark-seller); }
.kit-gate__title .w-hub { color: var(--wordmark-hub); }
.kit-gate__title .w-ia { color: var(--wordmark-ia); }
.kit-gate__title .l2 {
  display: block;
  margin-top: var(--sh-space-5);
  font-variation-settings: "wdth" 76;
  font-size: var(--sh-size-sign-3);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-secondary);
}
.kit-gate__meta { display: flex; flex-wrap: wrap; gap: var(--sh-space-2) var(--sh-space-5); margin-top: var(--sh-space-6); }
.kit-gate__meta div { display: flex; flex-direction: column; gap: 2px; }
.kit-gate__meta dt { font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75; font-size: var(--sh-size-micro); letter-spacing: var(--sh-tracking-label); text-transform: uppercase; color: var(--ink-tertiary); }
.kit-gate__meta dd { font-size: var(--sh-size-note); font-weight: var(--sh-weight-medium); }

.kit-gate__mark { display: grid; place-items: center; padding: var(--sh-space-6); background: var(--plate); border: var(--sh-border-hairline) solid var(--line-hairline); border-radius: var(--sh-radius-lg); }
.kit-gate__mark svg { width: clamp(120px, 22vw, 190px); height: auto; }

/* --- Doca: a secao ------------------------------------------------------ */
.kit-dock { scroll-margin-top: var(--overhead-h, 116px); padding-block: clamp(3rem, 7vw, 6rem); border-top: var(--sh-border-hairline) solid var(--line-hairline); }
.kit-dock:first-of-type { border-top: 0; }

.kit-dock__sign {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sh-space-4) clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.kit-dock__no {
  font-family: var(--sh-font-mono);
  font-variation-settings: "wdth" 75;
  font-size: var(--sh-size-dock);
  font-weight: var(--sh-weight-bold);
  line-height: 0.8;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  padding-top: 0.06em;
}
.kit-dock__head { min-width: 0; }
.kit-dock__title { font-variation-settings: "wdth" 76; font-weight: var(--sh-weight-black); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; font-size: var(--sh-size-sign-2); }
.kit-dock__purpose { margin-top: var(--sh-space-3); color: var(--ink-secondary); font-size: var(--sh-size-lead); line-height: var(--sh-leading-snug); max-width: 52ch; }

/* Faixa de piso: separa blocos dentro da doca. */
.kit-bay { margin-top: clamp(2rem, 4vw, 3rem); }
.kit-bay__title {
  display: flex; align-items: center; gap: var(--sh-space-3);
  font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75;
  font-size: var(--sh-size-label); letter-spacing: var(--sh-tracking-label);
  text-transform: uppercase; color: var(--ink-secondary);
  padding-bottom: var(--sh-space-3);
  border-bottom: var(--sh-border-hairline) solid var(--line-hairline);
  margin-bottom: var(--sh-space-5);
}
.kit-bay__title::before { content: ""; width: 14px; height: 14px; background: var(--signal); flex: none; border-radius: 3px; }

/* --- Grades utilitarias do manual --------------------------------------- */
.kit-grid { display: grid; gap: var(--sh-space-4); }
.kit-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 54rem) { .kit-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kit-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.kit-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.kit-split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 54rem) { .kit-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* --- Amostra de cor ----------------------------------------------------- */
.kit-swatch { display: flex; flex-direction: column; border-radius: var(--sh-radius-md); overflow: hidden; border: var(--sh-border-hairline) solid var(--line-hairline); }
.kit-swatch__chip { height: 92px; display: flex; align-items: flex-end; padding: var(--sh-space-3); }
.kit-swatch__chip span { font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75; font-size: var(--sh-size-micro); letter-spacing: 0.06em; }
.kit-swatch__foot { padding: var(--sh-space-3); background: var(--plate); display: flex; flex-direction: column; gap: 3px; }
.kit-swatch__name { font-size: var(--sh-size-note); font-weight: var(--sh-weight-bold); letter-spacing: var(--sh-tracking-tight); }
.kit-swatch__var { font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75; font-size: var(--sh-size-micro); color: var(--ink-tertiary); word-break: break-all; }
.kit-ramp { display: flex; border-radius: var(--sh-radius-sm); overflow: hidden; border: var(--sh-border-hairline) solid var(--line-hairline); }
.kit-ramp div { flex: 1; height: 60px; display: grid; place-items: end center; padding-bottom: 6px; font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75; font-size: var(--sh-size-micro); letter-spacing: 0.02em; }

/* --- Regra dura: o bloco que impede o erro ------------------------------ */
.kit-rule { display: grid; grid-template-columns: auto 1fr; gap: var(--sh-space-3); padding: var(--sh-space-4); background: var(--plate); border-radius: var(--plate-radius); border: var(--sh-border-hairline) solid var(--line-hairline); }
.kit-rule[data-kind="stop"] { background: var(--stop-wash); border-color: color-mix(in srgb, var(--stop-ink) 42%, transparent); }
.kit-rule[data-kind="clear"] { background: var(--clear-wash); border-color: color-mix(in srgb, var(--clear-ink) 42%, transparent); }
.kit-rule[data-kind="warn"] { background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn-ink) 42%, transparent); }
.kit-rule__icon { width: 22px; height: 22px; }
.kit-rule[data-kind="stop"] .kit-rule__icon { color: var(--stop-ink); }
.kit-rule[data-kind="clear"] .kit-rule__icon { color: var(--clear-ink); }
.kit-rule[data-kind="warn"] .kit-rule__icon { color: var(--warn-ink); }
.kit-rule h4 { font-size: var(--sh-size-note); font-weight: var(--sh-weight-bold); letter-spacing: var(--sh-tracking-tight); margin-bottom: 4px; }
.kit-rule p { font-size: var(--sh-size-note); color: var(--ink-secondary); line-height: var(--sh-leading-snug); }
.kit-rule code { font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75; font-size: 0.92em; color: var(--ink); }

/* --- Demonstracao (fundo alternado para provar contraste) ---------------- */
.kit-demo { padding: var(--sh-space-5); border-radius: var(--plate-radius); border: var(--sh-border-hairline) solid var(--line-hairline); background: var(--deck); }
.kit-demo--sunken { background: var(--plate-sunken); }
.kit-demo__label { display: block; margin-bottom: var(--sh-space-4); }

/* --- Uso proibido / permitido do simbolo -------------------------------- */
.kit-usage { border-radius: var(--sh-radius-md); overflow: hidden; border: var(--sh-border-hairline) solid var(--line-hairline); }
.kit-usage__stage { height: 128px; display: grid; place-items: center; background: var(--plate-sunken); position: relative; overflow: hidden; }
.kit-usage__stage svg { width: 56px; height: auto; }
.kit-usage__verdict { display: flex; align-items: center; gap: var(--sh-space-2); padding: var(--sh-space-3); font-size: var(--sh-size-note); background: var(--plate); line-height: var(--sh-leading-snug); }
.kit-usage__verdict svg { width: 18px; height: 18px; flex: none; }
.kit-usage[data-ok="yes"] .kit-usage__verdict { color: var(--clear-ink); }
.kit-usage[data-ok="no"] .kit-usage__verdict { color: var(--stop-ink); }

/* --- Espécime tipográfico ----------------------------------------------- */
.kit-spec { display: grid; grid-template-columns: 1fr; gap: var(--sh-space-2); padding-block: var(--sh-space-4); border-bottom: var(--sh-border-hairline) solid var(--line-hairline); }
@media (min-width: 48rem) { .kit-spec { grid-template-columns: 13rem 1fr; gap: var(--sh-space-5); align-items: baseline; } }
.kit-spec__meta { font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75; font-size: var(--sh-size-micro); color: var(--ink-tertiary); line-height: 1.7; letter-spacing: 0.04em; }
.kit-spec__meta b { display: block; color: var(--ink-secondary); font-weight: var(--sh-weight-medium); letter-spacing: var(--sh-tracking-label); text-transform: uppercase; }
.kit-spec__sample { min-width: 0; overflow-wrap: anywhere; }

/* --- Escala de espaco --------------------------------------------------- */
.kit-space-row { display: grid; grid-template-columns: 7.5rem 3.5rem 1fr; gap: var(--sh-space-4); align-items: center; padding-block: var(--sh-space-2); }
.kit-space-row span { font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75; font-size: var(--sh-size-micro); color: var(--ink-tertiary); }
.kit-space-row i { display: block; height: 14px; background: var(--signal); border-radius: var(--sh-radius-xs); }

/* --- Icones ------------------------------------------------------------- */
.kit-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--sh-space-3); }
.kit-icons figure { display: grid; place-items: center; gap: var(--sh-space-2); padding: var(--sh-space-4) var(--sh-space-2); background: var(--plate); border-radius: var(--sh-radius-sm); border: var(--sh-border-hairline) solid var(--line-hairline); color: var(--ink); }
.kit-icons figcaption { font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75; font-size: var(--sh-size-micro); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-tertiary); text-align: center; }

/* --- Tabela de tokens --------------------------------------------------- */
.kit-token-table td:first-child { font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75; font-size: var(--sh-size-label); color: var(--signal-ink); white-space: nowrap; }
.kit-token-chip { display: inline-block; width: 18px; height: 18px; border-radius: var(--sh-radius-xs); border: 1px solid var(--line-marked); vertical-align: -4px; margin-right: 8px; }

/* --- Sintetico: rotulo obrigatorio -------------------------------------- */
.kit-synthetic {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75;
  font-size: var(--sh-size-micro); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warn-ink); border: 1px dashed color-mix(in srgb, var(--warn-ink) 55%, transparent);
  padding: 2px 8px; border-radius: var(--sh-radius-xs);
}

/* --- Rodape ------------------------------------------------------------- */
.kit-foot { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: var(--sh-border-hairline) solid var(--line-hairline); color: var(--ink-tertiary); font-size: var(--sh-size-note); }

/* --- Movimento: uma gramatica so. Avanca no trilho e assenta. ----------- */
/* Estado padrao e visivel. A classe so entra por JS; sem JS nada some. */
.js .kit-advance { opacity: 0; transform: translate3d(-18px, 0, 0); }
.js .kit-advance.is-settled {
  opacity: 1; transform: none;
  transition: opacity var(--sh-dur-settle) var(--sh-ease-settle), transform var(--sh-dur-settle) var(--sh-ease-settle);
}
@media (prefers-reduced-motion: reduce) {
  .js .kit-advance { opacity: 1; transform: none; }
  .js .kit-advance.is-settled { transition: none; }
}

/* --- Correcao de transbordo: item de grid nao encolhe sozinho ------------ */
/* min-width:auto e o padrao e faz uma tabela larga esticar a coluna inteira. */
.kit-split > *, .kit-grid > *, .kit-spec > *, .kit-space-row > *,
.kit-bay > *, .kit-dock > *, .sh-table-wrap { min-width: 0; }
.kit-ramp div { min-width: 0; overflow: hidden; }
.sh-table-wrap, .kit-demo, .kit-usage, .kit-swatch { max-width: 100%; }
.kit-demo img { height: auto; }
.kit-demo pre { max-width: 100%; }

/* --- Ilha de tema: mesma peca nos dois temas, lado a lado --------------- */
.kit-island { background: var(--ground); color: var(--ink); padding: var(--sh-space-5); border-radius: var(--plate-radius); border: var(--sh-border-hairline) solid var(--line-marked); }
.kit-island > .sh-label { display: block; margin-bottom: var(--sh-space-4); }
.kit-island .sh-dock { margin-bottom: var(--sh-space-4); }

/* --- Caixa da area de protecao: largura definida, nao herdada do conteudo -- */
.kit-clearance { position: relative; width: 100%; max-width: 300px; margin-inline: auto; padding: 18.5%; outline: 1px dashed var(--line-strong); }
.kit-clearance__zone { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, var(--signal-wash) 0 6px, transparent 6px 12px); }
.kit-clearance svg { position: relative; width: 100%; height: auto; }

/* --- Diretorio recolhivel: no mobile a placa suspensa nao pode comer um
       quarto da tela. No desktop o resumo some e o diretorio fica sempre aberto. */
.kit-nav { border-top: var(--sh-border-hairline) solid var(--line-hairline); }
.kit-nav__toggle {
  display: flex; align-items: center; gap: var(--sh-space-3);
  min-height: 40px; padding-block: var(--sh-space-2);
  cursor: pointer; list-style: none;
  font-family: var(--sh-font-mono); font-variation-settings: "wdth" 75;
  font-size: var(--sh-size-micro); letter-spacing: var(--sh-tracking-label);
  text-transform: uppercase; color: var(--ink-tertiary);
}
.kit-nav__toggle::-webkit-details-marker { display: none; }
.kit-nav__toggle::after {
  content: ""; width: 8px; height: 8px; margin-left: auto; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--sh-dur-snap) var(--sh-ease-snap);
}
.kit-nav[open] > .kit-nav__toggle::after { transform: rotate(-135deg) translate(-2px, -2px); }
.kit-nav__toggle:hover { color: var(--ink); }
.kit-nav__here { color: var(--signal-ink); }
@media (min-width: 62rem) {
  .kit-nav { border-top: 0; }
  .kit-nav__toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kit-nav__toggle::after { transition: none; } }