* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* html carries the brand ground too, so no scroll glitch or overscroll
   rubber-band can ever expose white behind the app */
html { background: var(--cream); }
body {
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sun); color: #23363d; }
/* the warm radial wash, painted on a fixed underlay because
   background-attachment fixed is unreliable on mobile browsers */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130% 100% at 82% -6%, var(--bg-warm) 0%, var(--cream) 46%, var(--bg-edge) 100%);
  /* own compositor layer: stops mobile browsers dropping the fixed wash
     mid-scroll, which showed as white or blank bands */
  transform: translateZ(0);
  will-change: transform;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-transform: none;
  margin: 0;
}
button { font-family: var(--font-body); color: inherit; }
input, textarea, select { font-family: var(--font-body); }
input:focus-visible, textarea:focus-visible, button:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--tide);
  outline-offset: 2px;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

@keyframes cw-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cw-breathe { 0%, 100% { transform: scale(.62); background: var(--sky); } 45%, 55% { transform: scale(1); background: var(--sun); } }
@keyframes cw-pop-in { 0% { opacity: 0; transform: translateY(30px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cw-spin { to { transform: rotate(360deg); } }
@keyframes cw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ed-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ed-reveal { animation: ed-in .3s ease both; }
.complete-btn { transition: background .2s, color .2s; }
.complete-btn:hover { background: var(--sun) !important; color: var(--on-sun) !important; }

/* hover lifts, the signature hard-offset sticker shadow */
.lift { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.lift:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-pop); }
.lift-sm { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.lift-sm:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.nav-btn { transition: background .2s, color .2s; }
.nav-btn:not(.active):hover { background: rgba(247, 244, 236, .12) !important; color: var(--text-on-dark) !important; }
.view { animation: cw-rise .45s var(--ease-out); }
.toast { animation: cw-pop-in .35s var(--ease-out); }
.overlay { animation: cw-fade .3s var(--ease-out); }

.mobile-only { display: none; }
.bottombar { display: none; }

/* visually hidden, still read by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* NOTE: there is deliberately no `html, body { overflow: hidden }` here.
   The onboarding wizard, sign-in, PIN and recovery screens render OUTSIDE
   .shell and scroll the document, so locking the document hid their content
   with no way to reach it. .shell already clips itself, so the document
   cannot overflow on the dashboard anyway. */

@media (max-width: 900px) {
  /* phone layout scrolls the document instead: undo the desktop viewport lock */
  .shell {
    flex-direction: column;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }
  .sidebar { display: none !important; }
  .mobile-only { display: block; }
  .desktop-only { display: none !important; }
  .main {
    height: auto !important;
    min-height: 100vh;
    padding-top: 22px !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    /* The phone scrolls the document, so .main must NOT stay a scroll
       container here. Left as overflow-y:auto it has zero scrollable content,
       and overscroll-behavior:contain then refuses to pass the touch gesture
       up to the document, which kills scrolling entirely on touch devices. */
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }
  .two-col { grid-template-columns: 1fr !important; }
  .bottombar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 40;
    background: var(--tide-deep);
    border-top: 3px solid var(--ink);
    justify-content: space-around;
    padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
}

@media (max-width: 600px) {
  h1, h2, h3, h4 { line-height: 1.08; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Print: only the export document is visible. */
#print-root { display: none; }
@media print {
  body > #app { display: none !important; }
  #print-root {
    display: block;
    background: #fff;
    color: #23363d;
    font-family: Georgia, serif;
  }
  #print-root h1, #print-root h2, #print-root h3 { color: #23363d; }
}