/* Superfícies de demonstração (spec 14, D24, 20 set 2026): os quatro módulos
   de 12 set com os componentes e tokens actuais do design system V2.0:
   balões da conversa, chips de escolha, tipografia e cores por variável.
   Carrega depois de restaurant.css, running.css, recipe.css e television.css
   e só sobrepõe o que era pixel a pixel. */
.demo-surface { --demo-balao-pessoa: var(--io-turq-100); --demo-balao-iollo: var(--io-surface); }
.demo-surface .area-scroll { padding: var(--io-space-3) var(--io-space-4) var(--io-space-5); }

/* Mensagem da pessoa: balão à direita, como na conversa. */
.demo-surface .restaurant-answer, .demo-surface .television-answer, .demo-surface .running-answer, .demo-surface .recipe-answer {
  width: fit-content; max-width: 85%; margin: var(--io-space-3) 0 var(--io-space-3) auto; padding: var(--io-space-2) var(--io-space-4);
  border-radius: var(--io-radius-lg) var(--io-radius-lg) var(--io-radius-sm) var(--io-radius-lg); background: var(--demo-balao-pessoa); color: var(--io-text);
  font-size: var(--io-type-md); line-height: var(--io-leading-body); letter-spacing: var(--io-tracking-tight);
}
/* Mensagem do Iollo: personagem e balão com sombra de cartão (como .fazer-balao). */
.demo-surface .restaurant-message, .demo-surface .television-message, .demo-surface .running-message, .demo-surface .recipe-message { grid-template-columns: var(--io-icon-xl) minmax(0, 1fr); gap: var(--io-space-3); margin: var(--io-space-3) 0 var(--io-space-2); }
.demo-surface .restaurant-mascot, .demo-surface .television-mascot, .demo-surface .running-mascot, .demo-surface .recipe-mascot { width: var(--io-icon-xl); height: var(--io-icon-xl); }
.demo-surface .restaurant-message > p, .demo-surface .television-message > p, .demo-surface .running-message > p, .demo-surface .recipe-message > p, .demo-surface .television-reason p, .demo-surface .recipe-reason p {
  border: 0; border-radius: var(--io-radius-sm) var(--io-radius-lg) var(--io-radius-lg) var(--io-radius-lg); padding: var(--io-space-3) var(--io-space-4);
  background: var(--demo-balao-iollo); box-shadow: var(--io-shadow-card); color: var(--io-text); font-size: var(--io-type-md); line-height: var(--io-leading-body); letter-spacing: var(--io-tracking-tight);
}
/* Escolhas: chips como os do ecrã de tarefa (.fazer-chip). */
.demo-surface .restaurant-choices, .demo-surface .television-choices, .demo-surface .running-choices, .demo-surface .recipe-choices { gap: var(--io-space-2); margin: var(--io-space-2) 0 var(--io-space-3) calc(var(--io-icon-xl) + var(--io-space-3)); }
.demo-surface .restaurant-choices button, .demo-surface .television-choices button, .demo-surface .running-choices button, .demo-surface .recipe-choices button {
  min-height: var(--io-tap); padding: var(--io-space-1) var(--io-space-4); border: var(--io-stroke-hairline) solid var(--io-border-control); border-radius: var(--io-radius-pill);
  background: var(--io-surface); color: var(--io-text); font: inherit; font-size: var(--io-type-sm); line-height: var(--io-leading-body);
}
.demo-surface .restaurant-choices button[aria-pressed="true"], .demo-surface .television-choices button[aria-pressed="true"], .demo-surface .running-choices button[aria-pressed="true"], .demo-surface .recipe-choices button[aria-pressed="true"] { border-color: var(--io-turq-500); background: var(--io-turq-100); font-weight: var(--io-weight-heading); }
.demo-surface .restaurant-choices button:focus-visible, .demo-surface .television-choices button:focus-visible, .demo-surface .running-choices button:focus-visible, .demo-surface .recipe-choices button:focus-visible { outline: var(--io-stroke-focus) solid var(--io-border-focus); outline-offset: var(--io-space-1); }
/* Avisos e cartão do parceiro. */
.demo-surface .restaurant-notice, .demo-surface .television-notice, .demo-surface .running-notice, .demo-surface .recipe-notice { font-size: var(--io-type-sm); line-height: var(--io-leading-body); padding: var(--io-space-2) var(--io-space-3); border-radius: var(--io-radius-md); background: var(--fazer-destaque, var(--io-turq-100)); color: var(--io-text); }
.demo-surface .restaurant-partner, .demo-surface .television-partner, .demo-surface .running-partner, .demo-surface .recipe-partner { margin: var(--io-space-3) 0 0; padding: var(--io-space-4); border: var(--io-stroke-hairline) solid var(--io-border); border-radius: var(--io-radius-lg); background: var(--io-surface); box-shadow: var(--io-shadow-card); }
.demo-surface .restaurant-eyebrow, .demo-surface .television-eyebrow, .demo-surface .running-eyebrow, .demo-surface .recipe-eyebrow { font-size: var(--io-type-xs); letter-spacing: var(--io-tracking-wide, .06em); color: var(--io-gold-700); }
.demo-surface .restaurant-partner h2, .demo-surface .television-partner h2, .demo-surface .running-partner h2, .demo-surface .recipe-partner h2 { font-size: var(--io-type-xl); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); font-weight: var(--io-weight-heading); }
.demo-surface .restaurant-result-copy h3, .demo-surface .television-result-copy h3, .demo-surface .running-result-copy h3, .demo-surface .recipe-item h3 { font-size: var(--io-type-md); font-weight: var(--io-weight-heading); }
.demo-surface .restaurant-result-copy > p, .demo-surface .television-result-copy > p, .demo-surface .running-result-copy > p, .demo-surface .recipe-item-name p, .demo-surface .restaurant-disclosure, .demo-surface .television-disclosure, .demo-surface .running-disclosure, .demo-surface .recipe-disclosure, .demo-surface .television-summary { font-size: var(--io-type-sm); line-height: var(--io-leading-body); color: var(--io-text-secondary); }
.demo-surface .television-price, .demo-surface .running-price, .demo-surface .recipe-line-price { font-size: var(--io-type-md); font-weight: var(--io-weight-heading); }
.demo-surface .restaurant-reserve, .demo-surface .television-product-action, .demo-surface .running-product-action { font-size: var(--io-type-sm); font-weight: var(--io-weight-heading); border-radius: var(--io-radius-md); }
.demo-surface .restaurant-actions button, .demo-surface .television-actions button, .demo-surface .running-actions button, .demo-surface .recipe-actions button { min-height: var(--io-tap); border: var(--io-stroke-hairline) solid var(--io-border-control); border-radius: var(--io-radius-md); background: var(--io-surface); color: var(--io-text); font: inherit; font-size: var(--io-type-sm); font-weight: var(--io-weight-heading); }
.demo-surface .restaurant-actions .primary, .demo-surface .television-actions .primary, .demo-surface .running-actions .primary, .demo-surface .recipe-actions .primary { background: var(--io-action-brand); border-color: var(--io-action-brand); color: var(--io-action-brand-text); }
.demo-surface .restaurant-text-button, .demo-surface .television-tools button, .demo-surface .running-text-button, .demo-surface .recipe-tools button { font-size: var(--io-type-sm); color: var(--io-turq-700); text-decoration: none; }
.demo-surface .restaurant-empty > p:not(.restaurant-eyebrow), .demo-surface .television-empty > p:not(.television-eyebrow), .demo-surface .running-empty > p:not(.running-eyebrow), .demo-surface .recipe-unavailable > p { font-size: var(--io-type-md); line-height: var(--io-leading-body); }