/* behaviours.css — the behaviour blocks (B1–B14), drawn: blocks/behaviours.js's rules alone.
   Tokens only (tokens.css). The touch size and the find box's width are settings, set by
   behaviours.js as --b-touch and --b-find-w on the root, with token fallbacks.
   A behaviour draws only what is its own (a box and its words, a note, a fold); its buttons,
   lines, dialogs and lists are the K blocks (controls.css).
   Linked on blocks.html only (scripts/lib/style-files.js).
   Who may write it: any worker, under P3. */

.b-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 100%; }

/* B3 Save and close, B4 Cancel: the open row, Cancel and Done at the right on every device, Remove (B1) at the left, apart */
.b-row { display: flex; flex-direction: column; gap: var(--space-3); box-sizing: border-box; max-width: 100%; }
.b-row:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.b-bar { justify-content: flex-end; }
.b-summary { overflow-wrap: anywhere; }
.b-summary[hidden], .b-row > .k-text[hidden], .b-bar[hidden] { display: none; }
.b-bar .b-bar-remove { margin-right: auto; }
/* #625 fix 8 (2): Cancel and Done one pair (behaviours.js fitActs): when the pair fits but not beside the hint, the hint
   takes the line above; when the pair does not fit (data-acts "stack") the wrap stacks them, each at the right, Done last. */
.b-bar .b-bar-break { flex: 1 0 100%; }
/* #594 round 19 (the owner's 13A): B3's status(el) — B2's "Saved · Undo" takes the hint's place while it holds words;
   the hint ("No changes") stands aside, and comes back when B2's time runs out (it empties). */
.b-bar-hint:has(+ .b-bar-status:not(:empty)) { display: none; }
.b-bar-status:empty { display: none; }

/* B4's form host (#616): a stack with the stack gap, to what opened it and between the form's boxes */
.b-cancel-form { display: flex; flex-direction: column; gap: var(--space-3); align-self: stretch; }
.b-cancel-form:not(:first-child) { margin-top: var(--space-3); }
.b-cancel-form[hidden] { display: none; }
.b-cancel-fields { display: flex; flex-direction: column; gap: var(--space-3); }
.b-flow { display: flex; flex-direction: column; align-items: flex-start; }

/* B1 Ask first, B8 Offline, B9 Not allowed: the reason beside the grey thing */
.b-ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.b-reason { color: var(--color-text-muted); overflow-wrap: anywhere; }
.b-rownote { margin-left: var(--space-2); color: var(--cell-changed-text); font-weight: var(--weight-medium); }
.b-offrow { margin: var(--space-2) 0; }
/* In a stack the stack's one gap sits between its items (#679): no margin of its own on top of it. */
.b-stack > .b-offrow { margin: 0; }
.b-stack > .b-off-on { margin-bottom: 0; }
/* B8's line (#581, S15 D3): a gap to what follows; the head bold, the page's sentence not; amber is K8's, after offlineAmberHours */
.b-off-on { margin-bottom: var(--space-3); }
.b-off-line { margin: 0; color: var(--color-text); }
/* #649 (b): past offlineAmberHours the line is amber where it stands: a ring outside the box, so nothing moves. */
.b-off-amber { background: var(--banner-bg); box-shadow: 0 0 0 var(--space-1) var(--banner-bg), 0 0 0 calc(var(--space-1) + 1px) var(--banner-edge); border-radius: var(--radius-control); }
.b-off-head { font-weight: var(--weight-semibold); }
/* #810 round 16 (@offline-sep): the head and the page's sentence each wrap whole, parted by " · ". */
.b-off-head, .b-off-said { display: inline-block; max-width: 100%; vertical-align: top; }
.b-allow > .b-reason { margin: 0; }
.b-allow { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 100%; }
.b-plain-field { display: flex; flex-direction: column; gap: var(--space-1); }
.b-label { color: var(--color-text-muted); }
.b-plain { color: var(--color-text); overflow-wrap: anywhere; }

/* B2 Undo on the row */
/* #604 fix 3 (item 12): B2's gap each side of "·", never spaces in the text. */
.b-undo { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); max-width: 100%; }
.b-undo-text { overflow-wrap: anywhere; }
.b-undo-refused { color: var(--color-danger); font-weight: var(--weight-medium); }
.b-undo .k-link { text-decoration: underline; }
/* #604 fix 4: Undo's words start at B2's gap, as "·" does after "Saved": K2's own side padding would add its 8 px to
   the gap after "·" only. Its height stays K2's, and on touch its 44 px width (controls.css) from the words' start. */
.b-undo > .k-link { padding-inline: 0; }

/* B7 Wait: the line under the button */
.b-wait { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.b-wait-line { margin: 0; color: var(--color-text-muted); }
.b-wait-line:empty { display: none; }
/* #670 (e): B7's how-long line, under the working button while it waits. */
.b-wait-how { margin: 0; color: var(--color-text-muted); }
.b-wait-how[hidden] { display: none; }
/* #806 S4-43: B7's skeleton cards under a loading line (the S4 rendering's loading state): a card's edge and three grey bars, 60, 90 and 75 % wide. */
.b-wait > .b-wait-skel { align-self: stretch; padding: var(--space-3); border: var(--hairline) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); }
.b-wait-skel-title { display: block; font-weight: 600; color: var(--color-text); }
.b-wait-bar { display: block; height: 1em; margin: var(--space-2) 0; border-radius: var(--radius-xs); background: var(--color-border); }
.b-wait-bar:nth-child(1) { width: 60%; }
.b-wait-bar:nth-child(2) { width: 90%; }
.b-wait-bar:nth-child(3) { width: 75%; }
/* #905 S20-29 `titleBand`: the title is K11's title band, flush across the card's top, over four 14 px bars. */
.b-wait > .b-wait-skel-band { padding: 0 0 var(--space-2); overflow: hidden; border-radius: var(--radius-md); }
.b-wait-skel-band > .b-wait-skel-title {
  box-sizing: border-box; display: flex; align-items: center; min-height: 32px; padding: 0 var(--space-3);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-text-muted); background: var(--color-surface-sunken);
}
.b-wait-skel-band > .b-wait-bar { height: 14px; margin: var(--space-2) var(--space-3) 0; }
.b-wait-skel-band > .b-wait-bar:nth-child(2) { width: 60%; }
.b-wait-skel-band > .b-wait-bar:nth-child(3) { width: 90%; }
.b-wait-skel-band > .b-wait-bar:nth-child(4) { width: 75%; }
.b-wait-skel-band > .b-wait-bar:nth-child(5) { width: 60%; }
/* B5's form host (#597 fix 9): the whole form's refusal, under its way in, in a box refusal's red and weight. */
.b-refuse-form { margin: 0; color: var(--color-danger); font-weight: var(--weight-medium); }
.b-refuse-form[hidden] { display: none; }

/* B10 Nothing stored until Done: the new row sits first in its list */
.b-new, .b-new-list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 100%; }
.b-new-list:empty { display: none; }

/* B11 Find as you type: the list opens under the box */
.b-find { position: relative; width: min(var(--b-find-w, 200px), 100%); }
.b-find-none { margin-top: var(--space-1); color: var(--color-text-muted); overflow-wrap: anywhere; }
.b-find-none[hidden] { display: none; }
.b-find-links { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.b-findstage { min-height: 11rem; }

/* B13 Age: the words, then the exact time; amber comes with a word */
.b-age { display: inline-flex; flex-wrap: wrap; align-items: center; max-width: 100%; color: var(--color-text); }
.b-age-over .b-age-words, .b-age-over .b-age-btn, .b-age-late { color: var(--cell-changed-text); font-weight: var(--weight-semibold); }
.b-age-exact { color: var(--color-text-muted); }
.b-age-exact[hidden] { display: none; }
.b-age-btn {
  box-sizing: border-box; min-height: var(--control-h-sm); padding: 0 var(--space-2); font: inherit; color: inherit;
  background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); cursor: pointer;
}
.b-age-btn:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }

/* B14 Fold past things: the fold row is C7 (parts.css); what is here is the rows. */
.b-folds { display: flex; flex-direction: column; max-width: 100%; }
.b-frow { padding: var(--space-1) 0; overflow-wrap: anywhere; }
.b-past { display: flex; flex-direction: column; }

/* B24 Layer: where a layer opens is B24's (below its anchor, above, a sheet on a phone, over the page);
   what it holds draws its own surface. The left offset and any height cap are measured (behaviours.js). */
.b24 { position: absolute; top: 100%; left: 0; z-index: var(--layer-popover); box-sizing: border-box; max-width: 100vw; margin-top: var(--space-1); }
/* A layer's place is never moved by a transition (#598 D13, b): reduced motion gives every element a 0.01 ms transition (tokens.css), and
   a layer drawn into its class (top: 100% to the screen's right) was drawn, and measured by a list opened inside it, at its start. */
.b24, .b24 .b24-wrap { transition: none !important; }
.b24[hidden] { display: none; }
.b24-end { left: auto; right: 0; }
.b24-above { top: auto; bottom: 100%; margin: 0 0 var(--space-1); }
.b24-sheet { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; margin: 0; max-height: calc(100vh - var(--space-8)); overflow-y: auto; }
.b24-flow { position: static; max-width: 100%; }
.b24-over { position: static; max-width: 100%; max-height: 100%; margin: 0; overflow-y: auto; }
.b24-side { position: fixed; top: 0; bottom: 0; right: 0; left: auto; width: 400px; max-width: 100%; margin: 0; overflow-y: auto; }
.b24-backdrop {
  position: fixed; inset: 0; z-index: var(--layer-popover); display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); background: var(--dialog-backdrop);
}
/* The gallery draws layers open as pictures, a sheet inside its own frame (a transform makes it the sheet's screen). */
.b24-stage { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4) var(--space-8); max-width: 100%; }
.b24-pic { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 100%; }
/* A picture holds its open layer in the flow under the opener (#679): the box is as tall as what it shows, no band under the button. */
.b24-pic > .b24:not(.b24-sheet):not(.b24-over):not(.b24-side) { position: static; margin: 0; max-width: 100%; width: fit-content !important; }
.b24-frame { position: relative; width: 18rem; max-width: 100%; height: 16rem; overflow: hidden; transform: translateZ(0); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.b24-panel {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 20rem; padding: var(--space-3);
  color: var(--color-text); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.b24-sheet > .b24-panel { max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
/* panel 'sheet' (#620 round 3): the content on B24's panel, inside the page gutter; off a sheet the wrap is nothing. */
.b24-wrap { display: contents; }
.b24-sheet.b24-gutter { left: var(--page-gutter); right: var(--page-gutter); }
.b24-sheet > .b24-wrap.b24-panel { display: flex; align-items: stretch; border-bottom: 0; }
/* panel 'over' (#656 e): over the page the form sits on B24's panel — the raised surface, a dialog's padding and its
   max width (28rem, within the backdrop's padding); the page passes only its form. */
.b24-over > .b24-wrap.b24-panel { display: flex; align-items: stretch; width: 28rem; max-width: 100%; padding: var(--space-4); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
/* place 'side' (#598 round D): the form on B24's panel, flush with the screen's right edge and as tall as the screen. */
.b24-side > .b24-wrap.b24-panel { display: flex; align-items: stretch; box-sizing: border-box; width: 100%; min-height: 100%; max-width: none; padding: var(--space-4); border-width: 0 0 0 1px; border-radius: 0; box-shadow: var(--shadow-lg); }
/* A refusal's red keeps 7:1 on the raised surface (dark: --color-danger is 6.6:1 on it; its hover shade is 7.7:1). */
.b24-wrap.b24-panel { --color-danger: var(--color-danger-hover); }
.b24-text { margin: 0; overflow-wrap: break-word; }
.b24-users { margin-top: var(--space-4); color: var(--color-text); }
.b24-users-h { margin: 0; font-weight: var(--weight-semibold); }
.b24-users ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }

/* B25 New version (#575): today's line, kept — at the foot, at the left, on the raised ground; it takes no row. */
.b-version {
  position: fixed; left: calc(var(--space-4) + env(safe-area-inset-left, 0px)); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--layer-popover); box-sizing: border-box; max-width: calc(100% - 2 * var(--space-4));
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  color: var(--color-text); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); font-size: var(--text-sm); line-height: var(--leading-snug);
}
.b-version[hidden] { display: none; }
/* The gallery's picture of a page's foot: the line is fixed to the frame as to a screen. */
.b25-frame { position: relative; display: flex; flex-direction: column; transform: translateZ(0); height: 9rem; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-border); }
.b25-page { flex: 1; margin: 0; padding: var(--space-2); color: var(--color-text); }
.b25-dark { position: absolute; left: var(--space-2); bottom: var(--space-2); }

/* On touch every control is --b-touch (B25). */
@media (pointer: coarse) {
  .b-age-btn { min-height: var(--b-touch, var(--tap-target)); min-width: var(--b-touch, var(--tap-target)); }
}
/* #604: B1 asked in place: the question under its box, then Back | the action.
   #613 fix 2, B1's one layout rule (#604 round 1 item 9 takes it too): the buttons follow the sentence, on its
   line where they fit, else under it, left-aligned with it; the row's own gap follows. */
.b-place { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-2) var(--space-3); min-width: 0; }
.b-place-q { flex: 0 1 auto; min-width: 0; margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.b-place-detail { flex: 1 0 100%; min-width: 0; }
.b-place-bar { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); max-width: 100%; }