/* Book appearance and navigation. Ported from the approved September 10
   design study; no preview controls, fixture data, or development wiring. */
:root {
  --book-ochre: #a58b55;
  --book-ember: #8a5b48;
  --book-jungle: #4d6861;
  --book-cobalt: #526b8d;
  --book-plum: #6b5b70;
  --book-sage: #949b8b;
  --book-heading-ink: #145348;
  --material-paper: 1;
  --material-cloth: 0.2;
  --material-plastic: 0.2;
  --material-labels: 0;
  --material-wood: 0.35;
  --logo-image: url('/assets/book/floating-folio-2e61476f76.png');
}
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* Palette, typography and navigation */
html[data-theme='book'] {
  --book-paper: #eee2c7;
  --book-paper-light: #f8efd9;
  --book-ink: #302e24;
  --book-rule: #b8a37a;
  --vui-color-bg: var(--book-paper);
  --vui-color-surface: var(--book-paper);
  --vui-color-surface-raised: var(--book-paper-light);
  --vui-color-text: var(--book-ink);
  --vui-color-text-strong: var(--book-ink);
  --vui-color-text-muted: #665c46;
  --vui-color-line: var(--book-rule);
  --vui-color-line-strong: var(--book-ochre);
  --vui-color-accent: var(--book-jungle);
  --vui-color-accent-strong: var(--book-jungle);
  --vui-color-accent-soft: color-mix(in srgb, var(--book-sage) 25%, var(--book-paper));
  --vui-font-body: 'DM Sans', sans-serif;
  --vui-font-heading: 'IM Fell English', Georgia, serif;
  --vui-font-display: 'IM Fell English', Georgia, serif;
  --vui-font-mono: 'DM Sans', sans-serif;
  --color-bg: var(--book-paper);
  --color-surface: var(--book-paper);
  --color-surface-raised: var(--book-paper-light);
  --color-text: var(--book-ink);
  --color-text-strong: var(--book-ink);
  --color-text-muted: #665c46;
  --color-line: var(--book-rule);
  --color-line-strong: var(--book-ochre);
  --color-accent: var(--book-jungle);
  --color-accent-strong: var(--book-jungle);
  --color-accent-soft: color-mix(in srgb, var(--book-sage) 25%, var(--book-paper));
  --color-shell-divider: var(--book-rule);
  --color-column-hl: color-mix(in srgb, var(--book-sage) 15%, transparent);
  --color-column-dragging: color-mix(in srgb, var(--book-sage) 25%, transparent);
  --color-loc-deck-bg: color-mix(in srgb, var(--book-plum) 10%, var(--book-paper));
  --color-loc-deck-text: var(--book-plum);
  --color-loc-deck-line: var(--book-plum);
  --color-loc-container-bg: color-mix(in srgb, var(--book-ochre) 15%, var(--book-paper));
  --color-loc-container-text: #665c46;
  --color-loc-container-line: var(--book-ochre);
}
html[data-theme='book'] .app-shell {
  border: 0;
  box-shadow: none;
  background: var(--book-jungle);
}
html[data-theme='book'] .app-header,
html[data-theme='book'] .app-left {
  --color-surface: var(--book-jungle);
  --color-surface-raised: var(--book-jungle);
  --color-text: var(--book-paper-light);
  --color-text-strong: var(--book-paper-light);
  --color-text-muted: #e0dcc9;
  --color-line: #ffffff28;
  --color-line-strong: var(--book-ochre);
  --color-accent: var(--book-paper-light);
  --color-accent-strong: var(--book-paper-light);
  background: var(--book-jungle);
  color: var(--book-paper-light);
}
html[data-theme='book'] .app-header h1 {
  font:
    25px 'IM Fell English',
    serif;
}
html[data-theme='book']
  .app-left
  :is(
    .scope-option.is-selected,
    .scope-option-group-heading:has(.scope-option-group-destination.is-selected)
  ) {
  --color-text: var(--book-ink);
  --color-text-strong: var(--book-ink);
  --color-accent: var(--book-ink);
  color: var(--book-ink);
}
html[data-theme='book']
  .app-left
  :is(.scope-option.is-selected, .scope-option-group-destination.is-selected)
  * {
  color: var(--book-ink);
}
html[data-theme='book']
  .app-left
  :is(
    .scope-option:hover,
    .scope-option:focus-visible,
    .scope-option-group-heading:hover,
    .scope-option-group-heading:focus-within
  ) {
  --color-text: var(--book-ink);
  --color-text-strong: var(--book-ink);
  --color-text-muted: var(--book-ink);
  --color-accent: var(--book-ink);
  background: color-mix(in srgb, var(--book-sage) 75%, var(--book-paper));
  color: var(--book-ink);
}
html[data-theme='book']
  .app-left
  :is(
    .scope-option:hover,
    .scope-option:focus-visible,
    .scope-option-group-heading:hover,
    .scope-option-group-heading:focus-within
  )
  * {
  color: var(--book-ink);
}
html[data-theme='book']
  .app-left
  :is(
    .scope-option,
    .scope-option-group-heading,
    .scope-option-group-destination,
    .scope-option-group-toggle,
    .scope-option-group-add
  ) {
  border-radius: 2px;
  transition: none;
}
html[data-theme='book'] .app-left .scope-option-group-body {
  gap: 4px;
}
html[data-theme='book']
  .app-left
  :is(
    .scope-option.is-selected,
    .scope-option-group-heading:has(.scope-option-group-destination.is-selected)
  ) {
  background: var(--book-paper);
  box-shadow: none;
}
html[data-theme='book']
  .app-left
  :is(
    .scope-option.is-selected:hover,
    .scope-option.is-selected:focus-visible,
    .scope-option-group-heading:has(.scope-option-group-destination.is-selected):hover,
    .scope-option-group-heading:has(.scope-option-group-destination.is-selected):focus-within
  ) {
  background: var(--book-paper-light);
}
html[data-theme='book']
  :is(#collectionControlsToolbar, #containerIdentityStrip)
  :is(.btn, .icon-btn, .segment-btn, input[type='search'], .search-wrap, .toggle-view, .segmented) {
  border-radius: 2px;
  box-shadow: none;
}
html[data-theme='book']
  #collectionControlsToolbar
  :is(.btn, .segment-btn, .search-wrap, input[type='search']) {
  border-color: var(--book-rule);
}
html[data-theme='book'] #collectionControlsToolbar .segment-btn.active {
  background: var(--book-jungle);
  color: var(--book-paper-light);
}
@media (min-width: 901px) {
  html[data-theme='book'] #collectionControlsToolbar :is(.btn, .segment-btn) {
    min-height: 32px;
  }
}
html[data-theme='book'] .app-left [data-mobile-sidebar-tab] {
  color: var(--book-paper-light);
}
html[data-theme='book'] .app-left input[type='search'] {
  background: var(--book-paper-light);
  color: var(--book-ink);
}
html[data-theme='book'] .card-name,
html[data-theme='book'] .card-preview-link {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 16px;
}
/* Inline history references retain the compact row's single-line metrics. */
html[data-theme='book'] .history-list .card-preview-link {
  font: inherit;
}
html[data-theme='book'] :is(.grid-list-table, #listView > table) thead th {
  background: var(--book-paper);
  box-shadow: inset 0 -3px 0 -1px var(--book-ochre);
}
html[data-theme='book'] :is(.grid-list-table, #listView > table) th[data-book-label] {
  text-align: left;
}
html[data-theme='book']
  :is(.grid-list-table, #listView > table)
  th[data-book-label]:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18%;
  bottom: 18%;
  right: 0;
  width: 1px;
  background: color-mix(in srgb, var(--book-rule) 65%, transparent);
  pointer-events: none;
}
/* The real deck workbench sits inside the same navigable app shell. */
.book-deck-shell #collectionSection,
.book-deck-shell #collectionControlsToolbar,
.book-deck-shell #containerIdentityStrip {
  display: none !important;
}
.book-deck-shell {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Keep the real resize target and its keyboard focus outline, but use only
   the permanent separator as the visible column rule. */
html[data-theme='book'] .collection-column-resize-handle::after {
  display: none;
}
html[data-theme='book'][data-headings='ornate']
  :is(.grid-list-table, #listView > table)
  th[data-book-label] {
  height: 60px;
  padding: 8px;
  font-size: 0;
  text-align: left;
  color: var(--book-jungle);
  vertical-align: middle;
}
html[data-theme='book'][data-headings='ornate']
  :is(.grid-list-table, #listView > table)
  th[data-book-label]
  > .col-label-full,
html[data-theme='book'][data-headings='ornate']
  :is(.grid-list-table, #listView > table)
  th[data-book-label]
  > .col-label-short {
  display: none;
}
html[data-theme='book'][data-headings='ornate']
  :is(.grid-list-table, #listView > table)
  th[data-book-label]::before {
  content: attr(data-book-label);
  display: inline-block;
  vertical-align: middle;
  font:
    700 30px/1 'UnifrakturCook',
    Georgia,
    serif;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 1px var(--book-paper-light);
  position: relative;
}
html[data-theme='book'][data-headings='ornate'] .collection-sort-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  top: auto;
  right: auto;
  left: 0;
  width: 0;
  height: 8px;
  margin-left: 0;
  padding-top: 6px;
  vertical-align: middle;
  transform: none;
  visibility: visible;
}
html[data-theme='book'][data-headings='ornate'] .collection-sort-icon svg {
  display: none;
}
/* Production flips and translates the SVG wrapper for descending sorts.
   This theme flips its own triangle instead, so the wrapper must stay put. */
html[data-theme='book'][data-headings='ornate']
  thead
  th.sort-active[data-sort-direction]
  .collection-sort-icon {
  transform: none;
}
html[data-theme='book'][data-headings='ornate'] .collection-sort-icon::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  width: 4px;
  height: 4px;
  background: currentColor;
  transform: rotate(45deg);
}
html[data-theme='book'][data-headings='ornate'] .sort-active .collection-sort-icon::before {
  width: 8px;
  height: 6px;
  transform: none;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
html[data-theme='book'][data-headings='ornate']
  .sort-active[data-sort-direction='desc']
  .collection-sort-icon::before {
  transform: rotate(180deg);
}
html[data-theme='book'] :is(.grid-list-table, #listView > table) tbody td {
  border-color: color-mix(in srgb, var(--book-sage) 47%, var(--book-paper));
}
html[data-compact='true'] :is(.grid-list-table, #listView > table) tbody td {
  padding-top: 3px;
  padding-bottom: 3px;
}
html[data-theme='book'] #cardPreview {
  padding: 9px;
  border-radius: 2px;
}
html[data-theme='book'] #cardPreview img {
  border-radius: 9px;
}
/* Reuse Vellum's existing plastic toploader: its ring, sheen, and tape stay
   owned by .card-sleeve. Keep the original preview footprint for placement. */
html[data-theme='book'][data-frame='sleeve'] #cardPreview.card-sleeve {
  --card-sleeve-width: 300px;
  padding: calc(var(--card-sleeve-width) * 0.08) calc(var(--card-sleeve-width) * 0.055)
    calc(var(--card-sleeve-width) * 0.055);
  filter: none;
}
html[data-theme='book'] .card-preview-info-eyebrow {
  display: none;
}
html[data-theme='book'][data-lighting='top-right'] .app-header {
  background: linear-gradient(105deg, #10251b15, #fff3ce35), var(--book-jungle);
}
html[data-theme='book'][data-lighting='top-right'] .app-left {
  background: linear-gradient(205deg, transparent, #0c201b35), var(--book-jungle);
}
html[data-theme='book'][data-lighting='top-right'] .app-center,
html[data-theme='book'][data-lighting='top-right'] {
  background:
    radial-gradient(ellipse at 100% 0%, #fff9e785, transparent 65%),
    linear-gradient(225deg, transparent 28%, #74592d14), var(--book-paper);
  box-shadow: none;
}
html[data-theme='book'][data-lighting='top-right']
  :is(#cardPreview, .deck-details-modal-card, .detail-drawer) {
  background: radial-gradient(ellipse at 100% 0%, #fff9e775, transparent 75%), var(--book-paper);
  border-top-color: color-mix(in srgb, var(--book-jungle) 65%, #fff2ce);
  border-right-color: color-mix(in srgb, var(--book-jungle) 76%, #fff2ce);
  box-shadow:
    -3px 5px 7px #14221c26,
    -12px 18px 30px #14221c40;
}
html[data-theme='book'] #detailDrawer.detail-drawer:not(.visible) {
  box-shadow: none;
}
@media (max-width: 700px) {
  #book-stage {
    padding: 0;
  }
}

/* Alternate navigation, selected by URL; original workbench stays intact. */
.book-sidebar-workbench {
  display: flex;
  flex-direction: column;
  position: relative;
}
#book-stage .book-sidebar-workbench .app-shell {
  flex: 1;
  height: 0;
  min-height: 0;
  transition: none;
}
.book-header {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  color: var(--color-text);
  z-index: 26;
}
.book-header > span {
  order: -1;
}
.book-header .book-sidebar-toggle {
  margin-left: auto;
}
html[data-theme='book'] .book-header {
  color: var(--book-paper-light);
}
body.left-sidebar-collapsed .book-header {
  width: 48px;
  padding: 0 8px;
  color: var(--color-text);
}
body.left-sidebar-collapsed .book-header > span {
  display: none;
}
.book-header > span {
  font:
    22px 'IM Fell English',
    Georgia,
    serif;
}
.book-sidebar-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  border-radius: 5px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.book-sidebar-toggle:hover {
  background: color-mix(in srgb, currentColor 9%, transparent);
}
.book-sidebar-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.book-sidebar-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.book-sidebar-workbench :is(.sidebar-collapsed-trigger, .sidebar-toggle) {
  display: none !important;
}
.book-sidebar-backdrop {
  display: none;
}
.book-header-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.book-header-tools :is(.mobile-utility-menu, #syncAccountSlot) {
  position: relative;
  margin: 0;
}
.book-header-tools .mobile-utility-trigger {
  display: flex;
  position: static;
  height: 32px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.book-header-tools .mobile-utility-trigger .fab-label {
  display: none;
}
.book-header-tools .mobile-utility-menu:not([open]) > .mobile-utility-menu-panel {
  display: none;
}
.book-header-tools .mobile-utility-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  bottom: auto;
  width: 180px;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-surface-raised);
  box-shadow: 0 6px 18px #0002;
}
.book-header-tools .mobile-utility-menu-panel .fab-btn {
  position: static;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-height: 34px;
}
.book-header-tools .sync-chip {
  position: static;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  color: inherit;
  border-color: var(--color-line);
}
.book-header-tools .sync-menu {
  left: auto;
  right: 0;
  top: calc(100% + 8px);
  bottom: auto;
}
@media (min-width: 901px) {
  #book-stage .book-sidebar-workbench .app-left {
    display: flex;
    flex-direction: column;
    padding-top: 52px;
  }
  .book-sidebar-workbench #sidebarBrandSlot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #ffffff20;
  }
  .book-sidebar-workbench .scope-option-group + .scope-option-group {
    border-top: 0;
    margin-top: 20px;
    padding-top: 0;
  }
  .book-sidebar-workbench .scope-option-group-heading {
    font-size: 12px;
  }
  .book-sidebar-workbench .scope-option-group-chevron {
    display: block;
  }
  .book-sidebar-workbench .scope-option-group-toggle .scope-option-group-icon {
    display: none;
  }
  body.left-sidebar-collapsed #book-stage .book-sidebar-workbench .app-left {
    display: none;
  }
  body.left-sidebar-collapsed
    #book-stage
    .book-sidebar-workbench
    .collection-scope-header:not(.hidden) {
    padding-left: 56px;
  }
  /* Keep collapsed navigation in its own structural gutter, separate from
     the current collection/container identity and its actions. */
  body.left-sidebar-collapsed #book-stage .book-sidebar-workbench .app-shell {
    padding-left: 48px;
    box-sizing: border-box;
  }
  body.left-sidebar-collapsed .book-sidebar-workbench .book-header {
    height: 100%;
    width: 48px;
    padding: 10px 8px;
    align-items: flex-start;
    border-right: 1px solid var(--color-line);
    background: var(--color-surface);
  }
  body.left-sidebar-collapsed
    #book-stage
    .book-sidebar-workbench
    .collection-scope-header:not(.hidden) {
    padding-left: 16px;
  }
  body.left-sidebar-collapsed .book-sidebar-workbench .book-sidebar-toggle {
    border: 1px solid var(--color-line);
    border-radius: 2px;
  }
  .book-sidebar-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 6px;
    z-index: 5;
    cursor: col-resize;
    touch-action: none;
  }
}
@media (max-width: 900px) {
  .book-sidebar-workbench .book-header {
    width: 48px;
    padding: 0 8px;
  }
  .book-sidebar-workbench .book-header > span {
    display: none;
  }
  html[data-theme='book'] .book-sidebar-workbench .book-header {
    color: var(--color-text);
  }
  #book-stage .book-sidebar-workbench .collection-scope-header:not(.hidden) {
    padding-left: 56px;
  }
  .book-sidebar-workbench .book-header {
    border-right: 1px solid var(--color-line);
  }
  .book-sidebar-workbench .book-sidebar-toggle {
    border: 1px solid var(--color-line);
    border-radius: 2px;
  }
  #book-stage .book-sidebar-workbench .collection-scope-header:not(.hidden) {
    padding-left: 64px;
  }
  #book-stage .book-sidebar-workbench .app-header {
    display: none;
  }
  body:not(.left-drawer-open) #book-stage .book-sidebar-workbench .app-left {
    position: fixed;
    top: calc(0px + 52px);
    bottom: 0;
    left: 0;
    width: min(280px, 85vw);
    height: auto;
    max-height: none;
    z-index: 80;
    transform: translateX(-100%);
    visibility: hidden;
    display: flex;
    flex-direction: column;
    padding: 16px;
    transition: none;
  }
  body:not(.left-drawer-open) #book-stage .book-sidebar-mobile-open .app-left {
    transform: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .book-sidebar-mobile-open .book-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: calc(0px + 52px) 0 0;
    z-index: 79;
    border: 0;
    border-radius: 0;
    background: #16251d55;
  }
  body:not(.left-drawer-open) #book-stage .book-sidebar-workbench #collectionScopeSection {
    display: block !important;
  }
  body:not(.left-drawer-open)
    #book-stage
    .book-sidebar-workbench
    .app-left
    > :not(#collectionScopeSection):not(#sidebarBrandSlot) {
    display: none !important;
  }
  body:not(.left-drawer-open) #book-stage .book-sidebar-workbench #sidebarBrandSlot {
    display: flex;
    margin-top: auto;
    padding-top: 16px;
  }
  .book-sidebar-resize {
    display: none;
  }
  .book-sidebar-mobile-open #sidebarBrandSlot .sync-chip {
    position: static;
  }
}

/* Paper, cloth, wood and card sleeves */
html[data-theme='book'] :is(.app-center) {
  position: relative;
  isolation: isolate;
}
html[data-theme='book'] :is(.app-center)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: url('/assets/book/paper-grain-6e3cb5d244.svg');
  background-size: 180px;
  mix-blend-mode: multiply;
  opacity: calc(var(--material-paper) * 0.28);
}
html[data-theme='book'] .app-left {
  isolation: isolate;
}
html[data-theme='book'] .app-center::before {
  content: none;
}
html[data-theme='book'] .app-left::after,
html[data-theme='book'] .book-header.has-gutter-account::after {
  /* Reset the production sidebar's retired, hidden decorative rail. */
  all: unset;
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, #fff2 0 1px, #0002 1px 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, #fff2 0 1px, #0002 1px 2px, transparent 2px 4px),
    url('/assets/book/paper-grain-6e3cb5d244.svg');
  background-size:
    4px 4px,
    4px 4px,
    150px;
  opacity: calc(var(--material-cloth) * 0.85);
  mix-blend-mode: soft-light;
}
html[data-theme='book'][data-material-labels='true'] :is(.loc-pill, .tag-chip, .tag-pill) {
  background-image:
    linear-gradient(
      rgb(248 239 217 / calc(1 - var(--material-labels) * 0.6)),
      rgb(248 239 217 / calc(1 - var(--material-labels) * 0.6))
    ),
    url('/assets/book/paper-grain-6e3cb5d244.svg');
  background-blend-mode: normal, soft-light;
  border-radius: 2px;
}
html[data-theme='book'][data-material-wood='true'] :is(.deck-columns, .deck-hand-cards) {
  background-image:
    linear-gradient(
      rgb(238 226 199 / calc(1 - var(--material-wood))),
      rgb(238 226 199 / calc(1 - var(--material-wood)))
    ),
    url('/assets/book/wood-grain-315364c52a.svg');
  background-size: auto, 512px;
  background-color: var(--book-paper);
  padding: 18px;
  border-radius: 2px;
}
html[data-theme='book'][data-frame='sleeve'] #cardPreview.card-sleeve {
  box-shadow: inset 0 0 0 6px rgb(255 255 255 / calc(var(--material-plastic) * 0.46));
  background:
    linear-gradient(
      112deg,
      rgb(255 255 255 / calc(var(--material-plastic) * 0.64)) 0 18%,
      rgb(255 255 255 / calc(var(--material-plastic) * 0.18)) 19% 40%,
      transparent 41%
    ),
    linear-gradient(180deg, #ded6c680, #ac9e8866);
}
html[data-theme='book'][data-frame='sleeve'] #cardPreview.card-sleeve::before,
html[data-theme='book'][data-frame='sleeve'] #cardPreview.card-sleeve::after {
  opacity: var(--material-plastic);
}

/* Controls, tables and overlays */
/* Live-app presentation only. App state, positioning, focus, and persistence
   stay with the production components. */
html[data-theme='book'] {
  --book-row-rule: color-mix(in srgb, var(--book-sage) 26%, var(--book-paper));
  --book-overlay-rule: color-mix(in srgb, var(--book-sage) 66%, var(--book-paper));
  --book-overlay-shadow: 0 2px 4px #302e2410, 0 10px 28px #302e2421;
  --book-hover: color-mix(in srgb, var(--book-sage) 14%, var(--book-paper-light));
  --book-selected: color-mix(in srgb, var(--book-sage) 30%, var(--book-paper));
  --book-primary-hover: color-mix(in srgb, var(--book-jungle) 86%, var(--book-ink));
  --vui-color-btn-primary-hover: var(--book-primary-hover);
  --color-btn-primary-hover: var(--book-primary-hover);
  --vui-modal-card-bg: var(--book-paper-light);
  --vui-modal-card-border: 1px solid var(--book-overlay-rule);
  --vui-modal-card-radius: 2px;
  --vui-modal-card-shadow: var(--book-overlay-shadow);
  --color-line-faint: var(--book-row-rule);
  --vui-color-line-faint: var(--book-row-rule);
  --color-focus-ring: var(--book-jungle);
  --vui-focus-ring: 2px solid var(--book-jungle);
}

/* The type and spacing carry the table; rules only help track a row. */
html[data-theme='book'] :is(#listView > table, .grid-list-table, .deck-text-table) thead th {
  border-bottom: 1px solid var(--book-overlay-rule);
  box-shadow: none;
}
html[data-theme='book']
  :is(#listView > table, .grid-list-table)
  th[data-book-label]:not(:last-child)::after {
  top: 28%;
  bottom: 28%;
  background: color-mix(in srgb, var(--book-sage) 30%, transparent);
}
html[data-theme='book'] :is(#listView > table, .grid-list-table, .deck-text-table) tbody tr {
  border-bottom: 1px solid var(--book-row-rule);
  transition: none;
}
html[data-theme='book'] :is(#listView > table, .grid-list-table, .deck-text-table) tbody td {
  border-bottom: 1px solid var(--book-row-rule);
}
html[data-theme='book']
  :is(#listView > table, .grid-list-table, .deck-text-table)
  tbody
  tr.detail-active-row {
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme='book']
    :is(#listView > table, .grid-list-table, .deck-text-table)
    tbody
    tr:hover {
    --book-row-fill: var(--book-hover);
    background: var(--book-row-fill);
  }
  html[data-theme='book']
    :is(#listView > table, .grid-list-table, .deck-text-table)
    tbody
    tr:hover
    > td {
    background: var(--book-row-fill);
  }
}
html[data-theme='book']
  :is(#listView > table, .grid-list-table, .deck-text-table)
  tbody
  tr:is(.row-selected, .detail-active-row) {
  --book-row-fill: var(--book-selected);
  background: var(--book-row-fill);
  animation: none;
}
html[data-theme='book']
  :is(#listView > table, .grid-list-table, .deck-text-table)
  tbody
  tr:is(.row-selected, .detail-active-row)
  > td {
  background: var(--book-row-fill);
}
/* The recent-add marker survives until the next app render. Do not replace its
   transient flash with a permanent fill; the app's toast confirms the edit. */
html[data-theme='book'] tbody tr.row-added-flash {
  animation: none;
}

/* One family of paper surfaces. Keep native popover placement and drawer
   transforms intact, including dragged dialogs and the mobile history sheet.
   #detailDrawer matches the specificity of the earlier #cardPreview frame
   experiment, which grouped card previews and dialogs in the same rule. */
html[data-theme='book'][data-frame]
  :is(
    #detailDrawer,
    .ui-modal-card,
    .deck-details-modal-card,
    .confirm-modal-card,
    .detail-drawer,
    .ui-drawer,
    .settings-popover,
    .collection-toolbar-popover,
    .row-tag-popover,
    .row-context-menu,
    .ui-popover,
    .ms-popover,
    .sync-menu,
    .mobile-utility-menu-panel,
    .feedback-capture-popover,
    .mcp-chat-panel,
    .toast
  ) {
  --color-bg: var(--book-paper-light);
  --color-surface: var(--book-paper-light);
  --color-surface-raised: var(--book-paper-light);
  --color-text: var(--book-ink);
  --color-text-strong: var(--book-ink);
  --color-text-muted: #665c46;
  --color-line: var(--book-overlay-rule);
  --color-line-strong: var(--book-overlay-rule);
  --color-accent: var(--book-jungle);
  --color-accent-strong: var(--book-jungle);
  --vui-color-surface-raised: var(--book-paper-light);
  --vui-color-text: var(--book-ink);
  --vui-color-text-strong: var(--book-ink);
  color: var(--book-ink);
  background-color: var(--book-paper-light);
  background-image:
    linear-gradient(
      rgb(248 239 217 / calc(1 - var(--material-paper) * 0.18)),
      rgb(248 239 217 / calc(1 - var(--material-paper) * 0.18))
    ),
    url('/assets/book/paper-grain-6e3cb5d244.svg');
  background-size: auto, 180px;
  border: 1px solid var(--book-overlay-rule);
  border-radius: 2px;
  box-shadow: var(--book-overlay-shadow);
}
/* Column settings are an inline list inside an already framed popover. */
html[data-theme='book'][data-frame]
  :is(#book-app-shell, body)
  .collection-toolbar-settings-popover
  .collection-column-settings-dropdown
  > .ms-popover {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-theme='book']
  :is(
    .drawer-head,
    .ui-drawer-head,
    .ui-modal-head,
    .ui-modal-head-drag,
    .feedback-capture-head,
    .collection-toolbar-popover-head,
    .collection-toolbar-popover-actions,
    .detail-nav
  ) {
  background: transparent;
  border-color: var(--book-row-rule);
  box-shadow: none;
}
html[data-theme='book'] :is(.drawer-title, .ui-modal-title, .deck-details-modal-title) {
  color: var(--book-ink);
  font-family: 'IM Fell English', Georgia, serif;
  font-weight: 400;
}
html[data-theme='book'] :is(.drawer-subtitle, .detail-nav-position) {
  color: #665c46;
}
html[data-theme='book'] :is(.drawer-backdrop, .ui-modal, .deck-details-modal, .confirm-modal) {
  background-color: #302e2433;
}

/* Frequent controls respond immediately. A pointer press has a tiny physical
   acknowledgement; keyboard navigation never waits for motion. */
html[data-theme='book']
  :is(.btn, .icon-btn, .rune-close, .segment-btn, .ms-trigger, .row-tag-add, .row-loc-add) {
  border-radius: 2px;
  transition: none;
  transform: none;
}
html[data-theme='book'] :is(.btn, .icon-btn, .rune-close, .segment-btn):active {
  transform: none;
}
/* The base buttons offset their text upward for the original font. DM Sans
   needs equal block padding in the two compact drawer actions. */
html[data-theme='book'] .detail-quick-btn {
  padding-block: var(--vui-control-pad-y);
}
html[data-theme='book'] :is(.detail-drawer, .ui-drawer, .mcp-chat-panel, .toast) {
  transition: none;
}
html[data-theme='book'] .detail-drawer:not(.visible) {
  box-shadow: none;
}
html[data-theme='book'] :is(button, input, select, textarea, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--book-jungle);
  outline-offset: 2px;
}
html[data-theme='book'] .app-left :is(button, input, a, [tabindex]):focus-visible {
  outline-color: var(--book-paper-light);
}
html[data-theme='book']
  :is(.detail-drawer, .ui-modal-card, .settings-popover, .row-tag-popover)
  :is(input:not([type='checkbox']):not([type='radio']), textarea, select) {
  border-radius: 2px;
  border-color: var(--book-overlay-rule);
  background-color: color-mix(in srgb, white 25%, var(--book-paper-light));
  color: var(--book-ink);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme='book']
    :is(.icon-btn, .rune-close, .row-tag-add, .row-loc-add):hover:not(:disabled) {
    background: var(--book-hover);
    color: var(--book-ink);
  }
  html[data-theme='book'] .btn.btn-secondary:hover:not(:disabled) {
    background: var(--book-hover);
    border-color: var(--book-overlay-rule);
    box-shadow: none;
    color: var(--book-ink);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-theme='book'][data-book-input='pointer']
    :is(.detail-drawer.visible, .ui-drawer.visible) {
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  html[data-theme='book'][data-book-input='pointer'] :is(.btn, .icon-btn, .rune-close) {
    transition: scale 100ms ease-out;
  }
  html[data-theme='book'][data-book-input='pointer']
    :is(.btn, .icon-btn, .rune-close):active:not(:disabled) {
    scale: 0.97;
  }
}

/* Current display identity */
.book-header > .book-brand {
  flex: 1 1 auto;
  min-width: 0;
}
.book-header:has(.book-brand) {
  gap: 7px;
}
.book-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
  text-align: left;
  color: inherit;
}
.book-logo-mark {
  width: 31px;
  height: 35px;
  flex: 0 0 31px;
  overflow: visible;
}
.book-logo-generated {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  background: currentColor;
  mask: var(--logo-image) center / contain no-repeat;
  -webkit-mask: var(--logo-image) center / contain no-repeat;
}
.book-logo-type {
  display: flex;
  flex-direction: column;
  font:
    21px/1.05 'IM Fell English',
    Georgia,
    serif;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
/* Give the expanded book's identity a little more presence. The serif's visible
   letters sit above its line-box center, so align its ink optically to the mark. */
@media (min-width: 901px) {
  html[data-theme='book']
    #book-stage
    .book-sidebar-workbench
    > .book-header:not(.has-gutter-account)
    > .book-brand {
    display: flex;
    align-items: center;
  }
  html[data-theme='book'] #book-stage .book-header:not(.has-gutter-account) .book-logo-lockup {
    gap: 9px;
  }
  html[data-theme='book'] #book-stage .book-header:not(.has-gutter-account) .book-logo-generated {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  html[data-theme='book'] #book-stage .book-header:not(.has-gutter-account) .book-logo-type {
    font-size: clamp(21px, calc(21px + (var(--sidebar-width) - 220px) * 0.1), 23px);
    line-height: 1;
  }
  html[data-theme='book']
    #book-stage
    .book-header:not(.has-gutter-account)
    [data-wordmark='serif']
    .book-logo-type {
    translate: 0 2px;
  }
}

/* Book spine and paper edges */
/* The Book theme reads as a clothbound book: a stamped spine at left,
   flush lower edge, and layered paper at the right. */
html[data-theme='book'] #book-stage {
  --book-page-depth: 16px;
  --book-page-shift-x: 6px;
  --book-page-rule: #bcb095;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ded8c8;
}
html[data-theme='book'] #book-stage > #book-app-shell {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--book-page-depth));
  height: 100%;
  box-shadow: 2px 2px 4px #352a1725;
}
/* Keep the utility panel floating inside the working page, clear of its edge. */
html[data-theme='book'] #book-stage #fabCluster {
  right: calc(var(--book-page-depth) + 16px);
}
/* All leaves meet the same top and bottom. Only the right fore-edge is exposed,
   keeping the binding and the working page continuous with the viewport. */
html[data-theme='book'] #book-stage::before,
html[data-theme='book'] #book-stage::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% - var(--book-page-depth) + var(--book-sheet-reach));
  box-sizing: border-box;
  z-index: 0;
  pointer-events: none;
  border: 1px solid var(--book-page-rule);
  border-radius: 0 2px 2px 0;
}
/* The front leaf's right edge matches the leaves underneath.
   Its named grid area follows the sidebar and includes the paper footer. */
html[data-theme='book'] #book-stage .app-shell {
  position: relative;
}
html[data-theme='book'] #book-stage .app-shell::after {
  content: '';
  position: absolute;
  grid-column: main-start / -1;
  grid-row: main-start / -1;
  inset: 0;
  box-sizing: border-box;
  border: 0;
  border-right: 1px solid var(--book-page-rule);
  pointer-events: none;
  z-index: 6;
}
html[data-theme='book'] #book-stage::before,
html[data-theme='book'] #book-stage::after {
  /* Every exposed sheet uses the same stock, grain scale and material strength.
     Separation comes from the sheet outlines and their cast shadows. */
  background-color: var(--book-paper-light);
  background-image:
    linear-gradient(
      rgb(248 239 217 / calc(1 - var(--material-paper) * 0.28)),
      rgb(248 239 217 / calc(1 - var(--material-paper) * 0.28))
    ),
    url('/assets/book/paper-grain-6e3cb5d244.svg');
  background-size:
    auto,
    180px 180px;
  background-blend-mode: normal, multiply;
}
html[data-theme='book'] #book-stage::before {
  --book-sheet-reach: calc(var(--book-page-shift-x) * 2);
  box-shadow: 1px 1px 2px #352a171c;
}
html[data-theme='book'] #book-stage::after {
  --book-sheet-reach: var(--book-page-shift-x);
  box-shadow: 1px 0 2px #352a1726;
}
html[data-theme='book'] #book-stage .app-footer {
  position: relative;
  z-index: 1;
  background: var(--book-paper-light);
}
/* A broad roll of light across the footer suggests the book's lower surface
   without adding a ledge, gap, or decorative edge strip. */
html[data-theme='book'] #book-stage .app-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, #fff8df00, #fff8df30 28%, #80613b08 64%, #80613b1a);
}
html[data-theme='book'] #book-stage .app-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: url('/assets/book/paper-grain-6e3cb5d244.svg') 0 0 / 180px 180px;
  mix-blend-mode: multiply;
  opacity: calc(var(--material-paper) * 0.28);
}
/* Broad, continuous shading gives the whole cloth surface a gentle curve. */
html[data-theme='book'] #book-stage #book-app-shell .book-header.has-gutter-account {
  background:
    linear-gradient(90deg, #102a2233, #fff7ce0b 52%, #fff7ce18 73%, #142d251f), var(--book-jungle);
}
html[data-theme='book'][data-lighting='top-right']
  #book-stage
  #book-app-shell
  .book-header.has-gutter-account {
  background:
    linear-gradient(205deg, transparent, #0c201b35),
    linear-gradient(90deg, #102a2233, #fff7ce0b 52%, #fff7ce18 73%, #142d251f), var(--book-jungle);
}
html[data-theme='book'] #book-stage #book-app-shell .has-gutter-account > .book-brand {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  gap: 24px;
  position: absolute;
  inset: 0;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 24px 0;
  z-index: 3;
  pointer-events: none;
  color: var(--book-paper-light);
  filter: drop-shadow(0 1px 0 #132c2770);
}
html[data-theme='book'] #book-stage .has-gutter-account > .book-brand::after {
  content: attr(aria-label);
  grid-row: 2;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font:
    16px/1 'IM Fell English',
    Georgia,
    serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  max-inline-size: max(0px, calc(100dvh - 0px - 104px));
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.86;
}
/* Extend the existing accessible toggle across the entire thin spine. Its
   original handler, shortcut, tooltip and expanded state remain authoritative. */
html[data-theme='book'] #book-stage .book-sidebar-toggle[aria-expanded='true'] > svg {
  background: currentColor;
  mask: url('/assets/book/collapse-chevron-6f01ce8948.svg') center / contain no-repeat;
  -webkit-mask: url('/assets/book/collapse-chevron-6f01ce8948.svg') center / contain no-repeat;
}
html[data-theme='book'] #book-stage .book-sidebar-toggle[aria-expanded='true'] > svg > * {
  display: none;
}
html[data-theme='book'] #book-stage #book-app-shell .has-gutter-account > .book-sidebar-toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline-offset: -3px;
}
html[data-theme='book'] #book-stage .has-gutter-account > .book-sidebar-toggle:hover {
  background: #ffffff14;
}
html[data-theme='book'] #book-stage .has-gutter-account > .book-sidebar-toggle > svg,
html[data-theme='book'] #book-stage .has-gutter-account > .book-brand .book-logo-lockup > *,
html[data-theme='book'] #book-stage .book-header.has-gutter-account > #sidebarBrandSlot,
html[data-theme='book'] #book-stage .book-header.has-gutter-account > .book-gutter-ornament {
  display: none;
}
/* Equal flexible spaces keep the title at the exact midpoint for every name.
   Crop the same vector proportionally, reflecting its leaves above the title. */
html[data-theme='book'] #book-stage .has-gutter-account > .book-brand::before,
html[data-theme='book'] #book-stage .has-gutter-account > .book-brand .book-logo-lockup::after {
  content: '';
  display: block;
  width: 26px;
  height: 100%;
  max-height: 145px;
  min-height: 0;
  background: var(--book-paper-light);
  mask: url('/assets/book/gutter-vine-70566ee334.svg') center bottom / 26px 390px no-repeat;
  -webkit-mask: url('/assets/book/gutter-vine-70566ee334.svg') center bottom / 26px 390px no-repeat;
  opacity: 0.5;
}
html[data-theme='book'] #book-stage .has-gutter-account > .book-brand::before {
  grid-row: 1;
  align-self: end;
  transform: rotate(180deg);
}
html[data-theme='book'] #book-stage .has-gutter-account > .book-brand .book-logo-lockup::after {
  grid-row: 3;
  align-self: start;
}
@media (max-width: 900px) {
  html[data-theme='book'] #book-stage {
    --book-page-depth: 7px;
    --book-page-shift-x: 2px;
  }
}

/* Responsive toolbar and account placement */
#book-stage {
  height: calc(100dvh - 0px);
}
#book-app-shell {
  height: 100%;
  --sidebar-width: 240px;
}
#book-stage .app-shell {
  height: 100%;
  min-height: 0;
}
#collectionDisplayControls .segment-btn {
  font-size: 0;
}
html[data-theme='book'][data-headings]
  :is(#listView > table, .grid-list-table, .deck-text-table)
  th[data-book-label] {
  color: var(--book-heading-ink, var(--book-jungle));
}

/* Simple-sidebar experiment: one bar holds identity, search, and actions.
   Flatten the intact identity host without moving its React-owned children. */
#book-stage .book-merged-toolbar #containerIdentityStrip:not(.hidden) {
  display: contents;
}
#book-stage #collectionControlsToolbar.book-merged-toolbar {
  display: flex;
  top: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 12px;
}
#book-stage .book-merged-toolbar .container-identity {
  order: 0;
  flex: 0 1 auto;
  max-width: min(200px, 20vw);
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}
#book-stage .book-merged-toolbar .container-identity .entity-label-mark {
  width: 20px;
  height: 20px;
}
/* User-authored names read as page titles in the same literary face as the
   book. Keep their spelling/case and let only the text shrink beside search. */
html[data-theme='book'] #book-stage .book-merged-toolbar .container-identity {
  gap: 8px;
  font:
    400 21px/1.2 'IM Fell English',
    Georgia,
    serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--book-ink);
}
html[data-theme='book'] #book-stage .book-merged-toolbar .container-identity .entity-label-text {
  line-height: 1.2;
  padding-block: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme='book'] #book-stage .book-merged-toolbar .container-identity .entity-label-mark {
  --entity-icon-optical-size: 16px;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
}
@media (min-width: 901px) {
  html[data-theme='book'] #book-stage #collectionControlsToolbar.book-merged-toolbar {
    display: grid;
    grid-template-columns:
      var(--book-toggle-track,) minmax(0, max-content) minmax(160px, 1fr)
      auto var(--book-actions-track,) auto;
  }
  html[data-theme='book'] #book-stage .book-merged-toolbar:has(> .book-sidebar-toggle) {
    --book-toggle-track: 32px;
  }
  html[data-theme='book'] #book-stage .book-merged-toolbar:has(.container-identity-actions) {
    --book-actions-track: auto;
  }
  html[data-theme='book'] #book-stage .book-merged-toolbar .container-identity {
    max-width: 480px;
  }
  html[data-theme='book'] #book-stage .book-merged-toolbar .collection-toolbar-search {
    min-width: 160px;
  }
  html[data-theme='book'] #book-stage .book-merged-toolbar .collection-toolbar-filter-chips {
    grid-column: 1 / -1;
  }
}
#book-stage .book-merged-toolbar .collection-toolbar-search {
  order: 1;
  flex: 1 1 120px;
  min-width: 100px;
}
#book-stage .book-merged-toolbar .collection-toolbar-view {
  order: 2;
  flex: 0 0 auto;
}
#book-stage .book-merged-toolbar .container-identity-actions {
  order: 3;
  flex: 0 0 auto;
}
#book-stage .book-merged-toolbar .container-identity-share {
  order: 4;
  flex: 0 0 auto;
  margin-left: 0;
}
#book-stage .book-merged-toolbar .collection-toolbar-filter-chips {
  order: 5;
  flex: 1 1 100%;
}

/* Optional comparison: the same live navigation button sits by the view name,
   freeing the full collection width when the sidebar is collapsed. */
#book-stage .book-merged-toolbar > .book-sidebar-toggle {
  order: -1;
  flex: 0 0 32px;
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  color: var(--color-text);
}
#book-stage .book-merged-toolbar > .book-sidebar-toggle:hover {
  background: var(--color-accent-soft);
}

/* Collapsing keeps the same bookcloth surface and light ink as the sidebar. */
html[data-theme='book'] #book-stage .book-header.has-gutter-account {
  --color-surface: var(--book-jungle);
  --color-surface-raised: var(--book-jungle);
  --color-text: var(--book-paper-light);
  --color-text-strong: var(--book-paper-light);
  --color-text-muted: #e0dcc9;
  --color-line: #ffffff28;
  --color-accent: var(--book-paper-light);
  --color-surface-hover: #ffffff12;
  background: var(--book-jungle);
  color: var(--book-paper-light);
  isolation: isolate;
}
html[data-theme='book'][data-lighting='top-right'] #book-stage .book-header.has-gutter-account {
  background: linear-gradient(205deg, transparent, #0c201b35), var(--book-jungle);
}
html[data-theme='book'] #book-stage .has-gutter-account :is(.book-sidebar-toggle, .sync-chip) {
  color: var(--book-paper-light);
}
html[data-theme='book']
  #book-stage
  .has-gutter-account
  :is(.book-sidebar-toggle, .sync-chip):focus-visible {
  outline-color: var(--book-paper-light);
}
/* Put the live selected mark over the existing expand button. The artwork is
   pointer-transparent; the original button still owns focus, tooltip and clicks.
   With no symbol selected, retain the ordinary sidebar glyph. */
#book-stage
  .book-header.has-gutter-account:has(> .book-brand .book-logo-mark)
  > .book-sidebar-toggle
  > svg {
  visibility: hidden;
}
#book-stage .book-header.has-gutter-account:has(> .book-brand .book-logo-mark) > .book-brand {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 10px 8px auto;
  height: 32px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
#book-stage .has-gutter-account > .book-brand .book-logo-lockup {
  display: contents;
}
#book-stage .has-gutter-account > .book-brand .book-logo-type {
  display: none;
}
#book-stage .has-gutter-account > .book-brand .book-logo-mark {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}
#book-stage .book-header.has-gutter-account > #sidebarBrandSlot {
  position: absolute;
  left: 8px;
  bottom: 12px;
  width: 32px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
#book-stage .has-gutter-account #syncAccountSlot {
  width: 32px;
  min-width: 0;
  gap: 0;
}
#book-stage .has-gutter-account .sync-chip {
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 2px;
}
#book-stage .has-gutter-account .sync-label {
  display: none;
}
#book-stage .has-gutter-account :is(.sync-dot, .sync-dot svg) {
  width: 18px;
  height: 18px;
}
.book-gutter-ornament {
  display: none;
}
html[data-theme='book'] .book-header.has-gutter-account > .book-gutter-ornament {
  display: block;
  position: absolute;
  inset: 64px 10px 64px;
  pointer-events: none;
  background: var(--book-paper-light);
  opacity: 0.62;
  mask: url('/assets/book/gutter-vine-70566ee334.svg') center / contain no-repeat;
  -webkit-mask: url('/assets/book/gutter-vine-70566ee334.svg') center / contain no-repeat;
}
@media (min-width: 901px) and (max-width: 1150px) {
  #book-stage
    .book-merged-toolbar
    :is(.collection-toolbar-settings-trigger, .container-identity-share) {
    font-size: 0;
    gap: 0;
    width: 32px;
    min-width: 32px;
    padding: 0;
  }
}
@media (max-width: 900px) {
  #book-stage .mobile-collection-toolbar.book-merged-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    margin: 0;
    padding: 8px 12px 8px 64px;
    border-bottom: 1px solid var(--color-line);
  }
  #book-stage .mobile-collection-toolbar.book-merged-toolbar .container-identity {
    flex: 1 1 0;
    max-width: none;
  }
  #book-stage .book-merged-toolbar .mobile-filter-trigger {
    order: 2;
  }
  #book-stage
    .mobile-collection-toolbar.book-merged-toolbar
    :is(.mobile-filter-trigger, .container-identity-share) {
    font-size: 0;
    gap: 0;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
  }
}

/* The existing home action remains the live brand button. */
.book-header > .book-brand {
  order: -1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
.book-header > .book-brand {
  text-transform: none;
}
.book-header > .book-brand .brand-wordmark {
  font: inherit;
}
.book-brand > .title-reset-btn {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
/* The decorative spine uses its own grid; the home button remains intact. */
.book-header.has-gutter-account > .book-brand > .title-reset-btn {
  display: contents;
}
body.left-sidebar-collapsed .book-header.has-gutter-account > .book-brand {
  cursor: default;
}
.book-sidebar-resize:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: -2px;
}
html[data-theme='book'] body.share-mode #book-stage > #book-app-shell {
  width: 100%;
}
html[data-theme='book'] body.share-mode #book-stage::before,
html[data-theme='book'] body.share-mode #book-stage::after {
  content: none;
}
/* Production status banners occupy real space above the book. */
#book-stage {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
}
body > .banner {
  flex: 0 0 auto;
}
@media (max-width: 900px) {
  .book-header > .book-brand {
    display: none;
  }
}

/* Keep the entire resize edge reachable beneath the header. */
.book-header {
  pointer-events: none;
}
.book-header > :is(button, .book-brand, #sidebarBrandSlot) {
  pointer-events: auto;
}