/* Notebook workspace.
   Three columns inside the app shell: notebooks and tags, the note list, the editor.
   Everything is prefixed nb- so nothing here can reach another tool's markup. Colours
   come from the shared tokens, so dark mode is inherited rather than re-declared. */

.notebook-page {
  --nb-rail: 244px;
  --nb-list: 320px;
  --nb-card-accent: transparent;
}

.aiwa-app-shell.notebook-page > main { display: block; }

.nb-app {
  display: grid;
  grid-template-columns: var(--nb-rail) var(--nb-list) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: var(--aiwa-bg);
  opacity: 0;
  transition: opacity 160ms var(--aiwa-ease, ease);
}
.nb-app.is-ready { opacity: 1; }
.nb-app.is-dropping { outline: 2px dashed var(--aiwa-brand); outline-offset: -6px; }

/* ------------------------------------------------------------------ sidebar */
.nb-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--aiwa-line);
  background: var(--aiwa-card);
}
.nb-side-top {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 10px 8px;
}
.nb-side-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 8px 14px;
}
.nb-nav {
  position: relative;
  display: flex;
  gap: 9px;
  align-items: center;
  width: 100%;
  margin: 1px 0;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--aiwa-radius-sm, 8px);
  background: transparent;
  color: var(--aiwa-text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.nb-nav:hover { background: var(--aiwa-brand-soft); }
.nb-nav.is-on { background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); font-weight: 650; }
.nb-nav .aiwa-ui-icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: .78; }
.nb-nav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-nav-count { flex: 0 0 auto; color: var(--aiwa-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.nb-nav-more { opacity: 0; }
.nb-nav:hover .nb-nav-more, .nb-nav:focus-within .nb-nav-more { opacity: 1; }
.nb-nav-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 16px 0 4px;
  padding: 0 9px;
  color: var(--aiwa-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nb-nav-head > span { flex: 1 1 auto; }
.nb-nav-empty { margin: 2px 9px 6px; color: var(--aiwa-muted); font-size: 12px; line-height: 1.5; }
.nb-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 1px;
  border: 1px solid var(--aiwa-line-strong);
  border-radius: 50%;
  background: var(--aiwa-line);
}
.nb-side-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 10px;
  border-top: 1px solid var(--aiwa-line);
}

/* --------------------------------------------------------------- note list */
.nb-list-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--aiwa-line);
  background: var(--aiwa-card);
}
.nb-list-head { flex: 0 0 auto; padding: 10px 12px 8px; border-bottom: 1px solid var(--aiwa-line); }
/* The search field, its icon and the fold control on one line. The icon sits *inside*
   the field — it belongs to the input, not beside it. (It had drifted outside when the
   icons became inline SVG and this rule still named the old bitmap class.) */
.nb-search-row { display: flex; gap: 6px; align-items: center; }
.nb-search-wrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; align-items: center; }
.nb-search-ico {
  position: absolute;
  left: 10px;
  display: inline-flex;
  color: var(--aiwa-muted);
  opacity: .75;
  pointer-events: none;
}
.nb-search-wrap:focus-within .nb-search-ico { color: var(--aiwa-brand); opacity: 1; }
.nb-search {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid var(--aiwa-line);
  border-radius: var(--aiwa-radius-sm, 8px);
  background: var(--aiwa-bg);
  color: var(--aiwa-ink);
  font: inherit;
  font-size: 13px;
}
.nb-search:focus { outline: 2px solid var(--aiwa-brand); outline-offset: 1px; }
.nb-list-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 9px;
}
.nb-list-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aiwa-ink);
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -.01em;
}
.nb-list-count { flex: 0 0 auto; color: var(--aiwa-muted); font-size: 11.5px; }
.nb-sort {
  flex: 0 0 auto;
  max-width: 118px;
  padding: 4px 6px;
  border: 1px solid var(--aiwa-line);
  border-radius: 7px;
  background: var(--aiwa-card);
  color: var(--aiwa-text);
  font: inherit;
  font-size: 11.5px;
}
.nb-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }
.nb-card {
  position: relative;
  margin-bottom: 6px;
  padding: 10px 11px 9px 13px;
  border: 1px solid var(--aiwa-line);
  border-radius: var(--aiwa-radius-md, 12px);
  background: var(--aiwa-card);
  cursor: pointer;
}
.nb-card::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 5px;
  width: 3px;
  border-radius: 3px;
  background: var(--nb-card-accent);
}
.nb-card:hover { border-color: var(--aiwa-line-strong); }
.nb-card.is-on { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); }
.nb-card:focus-visible { outline: 2px solid var(--aiwa-brand); outline-offset: 1px; }
.nb-card-head { display: flex; gap: 6px; align-items: center; }
.nb-card-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  color: var(--aiwa-ink);
  font-size: 13.5px;
  font-weight: 680;
}
.nb-card-pin, .nb-card-star { width: 13px; height: 13px; flex: 0 0 auto; opacity: .75; }
.nb-card-preview {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--aiwa-muted);
  font-size: 12.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nb-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 7px;
  color: var(--aiwa-muted);
  font-size: 11px;
}
.nb-card-book, .nb-card-tag {
  padding: 1px 6px;
  border: 1px solid var(--aiwa-line);
  border-radius: 999px;
  background: var(--aiwa-bg);
}
.nb-list-empty { padding: 34px 18px; text-align: center; }
.nb-list-empty-t { margin: 0 0 5px; color: var(--aiwa-ink); font-size: 14px; font-weight: 680; }
.nb-list-empty-p { margin: 0; color: var(--aiwa-muted); font-size: 12.5px; line-height: 1.55; }

/* ----------------------------------------------------------------- editor */
.nb-main { display: flex; flex-direction: column; min-height: 0; background: var(--aiwa-bg); }
.nb-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 4px;
  align-items: center;
  padding: 7px 8px;
  border-bottom: 1px solid var(--aiwa-line);
  background: var(--aiwa-card);
}
.nb-bar-spacer { flex: 1 1 auto; }
/* With no note open there is nothing to format, so the row goes rather than sitting
   there greyed out. The note bar carries the document actions and goes with it. */
.nb-app:not(.has-note) .nb-bar { display: none; }
.nb-tool {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--aiwa-text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.nb-tool:hover { background: var(--aiwa-brand-soft); }
.nb-tool.is-on { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
.nb-tool .aiwa-ui-icon { width: 15px; height: 15px; }
/* Labels are opted into with .nb-tool-label rather than blanket-hidden here — the old
   rule hid every span inside a button, which is what made the Save control a nameless
   icon nobody could find. */
.nb-bar::-webkit-scrollbar { display: none; }
.nb-bar > * { flex: 0 0 auto; }
.nb-bar > .nb-bar-spacer { flex: 1 1 auto; min-width: 12px; }
/* The hidden home of the note's fields. The note menu drives them; nothing shows. */
.nb-note-fields { display: none; }
.nb-bar-spacer { flex: 1 1 auto !important; min-width: 0; }
.nb-tool-sep { width: 1px; height: 20px; margin: 0 3px; background: var(--aiwa-line); }
.nb-block {
  /* Wide enough that "Normal text" is not clipped to "Normal tex", which reads as a
     rendering fault rather than a truncation. */
  min-width: 120px;
  min-height: 30px;
  padding: 4px 6px;
  border: 1px solid var(--aiwa-line);
  border-radius: 7px;
  background: var(--aiwa-card);
  color: var(--aiwa-text);
  font: inherit;
  font-size: 12.5px;
}
.nb-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--aiwa-text);
  cursor: pointer;
}
.nb-mini:hover { background: var(--aiwa-brand-soft); }
.nb-mini .aiwa-ui-icon { width: 14px; height: 14px; }

.nb-editor { flex: 1 1 auto; min-height: 0; display: flex; }
.nb-editor[hidden] { display: none; }
.nb-doc { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

.nb-book-pick {
  max-width: 170px;
  padding: 3px 6px;
  border: 1px solid var(--aiwa-line);
  border-radius: 7px;
  background: var(--aiwa-card);
  color: var(--aiwa-text);
  font: inherit;
  font-size: 11.5px;
}
.nb-bar .nb-mini.is-on { color: var(--aiwa-brand-dark); background: var(--aiwa-brand-soft); }

.nb-paper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 24px 40vh;
  background: var(--aiwa-bg);
  --nb-font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --nb-size: 17px;
  --nb-line: 1.7;
}
.nb-paper[data-paper="cream"] { background: #fbf7ee; }
.nb-paper[data-paper="ruled"] {
  background-image: repeating-linear-gradient(var(--aiwa-bg) 0 30px, var(--aiwa-line) 30px 31px);
  background-attachment: local;
}
.nb-paper[data-paper="grid"] {
  background-image: repeating-linear-gradient(var(--aiwa-bg) 0 29px, var(--aiwa-line) 29px 30px),
    repeating-linear-gradient(90deg, var(--aiwa-bg) 0 29px, var(--aiwa-line) 29px 30px);
  background-attachment: local;
}
.nb-paper[data-paper="dotted"] {
  background-image: radial-gradient(var(--aiwa-line-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  background-attachment: local;
}
.nb-sheet { max-width: 760px; margin: 0 auto; }
.nb-paper[data-width="narrow"] .nb-sheet { max-width: 620px; }
.nb-paper[data-width="wide"] .nb-sheet { max-width: 940px; }

.nb-title {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--aiwa-ink);
  font-family: var(--nb-font);
  font-size: calc(var(--nb-size) * 1.85);
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.22;
}
.nb-title:focus { outline: none; }
.nb-title::placeholder { color: var(--aiwa-line-strong); }

.nb-body {
  min-height: 40vh;
  color: var(--aiwa-text);
  font-family: var(--nb-font);
  font-size: var(--nb-size);
  line-height: var(--nb-line);
  outline: none;
  overflow-wrap: break-word;
}
.nb-body:empty::before {
  content: attr(data-placeholder);
  color: var(--aiwa-line-strong);
}
.nb-body > :first-child { margin-top: 0; }
.nb-body h1, .nb-body h2, .nb-body h3, .nb-body h4 {
  margin: 1.5em 0 .4em;
  color: var(--aiwa-ink);
  font-weight: 740;
  letter-spacing: -.015em;
  line-height: 1.3;
}
.nb-body h1 { font-size: 1.6em; }
.nb-body h2 { font-size: 1.34em; }
.nb-body h3 { font-size: 1.15em; }
.nb-body h4 { font-size: 1.02em; }
.nb-body p { margin: 0 0 .85em; }
.nb-body ul, .nb-body ol { margin: 0 0 .9em; padding-left: 1.4em; }
.nb-body li { margin: 0 0 .25em; }
.nb-body blockquote {
  margin: 1em 0;
  padding: .1em 0 .1em 1em;
  border-left: 3px solid var(--aiwa-brand);
  color: var(--aiwa-muted);
}
.nb-body pre {
  margin: 1em 0;
  padding: 12px 14px;
  overflow-x: auto;
  border-radius: var(--aiwa-radius-sm, 8px);
  background: var(--aiwa-brand-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  white-space: pre-wrap;
}
.nb-body code { padding: .1em .32em; border-radius: 5px; background: var(--aiwa-brand-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.nb-body pre code { padding: 0; background: none; }
.nb-body a { color: var(--aiwa-brand-dark); text-underline-offset: 2px; }
.nb-body img { max-width: 100%; height: auto; border-radius: var(--aiwa-radius-sm, 8px); }
.nb-body hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--aiwa-line); }
.nb-body table { width: 100%; margin: 1em 0; border-collapse: collapse; font-size: .94em; }
.nb-body th, .nb-body td { padding: 7px 9px; border: 1px solid var(--aiwa-line); text-align: left; vertical-align: top; }
.nb-body th { background: var(--aiwa-brand-soft); font-weight: 680; }
.nb-body ul.nb-check, .nb-history-body ul.nb-check, .nb-split-body ul.nb-check { list-style: none; padding-left: 1.65em; }
.nb-body ul.nb-check > li, .nb-history-body ul.nb-check > li, .nb-split-body ul.nb-check > li { position: relative; }
.nb-body ul.nb-check > li::before, .nb-history-body ul.nb-check > li::before, .nb-split-body ul.nb-check > li::before {
  content: "";
  position: absolute;
  top: .28em;
  left: -1.45em;
  width: 15px;
  height: 15px;
  border: 1.6px solid var(--aiwa-line-strong);
  border-radius: 4px;
  background: var(--aiwa-card);
  cursor: pointer;
}
.nb-body ul.nb-check > li[data-checked="true"], .nb-history-body ul.nb-check > li[data-checked="true"], .nb-split-body ul.nb-check > li[data-checked="true"] { color: var(--aiwa-muted); text-decoration: line-through; }
.nb-body ul.nb-check > li[data-checked="true"]::before, .nb-history-body ul.nb-check > li[data-checked="true"]::before, .nb-split-body ul.nb-check > li[data-checked="true"]::before {
  border-color: var(--aiwa-brand);
  background: var(--aiwa-brand) url("/assets/icons/bootstrap/check-lg.svg") center / 11px no-repeat;
  filter: none;
}

/* editor foot */
.nb-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  border-top: 1px solid var(--aiwa-line);
  background: var(--aiwa-card);
  color: var(--aiwa-muted);
  font-size: 11.5px;
}
.nb-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; flex: 1 1 220px; }
.nb-tag {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  padding: 1px 4px 1px 7px;
  border: 1px solid var(--aiwa-line);
  border-radius: 999px;
  background: var(--aiwa-bg);
  font-size: 11px;
}
.nb-tag button { border: 0; background: none; color: var(--aiwa-muted); font-size: 13px; line-height: 1; cursor: pointer; }
.nb-tag-input {
  min-width: 96px;
  padding: 2px 4px;
  border: 0;
  border-bottom: 1px dashed var(--aiwa-line-strong);
  background: transparent;
  color: var(--aiwa-text);
  font: inherit;
  font-size: 11.5px;
}
.nb-tag-input:focus { outline: none; border-bottom-color: var(--aiwa-brand); }

.nb-empty { flex: 1 1 auto; display: grid; place-items: center; padding: 30px; text-align: center; }
.nb-empty[hidden] { display: none; }
.nb-empty-in { max-width: 380px; }
.nb-empty h2 { margin: 0 0 6px; color: var(--aiwa-ink); font-size: 17px; font-weight: 720; }
.nb-empty p { margin: 0 0 14px; color: var(--aiwa-muted); font-size: 13px; line-height: 1.6; }

.nb-trash-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--aiwa-line);
  background: #fdf3f2;
  color: var(--aiwa-danger);
  font-size: 12.5px;
}
.nb-trash-bar[hidden] { display: none; }

/* -------------------------------------------------------- outline + split */
.nb-outline-panel {
  flex: 0 0 208px;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
  border-left: 1px solid var(--aiwa-line);
  background: var(--aiwa-card);
}
.nb-outline-panel[hidden] { display: none; }
.nb-side-h { margin: 0 0 7px; color: var(--aiwa-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nb-side-empty { margin: 0; color: var(--aiwa-muted); font-size: 12px; line-height: 1.5; }
.nb-outline-item {
  display: block;
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--aiwa-text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nb-outline-item:hover { background: var(--aiwa-brand-soft); }
.nb-lvl-2 { padding-left: 14px; }
.nb-lvl-3 { padding-left: 24px; color: var(--aiwa-muted); }
.nb-lvl-4 { padding-left: 34px; color: var(--aiwa-muted); font-size: 12px; }

.nb-split { display: none; flex: 0 0 40%; min-width: 0; flex-direction: column; border-left: 1px solid var(--aiwa-line); background: var(--aiwa-card); }
.nb-app.has-split .nb-split { display: flex; }
.nb-split-head {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--aiwa-line);
}
.nb-split-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aiwa-ink); font-size: 13px; font-weight: 680; }
.nb-split-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; color: var(--aiwa-text); font-size: 14.5px; line-height: 1.65; }
.nb-split-body h1, .nb-split-body h2, .nb-split-body h3 { color: var(--aiwa-ink); }
.nb-split-body img { max-width: 100%; height: auto; }

/* ------------------------------------------------------- menus and modals */
.nb-menu {
  position: fixed;
  z-index: 90;
  min-width: 194px;
  max-width: 280px;
  padding: 5px;
  border: 1px solid var(--aiwa-line);
  border-radius: var(--aiwa-radius-md, 12px);
  background: var(--aiwa-card);
  box-shadow: 0 12px 34px rgba(23, 33, 27, .16);
}
.nb-menu button {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--aiwa-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.nb-menu button:hover { background: var(--aiwa-brand-soft); }
.nb-menu button.is-danger { color: var(--aiwa-danger); }
.nb-menu .aiwa-ui-icon { width: 14px; height: 14px; }
.nb-menu-head { margin: 4px 9px 6px; color: var(--aiwa-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nb-menu-rule { height: 1px; margin: 4px 6px; background: var(--aiwa-line); }
.nb-menu-plain { font-size: 12.5px !important; color: var(--aiwa-muted) !important; }

.nb-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(23, 33, 27, .38);
}
.nb-modal {
  width: min(680px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--aiwa-radius-lg, 16px);
  background: var(--aiwa-card);
  box-shadow: 0 24px 60px rgba(23, 33, 27, .28);
}
.nb-modal.is-palette { width: min(560px, 100%); align-self: start; margin-top: 9vh; }
.nb-modal-head {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--aiwa-line);
}
.nb-modal-head h2 { flex: 1 1 auto; margin: 0; color: var(--aiwa-ink); font-size: 15.5px; font-weight: 720; }
.nb-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
.nb-modal-foot { flex: 0 0 auto; padding: 12px 16px; border-top: 1px solid var(--aiwa-line); }

.nb-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--aiwa-line);
  border-radius: var(--aiwa-radius-sm, 8px);
  background: var(--aiwa-card);
  color: var(--aiwa-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.nb-btn:hover { border-color: var(--aiwa-line-strong); }
.nb-btn.primary { border-color: var(--aiwa-brand); background: var(--aiwa-brand); color: #fff; }
.nb-btn.primary:hover { background: var(--aiwa-brand-dark); }
.nb-btn.ghost { border-color: transparent; background: transparent; color: var(--aiwa-muted); }
.nb-btn .aiwa-ui-icon { width: 15px; height: 15px; }
.nb-btn.primary .aiwa-ui-icon { filter: brightness(0) invert(1); }
.nb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nb-label { display: flex; flex-direction: column; gap: 4px; color: var(--aiwa-text); font-size: 12.5px; font-weight: 600; }
.nb-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--aiwa-line);
  border-radius: var(--aiwa-radius-sm, 8px);
  background: var(--aiwa-card);
  color: var(--aiwa-ink);
  font: inherit;
  font-size: 13.5px;
}
.nb-input:focus { outline: 2px solid var(--aiwa-brand); outline-offset: 1px; }
.nb-file { display: none; }

.nb-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.nb-swatch {
  width: 28px;
  height: 28px;
  /* Strong enough that a white or near-white swatch still reads as a button rather than a
     gap in the grid — the pale end of the palette is the part that needs the outline. */
  border: 1px solid rgba(23, 33, 27, .3);
  border-radius: 50%;
  cursor: pointer;
}
.nb-swatch.is-on { outline: 2px solid var(--aiwa-brand); outline-offset: 2px; }
.nb-swatch.is-none { background: repeating-linear-gradient(45deg, #fff 0 5px, var(--aiwa-line) 5px 10px); }

/* --------------------------------------------------------------- settings */
.nb-settings { display: grid; gap: 20px; }
.nb-set-group { display: grid; gap: 8px; }
.nb-set-h { margin: 0; color: var(--aiwa-ink); font-size: 13px; font-weight: 720; }
.nb-set-hint { margin: 0; color: var(--aiwa-muted); font-size: 12.5px; line-height: 1.55; }
.nb-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-choice {
  padding: 6px 12px;
  border: 1px solid var(--aiwa-line);
  border-radius: 999px;
  background: var(--aiwa-card);
  color: var(--aiwa-text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.nb-choice.is-on { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); font-weight: 640; }
.nb-set-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 12.5px; }
.nb-set-value { color: var(--aiwa-muted); font-variant-numeric: tabular-nums; }
.nb-range { grid-column: 1 / -1; width: 100%; accent-color: var(--aiwa-brand); }
.nb-set-toggle { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; }
.nb-set-toggle strong { display: block; color: var(--aiwa-ink); font-weight: 640; }
.nb-set-toggle small { display: block; color: var(--aiwa-muted); font-size: 12px; line-height: 1.5; }
.nb-check-input { margin-top: 2px; accent-color: var(--aiwa-brand); }

.nb-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 9px; }
.nb-template {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--aiwa-line);
  border-radius: var(--aiwa-radius-md, 12px);
  background: var(--aiwa-card);
  text-align: left;
  cursor: pointer;
}
.nb-template:hover { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); }
.nb-template strong { color: var(--aiwa-ink); font-size: 13.5px; font-weight: 680; }
.nb-template small { color: var(--aiwa-muted); font-size: 12px; }

.nb-picker { display: grid; gap: 5px; max-height: 52vh; overflow-y: auto; }
.nb-picker-item {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--aiwa-line);
  border-radius: var(--aiwa-radius-sm, 8px);
  background: var(--aiwa-card);
  text-align: left;
  cursor: pointer;
}
.nb-picker-item:hover { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); }
.nb-picker-item strong { color: var(--aiwa-ink); font-size: 13px; font-weight: 650; }
.nb-picker-item small { color: var(--aiwa-muted); font-size: 11.5px; }

.nb-stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.nb-stats th, .nb-stats td { padding: 7px 4px; border-bottom: 1px solid var(--aiwa-line); text-align: left; }
.nb-stats th { width: 44%; color: var(--aiwa-muted); font-weight: 600; }
.nb-stats td { color: var(--aiwa-ink); }
.nb-read-score { margin: 6px 0; color: var(--aiwa-ink); font-size: 15px; }
.nb-read-score strong { font-size: 26px; font-weight: 760; color: var(--aiwa-brand-dark); }
kbd {
  padding: 1px 6px;
  border: 1px solid var(--aiwa-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--aiwa-bg);
  color: var(--aiwa-text);
  font-family: inherit;
  font-size: 11.5px;
  white-space: nowrap;
}

/* --------------------------------------------------------------- history */
.nb-history-split { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; max-height: 52vh; }
.nb-history-list { overflow-y: auto; display: grid; gap: 4px; align-content: start; }
.nb-history-item {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--aiwa-line);
  border-radius: var(--aiwa-radius-sm, 8px);
  background: var(--aiwa-card);
  text-align: left;
  cursor: pointer;
}
.nb-history-item.is-on { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); }
.nb-history-item strong { color: var(--aiwa-ink); font-size: 12.5px; font-weight: 640; }
.nb-history-item small { color: var(--aiwa-muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-history-preview { overflow-y: auto; padding: 12px 14px; border: 1px solid var(--aiwa-line); border-radius: var(--aiwa-radius-md, 12px); background: var(--aiwa-bg); }
.nb-history-body { color: var(--aiwa-text); font-size: 13.5px; line-height: 1.6; }
.nb-history-body img, .nb-split-body img { max-width: 100%; height: auto; border-radius: 8px; }
.nb-history-body blockquote, .nb-split-body blockquote { margin: 1em 0; padding: .1em 0 .1em 1em; border-left: 3px solid var(--aiwa-brand); color: var(--aiwa-muted); }
.nb-history-body pre, .nb-split-body pre { padding: 10px 12px; overflow-x: auto; border-radius: 8px; background: var(--aiwa-brand-soft); font-family: ui-monospace, Menlo, monospace; font-size: .9em; white-space: pre-wrap; }
.nb-history-body table, .nb-split-body table { width: 100%; border-collapse: collapse; font-size: .93em; }
.nb-history-body th, .nb-history-body td, .nb-split-body th, .nb-split-body td { padding: 6px 8px; border: 1px solid var(--aiwa-line); text-align: left; }
.nb-history-actions { margin-top: 12px; }

/* --------------------------------------------------------------- palette */
.nb-palette { display: grid; gap: 10px; }
.nb-palette-list { display: grid; gap: 2px; max-height: 46vh; overflow-y: auto; }
.nb-palette-item {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--aiwa-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.nb-palette-item.is-on { background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }

/* ---------------------------------------------------------------- toasts */
.nb-toasts { position: fixed; left: 50%; bottom: 22px; z-index: 99; transform: translateX(-50%); pointer-events: none; }
.nb-toast {
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--aiwa-ink);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 10px 26px rgba(23, 33, 27, .28);
}
.nb-toast.is-bad { background: var(--aiwa-danger); }

/* ------------------------------------------------------------ focus mode */
body.nb-focus .aiwa-site-header,
body.nb-focus .aiwa-tools-rail,
body.nb-focus .tool-explainer,
body.nb-focus .site-footer-injected,
body.nb-focus .nb-side,
body.nb-focus .nb-list-col,
body.nb-focus .nb-outline-panel,
body.nb-focus .nb-split { display: none !important; }
body.nb-focus .aiwa-app-shell > main, body.nb-focus.aiwa-app-shell > main { height: 100dvh; }
body.nb-focus .nb-app { grid-template-columns: minmax(0, 1fr); }
body.nb-focus .nb-bar { opacity: .25; transition: opacity 160ms ease; }
body.nb-focus .nb-bar:hover, body.nb-focus .nb-bar:focus-within { opacity: 1; }

/* The old single-grid mobile fallback lived here. It is replaced by the two-layout
   model at the end of this file — see "v3 — two layouts, not one squeezed". */

@media print {
  .aiwa-site-header, .aiwa-tools-rail, .tool-explainer, .site-footer-injected,
  .nb-side, .nb-list-col, .nb-bar, .nb-foot, .nb-outline-panel, .nb-split, .nb-scrim, .nb-fab { display: none !important; }
  .nb-app { display: block; }
  .nb-paper { overflow: visible; padding: 0; background: #fff; }
}

/* ------------------------------------------------------------- dark mode */
/* The shared tokens already flip, so only the handful of literal colours above
   need an answer here. */
html[data-theme="dark"] .nb-paper[data-paper="cream"] { background: #241f18; }
html[data-theme="dark"] .nb-trash-bar { background: #3a1f1d; }
html[data-theme="dark"] .nb-toast { background: #e8efe9; color: #10160f; }
html[data-theme="dark"] .nb-toast.is-bad { background: var(--aiwa-danger); color: #fff; }
html[data-theme="dark"] .nb-modal-wrap { background: rgba(0, 0, 0, .55); }
html[data-theme="dark"] .nb-swatch { border-color: rgba(255, 255, 255, .22); }
html[data-theme="dark"] .nb-swatch.is-none { background: repeating-linear-gradient(45deg, var(--aiwa-card) 0 5px, var(--aiwa-line) 5px 10px); }
html[data-theme="dark"] .nb-btn.primary .aiwa-ui-icon { filter: none; }
html[data-theme="dark"] .nb-body ul.nb-check > li[data-checked="true"]::before { background-color: var(--aiwa-brand); }

/* ---------------------------------------------------- explainer screenshots */
/* The shared wx-shot frame is built for the portrait screenshots the other tool pages
   use. The Notebook is a three-pane workspace, so its pictures are landscape: they need
   a wider column and a matching frame, or they sit as a stamp in a tall empty box. */
.notebook-explainer .wx-shot { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
.notebook-explainer .wx-shot.is-flipped { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.notebook-explainer .wx-shot-frame { aspect-ratio: 16 / 10; }
.notebook-explainer .wx-shot-frame img { object-position: center; }
@media (max-width: 1000px) {
  .notebook-explainer .wx-shot, .notebook-explainer .wx-shot.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .notebook-explainer .wx-shot-frame { max-width: 640px; }
}

/* ==========================================================================
   v2 — richer editing, and syncing
   ========================================================================== */

/* ------------------------------------------------------------- callouts */
.nb-body .nb-callout, .nb-history-body .nb-callout, .nb-split-body .nb-callout, .nb-help-body .nb-callout {
  margin: 1.1em 0;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--nb-call-line, var(--aiwa-line));
  border-left: 4px solid var(--nb-call-edge, var(--aiwa-brand));
  border-radius: var(--aiwa-radius-md, 12px);
  background: var(--nb-call-bg, var(--aiwa-brand-soft));
}
.nb-body .nb-callout > :first-child, .nb-history-body .nb-callout > :first-child, .nb-split-body .nb-callout > :first-child, .nb-help-body .nb-callout > :first-child { margin-top: 0; }
.nb-body .nb-callout > :last-child, .nb-history-body .nb-callout > :last-child, .nb-split-body .nb-callout > :last-child, .nb-help-body .nb-callout > :last-child { margin-bottom: 0; }
[data-callout="info"] { --nb-call-edge: #0369a1; --nb-call-bg: #eff8ff; --nb-call-line: #bae0fd; }
[data-callout="warn"] { --nb-call-edge: #b45309; --nb-call-bg: #fffaeb; --nb-call-line: #fedf89; }
[data-callout="good"] { --nb-call-edge: #137a3d; --nb-call-bg: #eaf7ee; --nb-call-line: #b7e4c7; }
[data-callout="bad"]  { --nb-call-edge: #b42318; --nb-call-bg: #fef3f2; --nb-call-line: #fecdca; }

/* --------------------------------------------------------- divider styles */
.nb-body hr[data-rule="thick"] { border-top-width: 3px; border-color: var(--aiwa-line-strong); }
.nb-body hr[data-rule="dotted"] { border-top-style: dotted; border-color: var(--aiwa-line-strong); }
.nb-body hr[data-rule="dashed"] { border-top-style: dashed; border-color: var(--aiwa-line-strong); }
.nb-body hr[data-rule="fade"] { border: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--aiwa-line-strong), transparent); }
.nb-body hr[data-rule="stars"] { border: 0; height: auto; text-align: center; }
.nb-body hr[data-rule="stars"]::after { content: "* * *"; display: block; color: var(--aiwa-muted); letter-spacing: .5em; }
/* A page break is a real break when printed, and a labelled line while writing. */
.nb-body hr[data-rule="page"] {
  border: 0; height: auto; margin: 1.8em 0; text-align: center;
  border-top: 2px dashed var(--aiwa-line-strong);
}
.nb-body hr[data-rule="page"]::after {
  content: "Page break"; display: inline-block; transform: translateY(-.75em);
  padding: 0 8px; background: var(--aiwa-bg); color: var(--aiwa-muted); font-size: 11px;
}
@media print { .nb-body hr[data-rule="page"] { break-after: page; page-break-after: always; border: 0; } .nb-body hr[data-rule="page"]::after { display: none; } }

/* ------------------------------------------------------------- footnotes */
.nb-body .nb-fnref, .nb-history-body .nb-fnref { color: var(--aiwa-brand-dark); font-weight: 700; cursor: default; }
.nb-body .nb-footnotes, .nb-history-body .nb-footnotes, .nb-split-body .nb-footnotes {
  margin-top: 1.2em; padding-left: 1.4em; color: var(--aiwa-muted); font-size: .9em;
}
.nb-body .nb-footnotes li { margin-bottom: .35em; }

/* ------------------------------------------------- collapsible sections */
.nb-body .nb-collapse, .nb-history-body .nb-collapse, .nb-split-body .nb-collapse {
  margin: 1.1em 0; padding: 4px 12px 8px; border: 1px solid var(--aiwa-line);
  border-radius: var(--aiwa-radius-md, 12px); background: var(--aiwa-card);
}
.nb-body .nb-collapse > summary {
  padding: 6px 0; color: var(--aiwa-ink); font-weight: 650; cursor: pointer; list-style: revert;
}
.nb-body .nb-collapse[open] > summary { border-bottom: 1px solid var(--aiwa-line); margin-bottom: 8px; }

/* ---------------------------------------------------------- comments */
.nb-body .nb-comment {
  border-bottom: 2px dotted #d97706;
  cursor: help;
}
.nb-body .nb-comment::after {
  content: "💬"; font-size: .7em; vertical-align: super; margin-left: 1px; opacity: .8;
}

/* ------------------------------------------------------ find and replace */
.nb-body mark.nb-find { background: #ffe08a; color: inherit; border-radius: 3px; }
.nb-body mark.nb-find.is-at { background: #f59e0b; color: #17211b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .35); }
.nb-find-panel { display: grid; gap: 10px; }
.nb-find-row { display: flex; gap: 8px; align-items: center; }
.nb-find-row .nb-input { flex: 1 1 auto; }
.nb-find-count { flex: 0 0 auto; min-width: 82px; color: var(--aiwa-muted); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.nb-find-opts { display: flex; flex-wrap: wrap; gap: 16px; }
.nb-modal.is-find { width: min(520px, 100%); align-self: start; margin-top: 8vh; }

/* -------------------------------------------------------- colour picker */
.nb-menu-colours { width: 236px; }
.nb-menu-sub { margin: 6px 9px 4px; color: var(--aiwa-muted); font-size: 11px; }
.nb-swatch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 2px 6px 6px; }
.nb-swatch-grid .nb-swatch { width: 100%; height: 26px; border-radius: 6px; }
.nb-menu-colours .nb-swatches { padding: 0 6px 6px; }
.nb-colour-custom { display: flex; gap: 6px; align-items: center; padding: 6px; border-top: 1px solid var(--aiwa-line); }
.nb-colour-input { width: 34px; height: 32px; padding: 0; border: 1px solid var(--aiwa-line); border-radius: 7px; background: none; cursor: pointer; }
.nb-hex { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.nb-colour-custom .nb-btn { min-height: 32px; padding: 5px 10px; font-size: 12px; }

/* --------------------------------------------------------- font menus */
.nb-menu-fonts button { font-size: 14px; }
.nb-menu-sizes { max-height: 340px; overflow-y: auto; }
.nb-menu-wide { width: 232px; }

/* -------------------------------------------------------- symbol picker */
.nb-symbols { display: grid; gap: 6px; }
.nb-symbol-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.nb-symbol {
  width: 36px; height: 36px; border: 1px solid var(--aiwa-line); border-radius: 8px;
  background: var(--aiwa-card); font-size: 17px; line-height: 1; cursor: pointer;
}
.nb-symbol:hover { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); }

/* --------------------------------------------------- word goal and due date */
.nb-goal {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding-left: 20px; color: var(--aiwa-muted);
}
.nb-goal i {
  position: absolute; left: 0; width: 15px; height: 15px; border-radius: 50%;
  background: conic-gradient(var(--aiwa-brand) var(--nb-goal, 0%), var(--aiwa-line) 0);
}
.nb-goal i::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--aiwa-card);
}
.nb-goal.is-done { color: var(--aiwa-brand-dark); font-weight: 640; }
.nb-due, .nb-card-due {
  padding: 1px 7px; border: 1px solid var(--aiwa-line); border-radius: 999px;
  background: var(--aiwa-bg); color: var(--aiwa-muted);
}
.nb-due.is-over, .nb-card-due.is-over { border-color: var(--aiwa-danger); background: #fef3f2; color: var(--aiwa-danger); font-weight: 620; }

/* ----------------------------------------------------------------- sync */
.nb-sync.is-on { color: var(--aiwa-brand-dark); }
.nb-sync.is-on .aiwa-ui-icon, .nb-sync.is-on svg { opacity: 1; }
.nb-sync.is-locked { color: #b45309; }
.nb-sync.is-full { color: var(--aiwa-danger); }
.nb-sync-panel { display: grid; gap: 14px; }
.nb-sync-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.nb-sync-list li { position: relative; padding-left: 22px; color: var(--aiwa-text); font-size: 13.5px; line-height: 1.6; }
.nb-sync-list li::before {
  content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--aiwa-brand);
}
.nb-sync-warn {
  padding: 12px 14px; border: 1px solid #fedf89; border-left: 4px solid #b45309;
  border-radius: var(--aiwa-radius-md, 12px); background: #fffaeb;
}
.nb-sync-warn strong { display: block; color: #93370d; font-size: 13.5px; }
.nb-sync-warn p { margin: 6px 0 0; color: #7a2e0e; font-size: 12.5px; line-height: 1.6; }
.nb-sync-on { margin: 0; color: var(--aiwa-ink); font-size: 14px; }
.nb-sync-on strong { color: var(--aiwa-brand-dark); }
.nb-meter { height: 8px; border-radius: 999px; background: var(--aiwa-line); overflow: hidden; }
.nb-meter i { display: block; height: 100%; background: var(--aiwa-brand); transition: width 200ms ease; }
.nb-meter.is-full i { background: var(--aiwa-danger); }

/* ------------------------------------------------------------ dark mode */
html[data-theme="dark"] [data-callout="info"] { --nb-call-bg: #10243a; --nb-call-line: #1e4976; }
html[data-theme="dark"] [data-callout="warn"] { --nb-call-bg: #33260f; --nb-call-line: #6b4c14; }
html[data-theme="dark"] [data-callout="good"] { --nb-call-bg: #10291b; --nb-call-line: #1e5133; }
html[data-theme="dark"] [data-callout="bad"]  { --nb-call-bg: #34181a; --nb-call-line: #6d2b28; }
html[data-theme="dark"] .nb-sync-warn { border-color: #6b4c14; background: #33260f; }
html[data-theme="dark"] .nb-sync-warn strong { color: #fedf89; }
html[data-theme="dark"] .nb-sync-warn p { color: #e7c887; }
html[data-theme="dark"] .nb-due.is-over, html[data-theme="dark"] .nb-card-due.is-over { background: #34181a; }
html[data-theme="dark"] .nb-body mark.nb-find { background: #7a5c12; color: #f6f1e4; }
html[data-theme="dark"] .nb-body mark.nb-find.is-at { background: #b8860b; color: #fff; }
html[data-theme="dark"] .nb-goal i::after { background: var(--aiwa-card); }

/* A workspace that cannot start says so where the notes would have been, rather than
   staying invisible behind the is-ready fade. */
.nb-app.has-error { grid-template-columns: minmax(0, 1fr); }
.nb-boot-error { max-width: 520px; margin: auto; padding: 32px 24px; text-align: center; }
.nb-boot-error h2 { margin: 0 0 8px; color: var(--aiwa-ink); font-size: 18px; font-weight: 720; }
.nb-boot-error p { margin: 0 0 16px; color: var(--aiwa-text); font-size: 14px; line-height: 1.6; }
.nb-boot-error .nb-row { justify-content: center; }
.nb-boot-error .nb-set-hint { margin-top: 16px; }

/* ==========================================================================
   v3 — one icon family, grouped toolbar, a Save button people can find
   ========================================================================== */

/* ------------------------------------------------------------------ icons */
/* Icons inherit the button's colour, so hover, active and dark mode need no
   second asset and nothing has to be filtered. */
.nb-ico { display: block; flex: 0 0 auto; }
.nb-ico-wrap, [data-icon] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: inherit; }
[data-icon] { width: 18px; height: 18px; }
[data-icon-size="16"] { width: 16px; height: 16px; }
[data-icon-size="15"] { width: 15px; height: 15px; }
[data-icon-size="12"] { width: 12px; height: 12px; }

/* ------------------------------------------------------------ the toolbar */
/* Groups with a hairline between them read as a toolbar; an undivided row of
   thirty-five buttons reads as a parts bin. */
.nb-group { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.nb-bar .nb-tool { min-width: 32px; justify-content: center; }
.nb-tool-label { font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.nb-tool-wide { padding-right: 9px; }
.nb-menu-btn { padding-right: 5px; }
.nb-caret { opacity: .55; margin-left: -1px; }
.nb-menu-btn:hover .nb-caret { opacity: .9; }

/* The colour buttons carry a bar of the colour they would apply. */
.nb-swatch-btn { position: relative; flex-direction: column; gap: 0; padding-bottom: 8px; }
.nb-swatch-bar {
  position: absolute; left: 7px; right: 7px; bottom: 5px; height: 3px;
  border-radius: 2px; background: var(--aiwa-ink);
}
#nbHighlightBar { background: #fff3a3; }

/* ------------------------------------------------------------- menu items */
.nb-menu-item {
  display: flex !important; gap: 10px; align-items: center;
  width: 100%; padding: 8px 10px; text-align: left;
}
.nb-menu-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.nb-menu-label { color: var(--aiwa-text); font-size: 13px; }
.nb-menu-text small { color: var(--aiwa-muted); font-size: 11.5px; line-height: 1.4; }
.nb-menu-item kbd { flex: 0 0 auto; }
.nb-menu-item.is-on { background: var(--aiwa-brand-soft); }
.nb-menu-item.is-on .nb-menu-label { color: var(--aiwa-brand-dark); font-weight: 620; }
.nb-menu-item.is-danger .nb-menu-label { color: var(--aiwa-danger); }
.nb-menu-note { margin: 0 10px 6px; color: var(--aiwa-muted); font-size: 11.5px; line-height: 1.5; }
.nb-menu-save { width: 296px; max-height: 78vh; overflow-y: auto; }
.nb-menu-wide { width: 264px; }

/* ------------------------------------------------------------ Save button */
/* The one control a person hunts for when they want to keep their work, so it is the
   only filled button in the row and it never loses its label. */
.nb-save-btn {
  flex: 0 0 auto; gap: 6px; min-height: 32px; padding: 6px 10px;
  position: relative; font-size: 13px;
}
.nb-save-btn .nb-caret { opacity: .8; }
.nb-save-btn .nb-ico, .nb-save-btn svg { color: #fff; }
/* A dot, not a second button: where the note is kept, at a glance. */
.nb-save-btn::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--aiwa-card); background: transparent;
  opacity: 0; transition: opacity 140ms ease;
}
.nb-save-btn.is-synced::after { background: #6ee7a8; opacity: 1; }
.nb-save-btn.is-locked::after { background: #fbbf24; opacity: 1; }
.nb-save-btn.is-full::after { background: #fca5a5; opacity: 1; }

/* Below this width the note bar keeps Save and drops the words beside the other icons. */
/* The note bar sheds in the same order the formatting row does, and for the same
   reason: it should answer to the width of the editor pane, not the window. */

/* --------------------------------------------------------------- dark mode */
html[data-theme="dark"] .nb-swatch-bar { background: var(--aiwa-ink); }
html[data-theme="dark"] #nbHighlightBar { background: #fff3a3; }
html[data-theme="dark"] .nb-save-btn::after { border-color: var(--aiwa-brand-dark); }

/* --------------------------------------------------------- template gallery */
/* Choosing from a grid of names is guessing, so the gallery shows the actual page
   beside the list — the same layout a person already understands from a file picker. */
.nb-modal.is-templates { width: min(940px, 100%); }
.nb-modal.is-templates .nb-modal-body { padding: 0; }
.nb-tpl { display: grid; grid-template-columns: 288px minmax(0, 1fr); min-height: 480px; max-height: 68vh; }
.nb-tpl-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-right: 1px solid var(--aiwa-line); min-height: 0; }
.nb-tpl-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.nb-tpl-tab {
  padding: 4px 10px; border: 1px solid var(--aiwa-line); border-radius: 999px;
  background: var(--aiwa-card); color: var(--aiwa-muted); font: inherit; font-size: 12px; cursor: pointer;
}
.nb-tpl-tab.is-on { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); font-weight: 620; }
.nb-tpl-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 2px; align-content: start; }
.nb-tpl-item {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  padding: 9px 10px; border: 1px solid transparent; border-radius: var(--aiwa-radius-sm, 8px);
  background: none; text-align: left; cursor: pointer;
}
.nb-tpl-item:hover { background: var(--aiwa-brand-soft); }
.nb-tpl-item.is-on { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); }
.nb-tpl-item .nb-ico-wrap { margin-top: 1px; color: var(--aiwa-muted); }
.nb-tpl-item.is-on .nb-ico-wrap, .nb-tpl-item.is-on .nb-menu-label { color: var(--aiwa-brand-dark); }
.nb-tpl-item.is-on .nb-menu-label { font-weight: 620; }

.nb-tpl-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--aiwa-bg); }
.nb-tpl-preview-head {
  flex: 0 0 auto; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--aiwa-line); background: var(--aiwa-card);
}
.nb-tpl-preview-head h3 { margin: 0; color: var(--aiwa-ink); font-size: 15px; font-weight: 700; }
.nb-tpl-preview-head p { margin: 2px 0 0; color: var(--aiwa-muted); font-size: 12.5px; }
.nb-tpl-paper { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; }
/* The preview is the note as it will look, at three-quarter size so more of it fits. */
.nb-tpl-body {
  max-width: 620px; margin: 0 auto; padding: 26px 30px;
  border: 1px solid var(--aiwa-line); border-radius: var(--aiwa-radius-md, 12px);
  background: var(--aiwa-card); font-size: 13px; line-height: 1.6;
  --nb-font: "Inter", ui-sans-serif, system-ui, sans-serif; --nb-size: 13px; --nb-line: 1.6;
}
.nb-tpl-body h2 { font-size: 1.2em; margin: 1.3em 0 .35em; }
.nb-tpl-body h3 { font-size: 1.05em; }
.nb-tpl-body table { font-size: .95em; }

@media (max-width: 860px) {
  .nb-tpl { grid-template-columns: minmax(0, 1fr); max-height: 74vh; }
  .nb-tpl-side { border-right: 0; border-bottom: 1px solid var(--aiwa-line); max-height: 46vh; }
  .nb-tpl-preview { display: none; }
}

/* Font and size menus show the thing they would apply, so the row is the preview. */
.nb-menu-sample { padding: 7px 10px; }
.nb-menu-sample .nb-menu-label { color: var(--aiwa-text); }
.nb-dot-lg { width: 11px; height: 11px; border: 0; margin-right: 1px; }

/* ------------------------------------------- a toolbar that fits its own pane */
/* The editor pane is narrow when the tools rail, sidebar and list are all open, and the
   viewport width says nothing useful about that. A container query lets the toolbar
   respond to the space it actually has, which is the difference between Insert being
   visible and Insert being scrolled off the end where nobody finds it. */
.nb-main { container-type: inline-size; container-name: nbmain; }

/* Checklist and Insert keep their words longest. They are the two controls people were
   demonstrably failing to find as icons, and a label is the cheapest possible fix. */
/* The right-hand end of the toolbar is about the note rather than the words, so it gets
   a surface of its own: a hairline, a little breathing room, and the only filled button
   on the row. The eye can find "what do I do with this note" without reading every icon. */
.nb-doc-group {
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--aiwa-line);
}
.nb-saved {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--aiwa-muted);
  font-size: 11.5px;
  white-space: nowrap;
  /* A hard ceiling, so no wording change can ever push the buttons past the edge again. */
  max-width: 64px;
  overflow: hidden;
  flex: 0 0 auto;
}
.nb-saved::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aiwa-line-strong);
}
.nb-saved.is-synced::before { background: var(--aiwa-brand); }

/* --------------------------------------------------- one row, shed in order
   The row answers to the width of the editor pane, and it gives things up in the order
   they are least missed. The words go last: Checklist, Insert, Format, Save and This note
   are what let a newcomer read the toolbar instead of decoding it, so symbols and
   duplicates are surrendered first. Everything shed is in a menu; nothing is lost. */
@container nbmain (max-width: 1300px) {
  .nb-block { min-width: 0; }
}
@container nbmain (max-width: 1140px) {
  /* By this width even one word is one word too many, and the dot alone says it. The
     sentence is in the tooltip either way, so nothing is lost by dropping to the dot. */
  .nb-saved { font-size: 0; gap: 0; }
  .nb-saved::before { width: 7px; height: 7px; }
}
@container nbmain (max-width: 1100px) {
  /* Colour and highlight go first: both sit in the Format menu, and neither is something
     a person reaches for on every line the way bold and italic are. */
  .nb-bar [data-nb="colour"],
  .nb-bar [data-nb="highlight"] { display: none; }
  .nb-bar { gap: 3px; }
  .nb-tool-sep { margin: 0 2px; }
  .nb-block { min-width: 0; max-width: 118px; font-size: 12.5px; }
}
@container nbmain (max-width: 980px) {
  .nb-bar { gap: 2px; padding: 7px 7px; }
  .nb-bar .nb-tool { min-width: 28px; padding: 5px 4px; }
  .nb-block { min-width: 0; max-width: 108px; font-size: 12px; }
  .nb-doc-group { padding-left: 8px; gap: 6px; }
}
@container nbmain (max-width: 900px) {
  /* Dividers are decoration; the groups still read as groups from their spacing alone.
     Losing them buys back enough width to keep the words one tier longer. */
  .nb-bar .nb-tool-sep { display: none; }
}
@container nbmain (max-width: 860px) {
  /* Thirteen pixels short of holding every word. Tightening pays for them. */
  .nb-bar { gap: 1px; padding: 7px 6px; }
  .nb-bar .nb-tool { min-width: 27px; }
  .nb-block { min-width: 0; max-width: 100px; }
  .nb-doc-group { padding-left: 7px; gap: 5px; }
}
@container nbmain (max-width: 880px) {
  /* Now the words start to go. This note is first: it sits beside the Save button, which
     already marks that end of the row as being about the note rather than the words. */
  .nb-bar #nbMore .nb-tool-label { display: none; }
}
@container nbmain (max-width: 790px) {
  .nb-bar [data-nb="more"] .nb-tool-label { display: none; }
  .nb-bar [data-nb="insert"] .nb-tool-label { display: none; }
}
@container nbmain (max-width: 710px) {
  /* Checklist keeps its word longest of all — it is the one nobody could find before. */
  .nb-bar .nb-tool-label { display: none; }
  .nb-block { min-width: 0; max-width: 96px; }
}
/* Bold, italic and underline are the last formatting to go, because they are the ones a
   person uses mid-sentence. Below these widths they are still in the Format menu and on
   their usual shortcuts. */
@container nbmain (max-width: 640px) {
  .nb-bar [data-nb="underline"] { display: none; }
}
@container nbmain (max-width: 600px) {
  .nb-bar [data-nb="italic"] { display: none; }
}
@container nbmain (max-width: 560px) {
  /* Help is in the This note menu as well, so the row can let the icon go. */
  .nb-bar #nbShortcuts { display: none; }
  .nb-bar [data-nb="redo"] { display: none; }
  .nb-bar { gap: 1px; padding: 7px 5px; }
  .nb-bar .nb-tool { min-width: 25px; padding: 5px 3px; }
  .nb-block { min-width: 0; max-width: 80px; }
  .nb-doc-group { padding-left: 6px; gap: 4px; }
}

/* Templates get a word, and the emptying of the trash only exists where it makes sense.
   A destructive action on permanent display is a hazard, not a convenience. */
.nb-side-templates { margin: 0 10px 4px; justify-content: flex-start; }
#nbEmptyTrash { display: none; }
.nb-app.is-trash-view #nbEmptyTrash { display: inline-flex; }

/* A font list of forty needs to scroll, group and show what it is offering. */
.nb-menu-fonts { max-height: min(62vh, 560px); overflow-y: auto; }
.nb-menu-fonts .nb-menu-head { position: sticky; top: 0; z-index: 1; background: var(--aiwa-card); }
.nb-menu-fonts .nb-menu-sample .nb-menu-label { font-size: 14px; }
.nb-menu-foot {
  margin: 0 0 4px;
  padding: 2px 10px 8px;
  border-bottom: 1px solid var(--aiwa-line);
  color: var(--aiwa-muted);
  font-size: 11px;
  line-height: 1.45;
}
.nb-set-select {
  min-width: 190px;
  padding: 6px 8px;
  border: 1px solid var(--aiwa-line);
  border-radius: 8px;
  background: var(--aiwa-card);
  color: var(--aiwa-text);
  font: inherit;
  font-size: 13px;
}
.nb-set-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 10px 0 2px; }
.nb-set-label { color: var(--aiwa-text); font-size: 13px; }

/* ------------------------------------------------------- the selection bubble */
/* Select text and the formatting comes to you. It sits above the selection where it
   covers nothing you are about to read, points at the words with a small tail, and gets
   out of the way the moment you type. */
.nb-bubble {
  position: fixed;
  z-index: 65;
  display: none;
  /* Never wider than the window it floats in. */
  max-width: calc(100vw - 16px);
  border: 1px solid var(--aiwa-line);
  border-radius: 10px;
  background: var(--aiwa-card);
  box-shadow: 0 8px 26px rgba(12, 22, 16, .18), 0 1px 2px rgba(12, 22, 16, .1);
  /* A bar that appears under the cursor must never be something you can select or drag,
     or it fights the very selection it exists to serve. */
  user-select: none;
  -webkit-user-select: none;
}
.nb-bubble-row {
  display: flex;
  gap: 2px;
  align-items: center;
  /* On a phone the row scrolls rather than hanging off the edge, so everything stays
     reachable with a swipe. The scroll lives here rather than on the bubble, or it would
     clip the tail that points at the words. */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
}
.nb-bubble-row::-webkit-scrollbar { display: none; }
.nb-bubble.is-open { display: block; animation: nb-bubble-in 110ms var(--aiwa-ease, ease); }
@keyframes nb-bubble-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nb-bubble.is-open { animation: none; } }

/* The tail. It only points when the bubble is above the words; below them it would be
   pointing at the line the person is reading, so it is dropped. */
.nb-bubble::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -5px;
  border-right: 1px solid var(--aiwa-line);
  border-bottom: 1px solid var(--aiwa-line);
  border-radius: 0 0 2px 0;
  background: var(--aiwa-card);
  transform: rotate(45deg);
}
.nb-bubble.is-below::after { display: none; }

.nb-bubble-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--aiwa-text);
  cursor: pointer;
}
.nb-bubble-btn:hover { background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
.nb-bubble-btn.is-on { background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
.nb-bubble-btn:focus-visible { outline: 2px solid var(--aiwa-brand); outline-offset: -1px; }
.nb-bubble-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--aiwa-line); }

/* A finger needs a bigger target than a mouse pointer, and a phone has the room for it
   because the bubble is the only chrome floating over the page. */
@media (max-width: 1024px) {
  .nb-bubble { border-radius: 12px; }
  .nb-bubble-row { padding: 5px; gap: 3px; }
  .nb-bubble-btn { width: 38px; height: 38px; }
  .nb-bubble-sep { height: 22px; }
}
@media (max-width: 460px) {
  /* The dividers are the first thing to go when every pixel is a button. */
  .nb-bubble-row { gap: 1px; padding: 4px; }
  .nb-bubble-sep { display: none; }
  .nb-bubble-btn { width: 36px; height: 36px; }
}

@media print { .nb-bubble { display: none !important; } }

/* --------------------------------------------------------------- the help panel */
/* Four tabs, because a person arrives with one of four questions and should not have to
   read the other three to find theirs. */
.nb-help { display: flex; flex-direction: column; min-height: 0; max-height: 68vh; }
.nb-help-tabs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--aiwa-line);
}
.nb-help-tab {
  padding: 6px 12px;
  border: 1px solid var(--aiwa-line);
  border-radius: 999px;
  background: var(--aiwa-card);
  color: var(--aiwa-text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.nb-help-tab:hover { background: var(--aiwa-brand-soft); }
.nb-help-tab.is-on { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); font-weight: 620; }
.nb-help-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 14px; }
.nb-help-lead { margin: 0 0 16px; color: var(--aiwa-ink); font-size: 14.5px; line-height: 1.55; }
.nb-help-step { margin-bottom: 14px; padding-left: 14px; border-left: 2px solid var(--aiwa-line); }
.nb-help-step h3 { margin: 0 0 3px; color: var(--aiwa-ink); font-size: 13.5px; font-weight: 700; }
.nb-help-step p { margin: 0; color: var(--aiwa-text); font-size: 13px; line-height: 1.6; }
.nb-help-group { margin-bottom: 16px; }
.nb-help-group h3 {
  margin: 0 0 6px;
  color: var(--aiwa-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nb-help-group ul { margin: 0; padding-left: 18px; color: var(--aiwa-text); font-size: 13px; line-height: 1.7; }
.nb-help-state {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid var(--aiwa-line);
  border-radius: var(--aiwa-radius-md, 12px);
  background: var(--aiwa-bg);
}
.nb-help-state strong { color: var(--aiwa-ink); font-size: 13.5px; }
.nb-help-state span { color: var(--aiwa-muted); font-size: 12.5px; line-height: 1.5; }
.nb-help-state.is-on { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); }
.nb-help-state.is-on strong { color: var(--aiwa-brand-dark); }
.nb-help-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nb-help-body .nb-callout { margin-top: 18px; }
.nb-help-body .nb-stats { width: 100%; }

/* The palette is a map of the tool as well as a search box, so it carries the same icons
   the toolbar does and the same section headings the menus do. */
.nb-palette-item { display: flex; gap: 9px; align-items: center; }
.nb-palette-label { flex: 1 1 auto; min-width: 0; text-align: left; }
.nb-palette-item .nb-ico-wrap { flex: 0 0 auto; color: var(--aiwa-muted); }
.nb-palette-item.is-on .nb-ico-wrap { color: var(--aiwa-brand-dark); }
.nb-palette-list .nb-menu-head { margin: 10px 0 2px; padding: 0 4px; }
.nb-palette-list .nb-menu-head:first-child { margin-top: 0; }

/* Templates leave gaps for you to fill in. A bare non-breaking space reads as a typo,
   so each gap is a faint ellipsis you type over — visible enough to find, quiet enough
   that a half-filled template still looks like a document rather than a form. */
.nb-fill { color: var(--aiwa-muted); opacity: .65; }
.nb-body .nb-fill { font-style: normal; }
@media print { .nb-fill { color: #999; } }

/* When the row does have to scroll, say so: a fade at the edge is the difference between
   "that is all there is" and "there is more this way". */
.nb-bar { position: relative; }
.nb-bar::after {
  content: ""; position: sticky; right: 0; flex: 0 0 22px; height: 30px; margin-left: -22px;
  background: linear-gradient(90deg, transparent, var(--aiwa-card) 70%);
  pointer-events: none;
}

/* ==========================================================================
   v3 — two layouts, not one squeezed
   ==========================================================================
   Wide screens get three panes, either side one foldable. Everything narrower gets
   one screen at a time with a drawer, which is how a notes app on a phone actually
   works. The two are separate layouts rather than the same grid at different sizes,
   because the compact one needs different chrome, not smaller chrome. */

/* ------------------------------------------------- collapsing a pane (wide) */
/* The drawer controls belong to the compact layout only: on a wide screen the notebooks
   pane is simply there, so there is nothing to open and nothing to close. */
.nb-drawer-open, .nb-drawer-close, .nb-fab, .nb-back { display: none; }

/* The fold control is a quiet neighbour of the search field, the same height as it, and
   it only speaks up on hover — it is not the thing anyone came to this column for. */
.nb-pane-hide {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--aiwa-radius-sm, 8px);
  color: var(--aiwa-muted);
}
.nb-pane-hide:hover { border-color: var(--aiwa-line); background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
.nb-pane-hide:focus-visible { outline: 2px solid var(--aiwa-brand); outline-offset: 1px; }

.nb-app.is-list-off { grid-template-columns: var(--nb-rail) 0 minmax(0, 1fr); }
.nb-app.is-list-off .nb-list-col { overflow: hidden; border-right: 0; visibility: hidden; }
/* A folded pane must always have a way back, and it is the back arrow in the note
   bar — never a keyboard shortcut nobody will guess. */
.nb-app.is-list-off .nb-back { display: inline-flex; transform: rotate(180deg); }
.nb-app.is-list-off .nb-back svg { transform: rotate(180deg); }

/* --------------------------------------------------------------- the drawer */
/* The drawer and its scrim belong to the workspace, not to the window: anchored to the
   page they slide under the site header, which hides the New note button at the top of
   the drawer and dims a header that still works. */
.nb-app { position: relative; }
.nb-scrim {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(15, 25, 19, .42);
  animation: nb-fade 140ms var(--aiwa-ease, ease);
}
@keyframes nb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nb-scrim { animation: none; } }

/* Just above the compact boundary the three panes are all present but narrow, so the
   two side ones give up what they can before the editor does. */
@media (min-width: 1025px) and (max-width: 1320px) {
  .notebook-page { --nb-rail: 208px; --nb-list: 268px; }
  .nb-outline-panel { flex-basis: 200px; }
}

/* ------------------------------------------------- compact: one screen at a time */
@media (max-width: 1024px) {
  .nb-app {
    grid-template-columns: minmax(0, 1fr);
    /* The app shell already sizes the page against dvh, which is what keeps the bottom
       toolbar above the phone's address bar rather than just under it. Taking the full
       height again here would push the workspace past the fold by the header's height. */
    height: 100%;
  }
  .nb-app.is-list-off { grid-template-columns: minmax(0, 1fr); }
  .nb-app.is-list-off .nb-list-col { visibility: visible; }

  /* one screen showing */
  .nb-list-col, .nb-main { display: none; }
  .nb-app[data-pane="list"] .nb-list-col { display: flex; }
  .nb-app[data-pane="editor"] .nb-main { display: flex; }
  .nb-app:not([data-pane]) .nb-list-col { display: flex; }
  .nb-list-col { border-right: 0; }
  .nb-outline-panel, .nb-split { display: none !important; }

  /* notebooks slide over the top rather than taking a column */
  .nb-side {
    position: absolute;
    z-index: 61;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(310px, 86vw);
    border-right: 1px solid var(--aiwa-line);
    box-shadow: 0 18px 48px rgba(12, 22, 16, .22);
    transform: translateX(-102%);
    transition: transform 200ms var(--aiwa-ease, ease);
  }
  .nb-app.is-drawer .nb-side { transform: none; }
  @media (prefers-reduced-motion: reduce) { .nb-side { transition: none; } }


  .nb-drawer-open, .nb-drawer-close, .nb-back { display: inline-flex; }
  .nb-drawer-open { width: 38px; height: 38px; }
  /* The fold control is meaningless here — there is no second pane to fold away. */
  .nb-pane-hide { display: none; }
  .nb-app.is-list-off .nb-back { transform: none; }
  .nb-app.is-list-off .nb-back svg { transform: none; }

  /* the list screen */
  .nb-list-col { position: relative; }
  .nb-side-foot { padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
  .nb-list-head { padding: 10px 14px 9px; }
  .nb-list-meta { justify-content: space-between; }
  .nb-search { padding-block: 10px; font-size: 15px; }
  .nb-list { padding: 8px 12px calc(84px + env(safe-area-inset-bottom)); }
  .nb-card { padding: 13px 14px 12px 16px; border-radius: 14px; }
  .nb-card-title { font-size: 15px; }
  .nb-card-preview { font-size: 13.5px; }
  .nb-fab {
    display: inline-flex;
    position: absolute;
    z-index: 5;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--aiwa-brand);
    color: #fff;
    box-shadow: 0 8px 22px rgba(19, 122, 61, .38);
    cursor: pointer;
  }
  .nb-fab:active { background: var(--aiwa-brand-dark); }

  /* the editor screen: title bar on top, tools under the thumb */
  .nb-main { position: relative; }
  .nb-bar {
    order: 9;
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--aiwa-line);
    border-bottom: 0;
    box-shadow: 0 -6px 18px rgba(15, 25, 19, .07);
  }
  .nb-bar::after { display: none; }
  /* The row scrolls on a phone, so the two things that must never scroll away are
     pinned to its ends: the way back, and Save. Losing the Save button off the right
     edge of a scrolling row is exactly the bug this whole pass exists to stop. */
  .nb-bar .nb-back {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--aiwa-card);
    box-shadow: 6px 0 8px -4px rgba(15, 25, 19, .12);
  }
  .nb-bar .nb-doc-group {
    position: sticky;
    right: 0;
    z-index: 2;
    padding-left: 10px;
    background: var(--aiwa-card);
    box-shadow: -8px 0 10px -4px rgba(15, 25, 19, .12);
  }
  .nb-bar .nb-saved { display: none; }
  /* Touch targets, not mouse targets. */
  .nb-bar .nb-tool { min-width: 38px; min-height: 38px; }
  .nb-block { min-height: 34px; }
  /* The note bar keeps only what a thumb needs: the way back, the save state, Save, and
     the menu that holds the rest. Star, pin, the notebook picker, find, outline, focus
     and Look and feel all move into that menu rather than off the right-hand edge, where
     the previous build left them. */
  .nb-save-btn { min-height: 38px; padding: 0 14px; }
  .nb-mini { width: 36px; height: 36px; }
  .nb-paper { padding: 16px 14px 24vh; }
  .nb-sheet { padding: 0; }
  .nb-title { font-size: 25px; }
  /* Two rows of chrome under a phone screen is one too many, so the tag line and the
     word count share a row and neither wraps. */
  .nb-foot { flex-wrap: nowrap; gap: 8px; padding: 6px 12px; font-size: 11px; }
  .nb-foot > #nbMeta { flex: 0 0 auto; white-space: nowrap; }
  .nb-tags { flex: 1 1 auto; min-width: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }

  /* Menus and dialogues become sheets: full width, anchored to the bottom, thumb-sized
     rows. A 280px dropdown floating mid-screen is a desktop idea. */
  .nb-menu {
    position: fixed !important;
    z-index: 70;
    left: 8px !important;
    right: 8px;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto;
    max-width: none;
    max-height: 72dvh;
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 -10px 40px rgba(12, 22, 16, .26);
  }
  .nb-menu-item { min-height: 44px; }
  .nb-modal { max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .nb-modal-wrap { align-items: flex-end; padding: 0; }
}

/* A portrait tablet is one screen, but a 768px-wide line of text is a bad read and a
   full-width note card is a stretched one. Both get a measure and sit centred. */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
  .nb-list-head > *, .nb-list, .nb-paper > .nb-sheet, .nb-foot {
    max-width: 760px;
    margin-inline: auto;
    width: 100%;
  }
  .nb-list { padding-inline: 0; }
  .nb-fab { right: calc(50% - 380px + 16px); }
  .nb-title { font-size: 30px; }
}

/* ------------------------------------------------------- tablet, on its side */
/* Held upright a tablet is a phone with more room, and one screen reads better than two
   narrow ones — so portrait keeps the single-screen model above, untouched. Turned on its
   side there is room for the list and the note together, and only then does it split. */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: landscape) {
  .nb-app { grid-template-columns: minmax(0, 296px) minmax(0, 1fr); }
  .nb-list-col,
  .nb-app[data-pane] .nb-list-col,
  .nb-app:not([data-pane]) .nb-list-col,
  .nb-main,
  .nb-app[data-pane] .nb-main { display: flex; }
  .nb-list-col { border-right: 1px solid var(--aiwa-line); }
  /* Both panes are on screen, so there is nowhere to go back to. */
  .nb-back { display: none; }
  .nb-list { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* A mouse or a stylus is likely here, and the row fits, so the toolbar goes back on top
     where it sits on a desktop. */
  .nb-bar {
    order: 0;
    position: static;
    padding: 8px 10px;
    border-top: 0;
    border-bottom: 1px solid var(--aiwa-line);
    box-shadow: none;
  }
  .nb-bar::after { top: 0; bottom: 0; }
  /* Menus and dialogues go back to being menus and dialogues. */
  .nb-menu {
    position: absolute !important;
    right: auto;
    bottom: auto !important;
    width: max-content;
    max-height: 70vh;
    border-radius: var(--aiwa-radius-md, 12px);
    box-shadow: 0 14px 34px rgba(12, 22, 16, .16);
  }
  .nb-modal { border-radius: var(--aiwa-radius-md, 12px); max-height: 88vh; }
  .nb-modal-wrap { align-items: center; padding: 18px; }
  .nb-paper { padding: 22px 20px 26vh; }
  /* The note bar has the width for the everyday controls again. */
}

/* A phone on its side is still a phone: too short for two columns and a toolbar. */
@media (max-width: 699px) and (orientation: landscape) {
  .nb-paper { padding-bottom: 12vh; }
  .nb-title { font-size: 21px; }
}