/* Book cloth supports the established demos. Native surfaces and geometry stay fixed. */
html[data-paper=cloth] :is(#filing, #return),
html[data-paper=cloth][data-editor-view=demo] #unify {
  --surround-fill: #60685c;
  --surround-ink: #fcfbf5;
  --surround-secondary: #eeeee4;
  --surround-quiet: #d9ddcf;
  background: var(--surround-fill) !important;
  border: 1px solid rgb(43 46 35 / .18);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgb(30 34 24 / .18), 0 9px 15px -11px rgb(30 34 24 / .36), 0 26px 34px -29px rgb(30 34 24 / .3);
}
html[data-paper=cloth] #filing {
  --surround-fill: #b8b1a1;
  --surround-ink: #302f29;
  --surround-secondary: #38372f;
  --surround-quiet: #514e44;
}
html[data-paper=cloth] #return { --surround-fill: #535a53; }

html[data-paper=cloth] :is(#filing, #return)::before,
html[data-paper=cloth][data-editor-view=demo] #unify::before {
  background: url('assets/book-cloth-v1.webp') repeat;
  background-size: 600px 600px;
  opacity: .26;
}
html[data-paper=cloth] :is(#filing, #return)::after,
html[data-paper=cloth][data-editor-view=demo] #unify::after {
  background: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .17), inset 0 -1px 0 rgb(30 30 20 / .15);
}

/* Scope ink to the surrounding explanation, never to the native app content. */
html[data-paper=cloth] :is(#filing, #return) > header,
html[data-paper=cloth][data-editor-view=demo] #unify .unify-title {
  --present-ink: var(--surround-ink);
  --resting-ink: var(--surround-quiet);
  color: var(--surround-ink);
}
html[data-paper=cloth] :is(#filing, #return) > header :is(p, .eyebrow),
html[data-paper=cloth][data-editor-view=demo] #unify .unify-title em {
  color: var(--surround-secondary);
}
html[data-paper=cloth] :is(.filing-caption, .recall-caption, .revisit-caption) {
  --caption-ink: var(--surround-ink);
  --caption-muted: var(--surround-secondary);
}
html[data-paper=cloth] .filing-caption[data-filed=false] h3 { color: var(--surround-quiet); }
html[data-paper=cloth] :is(#filing, #return) :is(.scene-controls, .prepared, .recall-step button),
html[data-paper=cloth][data-editor-view=demo] #unify .merge-controls {
  color: var(--surround-secondary);
}
html[data-paper=cloth] #return .question-marks { color: inherit; }
html[data-paper=cloth] :is(#filing, #return) :is(.scene-controls button, .recall-step button),
html[data-paper=cloth][data-editor-view=demo] #unify .merge-controls button {
  border-color: currentColor;
}
html[data-paper=cloth] :is(#filing, #return) :is(.scene-controls button, .recall-step button):focus-visible,
html[data-paper=cloth][data-editor-view=demo] #unify .merge-controls button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}