pbakaus_impeccable/picker/styles/screens/boundaries.css

/* ============================================================
   Screen 08: boundary style.

   What tells the reader one section has ended and the next has begun. Four
   answers, in order of how much material they spend: nothing, a line, a
   change of ground, an edge you can see.

   Bands are mixed from the artboard's own ink and ground rather than named
   colors, so a drenched page separates with a lighter wash of its primary
   instead of turning grey.

   The tokens moved here are section-scale, and they are the grounds and edges
   themselves. Depth works at element scale and only ever adds to what is set
   here, as a shadow or as a tonal overlay, so the two answers compose rather
   than overwrite each other.
   ============================================================ */

/* The four answers differ in material, not in vertical rhythm: a tint, a
   hairline, an inset, an edge. None of them pads the proof band, because on the
   desktop artboard that band is a fixed grid row and the row heights belong to
   the layout answer on screen 07. Padding it was not buying air, it was
   claiming room the row did not have: the copy overflowed the padding box
   downward, which is why a tinted band read as squeezed and sat low in its own
   tint, and why the open answer quietly stretched the row and shifted every
   section under it. */

/* ── Open space ──────────────────────────────────────────────
   Every rule off and every ground the same, so the only thing left holding
   the sections apart is the air between them. */
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="open-space"]) .picker-preview-boundaries,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="open-space"]:checked)) [data-carry] {
  --pvs-divider-w: 0px;
  --pvs-band: transparent;
  --pvs-band-alt: transparent;
  --pvs-band-top: transparent;
  --pvs-panel: transparent;
  --pvs-panel-edge-w: 0px;
  --pvs-panel-pad: 0px;
  --pvs-proof-inset: 0px;
}

/* ── Thin dividers ───────────────────────────────────────────
   One hairline per boundary and nothing else: at the nav, above and below
   the proof band, between its columns, and over the footer. */
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="thin-dividers"]) .picker-preview-boundaries,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="thin-dividers"]:checked)) [data-carry] {
  --pvs-divider-w: 1px;
  --pvs-divider-c: color-mix(in oklab, var(--pvs-ink) 24%, var(--pvs-ground));
  --pvs-band: transparent;
  --pvs-band-alt: transparent;
  --pvs-band-top: transparent;
  --pvs-panel: transparent;
  --pvs-panel-edge-w: 0px;
  --pvs-panel-pad: 0px;
  --pvs-proof-inset: 0px;
}

/* ── Surface changes ─────────────────────────────────────────
   No lines at all. Chrome sits on one tone, the proof band on another, and
   the boundary is wherever the ground changes under your eye. */
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="surface-changes"]) .picker-preview-boundaries,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="surface-changes"]:checked)) [data-carry] {
  --pvs-divider-w: 0px;
  --pvs-band: color-mix(in oklab, var(--pvs-ink) 7%, var(--pvs-ground));
  --pvs-band-alt: color-mix(in oklab, var(--pvs-ink) 13%, var(--pvs-ground));
  --pvs-band-top: color-mix(in oklab, var(--pvs-ink) 7%, var(--pvs-ground));
  --pvs-panel: transparent;
  --pvs-panel-edge-w: 0px;
  --pvs-panel-pad: 0px;
  --pvs-proof-inset: 0px;
}

/* ── Cards and panels ────────────────────────────────────────
   Content moves inside containers. The proof band pulls in off the page
   margins and grows an edge, the cards do the same, and the page reads as a
   set of objects on a ground rather than a run of sections. */
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-preview-boundaries,
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked)) [data-carry] {
  --pvs-divider-w: 0px;
  --pvs-band: transparent;
  --pvs-band-alt: color-mix(in oklab, var(--pvs-ink) 5%, var(--pvs-ground));
  --pvs-band-top: transparent;
  --pvs-panel: color-mix(in oklab, var(--pvs-ink) 5%, var(--pvs-ground));
  --pvs-panel-edge: color-mix(in oklab, var(--pvs-ink) 20%, var(--pvs-ground));
  --pvs-panel-edge-w: 1px;
  --pvs-panel-pad: 5%;
  --pvs-proof-inset: var(--pvs-gutter);
}

/* The proof band is the one section that can become a container without the
   page being restructured, so it carries the difference between a tinted
   band and a panel: the inset pulls it off the page margins and the edge
   only exists where an inset was asked for. */
[data-carry] .ps-desktop > .ps-proof {
  margin-inline: var(--pvs-proof-inset, 0px);
  border: var(--pvs-panel-edge-w) solid var(--pvs-panel-edge);
  border-radius: var(--pvs-radius-surface);
}

/* The handset's chrome carries its own tint in the base artboard, which is a
   boundary the open answers did not ask for. Both ends take the band. */
[data-carry] .ps-phone-top,
[data-carry] .ps-phone-footer {
  background-color: var(--pvs-band-top, var(--pvs-surface));
}

/* Percentage padding resolves against the card's own width, so one value
   holds at both artboard sizes instead of swamping the handset. */
[data-carry] .ps-gallery-item {
  padding: var(--pvs-panel-pad, 0px);
}

/* The handset's card row is already the block closest to the footer, so it
   takes a shorter version of the same padding rather than growing into it. */
[data-carry] .ps-phone-body .ps-gallery-item {
  padding: calc(var(--pvs-panel-pad, 0px) * 0.5);
}

/* ── The three region bodies ──────────────────────────────────
   A shell, a document, and an index are separated in different places from a
   landing page, so the same four answers are spent on different parts. What is
   shared is the material: the answers above set a hairline, a ground, or an edge,
   and each body below reads the one it has a use for.

   The dividing rules on these bodies were hardcoded hairlines, which is the
   thing this screen is asking about. A shell with a permanent rule down its rail
   answers Open space with a line still on screen. */
[data-carry] :is(.ps-ops-rail, .ps-ops-main, .ps-docs-rail) {
  border-right: var(--pvs-divider-w) solid var(--pvs-divider-c);
}

/* A table is a run of sections stacked, so the hairline answer rules it. The
   plot's own baseline is not in here: an axis is part of the chart's drawing and
   not a boundary between two things. */
[data-carry] .ps-ops-table {
  border-top: var(--pvs-divider-w) solid var(--pvs-divider-c);
}

[data-carry] .ps-ops-row + .ps-ops-row {
  border-top: var(--pvs-divider-w) solid var(--pvs-divider-c);
}

[data-carry] .ps-index-row + .ps-index-row,
[data-carry] .ps-index-rail {
  border-top: var(--pvs-divider-w) solid var(--pvs-divider-c);
}

[data-carry] :is(.ps-index-row + .ps-index-row, .ps-index-rail) {
  padding-top: calc(var(--pvs-divider-w) * 8);
}

/* Grounds. Each one fills its own region and stops at the page margin rather than
   bleeding to the frame edge. That is the same claim the layout screen's header
   makes about these boards: their regions sit on the page grid, so the rail's
   ground starts where the rail starts, on the first column line. Reaching the
   edge would need the margin restated as a share of a different box, and the two
   percentages do not resolve against the same width, so the tone would land a
   point or two off the very line the board is drawn to check. */
[data-carry] :is(.ps-ops-rail, .ps-ops-panel, .ps-docs-rail) {
  background-color: var(--pvs-band);
}

/* Alternating grounds are what a run of entries has instead of bands: the second
   entry sits on a different tone from the first, and the boundary is where the
   tone changes. */
[data-carry] .ps-index-row--flip {
  background-color: var(--pvs-band-alt);
}

/* A table's heading row is the one place on a shell where a change of ground
   does the whole job a rule would have done. */
[data-carry] .ps-ops-row--head {
  background-color: var(--pvs-band-alt);
}

/* The callout is the document's only container, so it is where this screen's
   answer lands. Its accent edge is not part of the answer: that is what marks
   the block as a callout, and it stays under all three. */
[data-carry] .ps-docs-note {
  padding: calc(var(--pt-base) * 0.7) calc(var(--pt-base) * 0.9);
  background-color: var(--pvs-band-alt);
  border-left: calc(var(--pt-base) * 0.25) solid var(--pvs-accent-c);
}

/* Cards, on a tool. Offered to Persuade and Operate only, so a shell is the one
   region body that draws it: the chart, the table, and the side panel become
   objects on a ground, and the rules that had been dividing them go, because an
   edge and a hairline saying the same thing twice is the fault the answer after
   Open space is meant to avoid. */
[data-carry] :is(.ps-ops-chart, .ps-ops-table, .ps-ops-panel) {
  background-color: var(--pvs-panel);
  border: var(--pvs-panel-edge-w) solid var(--pvs-panel-edge);
}

[data-carry] :is(.ps-ops-chart, .ps-ops-table) {
  padding: var(--pvs-panel-pad, 0px);
}

/* An open rail plate is a state and reads as one already, so under the card
   answer the rest of the rail joins it rather than the plate growing an edge. */
:where(#picker-form:not(:has(.picker-strategy-option:hover input[name="boundary-style"])):has(input[name="boundary-style"][value="cards-and-panels"]:checked)) [data-carry] .ps-ops-item,
#picker-form:has(.picker-strategy-option:hover input[name="boundary-style"][value="cards-and-panels"]) .picker-preview-boundaries .ps-ops-item {
  background-color: var(--pvs-panel);
}