/* LINKS: making one, and the four states a made one goes through (ADR 0021 §4, §8).

   One stylesheet for two panels (U4d). A Space's Share panel is a dialog share.mjs builds and
   page.css lays out; a board's is a Hologram template that layout.css lays out. The DOM of this
   section is the same code in both, so its look is one file in both — everything here is under
   `.links-panel`, the box the section is mounted into. A button's, a field's, a pill's and a
   sheet's own look is the kit's (ui.css, ADR 0023 C3), and the colours are its tokens.

   The rows keep the shape People's rows keep: what it is, what it can do, one quiet fact, and the
   one or two things to do with it. A row that is over is dim and stays: it points at what it
   became. */

/* the section heading carries the one thing to do in it */
.links-panel :is(h3, h4) { display: flex; align-items: baseline; gap: 12px; }
.links-panel :is(h3, h4) button { flex: none; padding: 2px 10px; font-size: 13px; font-weight: 400; }

.links-panel ul { list-style: none; margin: 0; padding: 0; }
.links-panel li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; border-radius: 8px; }
.links-panel li .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 8px 0; }
.links-panel li b { font-weight: 600; overflow-wrap: anywhere; }
.links-panel li small { color: var(--muted); font-size: 12px; }
.links-panel li .level { flex: none; color: var(--muted); font-size: 12px; }
/* a hairline between rows, as People's rows have: at phone width a row wraps onto three lines and
   its level lands under it, where without a line it would read as the next row's (U4d) */
.links-panel :is(#links, #old-links) li + li { border-top: 1px solid var(--line); }
.links-panel li.dim { color: var(--muted); }
.links-panel li.dim b { font-weight: 500; }
.links-panel i.lk { display: inline-block; width: 1.2em; font-style: normal; color: var(--muted); }
.links-panel button.x { min-width: 32px; padding: 2px 8px; border-color: transparent; font-size: 15px; }
.links-panel button.x:hover { border-color: var(--line); }
/* a link this tab made: its secret is shown once, so Copy is on that row and on no other */
.links-panel #links .primary { padding: 2px 10px; font-size: 13px; }
/* A board that says "You have not been let into this board" draws nothing behind the card that
   says it (verify-4 NOTE 6). A person who was taken out keeps a key that still opens what was
   sealed before — that is the cryptography, and the sheet says so — but their own tab went on
   painting the shapes under the sentence, which is the page saying two things at once. Only the
   svg's children go: the dot grid is a background on the svg itself, so it is still a board. */
.app.shut #board > * { visibility: hidden; }
.links-panel p.note { color: var(--muted); font-size: 12px; margin: 6px 0; }
.links-panel p.error { color: var(--danger); margin: 6px 0; }

/* Making one: two defaulted choices and a switch (ADR 0021 §4), the kit's `fieldset.seg` and `.sw`.
   The picker is a step, not an interruption: it opens inside the panel under its own button. */
.links-panel form.mk { display: block; margin: 8px 0 16px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); }
.links-panel form.mk .picks { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* the two legends in one column, so the two rows of choices line up */
.links-panel fieldset.seg legend { float: left; width: 84px; }
.links-panel .sw { margin: 14px 0 2px; }
.links-panel p.note.lab { display: flex; gap: 8px; align-items: baseline; margin: 14px 0 4px; }
.links-panel p.note.lab label { color: var(--ink); font-size: 14px; }
.links-panel p.note.lab i { font-style: normal; font-size: 12px; }
/* Every field the panel has is the kit's (ui.css): **Add a program**, the menu beside it saying
   what it may do, and the field that renames one (ADR 0023 report 13, finding 12). */
.links-panel :is(input[type=text], input[type=url]), dialog.share :is(input[type=text], input[type=url]) {
  flex: 1; min-width: 0; }
/* The form itself and the height of what is in it. These three were `page.css`'s `form` rule and
   two rules stranded in `space.css`, so the row of Add-a-program controls was a flex row of 36 px
   boxes in a Space and a line of browser-default boxes of three different heights on a board. The
   two `space.css` rules are **moved** here rather than copied — the same move U4 made with
   `dialog.sheet.sure` — because a panel with its look in two stylesheets is what §C7 is about, and
   `dialog.share` is carried over with them so a Space's fields are unchanged. */
.links-panel form, dialog.share form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.links-panel :is(.link, form) :is(input:not([type=checkbox]):not([type=radio]), select, button),
dialog.share :is(.link, form) :is(input:not([type=checkbox]):not([type=radio]), select, button) {
  height: 36px; padding-block: 0; }
@media (max-width: 799px) {
  /* the field takes the line and the menu and the press sit under it */
  .links-panel form input[type=text], dialog.share form input[type=text] { flex: 1 1 100%; }
}

.links-panel form.mk input[type=text] { width: 100%; }
.links-panel form.mk .row { display: flex; justify-content: flex-end; margin: 14px 0 0; }
.links-panel form.mk h4 { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 600;
  color: var(--ink); }

/* shown this once: the whole link, and what "works once" is a promise by */
.links-panel .made { margin: 8px 0 16px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel); }
.links-panel .made h4 { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 600;
  color: var(--ink); }
.links-panel .made .link { display: flex; gap: 8px; align-items: center; margin: 0; }
.links-panel .made .link input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; padding: 6px 8px; }
.links-panel .made .note:last-child { margin-bottom: 0; }

/* The one line the section leaves: what was just pressed, and where it offers to take something
   back, the way back beside it. It sits right under the rows it is about, which is where somebody
   is already looking — and never over them: a sticky line here would cover the Cancel of the row
   it is talking about. (A Space's panel keeps its own line at the foot of the dialog, where it
   *is* below the fold, so space.css makes that one sticky.) */
.links-panel > p.said:not(.on) { display: none; }
.links-panel > p.said.on { margin: 10px -18px; padding: 10px 18px; background: var(--green-soft);
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); color: var(--ink); }
.links-panel > p.said.on button { margin-left: 8px; }

/* The links this Space was made with, folded away: honest, and not the first thing a new Space's
   panel puts in front of somebody who has made no link of their own (U4d). U8 ends them. */
.links-panel details.old { margin: 12px 0 0; }
.links-panel details.old > summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 4px 0; }
.links-panel details.old #old-links li b { font-weight: 500; }
.links-panel details.old .row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }

@media (pointer: coarse) {
  /* every control in the panel, not only the two link lists: People's Leave and Remove, the
     headings' Make a link and Add a program, and a program's or a picture's row (verify-4) */
  .links-panel :is(button, select) { min-height: 36px; }
}
@media (max-width: 480px) {
  .links-panel fieldset.seg { width: 100%; }
  .links-panel fieldset.seg legend { width: 100%; float: none; }
  .links-panel #links li .grow { flex-basis: 100%; }
}

/* --- a list that does not add up (ADR 0021 §3, §U7a) --------------------------------------------

   The whole panel becomes this: one calm sentence saying what happened and that nothing was
   opened, and one thing to press. Amber, not red — nothing here is the reader's doing, and a red
   wall is the thing people learn to click past. It is `role="alert"` and takes the focus, because
   it replaces what somebody was looking at. Both panels load this file, so both say it alike. */
.stopped { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--amber-line); border-radius: 10px;
  background: var(--amber-soft); color: var(--ink); font-size: 15px; }
.stopped + .row { display: flex; gap: 8px; margin: 0 0 10px; }
.stopped + .row button { min-height: 36px; }

/* A list that did not add up replaces the whole panel (`stopped`). On a board the rows around this
   box are the same server's word as the list that did not add up, so leaving them on the screen
   under a line saying nothing was opened would be telling somebody two things at once: the panel
   is its heading and the stop. (`:has` follows the box share.mjs owns, so a Hologram re-render
   cannot undo it.) */
.panel.share:has(#board-share .stopped) > *:not(h2):not(#board-share) { display: none; }

/* --- check it's really them (ADR 0021 §8, U7c) --------------------------------------------------

   Eight words, four and four, big enough to read aloud from across a desk. No Copy button: these
   words are for a voice, and a phrase that travels by the same wire as the key it checks checks
   nothing.

   Styled whole here, and not as one of the app's `.sheet`s: a board's page loads this stylesheet
   and nothing else, so a sheet that borrowed its shape from `page.css` would be an unstyled box
   in the one place a board's admin uses it. One rule set, one appearance, both panels. It is the
   armed sheet's shape (`dialog.sheet.sure`), because it is the same kind of question, and its look
   is the kit's sheet (ui.css). */
dialog.check-sheet { width: min(440px, 92vw); height: fit-content; max-height: 86dvh; margin: auto; overflow: auto; }
@media (max-width: 480px) { dialog.check-sheet { width: min(440px, 94vw); padding: 18px 16px; } }
dialog.check-sheet p { margin: 0 0 12px; line-height: 1.5; }
dialog.check-sheet .row { display: flex; flex-wrap: wrap; gap: 8px; }
/* its two buttons are dressed with the take-back sheet's, at the foot of this file: the same pair
   of answers to the same kind of question, and one look is one rule. */
.words8 { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--hover); }
.words8 .line { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.words8 b { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: 0.01em;
  font-variant-ligatures: none; }
/* four and four at a phone's width too: eight words read aloud as two groups of four, and a
   group that wraps mid-way is one people lose their place in. The worst line the list can draw is
   four eight-letter words, which is what these numbers are cut to fit. */
@media (max-width: 480px) {
  .words8 { padding: 12px 14px; }
  .words8 b { font-size: 16px; }
  .words8 .line { gap: 6px 10px; }
}

/* A key that was checked, and one that is not the key that was checked. The tick is quiet and
   says the day in its `title` (ADR 0019: one string). The loud line is red and `role="alert"`,
   because it is the one thing in this panel that is not the server's word about itself. */
.ticked { margin-left: 6px; color: var(--green-ink); font-weight: 600; cursor: default; }
small.swapped, p.swapped { color: var(--danger); }
.who.swapped { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--danger); border-radius: 10px;
  background: var(--danger-soft); color: var(--danger-strong); font-size: 15px; }
/* the bar sits outside the row, so the names in a list still line up under each other */
li.swapped { border-left: 3px solid var(--danger); padding-left: 10px; margin-left: -13px; }
.note.unread { color: var(--amber-ink); }
button.check-words { white-space: nowrap; }
@media (pointer: coarse) { button.check-words { min-height: 36px; } }

/* THE ACCESS LINE (ADR 0022 §C2, decision 1).

   One element, four slots, one order — who can open it · what you can do · sealed or readable ·
   what waits — on a board's header, a Space's, a note's, and every later surface. It lives in this
   file because this is the one stylesheet all of them already load (layout.ex for the board and
   home, space.html, passkey.html), and one look wherever you are is the whole point of it.

   It is one run of text and not a flex row: a flex box cannot ellipsize, and at a phone's width
   the line must truncate from the right, so `who` and `you` survive and the fourth slot goes
   first. It never wraps and it never pushes the Share button off the bar. */
.access { display: inline-block; min-width: 0; max-width: 100%; margin: 0; padding: 4px 8px;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; line-height: 1.35; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* page.css sizes a Space at 15px and space.css's `.app button { font: inherit }` hands that to
   every button in one, so the line would be a different size on a Space than on a board. The class
   is doubled to outrank that rule: not a trick worth repeating, but the alternative is naming
   every host that will ever carry the line. */
.access.access { font-size: 12.5px; line-height: 1.35; }
button.access { cursor: pointer; }
/* a read-only line (the claim page) has no press behind it, so it needs no room for a hover pill
   and lines up with the words under it */
span.access { padding-left: 0; }
@media (hover: hover) { button.access:hover { background: var(--hover); color: var(--ink); } }
/* the separator is a rule, never a text node: a screen reader reads four phrases, not one run-on */
.access .slot + .slot::before { content: " · "; color: var(--muted); }
/* Amber marks a slot with something to do about it — free, readable, an old door, somebody
   waiting — and a plain slot is a fact (07 rule 3). The colour is emphasis and never the fact
   itself: every amber slot says its whole sentence in words. */
.access .slot.amber { color: var(--amber-ink); }

/* LISTS WRAP, HEADERS ELLIPSISE (ADR 0022 §C2, the lead's call after U8b).

   §C2's "truncates from the right" is a **header's** rule and only a header's: a bar is one line
   of fixed height and the line must give way there rather than push Share off the end of it.
   A **list** row has vertical room, nothing beside it that could be pushed off, and is read once
   rather than glanced at — so on a list the line wraps and **no slot is the one that gives way**.
   It matters because the slot an ellipsis eats first is the seal, and the seal is the slot a
   person reads. /me's "Where you are" is such a list; so is home, below. */
#where .access { white-space: normal; }

/* A board's header: `.float button` makes every button in there a flex row, so the line says
   again that it is a block box (two classes beat one class and one type). */
.float .access { display: inline-block; flex: 0 1 auto; }
/* A board drawn inside a Space wears no header of its own — the Space's bar carries the line for
   the board, the note and the Space alike (01 R3), and two marks for one fact is what this ADR is
   about (02 #8). */
.in-space .access { display: none; }

/* A Space's bar: the line gives way before the Share button does. At a phone's width that bar is
   already six controls wide, so the line keeps what it can of `who` and `you` and the rest goes to
   the ellipsis — the gap and the padding are tightened there to buy it back what they can. */
.bar .access { flex: 0 1 auto; max-width: 40vw; }
@media (max-width: 799px) {
  .bar .access { max-width: 52vw; padding: 4px 4px; }
  main.app .bar { gap: 5px; }
  /* the "‹ back" there is the way back, not the thing's name (the note's title and the board's head
     under the bar carry that): it gives way before the line does, down to "‹ F…" (verify-5 M2) */
  main.app .bar .crumb-back { flex: 0 4 auto; min-width: 3.5em; }
}

/* A home row's line (§C2): the same four facts in the same order as the headers, quiet, beside the
   name. It is printed as text beside the `ago`, so the separator here is the string's own.

   Where the row and its line fit side by side, the name keeps a floor and the line gives way — a
   row whose name has been squeezed to one letter says less than one whose line ends in an
   ellipsis. Where they do not, the line takes a line of its own: see the 600 block below. */
main.home li > a time { flex: 0 1 auto; min-width: 0; max-width: 62%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main.home li > a > span:first-child { flex: 1 1 auto; min-width: 6em; }

/* At a phone's width the name and the line no longer fit on one line together, and squeezing them
   costs the seal — so the row wraps and the line sits under the name, whole. Home is a list, and a
   list wraps (see LISTS WRAP, HEADERS ELLIPSISE above). Nothing here is pushed off by it: the row
   is a link and the menu is its own element beside it. */
/* A board's row wraps its words onto a line of their own when the name, the chip and they do not fit one
   (layout.css): there they have the whole line, so the 62% above no longer applies (verify-5b M3) */
main.home li > a:has(> .k) > time { max-width: none; }
@media (max-width: 600px) {
  main.home li > a { flex-wrap: wrap; gap: 2px 12px; }
  main.home li > a time { flex: 1 1 100%; max-width: none;
    overflow: visible; text-overflow: clip; white-space: normal; }
}

/* A board's header at a phone's width is six things wide: the mark, the way back, the name, the
   line, Share and the menu. The name is as wide as it is (`field-sizing`; Safari 18.6 has none, so there
   it is the field's own width) and is never squeezed below that, up to its cap: 40% of the row (ADR 0023
   decision 7), or less where 40% would leave the line under 5.5em, so the line's first slot always keeps
   its first words ("Open to…", "Only you", "2 people"): an open board still says it is open, a reader
   that they read (verify-5 M2, 5b). 241px is what else the row holds on a finger: the mark 44, Share 76,
   the menu 44, four gaps and the line's 5.5em; the way back takes its 16vw too. The line gives way to its
   ellipsis before the name does; Share and the menu keep the row's end. */
@media (max-width: 600px) {
  .float.topleft input.title { flex: 0 1 auto; width: auto; min-width: auto; max-width: min(40%, calc(100% - 241px)); field-sizing: content; }
  .float.topleft:has(.home-space) input.title { max-width: min(40%, calc(100% - 241px - 16vw)); }
  .float.topleft .home-space { max-width: 16vw; }
  .float.topleft #open-share { margin-left: auto; }
  .float.topleft .access { min-width: 5.5em; padding: 4px 4px; }
}

/* --- ONE PANEL, ONE MENU (ADR 0022 decision 2 and 10) -------------------------------------------

   Since the fold, `share.mjs` draws the rows of a board's Share panel and of a Space's, so the
   controls in them are styled once, here, in the stylesheet both hosts load. The board's panel is
   `#board-share` (layout.css dresses what is around it), the Space's is `dialog.share`.

   **The two rendering bugs this ADR names.** Both menus were `position: absolute` inside a box
   that scrolls, so the panel's `overflow` cut them: the board's row menu was drawn half outside
   the panel's right edge and clipped "Check it's really th…", and the Space's "Let in as" landed
   over its own button, about 80 px of it showing. `share.mjs` places both from the summary's own
   rectangle and sets `position: fixed` inline, which no ancestor's overflow can clip; these rules
   are what the box looks like once it is there. */
.share-panel details.dots, dialog.share details.dots { position: relative; flex: none; }
/* the row's own menu, "…": "Check it's really them…" and "Remove", out of the way until asked for */
.share-panel details.dots:not(.pick) > summary, dialog.share details.dots:not(.pick) > summary { list-style: none;
  min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--r);
  color: var(--muted); cursor: pointer; }
.share-panel details.dots:not(.pick) > summary::-webkit-details-marker, dialog.share details.dots:not(.pick) > summary::-webkit-details-marker { display: none; }
.share-panel details.dots:not(.pick) > summary:hover, dialog.share details.dots:not(.pick) > summary:hover,
.share-panel details.dots[open]:not(.pick) > summary, dialog.share details.dots[open]:not(.pick) > summary { background: var(--hover); color: var(--ink); }
.share-panel details.dots > .pop, dialog.share details.dots > .pop {
  z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 6px; max-width: min(19rem, calc(100vw - 16px));
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.share-panel details.dots > .pop button, dialog.share details.dots > .pop button {
  display: flex; align-items: center; gap: 8px; text-align: left; white-space: nowrap; }

/* "Let in as ▾", and what somebody can do here: a menu, not a list of buttons — one press decides
   and the arrows walk it. `pick` is the loud one (letting somebody in), `level` the quiet one (the
   word in a settled row, which reads as a fact until it is reached for). */
details.dots.pick > summary { list-style: none; padding: 5px 12px; border-radius: 8px;
  background: var(--ink); color: var(--on-ink); font-size: 13px; cursor: pointer; white-space: nowrap; }
details.dots.pick > summary::-webkit-details-marker { display: none; }
details.dots.pick > summary i { margin-left: 4px; font-style: normal; }
details.dots.pick > summary:hover { background: var(--ink-strong); }
details.dots.pick > summary.level { padding: 4px 8px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 12px; }
details.dots.pick > summary.level:hover { border-color: var(--line); background: var(--panel); color: var(--ink); }
/* the level they asked for, and the one somebody is on: marked, so the menu opens on the question
   that was actually put (ADR 0021 §8) */
details.dots.pick > .pop button i { margin-left: auto; padding: 1px 6px; border-radius: 999px;
  background: var(--amber-soft); color: var(--amber-ink); box-shadow: inset 0 0 0 1px var(--amber-line);
  font-size: 11px; font-style: normal; font-weight: 600; }
@media (pointer: coarse) { details.dots.pick > summary, #waiting button { min-height: 36px; } }

/* The board's panel wrote every heading in uppercase and the Space's in Title Case (02 rec 12).
   One order, one style: `People · Links · Programs · Pictures` as `<h3>`, and the sub-headings the
   panel puts under them — "Only on this board", "Link", "Work with an agent" — as plain `<h4>`. */
.panel.share h4 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }

/* --- one panel, one type (ADR 0022 decision 2, verify-2 BLOCKER 1) ------------------------------

   The markup of the two panels is one thing and the type was two: this file never claimed the body
   size, the headings' margin or their layout, so each host answered for itself — a Space from
   `page.css` (15 px, `h3 { margin: 24px 0 4px }`) and a board from the board page's own `.panel`
   rule (13 px, `h3 { margin: 0 0 8px; justify-content: space-between }`). Side by side they did
   not read as one panel: Programs and Pictures sat hard against the block above them on a board,
   and Links and its Make-a-link button were thrown to opposite ends of it.

   The Space's values win, because they are the page's own and the panel is a reading surface, not
   a toolbar. The class is doubled (`.links-panel.share-panel`, 0-2-0) to out-weigh the board
   page's `.panel` rules, which are served after this file and would otherwise win on order. The
   board page's layout.css is not this file's to change. */
/* The leading with it: a board's page sets none, so its panel ran at the browser's `normal` while
   a Space's ran at page.css's 1.5 — the same text a line tighter on one of the two hosts, and the
   one field in the panel that is in no form (a program's rename box) 38 px here and 42 px there.
   The Space's value, so a Space does not move. */
.panel.share, dialog.share { font-size: 15px; line-height: 1.5; }
/* and the paragraphs with it. Leading is not inherited past a rule that names the element, and
   layout.css names it — `.panel p { line-height: 1.45 }` — so the panel's own sentences stayed a
   line tighter on a board while everything around them had moved. That file belongs to another
   session, so this out-weighs it from here (0-3-1 against 0-1-1) and reaches both hosts. It is now
   the only place the panel's leading is written: the three rules that said 1.45 — the note, the
   list that did not add up, the key that changed — all lost to it and have been taken out. The
   two that stay are the small print, 12 px lines that are meant to be tighter than the body. */
.panel.share :is(p.who, p.note), dialog.share :is(p.who, p.note) { line-height: 1.5; }
/* A `<dialog>` with no colour of its own takes the browser's `CanvasText`, which is pure black,
   so a Space's panel was a shade darker than a board's everywhere text is not given a colour of
   its own — and every field in it that reads `color: inherit` came out black there and ink here.
   The value is this file's own: `dialog.check-sheet` and `dialog.sheet.sure` both already say it,
   for the same reason. */
dialog.share { color: var(--ink); }
.panel.share p.note, dialog.share p.note { font-size: 13px; }
/* the controls read with the text they sit in, rather than two sizes down from it */
.panel.share :is(button, a.btn), dialog.share :is(button, a.btn) { font-size: 13px; }
.panel.share > h2 .close, dialog.share > .close { font-size: 16px; }
.links-panel.share-panel h3, dialog.share h3 { margin: 24px 0 4px; font-size: 15px;
  font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 12px;
  justify-content: normal; }
.links-panel.share-panel h3:first-child, dialog.share h3:first-child { margin-top: 0; }
/* the panel's own name, one level above its four sections: it keeps the board title bar's shape,
   with the close × pushed to the far end (verify-2 NOTE 1) */
.panel.share > h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; }

/* One person chip, everywhere: the colour swatch and the two words (02 rec 13). The avatar disc
   with an initial in it went with the Hologram rows. */
.share-panel .person { white-space: nowrap; }
.share-panel .person i { display: inline-block; width: 9px; height: 9px; margin-right: 4px;
  border-radius: 50%; vertical-align: 0; }
.share-panel .person i.asked { background: none !important; box-shadow: inset 0 0 0 2px currentColor; opacity: 0.75; }

/* The Space's own row on a board that is a page of it: broadest first, and a row rather than a
   sentence, because the thing to do about it belongs where the fact is (06 rec 1, 02 rec 3). */
.share-panel #in-space li.space-row, dialog.share #in-space li.space-row { align-items: center; }
.share-panel #in-space, dialog.share #in-space { margin-bottom: 4px; }
.share-panel li.space-row .btn, dialog.share li.space-row .btn { flex: none; white-space: nowrap; }

/* The board's own address, while it still opens it (02 rec 11): one row under Links, the switch
   beside it, and the access line's fourth slot saying the same fact in the header. */
.share-panel #own-link li { border-top: 1px solid var(--line); }

/* Somebody waiting, and the keys a thing owes: the same amber row on both, because they ask the
   same of you (ADR 0021 §8). The board's copy of these lived in layout.ex with the rows it drew. */
.share-panel :is(#waiting, #owed) li { padding: 8px; border-top: 0; border-radius: 8px;
  background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber-line); }
.share-panel :is(#waiting, #owed) li + li { margin-top: 6px; }
.share-panel #owed small { display: block; margin-top: 4px; color: var(--amber-ink); line-height: 1.45; }
.share-panel p.note.made { margin: 6px 0; color: var(--green-ink); }

/* The foot: what a run of new keys does, beside the one control that does it. */
.share-panel .foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 14px 0 6px; }
.share-panel .foot .note { flex: 1 1 12em; min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* A waiting row carries three controls — Check it's really them… · Let in as ▾ · Decline — and they
   need about 350 px. A board's Share panel is 400 px at EVERY width above a phone's, so `.grow`
   was left 4.5 px and the name it holds came out one letter to a line (verify-3 BLOCKER 4). The
   name takes its own line here and the three controls keep theirs, which is what the phone rule
   below has always done. A Space's dialog is 640 px and its own rows are not this row. */
.share-panel #waiting li .grow { flex-basis: 100%; }

/* A settled row is usually not that row: its controls are the level word and one button, and they
   fit beside the name in the 400 px the panel is at every width above a phone. A phone's panel is
   about the same width, so the `@media (max-width: 480px)` rule that broke the name off onto its
   own line there was splitting a row that had room — the name on one line, then "admin  Leave"
   adrift under it, which reads as two rows rather than one (ADR 0023 report 13, finding 12).

   But one settled row does carry three: your own reading row, which holds the level word, **Ask
   to write** and **Leave**. That one left the name about 150 px and drew "Tom · olive osprey
   (you)" a word to a line — at 1280 as well as at 390, so a width rule was never the answer to it.

   A floor rather than a switch, and the browser decides: the name asks for 12em, keeps its place
   beside the controls wherever that fits, and takes the whole width where it does not. Two
   controls fit at both widths; three do not at either, and that row reads as the waiting row
   above already does. `min-width: 0` stays, so a long name wraps inside its own column rather
   than pushing the controls off. */
.share-panel #members li .grow { flex-basis: 12em; }
/* and the one row that carries three takes the waiting row's shape outright, so the three move
   together rather than one of them trailing onto a line of its own */
.share-panel #members li:has(button.ask-up) .grow { flex-basis: 100%; }

/* At a phone's width the two panels were two different treatments (02 §Mobile): a Space's Share
   is a sheet filling the screen and a board's was a 400 px card floating over the canvas with the
   tools showing round it. One panel, so one sheet — from under the board's own bar, which keeps
   Share and the way out where they were, to the foot of the page. */
@media (max-width: 600px) {
  .panel.share { top: 52px; right: 0; left: 0; width: auto; max-width: none;
    max-height: calc(100% - 52px); border-radius: 14px 14px 0 0; }
}

/* ---------------------------------------------------------------------------------------------
   THE ONE TAKE-BACK SHEET (ADR 0022 §C7)

   Dressed whole here, and not as one of the app's `.sheet`s, for the reason `dialog.check-sheet`
   above gives: a board's page loads this stylesheet and neither page.css nor space.css, and the
   whole claim of §C7 is that this is the same sheet wherever it is opened from — a board's panel,
   a Space's, the note pane, /me. Two looks for one question is the thing this ADR is about.
   Its look is the kit's sheet (ui.css); what is here is its shape. */
dialog.sheet.sure { width: min(440px, 92vw); height: fit-content; max-height: 84dvh; margin: auto; overflow: auto; }
/* one clause to a paragraph, and the one thing to do about it first, in its own box */
dialog.sheet.sure p { margin: 0 0 10px; }
dialog.sheet.sure p.nudge { padding: 10px 12px; border-radius: 8px; background: var(--amber-soft);
  box-shadow: inset 0 0 0 1px var(--amber-line); color: var(--amber-ink); }
/* The two ways out stick to the foot of the sheet. A sheet with several clauses runs past the
   height a phone gives it, and an answer you have to scroll to find is an answer people miss. */
dialog.sheet.sure .row { position: sticky; bottom: -24px; display: flex; gap: 8px; flex-wrap: wrap;
  margin: 16px -28px -24px; padding: 16px 28px; background: var(--bg);
  box-shadow: inset 0 1px 0 var(--line); }
/* The two answers are the kit's buttons (13 px, 500, 32 px tall), in both sheets. The verb is red
   for a removal and a revoke, and the kit's primary for a lowering, a seal and the rest (§C7): what
   it is is said by the colour as well as by the words. */
/* A sheet over the panel stays a sheet on a phone: the panel behind it goes full-screen there,
   and a question that fills the screen reads as a new page rather than as an armed step. */
@media (max-width: 799px) {
  dialog.sheet.sure { max-height: 80dvh; padding: 20px; }
  /* the gutters are narrower here, so the sticky row's own bleed is too */
  dialog.sheet.sure .row { bottom: -20px; margin: 16px -20px -20px; padding: 16px 20px; }
}