@gyramais/gyra-design 0.2.58 → 0.2.60

package/dist/index.css

@@ -741,6 +741,9 @@ video {
 .max-w-full {
   max-width: 100%;
 }
+.flex-shrink {
+  flex-shrink: 1;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -6474,6 +6477,1274 @@ h6 {
   color: var(--status-danger-text, #c93430);
 }
 
+/* Guide: "Primeiros passos" e "Novidades" no rodape do menu lateral, mais o
+   bloco de lista curta (SiderList) e o corpo de escolha (GuideChoice).
+
+   Linhas do rodape (GuideLauncher, SiderList) copiam a opcao do Menubar
+   (src/components/Menubar/index.css) como o toolbox a usa no menu lateral:
+   raio 4, padding 6, icone 18, rotulo 12 semibold em #4F5762, hover e ativo
+   em --dark-button-color com texto --primary-button-color. O hex do texto e
+   o mesmo do Menubar: sem token equivalente, repetir aqui e o que mantem as
+   duas familias identicas sem mexer no Menubar global. Um tema pode trocar
+   esse texto por `--gyramais-guide-nav-text`.
+
+   Demais cores so por token: o componente acompanha o tema do app. Escala
+   da casa: 12 semibold nos itens do menu (como .menu-item-label do toolbox),
+   13 nos titulos de item, 11 em meta e contadores; espacamento em multiplos
+   de 2 e 4; raio 8 nos itens e 12 nos cartoes.
+
+   Armadilhas do index.css global:
+   - `* { outline: none !important }` e `*:focus { box-shadow: none !important }`
+     matam anel de foco desenhado no proprio elemento. O foco visivel aqui e
+     um ::after (o seletor universal nao casa com pseudo-elemento).
+   - `* { font-family: var(--font-sans) }` impede heranca de fonte: o Lexend
+     vai direto no elemento do titulo.
+   - h1..h6 e p nascem pretos, com `whitespace-pre-line` e tamanhos grandes:
+     todo titulo e paragrafo daqui zera cor, tamanho, peso e margem. */
+
+/* ---- Utilitarios ------------------------------------------------------- */
+
+.gyramais-guide-sr-only {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.gyramais-guide-num {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+.gyramais-guide-launcher:focus-visible::after,
+.gyramais-guide-icon-button:focus-visible::after,
+.gyramais-guide-text-button:focus-visible::after,
+.gyramais-guide-menu-item:focus-visible::after,
+.gyramais-guide-item:focus-visible::after,
+.gyramais-guide-news-item:focus-visible::after,
+.gyramais-guide-choice-option:focus-visible::after,
+.gyramais-sider-list-action:focus-visible::after,
+.gyramais-sider-list-collapsed-action:focus-visible::after,
+.gyramais-sider-list-item:focus-visible::after,
+.gyramais-sider-list-more:focus-visible::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: -2px;
+  border-radius: var(--radius-md);
+  border-width: 2px;
+  border-color: var(--color-border-focus);
+}
+.gyramais-guide-launcher:focus-visible::after,
+.gyramais-sider-list-item:focus-visible::after,
+.gyramais-sider-list-action:focus-visible::after,
+.gyramais-sider-list-collapsed-action:focus-visible::after,
+.gyramais-sider-list-more:focus-visible::after {
+  border-radius: 6px;
+}
+.gyramais-guide-choice-option:focus-visible::after {
+  inset: -3px;
+  border-radius: calc(var(--radius-lg) + 3px);
+}
+
+/* ---- GuideLauncher ----------------------------------------------------- */
+
+.gyramais-guide-launcher {
+  position: relative;
+  margin: 0px;
+  display: flex;
+  min-height: 30px;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 4px;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 6px;
+  text-align: left;
+  color: var(--gyramais-guide-nav-text,#4F5762);
+  transition:
+    background-color 300ms,
+    color 300ms;
+}
+.gyramais-guide-launcher:hover,
+.gyramais-guide-launcher.is-active {
+  background-color: var(--dark-button-color);
+  color: var(--primary-button-color);
+}
+.gyramais-guide-launcher.is-collapsed {
+  justify-content: center;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.gyramais-guide-launcher-icon {
+  position: relative;
+  display: flex;
+  height: 18px;
+  width: 18px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
+}
+.gyramais-guide-launcher-icon > svg {
+  height: 18px;
+  width: 18px;
+}
+
+.gyramais-guide-launcher-label {
+  min-width: 0px;
+  flex: 1 1 0%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1rem;
+}
+
+.gyramais-guide-launcher-progress {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1rem;
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+.gyramais-guide-launcher-progress.is-complete {
+  color: var(--gyra-blue);
+}
+
+.gyramais-guide-ring {
+  flex-shrink: 0;
+}
+/* 5/5: disco azul cheio com check, no lugar do anel fechado. */
+.gyramais-guide-ring-done circle {
+  fill: var(--gyra-blue);
+}
+.gyramais-guide-ring-done path {
+  fill: none;
+  stroke: var(--color-text-on-primary);
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.gyramais-guide-ring-track {
+  fill: none;
+  stroke: var(--color-border-primary);
+  stroke-width: 2;
+}
+.gyramais-guide-ring-value {
+  fill: none;
+  stroke: var(--gyra-blue);
+  stroke-width: 2;
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--duration-slow) var(--ease-default);
+}
+
+.gyramais-guide-launcher-count {
+  display: inline-flex;
+  height: 18px;
+  min-width: 18px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: var(--gyra-blue);
+  padding-left: 5px;
+  padding-right: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--color-text-on-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Recolhido: ponto de 6px preso ao canto do icone (o numero fica so no
+   Tooltip), com um aro na cor do menu para descolar do glifo. */
+.gyramais-guide-launcher-dot {
+  pointer-events: none;
+  position: absolute;
+  top: -2px;
+  right: -3px;
+  height: 6px;
+  width: 6px;
+  border-radius: 9999px;
+  background-color: var(--gyra-blue);
+  box-shadow: 0 0 0 2px var(--color-surface-sidebar);
+}
+
+/* ---- Cartao base (checklist e novidades) ------------------------------- */
+
+.gyramais-guide-card {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 0px;
+  flex-direction: column;
+  overflow: visible;
+  border-radius: var(--radius-lg);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-border-secondary);
+  background-color: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-dropdown);
+}
+
+.gyramais-guide-card-header {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.5rem;
+}
+.gyramais-guide-card-heading {
+  display: flex;
+  min-width: 0px;
+  flex-direction: column;
+  gap: 2px;
+}
+.gyramais-guide-news .gyramais-guide-card-header {
+  align-items: center;
+}
+.gyramais-guide-card-heading.is-inline {
+  min-height: 24px;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+.gyramais-guide-card-title {
+  margin: 0px;
+  white-space: normal;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.25rem;
+  color: var(--color-text-primary);
+  font-family: var(--font-display);
+  letter-spacing: var(--tracking-normal);
+}
+.gyramais-guide-card-subtitle {
+  margin: 0px;
+  white-space: normal;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1rem;
+  color: var(--color-text-secondary);
+}
+.gyramais-guide-card-actions {
+  margin-right: -0.25rem;
+  margin-top: -0.25rem;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+}
+.gyramais-guide-card-footer {
+  border-width: 0px;
+  border-top-width: 1px;
+  border-style: solid;
+  border-color: var(--color-border-subtle);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.gyramais-guide-icon-button {
+  position: relative;
+  margin: 0px;
+  display: inline-flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0px;
+  color: var(--color-text-secondary);
+  transition:
+    background-color var(--duration-fast) var(--ease-default),
+    color var(--duration-fast) var(--ease-default);
+}
+.gyramais-guide-icon-button:hover,
+.gyramais-guide-icon-button[aria-expanded="true"] {
+  background-color: var(--color-surface-active);
+  color: var(--color-text-primary);
+}
+.gyramais-guide-icon-button:focus-visible::after {
+  border-radius: var(--radius-sm);
+}
+
+.gyramais-guide-text-button {
+  position: relative;
+  margin: 0px;
+  margin-right: -0.25rem;
+  cursor: pointer;
+  white-space: nowrap;
+  border-radius: var(--radius-xs);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1rem;
+  color: var(--color-text-link);
+}
+.gyramais-guide-text-button:hover {
+  background-color: var(--gyra-blue-subtle);
+}
+.gyramais-guide-text-button:focus-visible::after {
+  border-radius: var(--radius-xs);
+}
+
+/* Gancho para quando o cartao mora dentro de um Popover do design system:
+   passe `className="gyramais-guide-popover"` no Popover. O conteudo do
+   Popover tem fundo, padding, largura fixa e sombra propria (com !important);
+   aqui ele vira so o posicionador e a sombra fica no cartao, uma vez so. */
+.gyramais-popover-content.gyramais-guide-popover {
+  width: auto;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0px;
+  --tw-shadow: 0 0 #0000 !important;
+  --tw-shadow-colored: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
+.gyramais-guide-popover .gyramais-guide-card {
+  box-shadow: var(--shadow-drawer);
+}
+
+/* Menu "Mais opcoes": inline no cartao, sem portal, para herdar o tema. */
+.gyramais-guide-menu {
+  position: relative;
+}
+.gyramais-guide-menu-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0px;
+  z-index: 10;
+  display: flex;
+  min-width: 180px;
+  flex-direction: column;
+  border-radius: var(--radius-md);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-border-secondary);
+  background-color: var(--color-surface-elevated);
+  padding: 0.25rem;
+  box-shadow: var(--shadow-drawer);
+  animation: gyramais-guide-fade-in var(--duration-fast) var(--ease-default);
+}
+.gyramais-guide-menu-item {
+  position: relative;
+  margin: 0px;
+  width: 100%;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1rem;
+  color: var(--color-text-primary);
+}
+.gyramais-guide-menu-item:hover,
+.gyramais-guide-menu-item:focus-visible {
+  background-color: var(--color-surface-active);
+}
+.gyramais-guide-menu-item:focus-visible::after {
+  inset: -0px;
+  border-radius: var(--radius-sm);
+}
+
+/* ---- GuideChecklist ---------------------------------------------------- */
+
+.gyramais-guide-progress-wrap {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.25rem;
+}
+.gyramais-guide-progress {
+  display: flex;
+  width: 100%;
+  gap: 0.25rem;
+}
+.gyramais-guide-progress-segment {
+  height: 0.25rem;
+  flex: 1 1 0%;
+  border-radius: 9999px;
+  background-color: var(--color-border-secondary);
+  transition: background-color var(--duration-slow) var(--ease-default);
+}
+.gyramais-guide-progress-segment.is-done {
+  background-color: var(--gyra-blue);
+}
+.gyramais-guide-progress-caption {
+  margin: 0px;
+  margin-top: 6px;
+  white-space: normal;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1rem;
+  color: var(--color-text-secondary);
+}
+
+.gyramais-guide-items {
+  margin: 0px;
+  display: flex;
+  list-style-type: none;
+  flex-direction: column;
+  gap: 1px;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 0.25rem;
+  padding-bottom: 6px;
+}
+.gyramais-guide-items > li {
+  margin: 0px;
+  padding: 0px;
+}
+
+.gyramais-guide-item {
+  position: relative;
+  margin: 0px;
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: flex-start;
+  gap: 10px;
+  border-radius: var(--radius-md);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  text-align: left;
+  color: var(--color-text-primary);
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+.gyramais-guide-item:hover {
+  background-color: var(--color-surface-active);
+}
+.gyramais-guide-item.is-next {
+  background-color: var(--gyra-blue-subtle);
+}
+.gyramais-guide-item.is-next:hover {
+  background-color: var(--gyra-blue-light);
+}
+
+/* Marcador: aro vazio, aro azul no proximo passo, disco azul com check no
+   concluido. 16px alinhado a primeira linha do titulo (18px). */
+.gyramais-guide-item-mark {
+  position: relative;
+  margin-top: 1px;
+  display: flex;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border-width: 1.5px;
+  border-style: solid;
+  border-color: var(--color-text-tertiary);
+  color: var(--color-text-tertiary);
+  transition:
+    background-color var(--duration-normal) var(--ease-default),
+    border-color var(--duration-normal) var(--ease-default);
+}
+.gyramais-guide-item.is-next .gyramais-guide-item-mark {
+  border-color: var(--gyra-blue);
+}
+.gyramais-guide-item.is-done .gyramais-guide-item-mark {
+  border-color: var(--gyra-blue);
+  background-color: var(--gyra-blue);
+}
+.gyramais-guide-item-mark:has(.gyramais-guide-item-icon) {
+  border-radius: 0px;
+  border-width: 0px;
+}
+.gyramais-guide-item-icon {
+  display: flex;
+  height: 1rem;
+  width: 1rem;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+}
+.gyramais-guide-item-icon > svg {
+  height: 1rem;
+  width: 1rem;
+}
+.gyramais-guide-item.is-next .gyramais-guide-item-icon {
+  color: var(--gyra-blue);
+}
+
+.gyramais-guide-check {
+  display: block;
+}
+.gyramais-guide-check path {
+  fill: none;
+  stroke: var(--color-text-on-primary);
+  stroke-width: 1.9;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.gyramais-guide-item-body {
+  display: flex;
+  min-width: 0px;
+  flex: 1 1 0%;
+  flex-direction: column;
+  gap: 2px;
+}
+.gyramais-guide-item-title {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--color-text-primary);
+}
+.gyramais-guide-item-description {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1rem;
+  color: var(--color-text-secondary);
+}
+
+/* Risco do concluido: gradiente de 1px em vez de text-decoration, para poder
+   animar da esquerda para a direita e acompanhar quebras de linha. */
+.gyramais-guide-item.is-done .gyramais-guide-item-title {
+  font-weight: 400;
+  color: var(--color-text-secondary);
+}
+.gyramais-guide-item.is-done .gyramais-guide-item-title-text {
+  background-image: linear-gradient(currentColor, currentColor);
+  background-repeat: no-repeat;
+  background-position: 0 55%;
+  background-size: 100% 1px;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.gyramais-guide-item-meta {
+  margin-top: 1px;
+  flex-shrink: 0;
+  font-size: 11px;
+  line-height: 1rem;
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.gyramais-guide-item-chevron {
+  margin-top: 2px;
+  margin-left: -0.25rem;
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+  opacity: 0;
+  transition:
+    opacity var(--duration-fast) var(--ease-default),
+    transform var(--duration-fast) var(--ease-default);
+}
+.gyramais-guide-item:hover .gyramais-guide-item-chevron,
+.gyramais-guide-item:focus-visible .gyramais-guide-item-chevron,
+.gyramais-guide-item.is-next .gyramais-guide-item-chevron {
+  opacity: 1;
+}
+.gyramais-guide-item.is-next .gyramais-guide-item-chevron {
+  color: var(--gyra-blue);
+}
+.gyramais-guide-item:hover .gyramais-guide-item-chevron {
+  transform: translateX(2px);
+}
+
+/* Acabou de concluir: disco cresce com mola, check se desenha, titulo risca. */
+.gyramais-guide-item.is-just-done .gyramais-guide-item-mark {
+  animation: gyramais-guide-pop 420ms var(--ease-spring);
+}
+.gyramais-guide-item.is-just-done .gyramais-guide-check path {
+  stroke-dasharray: 11;
+  animation: gyramais-guide-draw 260ms var(--ease-default) 120ms both;
+}
+.gyramais-guide-item.is-just-done .gyramais-guide-item-title-text {
+  animation: gyramais-guide-strike 320ms var(--ease-default) 220ms both;
+}
+
+.gyramais-guide-checklist-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-bottom: 6px;
+}
+.gyramais-guide-checklist-loading > .gyramais-guide-progress {
+  box-sizing: border-box;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+/* Mesma grade dos itens: 5 linhas de 30px com 1px entre elas, para o
+   cartao nao pular de altura quando os passos chegam. */
+.gyramais-guide-skeleton-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 0.25rem;
+}
+.gyramais-guide-skeleton-row {
+  display: flex;
+  height: 30px;
+  align-items: center;
+  gap: 10px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+/* ---- Estado vazio compartilhado ---------------------------------------- */
+
+.gyramais-guide-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1.25rem;
+  text-align: center;
+}
+.gyramais-guide-empty-icon {
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-border-subtle);
+  background-color: var(--color-surface-secondary);
+  color: var(--color-text-tertiary);
+}
+.gyramais-guide-empty-text {
+  margin: 0px;
+  white-space: normal;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1rem;
+  color: var(--color-text-secondary);
+}
+.gyramais-guide-empty .gyramais-guide-empty-text {
+  padding: 0px;
+}
+
+/* ---- GuideNewsList ----------------------------------------------------- */
+
+.gyramais-guide-news-items {
+  margin: 0px;
+  display: flex;
+  max-height: min(60vh, 420px);
+  list-style-type: none;
+  flex-direction: column;
+  gap: 1px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-bottom: 1rem;
+  /* O fim da lista esmaece nos ultimos 16px (a folga de baixo): quando ha
+     rolagem, sugere que tem mais; quando nao ha, so apaga o padding. */
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+.gyramais-guide-news-items:hover,
+.gyramais-guide-news-items:focus-within {
+  scrollbar-color: var(--color-border-primary) transparent;
+}
+.gyramais-guide-news-items::-webkit-scrollbar {
+  width: 6px;
+}
+.gyramais-guide-news-items::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-color: transparent;
+}
+.gyramais-guide-news-items:hover::-webkit-scrollbar-thumb {
+  background-color: var(--color-border-primary);
+}
+.gyramais-guide-news-items > li {
+  margin: 0px;
+  padding: 0px;
+}
+
+.gyramais-guide-news-item {
+  position: relative;
+  margin: 0px;
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  border-width: 0px;
+  background-color: transparent;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-right: 6px;
+  padding-left: 1.25rem;
+  text-align: left;
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+.gyramais-guide-news-item:hover {
+  background-color: var(--color-surface-active);
+}
+
+/* O ponto mora no titulo (e nao na linha), para ficar alinhado a ele mesmo
+   quando ha miniatura acima. A calha de 20px e fixa: lidas e nao lidas
+   comecam na mesma coluna. */
+.gyramais-guide-news-dot {
+  position: absolute;
+  left: -13px;
+  top: 6px;
+  height: 6px;
+  width: 6px;
+  border-radius: 9999px;
+  background-color: transparent;
+}
+.gyramais-guide-news-item.is-unread .gyramais-guide-news-dot {
+  background-color: var(--gyra-blue);
+}
+
+.gyramais-guide-news-body {
+  display: flex;
+  min-width: 0px;
+  flex: 1 1 0%;
+  flex-direction: column;
+  gap: 2px;
+}
+.gyramais-guide-news-media {
+  margin-bottom: 6px;
+  display: block;
+  aspect-ratio: 16/9;
+  max-height: 120px;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-border-subtle);
+  background-color: var(--color-surface-secondary);
+}
+.gyramais-guide-news-media > img,
+.gyramais-guide-news-media > video {
+  display: block;
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.gyramais-guide-news-title {
+  position: relative;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--color-text-primary);
+}
+.gyramais-guide-news-item.is-unread .gyramais-guide-news-title {
+  font-weight: 600;
+}
+.gyramais-guide-news-summary {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: 12px;
+  line-height: 1rem;
+  color: var(--color-text-secondary);
+}
+.gyramais-guide-news-date {
+  margin-top: 2px;
+  font-size: 11px;
+  line-height: 1rem;
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.gyramais-guide-news-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 0.25rem;
+  padding-bottom: 1rem;
+}
+.gyramais-guide-news-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* ---- GuideChoice ------------------------------------------------------- */
+
+.gyramais-guide-choice {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 1rem;
+  color: var(--color-text-primary);
+}
+.gyramais-guide-choice-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.gyramais-guide-choice-title {
+  margin: 0px;
+  white-space: normal;
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 22px;
+  color: var(--color-text-primary);
+  font-family: var(--font-display);
+  letter-spacing: var(--tracking-tight);
+}
+.gyramais-guide-choice-subtitle {
+  margin: 0px;
+  white-space: normal;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  color: var(--color-text-secondary);
+}
+
+.gyramais-guide-choice-options {
+  margin: 0px;
+  display: flex;
+  list-style-type: none;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0px;
+}
+.gyramais-guide-choice-options > li {
+  margin: 0px;
+  padding: 0px;
+}
+
+.gyramais-guide-choice-option {
+  position: relative;
+  margin: 0px;
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.75rem;
+  border-radius: var(--radius-lg);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-border-secondary);
+  background-color: var(--color-surface-primary);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  text-align: left;
+  transition:
+    border-color var(--duration-fast) var(--ease-default),
+    background-color var(--duration-fast) var(--ease-default);
+}
+.gyramais-guide-choice-option:hover {
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-secondary);
+}
+.gyramais-guide-choice-option:active {
+  background-color: var(--color-surface-active);
+}
+
+.gyramais-guide-choice-icon {
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  border-radius: var(--radius-md);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-border-subtle);
+  background-color: var(--color-surface-secondary);
+  font-size: 18px;
+  line-height: 1;
+  color: var(--color-text-secondary);
+}
+.gyramais-guide-choice-icon > svg {
+  height: 18px;
+  width: 18px;
+}
+.gyramais-guide-choice-option.is-recommended .gyramais-guide-choice-icon {
+  border-color: transparent;
+  background-color: var(--gyra-blue-light);
+  color: var(--gyra-blue);
+}
+
+.gyramais-guide-choice-body {
+  display: flex;
+  min-width: 0px;
+  flex: 1 1 0%;
+  flex-direction: column;
+  gap: 2px;
+}
+.gyramais-guide-choice-option-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+  row-gap: 0.25rem;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--color-text-primary);
+}
+.gyramais-guide-choice-badge {
+  display: inline-flex;
+  height: 18px;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: 9999px;
+  background-color: var(--gyra-blue-light);
+  padding-left: 6px;
+  padding-right: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--gyra-blue);
+}
+.gyramais-guide-choice-description {
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--color-text-secondary);
+}
+.gyramais-guide-choice-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-quaternary);
+  transition:
+    transform var(--duration-fast) var(--ease-default),
+    color var(--duration-fast) var(--ease-default);
+}
+.gyramais-guide-choice-option:hover .gyramais-guide-choice-chevron {
+  color: var(--color-text-secondary);
+  transform: translateX(2px);
+}
+
+/* ---- SiderList --------------------------------------------------------- */
+
+.gyramais-sider-list {
+  display: flex;
+  width: 100%;
+  min-width: 0px;
+  flex-direction: column;
+}
+.gyramais-sider-list.is-collapsed {
+  align-items: center;
+}
+
+.gyramais-sider-list-header {
+  margin-bottom: 2px;
+  display: flex;
+  height: 1.5rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding-left: 6px;
+  padding-right: 2px;
+}
+/* Mesmo rotulo de grupo do menu (.menu-group-label do toolbox). */
+.gyramais-sider-list-title {
+  margin: 0px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 1rem;
+  letter-spacing: 0.09em;
+  color: var(--color-text-secondary);
+}
+
+.gyramais-sider-list-action {
+  position: relative;
+  margin: 0px;
+  display: inline-flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  flex-shrink: 0;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0px;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--color-text-secondary);
+  transition:
+    background-color var(--duration-fast) var(--ease-default),
+    color var(--duration-fast) var(--ease-default);
+}
+.gyramais-sider-list-action > svg {
+  height: 14px;
+  width: 14px;
+}
+.gyramais-sider-list-action:hover {
+  background-color: var(--dark-button-color);
+  color: var(--primary-button-color);
+}
+
+
+.gyramais-sider-list-collapsed-action {
+  position: relative;
+  margin: 0px;
+  display: flex;
+  height: 30px;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 6px;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--gyramais-guide-nav-text,#4F5762);
+  transition:
+    background-color 300ms,
+    color 300ms;
+}
+.gyramais-sider-list-collapsed-action > svg {
+  height: 18px;
+  width: 18px;
+}
+.gyramais-sider-list-collapsed-action:hover {
+  background-color: var(--dark-button-color);
+  color: var(--primary-button-color);
+}
+
+.gyramais-sider-list-items {
+  margin: 0px;
+  display: flex;
+  list-style-type: none;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0px;
+}
+.gyramais-sider-list-items > li {
+  margin: 0px;
+  min-width: 0px;
+  padding: 0px;
+}
+.gyramais-sider-list-item {
+  position: relative;
+  margin: 0px;
+  display: flex;
+  min-height: 30px;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 4px;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 6px;
+  text-align: left;
+  color: var(--gyramais-guide-nav-text,#4F5762);
+  transition:
+    background-color 300ms,
+    color 300ms;
+}
+.gyramais-sider-list-item:hover,
+.gyramais-sider-list-item.is-active {
+  background-color: var(--dark-button-color);
+  color: var(--primary-button-color);
+}
+.gyramais-sider-list-item-icon {
+  display: flex;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 1;
+  color: currentColor;
+}
+.gyramais-sider-list-item-icon > svg {
+  height: 14px;
+  width: 14px;
+}
+.gyramais-sider-list-item-label {
+  min-width: 0px;
+  flex: 1 1 0%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1rem;
+}
+.gyramais-sider-list-item.is-active .gyramais-sider-list-item-label {
+  font-weight: 600;
+}
+
+.gyramais-sider-list-more {
+  position: relative;
+  margin: 0px;
+  margin-top: 0.25rem;
+  display: inline-flex;
+  height: 1.5rem;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.25rem;
+  align-self: flex-start;
+  border-radius: 4px;
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 6px;
+  padding-right: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1rem;
+  color: var(--color-text-secondary);
+  transition: color var(--duration-fast) var(--ease-default);
+}
+.gyramais-sider-list-more:hover {
+  color: var(--primary-button-color);
+}
+
+.gyramais-sider-list-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.gyramais-sider-list-skeleton {
+  display: flex;
+  height: 30px;
+  align-items: center;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.gyramais-sider-list-empty {
+  margin: 0px;
+  white-space: normal;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1rem;
+  color: var(--color-text-secondary);
+}
+
+/* ---- Movimento --------------------------------------------------------- */
+
+@keyframes gyramais-guide-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes gyramais-guide-pop {
+  0% {
+    transform: scale(0.6);
+  }
+  60% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes gyramais-guide-draw {
+  from {
+    stroke-dashoffset: 11;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes gyramais-guide-strike {
+  from {
+    background-size: 0 1px;
+  }
+  to {
+    background-size: 100% 1px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gyramais-guide-launcher,
+  .gyramais-guide-ring-value,
+  .gyramais-guide-progress-segment,
+  .gyramais-guide-item,
+  .gyramais-guide-item-mark,
+  .gyramais-guide-item-chevron,
+  .gyramais-guide-news-item,
+  .gyramais-guide-choice-option,
+  .gyramais-guide-choice-chevron,
+  .gyramais-sider-list-item {
+    transition: none;
+  }
+  .gyramais-guide-menu-list,
+  .gyramais-guide-item.is-just-done .gyramais-guide-item-mark,
+  .gyramais-guide-item.is-just-done .gyramais-guide-check path,
+  .gyramais-guide-item.is-just-done .gyramais-guide-item-title-text {
+    animation: none;
+  }
+  .gyramais-guide-item:hover .gyramais-guide-item-chevron,
+  .gyramais-guide-choice-option:hover .gyramais-guide-choice-chevron {
+    transform: none;
+  }
+}
+
 .gyramais-hover-card-trigger {
 
     display: block;