* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
}
button { font-family: var(--font-body); }
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; } }

/* 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;
}

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .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;
  }
  .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; }
}

@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; }
}