/* Health Journal mock: show the app as a phone screen, not a design canvas.
   Structure from the Claude Design export: .dv-opt > [label] + [frame] > [screen] > [status bar, …].
   Selectors are structural because support.js re-renders inline styles.
   Colours: var(--token) from tokens.css (generated from design/tokens.json, linked before this file). */
.dv-thd, .dv-olabel, .dv-next { display: none !important; }
.dv-turn { padding: 0 !important; border: 0 !important; }
.dv-opts { gap: 0 !important; justify-content: center; }
html, body { background: var(--bg-base) !important; margin: 0 !important; }

/* No phone frame anywhere. */
.dv-opt > div:last-child {
  padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--bg-base) !important; box-sizing: border-box;
}
.dv-opt > div:last-child > div { border-radius: 0 !important; }
/* The drawn status bar duplicates the real one. */
.dv-opt > div:last-child > div > div:first-child { display: none !important; }

/* Phone: the app fills the whole screen. The page is one flex column of exactly the visible height:
   the app takes what is left (flex:1, min-height:0), the footer takes its own 44px + safe area (flex:none).
   No calc() of 100dvh − footer − inset: those three were computed separately and did not always add up
   (and without dvh support the calc() was dropped and the frame fell back to its 760px inline height).
   Every box on the way from body to the frame is a flex column, so the frame's height is definite. */
@media (max-width: 600px) {
  /* !important: support.js and the template's own <style> are added to <head> after this file. */
  html { height: 100% !important; overflow: hidden; }
  body { height: 100% !important; height: 100dvh !important; overflow: hidden; display: flex !important; flex-direction: column !important; }
  #dc-root, #dc-root > .sc-host, .dv-turn, .dv-opts, .dv-opt {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; flex: 1 1 auto !important;
    min-height: 0 !important; width: 100vw !important; gap: 0 !important;
  }
  .dv-opt > div:last-child {
    flex: 1 1 auto !important; min-height: 0 !important; width: 100vw !important; height: auto !important;
    padding: env(safe-area-inset-top) 0 0 0 !important;
  }
  /* The drawn home indicator, like the drawn status bar: the phone has its own. */
  .dv-opt > div:last-child > div > div:last-child { display: none !important; }
}

/* Desktop: the screen centred at phone size. */
@media (min-width: 601px) {
  body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
}

/* Footer outside the app: link to the design system. support.js sets html, body and #dc-root to
   height:100%, which pushed the footer below the screen; let the root take only the app's height. */
#dc-root, #dc-root > .sc-host { height: auto !important; }
.hj-foot { flex: none; display: flex; justify-content: center; align-items: center; height: 44px;
  padding-bottom: env(safe-area-inset-bottom); background: var(--bg-sunken); border-top: 1px solid var(--line-subtle);
  font: 11px/1.4 "JetBrains Mono", ui-monospace, monospace; }
.hj-foot a { color: var(--accent); text-decoration: none; height: 44px; display: inline-flex; align-items: center; padding: 0 16px; }
@media (min-width: 601px) {
  html, body { height: auto !important; }
  .hj-foot { width: 360px; margin-top: 12px; background: none; border: 0; }
}