/*
 * What is Notes' own, on top of the suite's web kit (tokens.css, kit.css): the
 * list of notes, the open note and its editor. Colours, type and spacing come
 * from the kit's variables, so light, dark and the product's violet follow by
 * themselves. Logical properties (inline/block) throughout.
 */

/* --------------------------------- sidebar -------------------------------- */

.nav-gap { flex: 1; min-height: 12px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: var(--look-r-xs, 3px); flex: none; }

/* A group of notebooks, as Tasks' groups of lists: a heading tinted with its colour, its
   notebooks a step in under it. The colour is mixed with the kit's, so both themes follow. */
.nav-group { margin-block: 6px 2px; }
.nav-group__head {
  display: flex; align-items: center; gap: 2px; min-height: 36px; padding-inline: 2px 4px; margin-block-end: 2px;
  border-radius: var(--look-r-sm, 8px); border-inline-start: 3px solid var(--group-color);
  background: color-mix(in oklab, var(--group-color) 12%, transparent);
  color: color-mix(in oklab, var(--group-color) 50%, var(--kit-text));
}
.nav-group__head button, .nav-group__name {
  display: inline-flex; align-items: center; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  border-radius: var(--look-r-sm, 6px); min-height: 32px;
}
.nav-group__head :is(button, .nav-group__name):hover { background: color-mix(in oklab, var(--group-color) 14%, transparent); }
.nav-group__head :is(button, .nav-group__name):focus-visible { outline-offset: -2px; }
.nav-group__toggle { justify-content: center; width: 28px; flex: none; }
.nav-group__toggle .kit-icon { width: 14px; height: 14px; transition: transform .15s; }
.nav-group__toggle[aria-expanded="true"] .kit-icon { transform: rotate(90deg); }
.nav-group__name { flex: 1; min-width: 0; padding-inline: 4px; font-weight: 650; font-size: var(--look-callout, 15px); text-align: start; }
.nav-group__name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group__head .kit-nav__count { padding-inline: 4px; }
.nav-group__add { justify-content: center; width: 30px; flex: none; }
.nav-group__add .kit-icon { width: 16px; height: 16px; }
/* With a mouse the + shows on hover; on a touch screen it is always there. */
@media (hover: hover) and (pointer: fine) {
  .nav-group__add { opacity: 0; }
  .nav-group:hover .nav-group__add, .nav-group__add:focus-visible { opacity: 1; }
}
.nav-group__notebooks { padding-inline-start: 12px; }
.nav-group__empty { padding: 4px 10px 6px; font-size: var(--look-footnote, 12.5px); color: var(--kit-muted); }

/* What is shared, one's own or someone else's: a small mark after its name. A group someone
   shares with the person says whose it is under its name. */
.nav-shared { width: 13px; height: 13px; flex: none; margin-inline-start: 4px; opacity: .6; }
.nav-group__name { flex-wrap: wrap; }
.nav-group__owner { flex-basis: 100%; font-weight: 400; font-size: var(--look-caption, 11.5px); color: var(--kit-muted); line-height: 1.2; }
.note-row__title .note-row__shared { width: 13px; height: 13px; opacity: .7; }

/* ---------------------------------- list ---------------------------------- */

/* The list's head is the kit's (shell.head); the view's menu and the search are Notes'. */
.list-head__actions { display: flex; align-items: center; gap: 4px; }
.list-search-wrap { position: relative; margin-block-start: 10px; }
.list-search-wrap > .kit-icon {
  position: absolute; inset-inline-start: 11px; inset-block-start: 50%; translate: 0 -50%;
  width: 16px; height: 16px; color: var(--kit-muted); pointer-events: none;
}
.list-search { width: 100%; padding-inline-start: 34px; }

.note-list { padding: 6px 8px 96px; }
.note-list__more { height: 1px; }
.note-row {
  display: grid; gap: 3px; width: 100%; text-align: start; padding: var(--look-row-y, 11px) 12px; margin: 0;
  border: 0; border-radius: var(--look-r-md, 10px); background: none; cursor: pointer; color: var(--kit-text);
}
.note-row + .note-row { margin-block-start: 2px; }
.note-row:hover { background: var(--kit-hover); }
.note-row[aria-current="true"] { background: var(--kit-accent-soft); }
.note-row:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: -2px; }
.note-row--static { cursor: default; }
.note-row--static:hover { background: none; }
.note-row__title {
  display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--look-body, 15px); min-width: 0;
}
.note-row__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-row__title .kit-icon { width: 15px; height: 15px; flex: none; color: var(--kit-muted); }
.note-row__pin { color: var(--kit-accent) !important; }
.note-row__text {
  color: var(--kit-muted); font-size: var(--look-callout, 13.5px); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.note-row__text mark { background: var(--kit-accent-soft); color: var(--kit-text); border-radius: var(--look-r-xs, 3px); padding: 0 1px; }
.note-row__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--look-footnote, 12px); color: var(--kit-muted);
}
.note-row__meta time { font-variant-numeric: tabular-nums; }
.note-row__notebook { display: inline-flex; align-items: center; gap: 5px; }
.note-row__notebook .swatch { width: 8px; height: 8px; border-radius: var(--look-r-xs, 2px); }
.note-row__tag { color: var(--kit-accent); }

/* ---------------------------------- note ---------------------------------- */

.note-none { display: grid; place-items: center; min-height: 100%; padding: 24px; }
.note { max-width: 760px; margin: 0 auto; padding: 0 var(--look-gutter, 24px) 120px; }
/* The note's head is the kit's (shell.head, ← on a phone), within the note's width. */
.note > .kit-head { padding-inline: 0; margin-block-end: 6px; }
/* The notebook's name shrinks, instead of pushing the pin and the menu off the line. */
.note-notebook {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 0;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--kit-border);
  background: var(--kit-panel); color: var(--kit-text); font-size: var(--look-subhead, 13px); cursor: pointer;
}
.note-notebook > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-notebook .kit-icon { width: 15px; height: 15px; color: var(--kit-muted); }
.note-notebook:disabled { cursor: default; opacity: 1; }
.note > .kit-head .kit-icon-btn[aria-pressed="true"] { color: var(--kit-accent); background: var(--kit-accent-soft); }

.note-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.note-tags:empty { display: none; }
.note-tag {
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--kit-border); background: var(--kit-panel);
  color: var(--kit-accent); font-size: var(--look-caption, 12.5px); cursor: pointer;
}
.note-tag[aria-pressed="true"] { background: var(--kit-accent); border-color: var(--kit-accent); color: var(--kit-on-accent, #fff); }

/* What the note is linked with in Cronum Work (the kit's Linked row): under its tags. */
.note > .kit-linked { margin: 4px 0 10px; }

.note-trashed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.note-trashed > span { flex: 1; min-width: 12ch; }

.note-body { min-height: 40vh; }
.note-body > .kit-md { font-size: var(--look-body, 16px); }
.note-empty { color: var(--kit-muted); font-style: italic; }
.note-foot { margin-block-start: 28px; color: var(--kit-muted); font-size: var(--look-footnote, 12.5px); }

/* --------------------------------- editor --------------------------------- */

/* The bar rides in the note's head, under its line, and stays on top while the note scrolls. */
.note-format {
  margin-block-start: var(--look-bar-y, 8px);
  display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--look-r-md, 10px);
  border: 1px solid var(--kit-border); background: var(--kit-panel); width: fit-content; max-width: 100%;
}
.note-format__btn {
  min-width: 34px; height: 34px; padding: 0 7px; border: 0; border-radius: var(--look-r-sm, 7px); background: none;
  color: var(--kit-text); cursor: pointer; display: inline-grid; place-items: center;
}
.note-format__btn:hover:not(:disabled) { background: var(--kit-hover); }
.note-format__btn[hidden] { display: none; }
.note-format__btn:disabled { opacity: .35; cursor: default; }
.note-format__sep { align-self: stretch; width: 1px; margin: 6px 3px; background: var(--kit-border); }
.note-format__btn[aria-pressed="true"] { color: var(--kit-accent); background: var(--kit-accent-soft); }
.note-format__btn .kit-icon { width: 17px; height: 17px; }

.kit-menu__who:has(> .table-pick) { border: 0; margin: 0; padding: 6px; }
.table-pick { display: grid; gap: 8px; justify-items: center; }
.table-pick__grid { display: grid; gap: 3px; }
.table-pick__cell {
  width: 24px; height: 24px; padding: 0; border-radius: var(--look-r-xs, 4px); cursor: pointer;
  border: 1px solid var(--kit-border); background: var(--kit-panel);
}
.table-pick__cell.is-on { background: var(--kit-accent-soft); border-color: var(--kit-accent); }
.table-pick__cell:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 1px; }
.table-pick__size { font-size: var(--look-footnote, 13px); color: var(--kit-muted); }

/* The note as it reads (the kit's .kit-md), with what writing in it needs. */
.note-body .note-editor { min-height: 50vh; padding: 4px 0; font-size: var(--look-body, 16px); caret-color: var(--kit-accent); }
.note-editor:focus { outline: none; }
.note-editor[contenteditable="false"] { min-height: 0; }
/* Room under the last line: nobody writes on the screen's edge (#39). */
.note:has(.note-editor[contenteditable="true"]) { padding-block-end: 45vh; }
.note-editor p.is-editor-empty:first-child::before {
  content: attr(data-placeholder); float: inline-start; height: 0; color: var(--kit-muted); pointer-events: none;
}
.note-editor li p { margin: 0; }
.note-editor li p + p { margin-block-start: .5em; }
.note-editor ul[data-type="taskList"] { list-style: none; padding-inline-start: 0; }
.note-editor li[data-checked] { display: flex; gap: 9px; align-items: flex-start; }
.note-editor li[data-checked] > label { flex: none; margin-block-start: .2em; user-select: none; }
.note-editor li[data-checked] > label > input { display: block; width: 18px; height: 18px; margin: 0; accent-color: var(--kit-accent); cursor: pointer; }
.note-editor li[data-checked] > div { flex: 1; min-width: 0; }
.note-editor li[data-checked="true"] > div > p { color: var(--kit-muted); text-decoration: line-through; }
.note-editor li[data-checked] ul[data-type="taskList"] { margin: .15em 0; }
.note-editor .tableWrapper { overflow-x: auto; margin: 0 0 .75em; }
.note-editor .tableWrapper > table { display: table; margin: 0; }
.note-editor th > p, .note-editor td > p { margin: 0; }
.note-editor th, .note-editor td { position: relative; min-width: 4em; vertical-align: top; }
.note-editor .selectedCell { background: var(--kit-accent-soft); }
.note-editor img.ProseMirror-selectednode { outline: 2px solid var(--kit-accent); }
.note-editor a { cursor: pointer; }

/* --------------------------------- dialogs -------------------------------- */

.color-choice { display: flex; flex-wrap: wrap; gap: 10px; }
.color-choice__swatch {
  width: 32px; height: 32px; border-radius: var(--look-r-md, 9px); border: 2px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.color-choice__swatch[aria-checked="true"] { outline: 2px solid var(--kit-text); outline-offset: 2px; }
.tag-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.move-row { width: 100%; border: 0; background: none; text-align: start; cursor: pointer; color: var(--kit-text); }
.move-row:hover { background: var(--kit-hover); }
.move-row[aria-current="true"] { font-weight: 600; }
.move-row .kit-icon { width: 17px; height: 17px; color: var(--kit-muted); }
.history { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 14px; min-height: 280px; }
.history-list { align-self: start; max-height: 60vh; overflow-y: auto; }
.history-list .kit-list__row { width: 100%; border: 0; background: none; text-align: start; cursor: pointer; color: var(--kit-text); }
.history-list .kit-list__row[aria-current="true"] { background: var(--kit-accent-soft); }
.history-list .kit-icon { width: 16px; height: 16px; color: var(--kit-muted); }
.history-preview { min-width: 0; max-height: 60vh; overflow-y: auto; padding: 4px 6px; }
.history-marks { margin-bottom: 4px; font-size: var(--look-subhead, 14px); }
.history-hint { margin: 0 0 12px; }
/* What a version changed (dialogs.js): a bar beside each block written, taken out or edited,
   and in an edited one its words. Each list item is drawn as a list of one: no gap between them. */
.changes > .change { padding-inline-start: 10px; border-inline-start: 3px solid transparent; }
.changes > .change > :last-child { margin-bottom: 0; }
.changes > .change:first-child > :first-child { margin-top: 0; }
.changes > .change + .change { margin-top: .75em; }
.changes > .change:has(> :is(ul, ol)) + .change:has(> :is(ul, ol)) { margin-top: 0; }
.changes > .change--ins { border-color: var(--kit-ok); background: color-mix(in oklab, var(--kit-ok) 9%, transparent); }
.changes > .change--del { border-color: var(--kit-danger); color: var(--kit-muted); text-decoration: line-through; }
.changes > .change--changed { border-color: var(--kit-accent); }
.changes ins { text-decoration: none; background: color-mix(in oklab, var(--kit-ok) 22%, transparent); border-radius: var(--look-r-xs, 3px); padding: 0 1px; }
.changes del { color: var(--kit-danger); text-decoration: line-through; }
/* A notebook offered, at the top of the sidebar (views.js invitationCard). */
.invite {
  display: grid; gap: 6px; margin: 4px 0 10px; padding: 10px 12px;
  border: 1px solid var(--kit-border); border-radius: var(--look-r-lg, 12px); background: var(--kit-panel);
}
.invite__from { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--look-footnote, 13px); color: var(--kit-muted); }
.invite__from .kit-avatar { width: 22px; height: 22px; font-size: var(--look-caption2, 10px); }
.invite__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--look-headline, 14.5px); }
.invite__name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite .kit-hint { margin: 0; }
.invite__actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; }
/* Who has a notebook (dialogs.js shareDialog). */
.share-invite { display: grid; gap: 10px; }
.share-invite__row { justify-content: space-between; }
.share-heading { margin: 4px 0 0; font: 600 var(--look-caption2, 11px)/1 var(--kit-font); letter-spacing: .1em; text-transform: uppercase; color: var(--kit-muted); }
/* On a phone, what someone may do and the button to take it back go under their name. */
.share-people .kit-list__row { flex-wrap: wrap; gap: 8px 10px; }
.share-people .kit-list__text { flex: 1 1 150px; }
.share-pending { color: var(--kit-warn) !important; }
.share-permission { width: auto; margin-inline-start: auto; min-height: 34px; padding-block: 4px; font-size: var(--look-subhead, 13.5px); }
/* Pictures in a note: as wide as the note at most, a tap away from the whole (files.js). */
.note-editor img { max-width: 100%; height: auto; border-radius: var(--look-r-sm, 8px); vertical-align: bottom; }
.note-editor img.ProseMirror-selectednode { outline: 2px solid var(--kit-accent); outline-offset: 2px; }
/* A note's files (dialogs.js filesDialog). */
.note-files .kit-list__row { gap: 10px; }
.note-files__thumb { width: 40px; height: 40px; flex: none; border-radius: var(--look-r-sm, 6px); object-fit: cover; background: var(--kit-hover); }
.note-files__thumb--doc { display: grid; place-items: center; color: var(--kit-muted); }
.note-files__name { color: var(--kit-text); text-decoration: none; min-width: 0; }
.note-files__name > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A note with nothing written yet: the templates to start from (views.js). */
.note-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 14px; }
.note-starters[hidden] { display: none; }
.note-starters__label { font-size: var(--look-footnote, 13px); color: var(--kit-muted); margin-inline-end: 2px; }
/* One's own template, its text as Markdown (dialogs.js templateDialog). */
.template-body { font: var(--look-callout, 13.5px)/1.5 var(--kit-font-mono); min-height: 180px; resize: vertical; }
.boot-error { margin: 24px; }

/* --------------------------------- drawing -------------------------------- */

/* The drawing sheet (drawing.js): the whole screen, the steps on top, the page in the middle and
   the tools under it, within the phone's safe areas. The page is white whatever the theme: the
   picture it makes is. Nothing on it is selected or called out by a long press. */
.ink-sheet[open] {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; display: flex; flex-direction: column; background: var(--kit-bg); color: var(--kit-text);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ink-sheet::backdrop { background: var(--kit-bg); }
.ink-sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; border-block-end: 1px solid var(--kit-border);
}
.ink-sheet__steps { display: flex; gap: 2px; }
.ink-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center; border: 0; border-radius: 10px;
  background: none; color: var(--kit-text); cursor: pointer;
}
.ink-btn:hover:not(:disabled) { background: var(--kit-hover); }
.ink-btn:disabled { opacity: .35; cursor: default; }
.ink-btn .kit-icon { width: 19px; height: 19px; }
/* The page is drawn inside the stage's canvases (ink.js), zoomed and moved there. */
.ink-stage {
  position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; cursor: crosshair;
  background: color-mix(in oklab, var(--kit-text) 6%, var(--kit-bg));
}
.ink-sheet[data-tool="eraser"] .ink-stage { cursor: cell; }
.ink-zoom {
  position: absolute; z-index: 1; inset-block-start: 10px; inset-inline-end: 10px; height: 32px; padding: 0 12px;
  border: 1px solid var(--kit-border); border-radius: 999px; background: var(--kit-panel); color: var(--kit-text);
  font: 600 12.5px/1 var(--kit-font); font-variant-numeric: tabular-nums; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.ink-zoom[hidden] { display: none; }
.ink-sheet__tray {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--kit-border);
}
.ink-group { display: flex; align-items: center; gap: 4px; }
.ink-tool, .ink-size {
  height: 44px; display: inline-grid; place-items: center; border: 0; border-radius: 10px;
  background: none; color: var(--kit-muted); cursor: pointer;
}
.ink-tool { width: 44px; }
.ink-tool .kit-icon { width: 22px; height: 22px; }
.ink-tool[aria-checked="true"] { color: var(--ink-now); background: var(--kit-accent-soft); }
.ink-tool--eraser[aria-checked="true"] { color: var(--kit-text); }
.ink-size { width: 36px; }
.ink-size__dot { display: block; border-radius: 50%; background: var(--ink-now); opacity: .45; }
.ink-size[data-size="0"] .ink-size__dot { width: 5px; height: 5px; }
.ink-size[data-size="1"] .ink-size__dot { width: 9px; height: 9px; }
.ink-size[data-size="2"] .ink-size__dot { width: 15px; height: 15px; }
.ink-size[aria-checked="true"] .ink-size__dot { opacity: 1; box-shadow: 0 0 0 3px var(--kit-bg), 0 0 0 4.5px var(--kit-border); }
.ink-color {
  width: 30px; height: 30px; margin: 4px 3px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.ink-color[aria-checked="true"] { outline: 2.5px solid var(--kit-text); outline-offset: 2.5px; }
:is(.ink-btn, .ink-tool, .ink-size, .ink-color):focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 1px; }
@media (max-width: 400px) {
  .ink-sheet__tray { gap: 6px 10px; padding-inline: 6px; }
  .ink-tool { width: 40px; }
  .ink-size { width: 32px; }
  .ink-color { margin-inline: 2px; }
}

/* --------------------------------- phones --------------------------------- */

@media (max-width: 640px) {
  .note { padding: 0 var(--look-gutter, 16px) 120px; }
  .note-format__btn { min-width: 31px; padding: 0 5px; }
  .history { grid-template-columns: 1fr; }
  .history-list { max-height: 30vh; }
}

/* ------------------------------ touch screens ----------------------------- */

/* On a touch screen the text of a field is never under 16px: below that the iPhone zooms the
   page in when it takes the focus, and leaves it zoomed (index.html stops it too). */
@media (pointer: coarse) {
  .kit-input, .kit-field input, .kit-field select, .kit-field textarea, .share-permission { font-size: var(--look-body, 16px); }
}

/* ---------------------------------- clean --------------------------------- */

/* The Clean look: the note's first line, its title, as a view's large title; the share list's
   eyebrow as Clean's section labels. Sizes come from the --look-* variables above. */
:root[data-look="clean"] .note-body .note-editor > h1:first-child,
:root[data-look="clean"] .note-body > .kit-md > h1:first-child {
  font-size: var(--look-large-title, 26px); font-weight: 700; letter-spacing: -.022em;
}
:root[data-look="clean"] .share-heading { font-size: var(--look-footnote, 11px); letter-spacing: .02em; }
/* The sidebar's groups as plain rows the size of their notebooks: the colour stays in the notebooks' own marks. */
:root[data-look="clean"] .nav-group__head {
  min-height: 40px; background: transparent; border-inline-start: 0; padding-inline-start: 5px; color: var(--kit-text);
}
:root[data-look="clean"] .nav-group__name { font-weight: 600; }
:root[data-look="clean"] .nav-group__head :is(button, .nav-group__name):hover { background: var(--kit-hover); }
:root[data-look="clean"] .note-row__title .kit-icon { width: 17px; height: 17px; }
/* The list as an iPhone's: a hairline between notes, the text in line with the title. */
:root[data-look="clean"] .note-row { position: relative; }
:root[data-look="clean"] .note-row + .note-row { margin-block-start: 0; }
:root[data-look="clean"] .note-row + .note-row::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 12px; border-top: 1px solid var(--kit-border);
}
@media (max-width: 640px) {
  :root[data-look="clean"] .note-row__meta > * { min-width: 0; overflow-wrap: anywhere; }
}

/* --------------------------------- printing -------------------------------- */

/* Print or save as PDF (main.js print()): the note alone, put at the end of the page while the
   dialog is open, and everything else out, so no scrolling box cuts it at the first page. */
.print-note { display: none; }

@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  body > :not(.print-note) { display: none !important; }
  .print-note { display: block; }
  .print-note img { max-width: 100%; break-inside: avoid; }
  .print-note pre, .print-note table, .print-note blockquote { break-inside: avoid; }
}
/* A quiet sidebar, the same in every module: 16px entries, the open one in its colour without going bold. */
:root[data-look="clean"] .kit-nav__item { min-height: 40px; padding-block: 8px; font-size: var(--look-callout, 15px); }
:root[data-look="clean"] .kit-nav__item[aria-current="page"] { font-weight: 500; }