/* Host chrome and phone adaptations; desktop keeps the prototype's density. */
.review-bar { gap: 12px; }
#hero-demo-explore { margin-left: auto; }
.review-note { margin-left: auto; }
#reset-example[hidden] { display: none; }
#hero-demo-cursor { position: fixed; z-index: 60; top: 0; left: 0; pointer-events: none; transition: transform 480ms cubic-bezier(.2,0,0,1); }
#hero-demo-cursor svg { width: 26px; height: 26px; }
#hero-demo-cursor[hidden] { display: none; }
html[data-demo-paused] *, html[data-demo-paused] *::before, html[data-demo-paused] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { #hero-demo-cursor { display: none; } }
@media (max-width: 600px) { .review-note { display: none; } }

/* Preview-only chrome removal; the prototype's own navigation remains intact. */
html[data-demo-chrome="hidden"] .review-bar { display: none; }
html[data-demo-chrome="hidden"] :is(#app, .entry-shell) { min-height: 100dvh; }
html[data-demo-chrome="hidden"] .sidebar { top: 0; height: 100dvh; }
html[data-demo-chrome="hidden"] .toolbar { top: 8px; }
/* Focus mode in the host: scrolling stops at the app's own edges instead of chaining out. */
html[data-demo-chrome="hidden"], html[data-demo-chrome="hidden"] body { overscroll-behavior: contain; }
/* Host preview asks for 4px corners on every app window and control. */
html[data-demo-chrome="hidden"] { --radius: 4px; }
html[data-demo-chrome="hidden"] :is(.routine, .side, .list-scroll, .card, .composer, .scope-menu, .popover, .bulk-bar,
  .context-float, .context-panel, .dry-run, .msg.user, .af-button, .select, .search, .chip, .chip-link,
  .scope-chip, .suggestion, .segmented, .segmented button) { border-radius: 4px; }
html[data-demo-chrome="hidden"] button.routine-main { border-radius: 4px 4px 0 0; }
html[data-demo-chrome="hidden"] .list-frame::before { border-radius: 4px 0 0 4px; }

/* Phone lists use the same records and selection controls, arranged for reading
   without a horizontal pan. Documents and their links stay available in detail. */
@media (max-width: 800px) {
  :root { --mobile-nav-h: calc(60px + env(safe-area-inset-bottom)); }
  body:has(.mobile-nav) { padding-bottom: var(--mobile-nav-h); }
  #app:has(> .mobile-nav) { min-height: calc(100dvh - 32px - var(--mobile-nav-h)); }
  html[data-demo-chrome="hidden"] #app:has(> .mobile-nav) { min-height: calc(100dvh - var(--mobile-nav-h)); }
  #app:has(> .mobile-nav) .side { height: calc(100dvh - var(--toolbar-bottom) - 24px - var(--mobile-nav-h)); }
  #app:has(> .mobile-nav) .dock { bottom: var(--mobile-nav-h); }
  #app:has(> .mobile-nav) .bulk-bar { bottom: calc(var(--mobile-nav-h) + 8px); }
  .mobile-nav {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: var(--mobile-nav-h);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--aw-bg);
    border-top: 1px solid var(--aw-border);
  }
  .mobile-nav > :is(a, button) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; line-height: 16px; color: var(--aw-sub); }
  .mobile-nav svg { width: 20px; height: 20px; }
  .mobile-nav > :is([aria-current], [data-current], [aria-expanded="true"]) { color: var(--aw-accent); background: var(--aw-accent-bg); }
  .mobile-nav > :focus-visible { outline-offset: -3px; }
  .list-columns, .row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    padding: 10px 8px;
  }
  .list-scroll { overflow-x: clip; }
  .list-frame::before, .list-frame::after { display: none; }
  .list-columns { display: none; }
  .row {
    grid-template-areas: 'main main' 'doc amount' 'due due';
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .row .cell-check { display: none; }
  .row[data-selected] .cell-main strong::after { content: '✓'; margin-left: 8px; color: var(--aw-accent); }
  .row .cell-main { grid-area: main; display: block; padding: 0; }
  .row .cell-main strong { font-size: 14px; line-height: 20px; white-space: normal; overflow-wrap: anywhere; }
  .row .cell-main span { display: none; }
  .row .cell-doc { grid-area: doc; }
  .row .cell-amount { grid-area: amount; font-size: 13px; }
  .row .cell-due { grid-area: due; flex-wrap: wrap; white-space: normal; }
  .row .cell-due small { display: none; }
  .row .cell-status { grid-area: due; justify-self: end; text-align: right; }
  .row .cell-status .af-domain-badge { font-size: 11px; }
  .row .cell-links { display: none; }
  .toolbar { gap: 4px; }
  .toolbar h1, .toolbar-title { flex: 1; }
  .toolbar .af-icon { width: 44px; min-height: 44px; }
  .tools .search { height: 44px; }
  .tools input { font-size: 16px; }

  /* Focused sheets for the Rotinas and Mais tabs. */
  .sidebar, html[data-demo-chrome="hidden"] .sidebar {
    inset: auto 0 0;
    width: 100%;
    height: auto;
    max-height: 90dvh;
    padding: 8px 12px max(12px, env(safe-area-inset-bottom));
    border: 1px solid var(--aw-border);
    border-radius: 8px 8px 0 0;
    box-shadow: none;
    overscroll-behavior: contain;
  }
  .sidebar-head { min-height: 48px; }
  .sidebar-head .af-icon { width: 44px; min-height: 44px; }
  .sidebar > .nav { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
  .sidebar-head h2 { font-size: 16px; line-height: 24px; font-weight: 600; }
  .sidebar .nav-group { grid-column: 1 / -1; margin: 8px 8px 0; }
  .sidebar .nav-item { min-height: 44px; padding-inline: 8px; }
  .sidebar .nav-item span:not(.count) { white-space: normal; }
  .sidebar-foot { margin-top: 12px; }
  .sidebar-foot .nav { margin-top: 0; }
  .sidebar-foot .theme-switch { margin-block: 8px; }
  .sidebar-foot .theme-switch button { min-height: 44px; }
  .profile { margin-top: 0; }
  body:has(#sidebar[aria-modal="true"]:not([hidden])) { overflow: hidden; }
}