@heycys/gallery 0.1.1 → 0.2.0

package/kit/report.css

@@ -18,10 +18,10 @@
 
 :root {
   color-scheme: light dark;
-  /* The page: #2c2c2b on white in light (Notion's), its own pair in dark; the lines below are the text at a strength. */
+  /* The page: #2d2d2d on white in light, #262626 where the platform is Apple's (below), its own pair in dark; the lines below are the text at a strength. */
   --doc-bg: light-dark(#ffffff, #181818);
   --doc-surface: light-dark(#ffffff, #202020);
-  --doc-text: light-dark(#2c2c2b, #f3f3f3); /* the text: Notion's (and DingTalk's) #2c2c2b, the editor's own --ge-tx */
+  --doc-text: light-dark(#2d2d2d, #f3f3f3); /* the text: #2d2d2d, and #262626 on an Apple platform (the user's of 2026-11-08, below) */
   --doc-muted: light-dark(#6e6e73, #a1a1a6);
   --doc-border: light-dark(rgb(44 44 43 / 12%), rgb(243 243 243 / 13%));
   --doc-grid: light-dark(rgb(44 44 43 / 8%), rgb(243 243 243 / 8%));
@@ -131,6 +131,8 @@
      palette's gray, opaque. The frame lies over the table's body, whose fill is the page's, where the
      veil comes out the gray of a block around it. */
   --doc-table-frame-filled: light-dark(#e6e5e3, #545450);
+  /* The hairline as it lies on the page, opaque: the right edge of a frame that scrolls sideways (table.css), under which the columns past it must not show through the dark veil. */
+  --doc-hairline-solid: light-dark(#e6e5e3, #383836);
   /* A flowchart's arrows and the circle behind a step's number (flowchart.css): neutral greys. */
   --doc-flow-line: light-dark(rgb(55 53 47 / 38%), rgb(255 255 255 / 34%));
   --doc-flow-badge: light-dark(rgb(55 53 47 / 8%), rgb(255 255 255 / 10%));
@@ -175,6 +177,75 @@
   --doc-diff-removed-strip: light-dark(rgb(248 81 73 / 55%), rgb(248 81 73 / 55%));
   --doc-chart-axis-font-size: 13px;
   --doc-table-fill: var(--doc-bg);
+  /* Cards (docs/render.md, Design defaults, "Cards"): a custom page's ground and the board's frame around each card
+     (board.css), and the language Gallery's own blocks draw their faces in (the pack 「Gallery 风格」, the
+     design B of 2026-11-09: notes/plans/block-packs-plan-2026-11-09.md), which an Agent's block uses too
+     (references/pages-and-data.md). A quiet, type-led look: each card one hero (a big number, a field of
+     squares, a list), its head saying only whose it is, the rest small and gray. One accent, a Notion blue,
+     on the data and on today alone; a warm orange for the sun and a flame; green only for a thing done.
+     White cards on the page's own white, set off by a hairline ring and a soft shadow; dark its own pair of
+     surfaces (a card a step lighter than the ground), never the light one inverted. */
+  --gallery-page-fill: light-dark(#ffffff, #191919);
+  --gallery-card-fill: light-dark(#ffffff, #202020);
+  --gallery-card-line: light-dark(rgb(15 15 15 / 7%), rgb(255 255 255 / 7.5%));
+  --gallery-card-radius: 12px;
+  --gallery-card-pad: 16px;
+  /* The ring (the card's line, drawn outside it so that it takes nothing of its cells), a close shadow and a soft
+     one under it, deeper in dark: each a color of light-dark(), as a shadow's offsets cannot be. */
+  --gallery-card-shadow: 0 0 0 1px var(--gallery-card-line), 0 1px 2px light-dark(rgb(15 15 15 / 3.5%), rgb(0 0 0 / 25%)), 0 4px 14px -6px light-dark(rgb(15 15 15 / 7%), transparent), 0 6px 16px -8px light-dark(transparent, rgb(0 0 0 / 50%));
+  /* Its ink, five steps: the big numbers and a greeting (strong), the words (text), a label or a unit
+     (muted), a caption or a head's quiet meta (faint), and the faintest, a separator or a day to come. */
+  --gallery-text-strong: light-dark(#1d1d1b, #f3f3f1);
+  --gallery-text: light-dark(#37352f, rgb(255 255 255 / 86%));
+  --gallery-muted: light-dark(#7a7975, rgb(255 255 255 / 55%));
+  --gallery-faint: light-dark(#a6a5a1, rgb(255 255 255 / 36%));
+  --gallery-faintest: light-dark(#d4d3cf, rgb(255 255 255 / 17%));
+  /* A line between rows, a soft gray fill (a chip, an empty day), the track a bar or a ring stands on,
+     and a row under the pointer. */
+  --gallery-hair: light-dark(rgb(55 53 47 / 9%), rgb(255 255 255 / 8%));
+  --gallery-fill: light-dark(rgb(55 53 47 / 5.5%), rgb(255 255 255 / 6%));
+  --gallery-track: light-dark(rgb(55 53 47 / 10%), rgb(255 255 255 / 10%));
+  --gallery-hover: light-dark(rgb(55 53 47 / 6%), rgb(255 255 255 / 5.5%));
+  --gallery-neutral-soft: var(--gallery-fill);
+  /* The accent: its fill (today, a bar, a day done), its ink (words in it), a pale fill behind a primary
+     button's words, a middle shade (the days before today's in a week's bars, the Agent's share) and a wash
+     (a field's focus). */
+  --gallery-accent: light-dark(#4084cf, #508fd6);
+  --gallery-accent-ink: light-dark(#336db0, #8bb8e9);
+  --gallery-accent-soft: light-dark(#ebf2fa, rgb(80 143 214 / 17%));
+  --gallery-accent-mid: light-dark(#b0cbeb, #395f8d);
+  --gallery-accent-wash: light-dark(rgb(64 132 207 / 11%), rgb(80 143 214 / 18%));
+  --gallery-good: light-dark(#2f9e68, #3db37a);
+  --gallery-good-ink: light-dark(#217a4e, #74d4a3);
+  --gallery-good-soft: light-dark(#e6f4ec, rgb(61 179 122 / 16%));
+  --gallery-bad: light-dark(#c8473d, #f07d72);
+  --gallery-bad-soft: light-dark(rgb(200 71 61 / 9%), rgb(240 125 114 / 14%));
+  /* The warm one: the sun's chip by day, a streak's flame, a stale weather's sign. */
+  --gallery-warm: light-dark(#e08a12, #f2ae45);
+  --gallery-warm-soft: light-dark(#fdf1dd, rgb(242 174 69 / 15%));
+  /* A card's head: its icon in a small gray rounded square (the chip; warm or blue for the sun, a flame, the
+     moon), its title, a quiet meta text; 8px apart, the row 20px high. */
+  /* The cards' own type: Segoe UI on Windows, PingFang SC on a Mac, Microsoft YaHei for the Chinese Segoe UI
+     has not; as the system draws them (not the document's metrics-tuned alias, --doc-font's Doc Segoe). */
+  --gallery-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
+  --gallery-chip-size: 20px;
+  --gallery-chip-radius: 6px;
+  --gallery-chip-icon: 13px;
+  --gallery-title-size: 13px;
+  --gallery-title-line: 20px;
+  --gallery-meta-size: 12px;
+  /* The rows of a card's face stand this far apart. */
+  --gallery-face-gap: 8px;
+  /* A big number: its weight and tracking, figures of one height; its unit a 13px muted word 3px after it
+     (--gallery-unit-size, a share of the number, is what a document's metric takes). Two sizes: the hero,
+     a card's one main number, and the figure, a number among others. */
+  --gallery-numeral-weight: 600;
+  --gallery-numeral-tracking: -.025em;
+  --gallery-unit-size: .4em;
+  --gallery-unit-gap: .3em;
+  --gallery-unit: 13px;
+  --gallery-hero-size: 44px;
+  --gallery-figure-size: 28px;
 }
 
 :root[data-doc-theme="light"] { color-scheme: light; }
@@ -200,6 +271,10 @@
 :root[data-doc-size="small"][data-doc-spacing="loose"] { --doc-body-line-height: 26px; --doc-small-line-height: 18px; --doc-note-line-height: 20px; --doc-title-line-height: 35px; --doc-h1-line-height: 35px; --doc-h2-line-height: 31px; --doc-h3-line-height: 28px; --doc-h4-line-height: 24px; --doc-card-title-line-height: 25px; --doc-table-line-height: 20px; }
 :root[data-doc-size="large"][data-doc-spacing="compact"] { --doc-body-line-height: 27px; --doc-small-line-height: 20px; --doc-note-line-height: 21px; --doc-title-line-height: 39px; --doc-h1-line-height: 38px; --doc-h2-line-height: 33px; --doc-h3-line-height: 30px; --doc-h4-line-height: 25px; --doc-card-title-line-height: 26px; --doc-table-line-height: 22px; }
 :root[data-doc-size="large"][data-doc-spacing="loose"] { --doc-body-line-height: 32px; --doc-small-line-height: 22px; --doc-note-line-height: 24px; --doc-title-line-height: 43px; --doc-h1-line-height: 43px; --doc-h2-line-height: 37px; --doc-h3-line-height: 34px; --doc-h4-line-height: 29px; --doc-card-title-line-height: 29px; --doc-table-line-height: 24px; }
+
+/* The text on an Apple platform (macOS, iOS, iPadOS: runtime/index.js sets data-doc-platform when the page opens, so an exported file
+   judges on its reader's machine): a shade darker, as its type is drawn thinner there; base.css smooths it. Dark is the same. */
+:root[data-doc-platform="mac"] { --doc-text: light-dark(#262626, #f3f3f3); }
 /* 衬线体: the kit's own controls (the display menu, a code block's language, a diff's counts) keep the
    sans, --doc-font itself given it back on them, for what in them names --doc-font again (the display
    menu's card, controls.css) takes it there. 混合体: the title and every heading in the serif, of no
@@ -247,11 +322,14 @@ body {
   font-size: var(--doc-body-font-size);
   line-height: var(--doc-body-line-height);
 }
+/* On an Apple platform (runtime/index.js) the type is smoothed as the system's own apps' is; the workbench's frame has it, a document in its iframe does not inherit it. */
+:root[data-doc-platform="mac"] body { -webkit-font-smoothing: antialiased; }
 
 /* Hold the first paint until ui.js marks the page ready: by then the reader's theme and width
    are applied and the report's scripts have set up Sheets, charts, tables and formulas, so the
-   page never flashes an intermediate state. If that never happens, reveal it anyway. */
-:root:not([data-doc-ready]) body:has(> .doc-page) {
+   page never flashes an intermediate state. If that never happens, reveal it anyway. A custom page
+   (main.gallery-page) is held the same way, until its board has placed its cards (board/). */
+:root:not([data-doc-ready]) body:has(> :is(.doc-page, .gallery-page)) {
   visibility: hidden;
   animation: doc-reveal 0s linear 1.2s forwards;
 }
@@ -364,6 +442,84 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
   .doc-kit-error { display: none; }
 }
 
+/* A block online that waits for the reader's consent (the kit's runtime, net.js): a line and a button
+   after it in a document, over its card on a custom page (the card is the board's, position: relative),
+   its fill the card's so that what the block drew underneath does not show through. Never in a file,
+   an export or on paper (data-doc-dev). */
+.doc-net-consent {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 8px 0;
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: var(--doc-muted);
+  background: var(--doc-surface);
+  font: 13px/1.5 var(--doc-font);
+}
+/* 允许 is the card's one action: a button with no line, the pale blue fill of a primary (the editor's look.mjs
+   BUTTONS and the workbench's, from the document's own accent), a deeper one under the pointer and pressed. */
+.doc-net-consent-allow {
+  padding: 4px 10px;
+  border: 0;
+  border-radius: 6px;
+  color: color-mix(in srgb, var(--doc-accent) 80%, var(--doc-text));
+  background: color-mix(in srgb, var(--doc-accent) 14%, transparent);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+  transition: background-color 20ms ease-in;
+}
+.doc-net-consent-allow:is(:hover, :focus-visible) { outline: none; background: color-mix(in srgb, var(--doc-accent) 22%, transparent); }
+.doc-net-consent-allow:active { background: color-mix(in srgb, var(--doc-accent) 30%, transparent); }
+/* The why's words, and the button's: in a document the why and 允许访问 <host>; on a card the from line and the short words too. */
+.doc-net-consent-words { display: contents; }
+.doc-net-consent-from, .doc-net-consent-short { display: none; }
+/* On a card of a custom page (the pack Gallery 风格's banner, design B): over the card under its head row, on
+   the card's fill, so that the card still says whose it is: the why (13.5px, 600) over whose the data is
+   (faint) at the left, 允许访问 at the right, a pale primary with no line; the hosts in its title. */
+.gallery-card > .doc-net-consent {
+  position: absolute;
+  inset: calc(var(--gallery-card-pad, 16px) + 20px) 0 0;
+  z-index: 1;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+  padding: 0 var(--gallery-card-pad, 16px) var(--gallery-card-pad, 16px);
+  border-radius: 0 0 var(--gallery-card-radius, 12px) var(--gallery-card-radius, 12px);
+  font: 13px/1.5 var(--gallery-font, var(--doc-font));
+  background: var(--gallery-card-fill, var(--doc-surface));
+}
+.gallery-card > .doc-net-consent > .doc-net-consent-words { display: flex; flex-direction: column; min-width: 0; }
+.gallery-card > .doc-net-consent .doc-net-consent-why { font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--gallery-text, var(--doc-text)); }
+.gallery-card > .doc-net-consent .doc-net-consent-from { display: block; overflow: hidden; font-size: 12px; line-height: 18px; color: var(--gallery-faint, var(--doc-muted)); white-space: nowrap; text-overflow: ellipsis; }
+.gallery-card > .doc-net-consent > .doc-net-consent-allow {
+  flex: none;
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: var(--gallery-accent-ink, var(--doc-accent));
+  background: var(--gallery-accent-soft, color-mix(in srgb, var(--doc-accent) 14%, transparent));
+}
+.gallery-card > .doc-net-consent > .doc-net-consent-allow:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--gallery-accent, var(--doc-accent)) 18%, var(--gallery-accent-soft, transparent)); }
+.gallery-card > .doc-net-consent .doc-net-consent-long { display: none; }
+.gallery-card > .doc-net-consent .doc-net-consent-short { display: inline; }
+/* On a narrow card (data-doc-net-narrow: under 240px of content, net.js) the line just over the button, both at the card's
+   foot, the button as wide as the card, as a narrow habit card's streak and 打卡 are; the line 13px, three lines at
+   most, and whose the data is left to the button's title, so that the banner fits a 2 × 2 card in either language. */
+.gallery-card > .doc-net-consent[data-doc-net-narrow] { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 8px; }
+.gallery-card > .doc-net-consent[data-doc-net-narrow] .doc-net-consent-why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13px; line-height: 17px; }
+.gallery-card > .doc-net-consent[data-doc-net-narrow] .doc-net-consent-from { display: none; }
+@media print {
+  .doc-net-consent { display: none; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
 }
@@ -495,7 +651,9 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
   transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
 }
 
-.doc-display-button:hover,
+/* An icon button: the icon darkens under the pointer, the gray only while it is pressed or its menu is open. */
+.doc-display-button:hover { color: var(--doc-text); }
+
 .doc-display-button[aria-expanded="true"] {
   color: var(--doc-text);
   background: var(--doc-hover);
@@ -679,6 +837,122 @@ span:is(.doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-h
   .doc-display { display: none; }
 }
 
+/* A choice (runtime/choice.js): the menu card a <select> and DocKit.choose open instead of the browser's
+   popup, and the quiet look a <select> has where nobody gave it one. The card is the display menu's
+   (controls.css): radius 10, Notion's popup surface and shadow, rows of 28px that take one light fill
+   under the pointer or the keys, the chosen row checked at its right (no empty column before the words
+   on the others), as wide as its rows (the trigger's width at least, 320px at most, its words cut by an
+   ellipsis past that). It stands in the top layer (a popover, so no z-index of the page covers it);
+   z-index is for a browser without popovers. */
+
+.doc-choice {
+  position: fixed;
+  inset: auto;
+  left: 0;
+  top: 0;
+  z-index: 1100;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 16px));
+  margin: 0;
+  padding: 4px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  border: 0;
+  border-radius: 10px;
+  color: var(--doc-text);
+  background: light-dark(#ffffff, #252525);
+  box-shadow:
+    0 0 0 1px light-dark(rgb(42 28 0 / 7%), #383836),
+    0 20px 24px light-dark(rgb(25 25 25 / 5%), rgb(0 0 0 / 20%)),
+    0 5px 8px light-dark(rgb(25 25 25 / 2.7%), rgb(0 0 0 / 12%));
+  font: 14px/1.2 var(--doc-font);
+  user-select: none;
+  transition: opacity 120ms ease-out;
+}
+
+@starting-style {
+  .doc-choice { opacity: 0; }
+}
+
+.doc-choice-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  margin: 0 4px 1px;
+  padding: 0 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 20ms ease-in;
+}
+
+/* Under the pointer, or reached with the keys: one light fill, as every menu's rows. */
+.doc-choice-row.is-active { background: var(--doc-hover); }
+.doc-choice-row:active { background: var(--doc-press); }
+.doc-choice-row[aria-disabled="true"] { opacity: .45; cursor: default; }
+.doc-choice-row[aria-disabled="true"]:active { background: transparent; }
+
+.doc-choice-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The chosen row: a check at its right. */
+.doc-choice-check {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* An <optgroup>'s name: a small heading, no row. */
+.doc-choice-group {
+  padding: 6px 12px 2px;
+  color: var(--doc-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.doc-choice-group:not(:first-child) { margin-top: 4px; }
+
+/* A <select> nobody styled: no frame, a light fill that darkens under the pointer, the browser's own
+   arrow at its right (kept whatever the page sets as border or background, which a drawn arrow would
+   lose). A class's or a block's own rule outweighs this (it has no weight); a list box (multiple) is
+   the browser's. */
+:where(select:not([multiple], [size])) {
+  min-height: 28px;
+  padding: 0 4px 0 8px;
+  border: 0;
+  border-radius: 6px;
+  color: var(--doc-text);
+  background-color: var(--doc-hover);
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(select:not([multiple], [size]):hover) { background-color: var(--doc-press); }
+
+:where(select:not([multiple], [size]):focus-visible) {
+  outline: 2px solid var(--doc-accent);
+  outline-offset: 2px;
+}
+
+/* On paper a <select> is the words of its chosen option, no arrow, and the menu is never there. */
+@media print {
+  select { appearance: none; background-image: none; }
+  .doc-choice { display: none; }
+}
+
 /* 选项卡区块 (sheets.js), as Notion's tabs: a frame 16px round (1px, Notion's line) holding a row of
    pill tabs and the panel shown, 16px in; or, with .doc-sheet-shell--plain, no frame and no room
    inside it (the tabs and the panel at the flow's edge). A tab is a pill 32px high, its name 14px:
@@ -1387,7 +1661,7 @@ span.doc-link-mention-icon {
     :where(&:is(ol):has(> li[value]), & li > ol:has(> li[value])) > li::marker { color: var(--doc-list-marker); }
   }
 
-  & > :where(p, ul, ol, blockquote, h1, h2, h3, h4) :where(strong) { font-weight: 600; }
+  & > :where(p, ul, ol, blockquote, h1, h2, h3, h4) :where(strong) { font-weight: 700; }
 
   /* A quote and a divider (in the flow, or held by one of its list items: the same look, there the
      list's one gap above it and none below, as any block an item holds, none at its sides). */
@@ -1420,6 +1694,21 @@ span.doc-link-mention-icon {
    title too, and a callout the file has empty (an empty one of the editor's before 2026-11-07). */
 .doc-page :where(p, h1, h2, h3, h4, li, .doc-callout, .doc-details-summary-label):empty::after { content: "\200b"; }
 
+/* A paragraph's or a heading's alignment and indent (对齐与缩进 in the page editor's block menu,
+   Feishu's): centred or at the right (left is neither), and moved in by levels of two body characters,
+   whatever the block's own size, its background with it (a margin, so its fill keeps to its words). */
+:is(p, h1, h2, h3, h4).doc-align-center { text-align: center; }
+:is(p, h1, h2, h3, h4).doc-align-right { text-align: right; }
+:is(p, h1, h2, h3, h4):is(.doc-indent-1, .doc-indent-2, .doc-indent-3, .doc-indent-4, .doc-indent-5, .doc-indent-6, .doc-indent-7, .doc-indent-8) { margin-inline-start: calc(var(--doc-indent-level) * 2 * var(--doc-body-font-size)); }
+.doc-indent-1 { --doc-indent-level: 1; }
+.doc-indent-2 { --doc-indent-level: 2; }
+.doc-indent-3 { --doc-indent-level: 3; }
+.doc-indent-4 { --doc-indent-level: 4; }
+.doc-indent-5 { --doc-indent-level: 5; }
+.doc-indent-6 { --doc-indent-level: 6; }
+.doc-indent-7 { --doc-indent-level: 7; }
+.doc-indent-8 { --doc-indent-level: 8; }
+
 /* An item's color (颜色 in the page editor's block menu, notion-lite's: base.css's classes): a text
    color is its marker's too, and the items it holds take both; a background lies behind it, its
    marker and the items it holds, 2px past them as a paragraph's (base.css), its part left of the
@@ -1543,7 +1832,7 @@ ol.doc-flow > li {
   border-radius: 8px;
   background: var(--doc-surface);
   box-shadow: none;
-  font-weight: 600; /* a step written the short way: its own words its title */
+  font-weight: 700; /* a step written the short way: its own words its title, bold as a <strong> is (flow.css) */
   overflow-wrap: anywhere;
   break-inside: avoid;
 }
@@ -2076,7 +2365,6 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   border-radius: 6px;
   color: inherit;
   background: color-mix(in srgb, currentColor 8%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);
   font: inherit;
   font-weight: inherit;
   line-height: inherit;
@@ -2383,6 +2671,7 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 
 .doc-table-wrap {
   --doc-table-frame: var(--doc-hairline);
+  --doc-table-frame-solid: var(--doc-hairline-solid);
   position: relative;
   align-self: start;
   /* A share over 1 keeps the wrapper at the reading width; the table is that much wider and
@@ -2409,6 +2698,11 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   scrollbar-width: none;
 }
 .doc-table-wrap::-webkit-scrollbar { display: none; } /* WebKit without scrollbar-width */
+/* A table narrower than the text is placed on the page as a paragraph's words are (对齐 in the page
+   editor's block menu, a text block's classes: components/align.mjs): at the left unless its frame
+   says centred or at the right, where the text has room (a frame as wide as the text has none). */
+:is(.doc-table-wrap, table).doc-align-center { margin-inline: auto; }
+:is(.doc-table-wrap, table).doc-align-right { margin-inline: auto 0; }
 /* A short table, or one mostly of words (data-doc-whole, tables/whole.js), is shown whole: its
    frame as tall as its rows, read with the page. A long table of data keeps the kit's height above,
    its rows scrolling under the header row that stays; a height written on the frame
@@ -2416,18 +2710,19 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 .doc-table-wrap[data-doc-whole] { max-height: var(--doc-table-height, none); }
 .doc-table-wrap:has(> .doc-scrollbars[data-y]) { overscroll-behavior-block: none; }
 
-/* The frame's scrollbars (tables.js): a layer stuck at the frame's top-left that takes no room,
-   with a rail along the right edge and one along the bottom for each axis that overflows
-   (data-y, data-x), each thumb 3px in from the frame's edge. tables.js sets each rail's place
-   (the part of the edge that scrolls: below the header, between the rounded corners) and its
-   track, thumb size and thumb offset (--doc-scrollbar-*). They show while the pointer is
-   over the frame or it scrolls. */
+/* The frame's scrollbars (tables.js): a layer stuck at the frame's top-left that takes no room (no
+   height; as wide as the frame's inside, which it never makes wider, so that the frame's line is
+   as wide as the frame in the same layout as the frame: below), with a rail along the right edge
+   and one along the bottom for each axis that overflows (data-y, data-x), each thumb 3px in from
+   the frame's edge. tables.js sets each rail's place (the part of the edge that scrolls: below the
+   header, between the rounded corners) and its track, thumb size and thumb offset
+   (--doc-scrollbar-*). They show while the pointer is over the frame or it scrolls. */
 .doc-scrollbars {
   position: sticky;
   top: 0;
   left: 0;
   z-index: 6;
-  width: 0;
+  width: 100%;
   height: 0;
 }
 .doc-scrollbar {
@@ -2465,11 +2760,14 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 }
 .doc-scrollbar:is(:hover, [data-drag]) > .doc-scrollbar-thumb { background: var(--doc-scrollbar-thumb-active); }
 /* The frame's line above everything in the frame (a header row or column that sticks over the
-   outline too): as big as the frame (tables.js), on the layer stuck at its top-left. */
+   outline too): as big as the frame, on the layer stuck at its top-left; as wide as the layer, so
+   as the frame whenever the frame is laid out (a width read and written later by a script could
+   disagree with it for a frame), as tall as tables.js reads the frame. */
 .doc-scrollbars-frame {
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   box-sizing: border-box;
   border: 1px solid var(--doc-table-frame);
   border-radius: var(--doc-table-radius);
@@ -2480,7 +2778,7 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 .doc-table-wrap:has(> .doc-scrollbars) { outline-color: transparent; }
 /* In a block with a fill of its own (a highlight block, its gray its own unless it is given a text
    color; any block of the palette's background colors) the frame's line is opaque (above). */
-:is(:is(.doc-summary, .doc-panel):not(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red), .doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) .doc-table-wrap { --doc-table-frame: var(--doc-table-frame-filled); }
+:is(:is(.doc-summary, .doc-panel):not(.doc-text-gray, .doc-text-brown, .doc-text-orange, .doc-text-yellow, .doc-text-green, .doc-text-blue, .doc-text-purple, .doc-text-pink, .doc-text-red), .doc-highlight-gray, .doc-highlight-brown, .doc-highlight-orange, .doc-highlight-yellow, .doc-highlight-green, .doc-highlight-blue, .doc-highlight-purple, .doc-highlight-pink, .doc-highlight-red) .doc-table-wrap { --doc-table-frame: var(--doc-table-frame-filled); --doc-table-frame-solid: var(--doc-table-frame-filled); }
 /* A frame that scrolls sideways and is not at its end fades out at its right edge (data-more,
    tables.js): the columns go on past it, which its rails, shown only under the pointer, do not say.
    Drawn over the cells by the frame's line layer, taking no room. */
@@ -2497,6 +2795,9 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
   transition: opacity 160ms ease;
 }
 .doc-scrollbars[data-more] > .doc-scrollbars-frame::after { opacity: 1; }
+/* Its right edge, under which the columns past it lie, is drawn opaque (the dark line is a veil that
+   shows what is under it): the line over the fade, nothing of those columns through it. */
+.doc-scrollbars[data-more] > .doc-scrollbars-frame { border-right-color: var(--doc-table-frame-solid); }
 
 /* Each cell draws its own lines, on its right and at its bottom (separate borders: a cell that sticks
    while the frame scrolls takes its lines along, a merged cell has them where it ends); in a frame
@@ -2560,6 +2861,12 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 .doc-table :is(td, th) > :is(ul, ol):last-child { margin-bottom: 0; }
 .doc-table :is(td, th) > :is(ul, ol) > li + li { margin-top: 2px; }
 
+/* A picture in a cell (单元格里的图片, an <img> amid its words): as wide as its width says (pixels; the
+   page editor's drag of its edge writes it), with none at most 240px, never past its cell; its height
+   by its own ratio, its middle on the line's, so a row grows with it. */
+.doc-table :is(td, th) img { max-width: 100%; height: auto; vertical-align: middle; }
+.doc-table :is(td, th) img:not([width]) { max-width: min(100%, 240px); }
+
 .doc-table--auto { table-layout: fixed; max-width: none; }
 .doc-table [data-column-kind="compact"] { white-space: nowrap; word-break: normal; }
 .doc-table [data-column-kind="narrative"] { overflow-wrap: break-word; }
@@ -2630,7 +2937,7 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
    (base.css), a fill over the whole cell (base.css's: a cell is square, and one that sticks wears it too, above), bold words (the words
    typed in it later too), and an alignment over the kit's own (a numeric column's centre), a vertical one (the kit's: top). A header
    row's look is these: .doc-highlight-gray and .doc-bold (a header column has none of its own). */
-.doc-table :is(td, th).doc-bold { font-weight: 600; }
+.doc-table :is(td, th).doc-bold { font-weight: 700; }
 .doc-table :is(td, th).doc-align-left { text-align: left; }
 .doc-table :is(td, th).doc-align-center { text-align: center; }
 .doc-table :is(td, th).doc-align-right { text-align: right; }
@@ -2839,6 +3146,16 @@ figure:is(.doc-image, .doc-file, .doc-bookmark, .doc-embed):not(:has(> *)) { dis
 [data-doc-component] {
   margin: var(--doc-block-gap) 0;
 }
+/* [hidden] hides what is in an instance whatever display a block's style gave it: a control a block
+   hides where nothing is written (an export: form.hidden = !context.canEdit()) stays hidden though its
+   own rule says display: flex, which an author's rule on the class would otherwise win over the
+   browser's [hidden] { display: none }. What a slot holds is the document's blocks, which keep their
+   own rules (a Sheet panel, an empty figure the editor shows), so the rule stops at a slot. */
+@scope ([data-doc-component]) to ([data-doc-slot]) {
+  :scope [hidden] {
+    display: none !important;
+  }
+}
 /* A slot holds the document's blocks: they read as in any flow (flow.css), the first and the last flush with it. */
 [data-doc-slot] > :where(:first-child) {
   margin-top: 0;