/* ===== 03-soham ===== */
    /* Fundo exclusivo do INSIDER//11. O veu de 28% mantem o texto do palco legivel sobre a
       fotografia; sem ele o contraste cai onde a agua e clara. */
    #sessionStage[data-so-ham-visual="true"] {
      background-color: #07130d;
      background-image: url("/assets/images/so-ham-waterfalls.webp");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    #sessionStage[data-so-ham-visual="true"]::before {
      z-index: 1;
      background: rgba(0, 0, 0, .28);
      opacity: 1;
    }

/* ===== 04-om ===== */
    /* O emblema pendura no mesmo grupo dos arcos e le a mesma escala publicada pelo clock.
       --emblem-gain so alarga o curso, para o aproximar e afastar dominar a tela sem sair do
       relogio. A mascara come os cantos e esfuma a borda, entao a arte de fundo preto assenta
       tanto no tema escuro quanto no claro - blend de screen sumiria no branco do CLEAN. */
    .meditation-emblem {
      position: absolute;
      width: min(34vh, 42vw, 280px);
      aspect-ratio: 1;
      object-fit: contain;
      transform: scale(calc(var(--breath-ring-scale, .81) * var(--emblem-gain, 1.25)));
      transition: transform var(--breath-ring-dur, .09s) linear, opacity .6s ease;
      -webkit-mask-image: radial-gradient(circle closest-side, #000 94%, transparent 100%);
      mask-image: radial-gradient(circle closest-side, #000 94%, transparent 100%);
      filter: drop-shadow(0 0 46px color-mix(in srgb, var(--phase-color) 22%, transparent));
    }
    .session-stage:not([data-emblem="on"]) .meditation-emblem { display: none; }
    @media (max-width: 560px) {
      .meditation-emblem { width: min(33vh, 52vw); }
    }

    /* Palco liberado: fase acima, leitura abaixo, centro livre para a arte. Contido pelo
       data-clear-session-visual, que so o OM//12 liga.

       OS TEXTOS SE PENDURAM NO ARCO EXTERNO, e nao nas bordas da tela. Ancorar no topo e no
       rodape do palco funcionava no desktop e afastava demais no celular em pe, onde a tela e
       alta e o arco e estreito. Aqui a posicao sai do RAIO do arco:

         --om-orbita  o mesmo min() da .meditation-orbit-outer
         --om-raio    metade dela, multiplicada pela MESMA --breath-ring-scale que o arco usa
         --om-folga   o respiro entre a borda do arco e o texto

       Como a posicao entra por transform - e nao por grid-template-rows -, ela herda a mesma
       transicao dos arcos e o texto ACOMPANHA a expansao e a retracao, em vez de saltar. Custom
       property nao interpola sozinha; transform interpola. Por isso translate, e nao grid.

       --om-contagem-fonte existe para o ciclo saber onde a contagem termina: os dois sao
       absolutos e nao empilham sozinhos, entao o de baixo desce a altura declarada do de cima.
       A fonte e declarada uma vez e usada nos dois lugares - nao ha duas verdades. */
    #sessionStage[data-clear-session-visual="true"] {
      --om-orbita: min(64vh, 76vw, 520px);
      --om-raio: calc(var(--om-orbita) / 2 * var(--breath-ring-scale, .81));
      --om-folga: clamp(10px, 2vh, 22px);
      --om-contagem-fonte: clamp(1.9rem, 4.6vh, 2.9rem);
    }
    #sessionStage[data-clear-session-visual="true"] .session-focus {
      position: absolute;
      inset: 0;
      width: 100%;
      padding: 0;
      display: block;
      pointer-events: none;
    }
    #sessionStage[data-clear-session-visual="true"] #phaseKicker,
    #sessionStage[data-clear-session-visual="true"] #sessionTip {
      display: none !important;
    }
    #sessionStage[data-clear-session-visual="true"] #phaseName,
    #sessionStage[data-clear-session-visual="true"] #phaseCount,
    #sessionStage[data-clear-session-visual="true"] #cycleReadout {
      position: absolute;
      left: 50%;
      top: 50%;
      margin: 0 !important;
      white-space: nowrap;
      transition: transform var(--breath-ring-dur, .09s) linear;
    }
    #sessionStage[data-clear-session-visual="true"] #phaseName {
      transform: translate(-50%, calc(-100% - var(--om-raio) - var(--om-folga)));
      font-size: clamp(2.5rem, min(7vw, 9vh), 5rem) !important;
      line-height: .82;
    }
    #sessionStage[data-clear-session-visual="true"] #phaseCount {
      transform: translate(-50%, calc(var(--om-raio) + var(--om-folga)));
      font-size: var(--om-contagem-fonte) !important;
      line-height: 1;
    }
    #sessionStage[data-clear-session-visual="true"] #cycleReadout {
      transform: translate(-50%, calc(var(--om-raio) + var(--om-folga) + var(--om-contagem-fonte) + 8px));
    }
    #sessionModal[data-clear-session-visual="true"] .session-bottom-row {
      justify-content: flex-end;
    }
    /* Abaixo de 620px o arco externo muda de tamanho; o raio tem de mudar junto, ou o texto
       descola dele exatamente no caso que motivou esta mudanca. */
    @media (max-width: 620px) {
      #sessionStage[data-clear-session-visual="true"] { --om-orbita: min(58vh, 92vw); }
    }
    @media (max-width: 560px) {
      #sessionStage[data-clear-session-visual="true"] #phaseName {
        font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
      }
    }
    @media (max-height: 767px) {
      #sessionStage[data-clear-session-visual="true"] {
        --om-folga: clamp(8px, 1.4vh, 14px);
        --om-contagem-fonte: clamp(1.6rem, 4vh, 2.4rem);
      }
      #sessionStage[data-clear-session-visual="true"] #phaseName {
        font-size: clamp(2.15rem, min(6vw, 7vh), 3.5rem) !important;
      }
    }

    /* Fundo do OM//12, por orientacao. Mesmos arquivos ja publicados e declarados. */
    #sessionStage[data-clear-session-visual="true"] {
      background-color: #020202;
      background-image: url("/assets/images/om-background-landscape.webp");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    @media (orientation: portrait) {
      #sessionStage[data-clear-session-visual="true"] {
        background-image: url("/assets/images/om-background-portrait.webp");
      }
    }

/* ===== 05-dock ===== */
    #pwaDock {
      position: fixed;
      left: max(12px, env(safe-area-inset-left));
      bottom: calc(12px + env(safe-area-inset-bottom));
      z-index: 2147483000;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: "Cascadia Code", "IBM Plex Mono", Consolas, ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: .04em;
      pointer-events: none;
    }
    #pwaDock > * { pointer-events: auto; }
    #gameSyncStatus {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(0, 217, 255, .28);
      background: rgba(5, 7, 10, .82);
      color: #cfe9f2;
      backdrop-filter: blur(6px);
      transition: opacity .25s ease;
    }
    #gameSyncStatus::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #b7ff3c;
      box-shadow: 0 0 6px currentColor;
      color: #b7ff3c;
    }
    #gameSyncStatus[data-state="synced"] { opacity: .55; }
    #gameSyncStatus[data-state="idle"] { opacity: .7; }
    #gameSyncStatus[data-state="idle"]::before { background: #8c98a5; color: #8c98a5; box-shadow: none; }
    #gameSyncStatus[data-state="pending"]::before { background: #ffcf7a; color: #ffcf7a; }
    #gameSyncStatus[data-state="syncing"]::before { background: #00d9ff; color: #00d9ff; animation: pwaPulso 1.1s ease-in-out infinite; }
    #gameSyncStatus[data-state="error"]::before   { background: #ff6b6b; color: #ff6b6b; }
    @keyframes pwaPulso { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
    @media (prefers-reduced-motion: reduce) {
      #gameSyncStatus[data-state="syncing"]::before { animation: none; }
    }

    /* Movimento reduzido intencional: a respiração continua legível por texto, cor e
       estado, sem expansão contínua. Feedbacks breves de opacidade/cor permanecem. */
    .reduced-motion { scroll-behavior: auto; }
    .reduced-motion .ticker-track,
    .reduced-motion .hero-proof::before,
    .reduced-motion .telemetry-wave i,
    .reduced-motion .demo-visual::before,
    .reduced-motion .breath-core,
    .reduced-motion #gameSyncStatus[data-state="syncing"]::before {
      animation: none;
    }
    .reduced-motion .app-view.active {
      animation: reduced-view-in .14s linear both;
    }
    .reduced-motion .btn,
    .reduced-motion .protocol-card {
      transition: background .12s linear, border-color .12s linear, color .12s linear;
    }
    .reduced-motion .btn:hover,
    .reduced-motion .protocol-card:hover { transform: none; }
    .reduced-motion .toggle::after { transition: background .12s linear; }
    .reduced-motion .toast {
      transform: none;
      transition: opacity .14s linear;
    }
    .reduced-motion .session-stage::after {
      transform: scaleX(.7);
      transition: opacity .12s linear;
    }
    .reduced-motion .lane i {
      transform: none;
      transition: opacity .12s linear;
    }
    .reduced-motion .meditation-emblem,
    .reduced-motion .meditation-orbit,
    .reduced-motion .meditation-core,
    .reduced-motion .breath-orb i,
    .reduced-motion .breath-column i::before,
    .reduced-motion #sessionStage[data-clear-session-visual="true"] #phaseName,
    .reduced-motion #sessionStage[data-clear-session-visual="true"] #phaseCount,
    .reduced-motion #sessionStage[data-clear-session-visual="true"] #cycleReadout {
      transition-property: opacity, color, border-color, background;
      transition-duration: .12s;
      transition-timing-function: linear;
    }
    @keyframes reduced-view-in { from { opacity: .72; } }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .ticker-track,
      .hero-proof::before,
      .telemetry-wave i,
      .demo-visual::before,
      .breath-core,
      #gameSyncStatus[data-state="syncing"]::before { animation: none; }
      .app-view.active { animation: reduced-view-in .14s linear both; }
      .btn,
      .protocol-card { transition: background .12s linear, border-color .12s linear, color .12s linear; }
      .btn:hover,
      .protocol-card:hover { transform: none; }
      .toggle::after { transition: background .12s linear; }
      .toast { transform: none; transition: opacity .14s linear; }
      .session-stage::after { transform: scaleX(.7); transition: opacity .12s linear; }
      .lane i { transform: none; transition: opacity .12s linear; }
      .meditation-emblem,
      .meditation-orbit,
      .meditation-core,
      .breath-orb i,
      .breath-column i::before,
      #sessionStage[data-clear-session-visual="true"] #phaseName,
      #sessionStage[data-clear-session-visual="true"] #phaseCount,
      #sessionStage[data-clear-session-visual="true"] #cycleReadout {
        transition-property: opacity, color, border-color, background;
        transition-duration: .12s;
        transition-timing-function: linear;
      }
    }
    #pwaRede {
      display: none;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 207, 122, .35);
      background: rgba(5, 7, 10, .82);
      color: #ffcf7a;
      backdrop-filter: blur(6px);
    }
    :root[data-rede="offline"] #pwaRede { display: inline-flex; }
    #pwaInstalar {
      display: none;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(183, 255, 60, .45);
      background: rgba(183, 255, 60, .12);
      color: #b7ff3c;
      font: inherit;
      cursor: pointer;
    }
    #pwaInstalar[data-visivel="sim"] { display: inline-flex; }
    #pwaInstalar:hover { background: rgba(183, 255, 60, .2); }
    #pwaAjuda {
      position: fixed;
      inset: auto 12px calc(64px + env(safe-area-inset-bottom)) 12px;
      max-width: 420px;
      z-index: 2147483000;
      display: none;
      flex-direction: column;
      gap: 10px;
      padding: 16px;
      border-radius: 14px;
      border: 1px solid rgba(0, 217, 255, .3);
      background: rgba(5, 7, 10, .96);
      color: #e6edf3;
      font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
      font-size: 14px;
      line-height: 1.5;
      backdrop-filter: blur(10px);
    }
    #pwaAjuda[data-aberto="sim"] { display: flex; }
    #pwaAjuda button {
      align-self: flex-start;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0, 217, 255, .35);
      background: transparent;
      color: #00d9ff;
      font: inherit;
      cursor: pointer;
    }
    :root[data-theme="clean"] #gameSyncStatus,
    :root[data-theme="clean"] #pwaRede { background: rgba(242, 244, 247, .9); color: #1d2430; }
    :root[data-theme="clean"] #pwaAjuda { background: rgba(242, 244, 247, .98); color: #1d2430; }
    @media (display-mode: standalone) { #pwaInstalar { display: none !important; } }
    @media print { #pwaDock, #pwaAjuda { display: none !important; } }

/* ===== 06-adaptacao ===== */
    @media (max-width: 820px), (pointer: coarse) {
      .brand { min-height: 44px; }
      .theme-switch button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding-inline: 8px !important;
      }
      .btn-small,
      .icon-btn,
      .rhythm-reset,
      #pwaInstalar,
      #pwaAjuda button { min-height: 44px; }
      .icon-btn { min-width: 44px; }
      .rhythm-step,
      .stepper .rhythm-step {
        width: 44px;
        height: 44px;
      }
      .rhythm-phase-row {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        gap: 6px;
      }
    }

    @media (max-width: 560px) {
      #pwaDock {
        right: max(12px, env(safe-area-inset-right));
        max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
        flex-wrap: wrap;
      }
      .session-bottom {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
      }
      #pauseSession {
        align-self: stretch;
        width: 100%;
        min-height: 44px;
      }
    }

/* ===== 07-onboarding ===== */
    .activation-progress {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 0 0 24px;
      padding: 0;
      list-style: none;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: .58rem;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .activation-progress li {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      padding-bottom: 9px;
      border-bottom: 1px solid var(--line);
    }
    .activation-progress li[aria-current="step"] {
      color: var(--text);
      border-color: var(--lime);
    }
    .activation-progress li span {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      border: 1px solid currentColor;
      border-radius: 50%;
    }
    .contact-label small {
      margin-inline-start: 5px;
      color: var(--muted-2);
      font: inherit;
      font-size: .82em;
      letter-spacing: .02em;
      text-transform: none;
    }
    .contact-hint {
      color: var(--muted-2);
      font-size: .68rem;
      line-height: 1.4;
    }
    #contactPrivacy strong { color: var(--text); }
    @media (max-width: 560px) {
      .activation-progress { gap: 5px; margin-bottom: 18px; font-size: .5rem; }
      .activation-progress li { gap: 4px; }
      .activation-progress li span { width: 20px; height: 20px; }
    }

/* ===== 08-polish ===== */
    @media (max-width: 560px) {
      #marketingCircuitBreaker {
        position: static;
        display: flex;
        margin: 14px 15px 94px auto;
      }
    }

/* ===== 09-footer-legal ===== */
    #pwaFooterLegal {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.105);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
    }
    #pwaFooterLegal nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }
    #pwaFooterLegal a {
      min-height: 44px;
      padding: 0 4px;
      display: inline-flex;
      align-items: center;
      color: #8b96a5;
      text-decoration: none;
    }
    #pwaFooterLegal a:hover { color: #00d9ff; }
    #pwaFooterLegal .sep { color: #8b96a5; opacity: .55; }
    #pwaFooterLegal .footer-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
    :root[data-theme="clean"] #pwaFooterLegal { border-top-color: rgba(12,20,32,.13); }
    :root[data-theme="clean"] #pwaFooterLegal a,
    :root[data-theme="clean"] #pwaFooterLegal .sep { color: #55606f; }
    :root[data-theme="clean"] #pwaFooterLegal a:hover { color: #008cff; }

/* ===== 10-consent ===== */
    #contactConsent { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 4px; }
    #contactConsent .consent-row {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      padding: 7px 0;
      cursor: pointer;
    }
    #contactConsent .consent-box {
      flex: 0 0 auto;
      width: 19px;
      height: 19px;
      margin: 1px 0 0;
      accent-color: #b7ff3c;
      cursor: pointer;
    }
    #contactConsent .consent-text { font-size: .84rem; line-height: 1.5; color: #8b96a5; }
    #contactConsent a { color: #00d9ff; text-decoration: underline; text-underline-offset: 3px; }
    #contactConsent a:hover { color: #b7ff3c; }
    #contactConsent[data-invalido="true"] .consent-box { outline: 2px solid #ff2d2d; outline-offset: 2px; }
    :root[data-theme="clean"] #contactConsent .consent-text { color: #55606f; }
    :root[data-theme="clean"] #contactConsent a { color: #005a9c; }
    :root[data-theme="clean"] #contactConsent a:hover { color: #2f7300; }
    :root[data-theme="clean"] #contactConsent .consent-box { accent-color: #2f7300; }
    :root[data-theme="clean"] #contactConsent[data-invalido="true"] .consent-box { outline-color: #b3111d; }