/* voicewrite — shell layout. Phone-first, 390x844. No mode logic yet: P1 is the shell only. */

html, body { height: 100%; }

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

/* ---- the demo banner (?demo=1) ---- */
.demo-banner {
  background: var(--gold);
  color: var(--ink);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

/* ---- composer: the mode switcher, the mode surface, and print, as one flex column ---- */
#composer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
#composer[hidden] { display: none; }

/* ---- header ---- */
.app-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.app-header h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.01em;
}

/* ---- the mode switcher: four equal targets, each a raised die-cut ring when active ---- */
.mode-switcher {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.mode-btn {
  min-height: var(--control-min);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--offset) var(--offset) 0 var(--ink);
  transition: transform 90ms cubic-bezier(0.2, 0, 0.2, 1), box-shadow 90ms cubic-bezier(0.2, 0, 0.2, 1);
}
.mode-btn:active,
.mode-btn[aria-pressed="true"] {
  transform: translate(var(--offset), var(--offset));
  box-shadow: none;
}
.mode-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--panel);
}

/* ---- the primary act block, wearing the die-cut ring (§3.7, §3.2) ----
   Three stacked box-shadows: a white ring, then the black offset, so the block stays
   raised against its own shadow. One per screen. */
.act-block {
  flex: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--ink);
  color: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 4px var(--ink),
    0 0 0 8px var(--panel),
    var(--offset) var(--offset) 0 12px var(--ink);
  transition: transform 90ms cubic-bezier(0.2, 0, 0.2, 1), box-shadow 90ms cubic-bezier(0.2, 0, 0.2, 1);
}
.act-block:active {
  transform: translate(var(--offset), var(--offset));
  box-shadow:
    0 0 0 4px var(--ink),
    0 0 0 8px var(--panel);
}
.act-block .act-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
}
.act-block .act-hint {
  font-family: var(--font-body);
  font-size: 14px;
  opacity: 0.8;
}

/* ---- the print placeholder: a secondary button, edge only, no fill ---- */
.print-btn {
  min-height: var(--control-min);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  background: var(--panel);
  border: var(--border-width) solid var(--edge-secondary);
  border-radius: var(--radius);
}

@media (min-width: 600px) {
  #app { max-width: 480px; margin: 0 auto; }
}