/* Screen layout for the app. Colors, type, space and shape come only from
   design/tokens.css and the parts from design/components.css (DESIGN.md). */

.app { min-height: 100vh; min-height: 100dvh; }
#app:focus { outline: none; }
.app-skip { position: absolute; left: var(--as-space-2); top: calc(-1 * var(--as-target-lg)); z-index: 4; background: var(--as-surface); }
.app-skip:focus { top: var(--as-space-2); }

.app-backlink { justify-self: start; margin-inline-start: calc(-1 * var(--as-space-3)); }
.app-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--as-space-3); }
.app-center { justify-self: center; text-align: center; margin: 0; }
.app-hint { font-size: var(--as-size-small); color: var(--as-text-muted); margin: 0; }

/* Start */
.app-start { display: grid; gap: var(--as-space-6); }
.app-hero { display: grid; gap: var(--as-space-4); }
.app-hero .as-scene { justify-self: center; }
/* A lane page asking its question in the hero (AS-45) puts the question
   before the sniffer, so a phone shows it without scrolling. */
.app-hero:has(.as-startq) > .as-scene { order: 1; }
.app-cta { display: grid; gap: var(--as-space-2); justify-items: center; }
.app-cta .as-btn { width: 100%; }

/* Meet your sniffer */
.app-meet-dog { display: grid; justify-items: center; gap: var(--as-space-3); }
.app-meet-dog .as-art { width: min(220px, 60%); }

/* Guide */
.app-between { justify-content: space-between; }
.app-tight { gap: var(--as-space-2); }
.app-flush { margin: 0; }
.app-block { display: block; margin-bottom: var(--as-space-1); }
.app-inset { padding-inline-start: 0; }
.app-method { display: grid; gap: var(--as-space-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.app-method legend { padding: 0; margin-bottom: var(--as-space-2); }
.app-method .as-seg { justify-self: start; }
.app-split-only { display: none; }

/* A newer save on the account (AS-23): one notice under the bar until the person reloads. */
.app-stale { max-width: var(--as-wide); margin-inline: auto; padding-block: var(--as-space-4) 0; padding-inline: max(var(--as-space-4), env(safe-area-inset-left, 0px)) max(var(--as-space-4), env(safe-area-inset-right, 0px)); }
.app-stale__act { margin-top: var(--as-space-3); }

/* Account sheet: the add box comes first on phones, beside the list on wider screens. */
.app-start-self { justify-self: start; }
.app-sheet > .as-stack { min-width: 0; }
.app-details { padding-top: var(--as-space-3); }

/* Pause and sign-in screens */
.app-paused { text-align: center; justify-items: center; }
.app-paused .as-art { width: min(240px, 70%); }
.app-paused .as-callout, .app-left { text-align: start; justify-self: stretch; }

@media (min-width: 768px) {
  .app-split-only { display: grid; }
  .app-phone-only { display: none; }
  .app-sheet > .as-capture { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--as-masthead-h) + var(--as-space-4)); }
  .app-sheet > .as-stack { grid-column: 1; grid-row: 1; }
}

@media (min-width: 1024px) {
  .app-start.as-col { max-width: var(--as-wide); }
  .app-start { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--as-space-5); }
  .app-start > * { grid-column: 1 / -1; }
  .app-hero { grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--as-space-8); align-items: center; padding-block: var(--as-space-5) var(--as-space-2); }
  .app-hero > * { grid-column: 1; }
  .app-hero > .as-scene { grid-column: 2; grid-row: 1 / span 5; width: 100%; justify-self: end; }
  .app-cta { display: flex; align-items: center; gap: var(--as-space-4); flex-wrap: wrap; }
  .app-cta .as-btn { width: auto; }
  .app-start .as-four { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--as-space-4); }
  .app-start .as-four li { grid-template-columns: 1fr; align-content: start; background: var(--as-surface); border: var(--as-border) solid var(--as-line); border-radius: var(--as-radius); padding: var(--as-space-5); }

  /* Wide screens (AS-56): the sniffer moves beside the words. */
  .app-paused.as-beside { text-align: start; justify-items: stretch; }
  .app-paused.as-beside > .as-art:first-child { width: 100%; max-width: 320px; }
  .as-beside > .app-meet-dog .as-art { width: min(280px, 100%); }
}

/* Small phones: the logo name keeps one line; the sniffer shows on each screen instead. */
@media (max-width: 419px) {
  #tag { display: none; }
}

/* Admin (AS-49): the search box takes the row's free space, and the buttons follow it. */
.app-grow { flex: 1 1 14rem; width: auto; min-width: 0; }