/* components.css — reusable chrome + UI components */

/* ============ ICON SIZING (TomiFont) ============ */
.tomi-icon { font-size: 24px; line-height: 1; }
.menu-module__icon .tomi-icon { font-size: 74px; }
.menu-mini .tomi-icon { font-size: 26px; }
.menu-pill .tomi-icon { font-size: 30px; }
.rail__item .tomi-icon { font-size: calc(50px * var(--ds-rail-scale)); }
.city-ind__icon, .city-ind__icon .tomi-icon { font-size: 24px; width: auto; height: auto; }
.topbar__weather .tomi-icon { font-size: 30px; }
.tab .tomi-icon, .chip .tomi-icon { font-size: 1.1em; }
.btn .tomi-icon { font-size: 1.15em; }
.icon-btn .tomi-icon { font-size: 24px; }
.search-launcher .tomi-icon { font-size: 24px; }
.state .tomi-icon { font-size: 60px; opacity: .5; }
.alertbar__chip .tomi-icon { font-size: 18px; }
.mode-tab .tomi-icon { font-size: 20px; }
.cat-tile .tomi-icon { font-size: 40px; }
.step__mode .tomi-icon { font-size: 22px; }

/* ============ TOP BAR (dark, measured from SVG) ============ */
.topbar { flex: 0 0 auto; background: #1c1c1c; color: #fff; display: flex; align-items: stretch; min-height: 175px; }
/* `align-items: flex-start` é obrigatório: sem ele o stretch estica o <img> a
   toda a largura da coluna e o SVG, que tem proporção fixa, encaixa-se AO CENTRO
   dessa caixa — o wordmark aparecia ~39px à direita do nome do local. */
.topbar__brand { display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 6px; padding: 0 26px; width: 366px; }
.topbar__logo { height: 41px; width: auto; filter: brightness(0) invert(1); }
/* Assinatura do produto. Fica DENTRO do bloco da marca e deliberadamente
   pequena: acompanha o TOMI e o nome do local sem lhes disputar escala.
   Antes ocupava uma coluna própria no meio do cabeçalho e roubava-lhes espaço. */
.topbar__sign { font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.5); line-height: 1; margin-top: 1px; }
.topbar__location { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 24px;
  color: #fff; line-height: 1.05; max-width: 220px; }
.topbar__partner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 176px; border-left: 1px solid #333; border-right: 1px solid #333; padding: 0 10px; text-align: center; }
.topbar__partner-name { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.topbar__partner-sub { font-size: 10px; color: #b9b9b9; letter-spacing: .16em; text-transform: uppercase; }
.topbar__partner-logos { font-size: 9px; color: #8a8a8a; }
.topbar__right { flex: 1; display: flex; flex-direction: column; }
.topbar__city { flex: 1; display: flex; align-items: center; gap: 18px; padding: 0 22px; cursor: pointer; }
.topbar__weather { display: flex; align-items: center; gap: 12px; padding-right: 18px; }
.topbar__weather .tomi-icon { color: var(--ds-accent); }
.topbar__temp { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 40px; line-height: 1; }
.topbar__indicators { display: flex; gap: 20px; flex: 1; }
.city-ind { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.city-ind__icon { font-size: 26px; margin-bottom: 2px; }
.city-ind__label { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; }
.city-ind__value { font-size: 12px; color: #cfcfcf; white-space: nowrap; }
.city-ind__note { font-size: 11px; color: #9a9a9a; white-space: nowrap; }
.topbar__datetime { text-align: right; padding-left: 18px; }
.topbar__date { font-size: 15px; color: #cfcfcf; }
.topbar__clock { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 44px; line-height: 1; }

/* ============ ALERT BAR (dark row, yellow chip only) ============ */
.alertbar { flex: 0 0 auto; height: 62px; background: #2a2a2a; border-top: 1px solid #3a3a3a;
  display: flex; align-items: center; gap: 14px; padding: 0 22px; overflow: hidden; }
.alertbar__chip { display: inline-flex; align-items: center; gap: 8px; background: var(--ds-accent);
  color: var(--ds-accent-ink); font-size: 16px; font-weight: var(--ds-fw-bold);
  padding: 8px 16px; border-radius: var(--ds-radius-pill); flex: 0 0 auto; }
.alertbar__track { flex: 1; overflow: hidden; white-space: nowrap; }
.alertbar__text { color: #fff; font-weight: var(--ds-fw-semibold); font-size: 20px; }
.alertbar__share { color: #fff; font-size: 24px; }

/* ============ CENTRAL MENU (Home) — sizes measured from HOME.svg (÷2) ============
   band h=629→314 · pills 152×388→76×194 r25 · help circle 112→56 · icons ~220→110 */
.central-menu { flex: 0 0 auto; background: var(--ds-menu-bg); min-height: 314px;
  display: flex; align-items: center; padding: 0 24px; gap: 12px; }
/* 3-circle cluster spans the same height as the vertical pills (194px), flush top/bottom */
/* height scales with the vertical pills so the circles always match their height */
.menu-circles { display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  height: calc(194px * var(--ds-home-pill-scale)); align-self: center; }
.menu-mini { width: calc(58px * var(--ds-home-pill-scale)); height: calc(58px * var(--ds-home-pill-scale)); border-radius: 50%; display: grid; place-items: center; }
.menu-mini--light { background: #fff; color: var(--ds-ink); }
.menu-mini--dark { background: #000; color: #fff; }
.menu-mini--trans { background: rgba(0,0,0,0.5); color: #fff; }
.menu-mini .tomi-icon { font-size: 28px; }
/* vertical pill: icon flush top, vertical label flush bottom (space-between). */
.menu-vpill { display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  border-radius: 26px; padding: 20px 12px; width: 76px; height: calc(194px * var(--ds-home-pill-scale)); align-self: center; }
/* 3 modos (togglable no admin): branco / preto / translúcido — ícone+palavra com contraste */
.menu-vpill--light { background: #fff; color: var(--ds-ink); }
.menu-vpill--trans { background: rgba(0,0,0,.38); color: #fff; }
/* SHOP: translucent dark (like the accessibility button) so it adapts to any menu bg colour */
.menu-vpill--dark { background: rgba(0,0,0,.5); color: #fff; }
.menu-vpill--black { background: #000; color: #fff; }
.menu-vpill__vlabel { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--ds-font-display);
  font-weight: var(--ds-fw-bold); font-size: 20px; text-transform: uppercase; letter-spacing: .08em; }
.menu-vpill .tomi-icon { font-size: 40px; }
.menu-modules { flex: 1; display: flex; align-items: center; justify-content: space-evenly; }
.menu-module { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; height: 194px; }
.menu-module__icon { color: var(--ds-menu-ink); line-height: 0; }
.menu-module__icon .tomi-icon { font-size: calc(128px * var(--ds-menu-scale)); }
.menu-module__label { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold);
  font-size: calc(28px * var(--ds-menu-scale)); text-transform: uppercase; color: var(--ds-menu-ink); line-height: 1; }
.menu-module__sub { font-size: 13px; color: var(--ds-menu-ink); opacity: .72; text-transform: uppercase; letter-spacing: .04em; line-height: 1.25; text-align: center; }

/* search launcher (floating pill) — vertical CENTER pinned to the line between the
   menu and the cards (bottom:0 of the menu wrapper + translateY(50%)), so it stays
   centred on that line at any scale. */
.search-launcher { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  display: inline-flex; align-items: center; gap: 14px; background: var(--ds-search-bg, #fff);
  color: var(--ds-search-ink, #000); font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold);
  font-size: calc(26px * var(--ds-search-scale));
  letter-spacing: .04em; text-transform: uppercase;
  padding: calc(18px * var(--ds-search-scale)) calc(40px * var(--ds-search-scale)); border-radius: var(--ds-radius-pill);
  box-shadow: var(--ds-shadow-float); z-index: var(--z-cards); white-space: nowrap; max-width: 92%; overflow: hidden; }
.search-launcher .tomi-icon { font-size: calc(30px * var(--ds-search-scale)); flex: 0 0 auto; }
.search-launcher__txt { overflow: hidden; text-overflow: ellipsis; }
/* blinking caret while the typewriter suggestion is animating */
.search-launcher__caret { display: inline-block; width: .06em; margin-left: 2px; background: currentColor;
  align-self: stretch; animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* ============ TOMI SHORTS — tira editorial + subscrição (topo dos módulos) ============ */
.shorts { display: flex; align-items: center; gap: 18px; padding: 12px 20px; flex: 0 0 auto;
  background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); }
.shorts__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.08; }
.shorts__title { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 32px; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shorts__brand { display: inline-flex; align-items: center; gap: 11px; height: 32px; line-height: 1; vertical-align: middle; }
.shorts__brand img { width: 98px; height: 30px; object-fit: contain; display: block; }
.shorts__name { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--ds-font-display); font-size: 32px; line-height: 32px; font-weight: var(--ds-fw-bold); letter-spacing: .01em; }
.shorts__separator, .shorts__variant { font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; }
.shorts__desc { font-size: 15px; color: var(--ds-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shorts__act { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
.shorts__cta { background: var(--ds-accent); color: var(--ds-on-accent); border: none; border-radius: 999px;
  padding: 11px 26px; font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 17px; cursor: pointer; }
.shorts__cta:hover { filter: brightness(.94); }
.shorts__hint { font-size: 12px; color: var(--ds-muted); }
.shorts__cta--done { background: var(--ds-surface-alt); color: var(--ds-ink); display: inline-flex; align-items: center; gap: 7px; }
.shorts__cta--done .tomi-icon { color: var(--ds-success); font-size: 18px; }

/* fluxo de subscrição (bottom sheet) */
.subs { display: flex; flex-direction: column; gap: 16px; }
.subs__brand { display: flex; align-items: center; gap: 12px; }
.subs__title { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 22px; }
.subs__q { font-weight: var(--ds-fw-bold); font-size: 17px; }
.subs__channels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.subs__ch { display: flex; align-items: center; gap: 10px; padding: 16px; border: 2px solid var(--ds-border); border-radius: 14px;
  background: #fff; font-weight: var(--ds-fw-semibold); font-size: 17px; cursor: pointer; }
.subs__ch.is-sel { border-color: var(--ds-accent); background: var(--ds-surface-soft); }
.subs__ch .tomi-icon { font-size: 24px; }
.subs__confirm { width: 100%; margin-top: 4px; }
.subs__confirm.is-loading { opacity: .85; }
.subs__err { color: var(--ds-error); font-size: 14px; margin-top: 6px; }
.subs__success { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 12px 0 4px; }
.subs__successIc { width: 62px; height: 62px; border-radius: 50%; background: var(--ds-success); color: #fff; display: grid; place-items: center; }
.subs__successIc .tomi-icon { font-size: 30px; }
.subs__successMsg { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 23px; line-height: 1.15; max-width: 26ch; }
.subs__qr { width: 168px; height: 168px; border-radius: 10px; background: repeating-conic-gradient(var(--ds-ink) 0 25%, #fff 0 50%) 0 0/20px 20px; }
.subs__manage { display: flex; gap: 12px; }
.subs__manage .btn { flex: 1; }

/* ============ HERO / VIDEO ============ */
.hero { position: relative; width: 100%; background: #222; overflow: hidden; flex: 0 0 auto; }
.hero img, .hero video { width: 100%; height: 100%; object-fit: cover; }
.hero__caption { position: absolute; left: 16px; bottom: 12px; color: #fff; font-size: var(--ds-fs-meta);
  text-shadow: 0 1px 6px rgba(0,0,0,.6); display: none; }

/* ============ HOME CARDS + floating QR remote ============ */
.home-cards { position: relative; }
.qr-float { position: absolute; right: 18px; top: 300px; width: 190px; z-index: var(--z-cards);
  background: #fff; border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-float);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.qr-float__head { display: flex; align-items: center; justify-content: space-between; }
.qr-float__head .tomi-icon { font-size: 22px; }
.qr-float__badge { width: 34px; height: 34px; border-radius: 50%; background: var(--ds-accent);
  color: var(--ds-accent-ink); display: grid; place-items: center; font-size: 18px; }
.qr-float__title { font-weight: var(--ds-fw-bold); font-size: 16px; line-height: 1.15; }
.qr-float__code { width: 100%; aspect-ratio: 1; background:
  repeating-conic-gradient(var(--ds-ink) 0 25%, #fff 0 50%) 0 0/18px 18px; border-radius: 8px; }
.qr-float__url { font-size: 12px; color: var(--ds-muted); text-align: center; }

/* ============ CARDS — news-card size measured from HOME.svg (÷2):
   card 1050×781→525×390 · media 374→187 · radius 23.45→12 · gap 15/26→8/13 · margin 20→10 ============ */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--ds-card-gap);
  row-gap: var(--ds-card-gap); padding: 14px var(--card-edge, 10px); }
/* listing grids (news / events) — column count is tunable in the admin for fast tests */
.card-grid[data-list] { grid-template-columns: repeat(var(--ds-grid-cols), 1fr); }
/* featured card (1st item) spans 2 columns for hierarchy/dynamism (toggle in admin) */
.card-grid .card--feat { grid-column: span 2; }
.card-grid .card--feat .card__title { font-size: calc(var(--ds-list-title) * 1.25); }
/* home cards grid — also tunable */
.card-grid[data-cardgrid] { grid-template-columns: repeat(var(--ds-home-cols), 1fr); }
.card { background: var(--ds-surface); border-radius: var(--ds-card-radius); overflow: hidden;
  box-shadow: var(--ds-shadow-card); display: flex; flex-direction: column; min-height: var(--card-h, 390px); }
.card__media { height: var(--card-media-h, 187px); background: var(--ds-surface-alt); overflow: hidden; flex: 0 0 auto; position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__title { font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-card); line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__date { font-size: var(--ds-fs-meta); color: var(--ds-muted); }
.card__tags { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
/* base semântico desligado / conteúdo explicitamente marcado como placeholder */
.card__media--ph { background: linear-gradient(135deg,#9a9a9a,#5f5f5f); }
.mixcard .card__body { gap: 8px; }
/* home date/distance size is controllable in the admin (bigger than module cards by default) */
.mixcard__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: var(--ds-home-meta); color: var(--ds-muted); }
.mixcard__meta .poi-walk, .mixcard__meta .mixcard__date { font-size: inherit; }
.mixcard__date { font-weight: var(--ds-fw-semibold); }
/* home cards (news/events via card()) date also uses the home meta size */
.home-cards .card__date, .home-cards .card .poi-walk { font-size: var(--ds-home-meta); }
/* tag row pinned to the bottom-left: black main category first, then grey sub-categories */
.home-tags { margin-top: auto; }
/* card title sizes are controllable separately for the home feed and the module listings */
.home-cards .card__title { font-size: var(--ds-home-title); }
.card-grid[data-list] .card__title { font-size: var(--ds-list-title); }

/* ============ CHIPS / TABS ============ */
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ds-surface-alt);
  color: var(--ds-ink); font-size: calc(var(--ds-fs-label) * var(--ds-pill-scale)); font-weight: var(--ds-fw-semibold);
  padding: calc(6px * var(--ds-pill-scale)) calc(12px * var(--ds-pill-scale)); border-radius: var(--ds-radius-pill); }
.chip--dark { background: var(--ds-black); color: var(--ds-white); }
.chip--accent { background: var(--ds-accent); color: var(--ds-accent-ink); font-weight: var(--ds-fw-bold); }
/* categoria nas listagens de notícias/eventos, carrossel e capa (nível 3): pill pequena e PRETA */
.card-grid[data-list] .card__tags .chip--accent, .ev-card .chip--accent, .cover__listrow .chip--accent {
  background: var(--ds-black); color: #fff; font-size: 12px; padding: 3px 9px; }
.card-grid[data-list] .card__tags .chip--accent .tomi-icon, .ev-card .chip--accent .tomi-icon, .cover__listrow .chip--accent .tomi-icon { font-size: 1em; }
.chip svg { width: 16px; height: 16px; }

.tabbar { display: flex; gap: 8px; padding: 12px var(--ds-margin); overflow-x: auto; }
.tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: var(--ds-surface);
  border: 1px solid var(--ds-border); color: var(--ds-ink); font-weight: var(--ds-fw-semibold);
  font-size: var(--ds-fs-label); padding: 10px 18px; border-radius: var(--ds-radius-pill); min-height: var(--ds-touch); }
.tab.is-active { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-accent-ink); }

/* ============ BUTTONS ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: calc(var(--ds-touch) * var(--ds-btn-scale)); padding: calc(12px * var(--ds-btn-scale)) calc(22px * var(--ds-btn-scale)); border-radius: var(--ds-radius-pill);
  font-weight: var(--ds-fw-bold); font-size: calc(var(--ds-fs-button) * var(--ds-btn-scale)); background: var(--ds-surface-alt); color: var(--ds-ink); }
.btn--accent { background: var(--ds-accent); color: var(--ds-accent-ink); }
.btn--dark { background: var(--ds-black); color: var(--ds-white); }
.btn--ghost { background: transparent; border: 1px solid var(--ds-border); }
.btn svg { width: 22px; height: 22px; }
.btn:disabled { opacity: .4; pointer-events: none; }
.icon-btn { width: calc(var(--ds-touch) * var(--ds-btn-scale)); height: calc(var(--ds-touch) * var(--ds-btn-scale)); border-radius: 50%; display: grid; place-items: center;
  background: var(--ds-surface-alt); }
.icon-btn svg { width: 24px; height: 24px; }

/* ============ SUBPAGE SHELL: compact dark header (info) + reduced video, then [rail | content] ============
   Measured from SVG: top band ~794→397px; info block ~733→366px wide; rail 268→134px. */
.mod-topband { flex: 0 0 auto; height: 398px; display: flex; }
.mod-info { width: 366px; flex: 0 0 auto; background: #1c1c1c; color: #fff;
  display: flex; flex-direction: column; }
.mod-info__top { display: flex; align-items: stretch; padding: 16px 18px 12px; gap: 12px; border-bottom: 1px solid #333; }
.mod-info .topbar__logo { height: 39px; filter: brightness(0) invert(1); }
.mod-info .topbar__location { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 22px; color: #fff; line-height: 1.03; max-width: 230px; }
.mod-info .topbar__sign { font-size: 12px; color: rgba(255,255,255,.45); }
.mod-info__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mod-info .topbar__partner { border: none; border-left: 1px solid #333; padding: 0 0 0 12px; align-items: flex-start; text-align: left; width: auto; }
.mod-info__datetime { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid #333; }
.mod-info__datetime .topbar__date { font-size: 18px; color: #cfcfcf; }
.mod-info__datetime .topbar__clock { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 40px; line-height: 1; }
.mod-info__weather { display: flex; align-items: center; gap: 14px; padding: 12px 18px; flex: 1; }
.mod-info__weather .topbar__temp { font-size: 30px; }
.mod-info__weather .topbar__indicators { gap: 12px; }
.mod-info__weather .city-ind__label { font-size: 11px; }
.mod-info__weather .city-ind__value, .mod-info__weather .city-ind__note { font-size: 10px; }
.mod-info__alert { height: 56px; background: #2a2a2a; border-top: 1px solid #3a3a3a; }
.mod-info__alert .alertbar__chip { padding: 6px; }
.mod-info__alert .alertbar__text { font-size: 16px; }
.mod-video { flex: 1 1 auto; overflow: hidden; background: #222; }
.mod-video video, .mod-video img { width: 100%; height: 100%; object-fit: cover; }

/* ============ MODULE SHELL: [rail | content] row ============ */
.module-lower { flex: 1 1 auto; display: flex; min-height: 0; }
.module-content { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }

/* ============ SIDE RAIL (modules) — BLACK, measured from SVG (rect x=1 w=268→134, fill black) ============ */
.rail { flex: 0 0 var(--ds-rail-w); align-self: stretch;
  background: var(--ds-rail-bg); z-index: var(--z-chrome);
  display: flex; flex-direction: column; align-items: center; padding: 20px 0 24px; gap: 18px; }
/* rail bg + icon ink are tokens; ink auto-contrasts (set by design-system.js). */
.rail__back { width: 84px; height: 84px; border-radius: 16px; background: var(--ds-accent); color: var(--ds-on-accent);
  display: grid; place-items: center; flex: 0 0 auto; }
.rail__back .tomi-icon { font-size: calc(46px * var(--ds-rail-scale)); }
.rail__items { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* inactive icons dimmed (gray / white-with-transparency); selected = full white ink */
.rail__item { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ds-rail-ink); opacity: .42; background: transparent; flex: 0 0 auto; }
.rail__item .tomi-icon { font-size: calc(50px * var(--ds-rail-scale)); }
.rail__item.is-active { opacity: 1; }
.rail__item--accent { background: var(--ds-accent); color: var(--ds-on-accent); opacity: 1; }
/* HOME button: icon + label (blends into rail; ink auto-contrasts) */
.rail__home { margin-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ds-rail-ink); flex: 0 0 auto; }
/* HOME icon scales like the rest of the rail icons */
.rail__home .tomi-icon { font-size: calc(50px * var(--ds-rail-scale)); }
.rail__home span { font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 13px; letter-spacing: .06em; }
/* vertical label of the selected module — larger for readability */
.rail__vlabel { margin-top: auto; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--ds-font-display); font-weight: var(--ds-fw-bold); font-size: 26px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ds-rail-ink); }
.rail__bottom { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 16px; }
.rail__mini { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.rail__mini--light { background: #fff; color: var(--ds-ink); }
/* accessibility: white icon inside a white-outlined transparent circle (per SVG ref) */
.rail__mini--info { background: transparent; border: 2px solid #fff; color: #fff; }
.rail__mini .tomi-icon { font-size: calc(34px * var(--ds-rail-scale)); }

/* ============ DRAWER / SHEET / MODAL ============ */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: var(--z-drawer);
  display: none; align-items: flex-end; }
.overlay.is-open { display: flex; }
.sheet { width: 100%; background: var(--ds-surface); border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
  padding: 22px var(--ds-margin) 28px; max-height: 78%; overflow-y: auto; box-shadow: var(--ds-shadow-float);
  transform: translateY(100%); transition: transform .28s ease; }
.overlay.is-open .sheet { transform: translateY(0); }
.sheet__handle { width: 56px; height: 5px; border-radius: 999px; background: var(--ds-border); margin: 0 auto 16px; }
.modal-center { align-items: center; justify-content: center; }
.modal-center .sheet { border-radius: var(--ds-radius-lg); max-width: 84%; transform: scale(.9); }
.overlay.is-open.modal-center .sheet { transform: scale(1); }

/* ============ STATES ============ */
.state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 60px 30px; text-align: center; color: var(--ds-muted); }
.state svg { width: 64px; height: 64px; opacity: .5; }
.spinner { width: 52px; height: 52px; border: 5px solid var(--ds-border); border-top-color: var(--ds-accent);
  border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ QR PANEL ============ */
.qr-panel { display: flex; gap: 16px; align-items: center; background: var(--ds-surface);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 16px; }
.qr-panel__code { width: 120px; height: 120px; background:
  repeating-conic-gradient(var(--ds-ink) 0 25%, #fff 0 50%) 0 0/16px 16px; border-radius: 8px; flex: 0 0 auto; }
.qr-panel__text { display: flex; flex-direction: column; gap: 4px; }

/* ---------- Fallback semântico de media ----------
   Componente HTML/CSS partilhado: a família cromática vem da categoria, o
   glifo TomiFont vem da subcategoria e as variações vêm do id. A composição é
   assumidamente gráfica: cor expressiva e ícone sobredimensionado, encostado a
   um canto e parcialmente fora da moldura. */
.kiosk [data-ph] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: hsl(var(--ph-h2, 230) var(--ph-s, 58%) var(--ph-l2, 28%));
  background-image:
    radial-gradient(ellipse 110% 96% at var(--ph-x, 76%) var(--ph-y, 18%),
      hsl(var(--ph-h4, 286) var(--ph-s2, 68%) var(--ph-l4, 64%) / .92) 0,
      hsl(var(--ph-h1, 222) var(--ph-s, 58%) var(--ph-l3, 44%) / .30) 43%,
      transparent 72%),
    radial-gradient(ellipse 96% 116% at var(--ph-x2, 20%) var(--ph-y2, 82%),
      hsl(var(--ph-h3, 186) var(--ph-s2, 68%) var(--ph-l1, 48%) / .78) 0,
      hsl(var(--ph-h2, 242) var(--ph-s, 58%) var(--ph-l2, 28%) / .16) 52%,
      transparent 80%),
    linear-gradient(var(--ph-angle, 0deg),
      hsl(var(--ph-h2, 242) var(--ph-s, 58%) var(--ph-l2, 28%)) 0%,
      hsl(var(--ph-h3, 186) var(--ph-s2, 68%) var(--ph-l3, 44%)) 32%,
      hsl(var(--ph-h1, 222) var(--ph-s, 58%) var(--ph-l1, 48%)) 68%,
      hsl(var(--ph-h4, 286) var(--ph-s2, 68%) var(--ph-l4, 64%)) 100%);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -34px 68px rgba(8, 12, 24, .12);
}
[data-ph]::before {
  content: "\e80e";
  position: absolute;
  z-index: 1;
  left: var(--ph-icon-left, -7%);
  top: var(--ph-icon-top, -16%);
  color: var(--ph-ink, rgba(5, 10, 16, .28));
  font-family: "TomiFont", sans-serif;
  font-size: clamp(118px, var(--ph-icon-size, 18vw), 270px);
  font-style: normal;
  line-height: .82;
  pointer-events: none;
  transform: translate(var(--ph-icon-shift-x, 0), var(--ph-icon-shift-y, 0)) rotate(var(--ph-turn, 0deg));
  transform-origin: center;
  filter: drop-shadow(0 14px 24px rgba(8, 12, 24, .18));
  text-shadow: 0 1px 0 rgba(255,255,255,.06);
}
[data-ph-corner="tl"] { --ph-icon-left: -7%; --ph-icon-top: -16%; --ph-icon-shift-x: 0; --ph-icon-shift-y: 0; }
[data-ph-corner="tr"] { --ph-icon-left: 107%; --ph-icon-top: -16%; --ph-icon-shift-x: -100%; --ph-icon-shift-y: 0; }
[data-ph-corner="bl"] { --ph-icon-left: -7%; --ph-icon-top: 116%; --ph-icon-shift-x: 0; --ph-icon-shift-y: -100%; }
[data-ph-corner="br"] { --ph-icon-left: 107%; --ph-icon-top: 116%; --ph-icon-shift-x: -100%; --ph-icon-shift-y: -100%; }
.kiosk [data-ph] > * { z-index: 2; }

/* glifo específico da subcategoria; todos pertencem ao TomiFont oficial */
[data-ph-icon="directory"]::before { content: "\e80e"; }
[data-ph-icon="news"]::before { content: "\e81f"; }
[data-ph-icon="restaurant"]::before { content: "\e811"; }
[data-ph-icon="coffee"]::before { content: "\e9a2"; }
[data-ph-icon="bakery"]::before { content: "\ea18"; }
[data-ph-icon="pastry"]::before { content: "\e9a3"; }
[data-ph-icon="fastfood"]::before { content: "\e999"; }
[data-ph-icon="pizza"]::before { content: "\e9d7"; }
[data-ph-icon="sushi"]::before { content: "\e9e6"; }
[data-ph-icon="vegetarian"]::before { content: "\e9f4"; }
[data-ph-icon="seafood"]::before { content: "\e9ad"; }
[data-ph-icon="icecream"]::before { content: "\e9b9"; }
[data-ph-icon="bar"]::before { content: "\e810"; }
[data-ph-icon="nightlife"]::before { content: "\e9a5"; }
[data-ph-icon="hotel"]::before { content: "\e98e"; }
[data-ph-icon="hostel"]::before { content: "\e9b5"; }
[data-ph-icon="motel"]::before { content: "\e9c6"; }
[data-ph-icon="ruralstay"]::before { content: "\e9f2"; }
[data-ph-icon="museum"]::before { content: "\e81d"; }
[data-ph-icon="cinema"]::before { content: "\e9a0"; }
[data-ph-icon="theatre"]::before { content: "\e624"; }
[data-ph-icon="music"]::before { content: "\e9c7"; }
[data-ph-icon="festival"]::before { content: "\e9cf"; }
[data-ph-icon="beach"]::before { content: "\e98d"; }
[data-ph-icon="park"]::before { content: "\e9f1"; }
[data-ph-icon="viewpoint"]::before { content: "\e9d6"; }
[data-ph-icon="monument"]::before { content: "\e996"; }
[data-ph-icon="education"]::before { content: "\e850"; }
[data-ph-icon="library"]::before { content: "\e991"; }
[data-ph-icon="hospital"]::before { content: "\e9b4"; }
[data-ph-icon="pharmacy"]::before { content: "\e9b3"; }
[data-ph-icon="doctor"]::before { content: "\e9e3"; }
[data-ph-icon="dental"]::before { content: "\e9ef"; }
[data-ph-icon="wellness"]::before { content: "\e9bf"; }
[data-ph-icon="massage"]::before { content: "\e9c1"; }
[data-ph-icon="supermarket"]::before { content: "\e9df"; }
[data-ph-icon="market"]::before { content: "\ea77"; }
[data-ph-icon="fashion"]::before { content: "\e9de"; }
[data-ph-icon="business"]::before { content: "\e806"; }
[data-ph-icon="parking"]::before { content: "\e9ce"; }
[data-ph-icon="taxi"]::before { content: "\e9e9"; }
[data-ph-icon="train"]::before { content: "\e9f5"; }
[data-ph-icon="metro"]::before { content: "\e9c2"; }
[data-ph-icon="fuel"]::before { content: "\e9af"; }
[data-ph-icon="police"]::before { content: "\e82d"; }
[data-ph-icon="fire"]::before { content: "\e9ab"; }
[data-ph-icon="swimming"]::before { content: "\e912"; }
[data-ph-icon="gym"]::before { content: "\e9f6"; }
[data-ph-icon="sport"]::before { content: "\e9e0"; }
[data-ph-icon="newspaper"]::before { content: "\e9c8"; }
[data-ph-icon="events"]::before { content: "\e813"; }
[data-ph-icon="publicservice"]::before { content: "\e9be"; }
[data-ph-icon="signpost"]::before { content: "\ea50"; }
[data-ph-icon="bus"]::before { content: "\e836"; }
[data-ph-icon="palette"]::before { content: "\e989"; }
[data-ph-icon="shop"]::before { content: "\e82e"; }
[data-ph-icon="health"]::before { content: "\e9b3"; }