* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  color: inherit;
  font: inherit;
}

button {
  min-width: var(--target);
  min-height: var(--target);
  touch-action: manipulation;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.home-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
}

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.workspace {
  display: grid;
  grid-template-columns: 220px 300px minmax(0, 1fr);
  min-height: 100dvh;
  overflow: hidden;
}

.category-rail,
.page-rail,
.editor-pane {
  min-height: 100dvh;
}

.category-rail,
.page-rail {
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: max(18px, env(safe-area-inset-top)) 14px 18px;
}

.category-rail nav,
.page-rail nav,
.notes-drawer nav {
  display: flex;
  flex-direction: column;
}

.editor-pane {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  background: var(--surface);
}

.editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  border-bottom: 1px solid var(--line);
  padding: max(10px, env(safe-area-inset-top)) 20px 10px;
}

.editor-toolbar {
  min-height: 52px;
  border-bottom: 1px solid var(--line);
}

.editor-root {
  width: min(860px, calc(100% - 48px));
  min-height: 100%;
  margin: 0 auto;
  padding: 44px 0 60vh;
}

.notes-drawer,
.portrait-only,
.icon-button.portrait-only {
  display: none;
}

@media (max-width: 1023px), (orientation: portrait) {
  .workspace {
    display: block;
  }

  .category-rail,
  .page-rail {
    display: none;
  }

  .portrait-only,
  .icon-button.portrait-only {
    display: inline-flex;
  }

  .notes-drawer {
    position: fixed;
    z-index: 20;
    inset: 0 0 0 min(18vw, 150px);
    display: block;
    overflow-y: auto;
    border-left: 1px solid var(--line);
    padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
    background: var(--surface);
    box-shadow: var(--shadow);
    transform: translateX(105%);
    transition: transform 180ms ease;
  }

  .notes-drawer[aria-hidden="false"] {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}