/* round3.css — the round-three blocks (B15–B19, C26–C32, C36), drawn: blocks/round3.js's rules alone.
   Tokens only (tokens.css). The meter's height and width are settings, set by round3.js as
   --r-meter-h and --r-meter-w on the root. Every button, link, box, tag and dialog is a K block
   or C15 (controls.css, parts.css); what is here is only what those do not draw.
   Linked on blocks.html only (scripts/lib/style-files.js).
   Who may write it: any worker, under P10. */

.r-changed [hidden], .r-figure [hidden], .r-needs [hidden] { display: none; }
.r-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 100%; }
.r-row-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4); max-width: 100%; }

/* B15 Changed underneath: the newer text above the box, the typing untouched */
.r-changed { display: flex; flex-direction: column; gap: var(--space-3); box-sizing: border-box; width: 100%; max-width: 32rem; }
/* #805 round 6: Clear apart at the left of the bar, B3's hint after it, the saving buttons at the right. */
.r-changed-left { flex: 1 1 0; min-width: min-content; display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-3); }
/* #805 round 9 @clear-place: the 11rem of room only while the hint stands in the bar (hintPlace); with Clear alone the
   least room is Clear's, so Clear, Cancel and Save keep one row in a 330 px bar (390, the card under its row). */
.r-changed-left:has(> .r-hint-bar) { min-width: min(100%, 11rem); }
.r-changed-left > .r-hint-bar { flex: 1 1 auto; margin-left: auto; text-align: right; white-space: nowrap; }
.r-changed-above { display: flex; flex-direction: column; gap: var(--space-2); }
.r-changed-above:empty { display: none; }
.r-changed-by, .r-changed-undo { margin: 0; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
/* #911 (a), S8-38: the conflict line and the quoted newer text are in the changed tint (S8's conflict box), the quote's own box
   without its grey ground; its Copy button stands inside the tint. Never the K12 sunken grey. */
.r-changed-above:not(:empty) { box-sizing: border-box; padding: var(--space-2) var(--space-3); color: var(--color-changed-text); background: var(--color-changed-bg); border: 1px solid var(--color-changed-edge); border-radius: var(--radius-control); }
.r-changed-above .r-changed-by { font-weight: var(--weight-semibold); }
.r-changed-above .k-sunken { max-width: 100%; color: inherit; background: transparent; border-color: var(--color-changed-edge); }

/* B16 Sent, or waiting: the row's own word */
.r-sent { display: inline-flex; flex-wrap: wrap; align-items: center; max-width: 100%; }
.r-sent-text { overflow-wrap: anywhere; }
.r-sent-wait { color: var(--cell-changed-text); font-weight: var(--weight-medium); }

/* B17 Scroll to it and ring it: an outline, never a tint, so it reads the same at night */
.r-ring { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 100%; }
.r-ring:empty { display: none; }
.r-ring-gone { color: var(--color-text); overflow-wrap: anywhere; }
.r-ring-target { box-sizing: border-box; max-width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.r-ringed { outline: calc(var(--focus-ring-width) + 1px) solid var(--color-text); outline-offset: var(--focus-ring-offset); }

/* B18 Go to */
.r-goto { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 100%; }
.r-goto-arrival { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* B19 Needs the server: the grey button with its reason beside it */
.r-needs { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 100%; }
.r-needs-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 100%; }
.r-readable { margin: 0; overflow-wrap: anywhere; }

/* C26 Attached file: a line each, the button and its refusal beneath */
.r-files { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 100%; }
.r-file-list { display: flex; flex-direction: column; gap: var(--space-1); max-width: 100%; }
.r-file-list:empty { display: none; }
.r-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); max-width: 100%; }
.r-file-name { min-width: 0; overflow-wrap: anywhere; font-weight: var(--weight-medium); }
.r-file-size { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.r-file-by { color: var(--color-text-muted); overflow-wrap: anywhere; }
/* #598 D2 (S18 item 15): C26 photos - a 56 px thumbnail, its own colours, a 1 px edge; the photos side by side. */
.r-photos .r-file-list { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
.r-photo { gap: var(--space-1); }
.r-photo-open { display: block; line-height: 0; border-radius: var(--radius-sm); }
.r-photo-img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.r-file-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 100%; }
.r-file-bar:empty { display: none; }
.r-file-count { color: var(--color-text-muted); }
.r-file-hint { color: var(--color-text-muted); font-size: var(--text-sm); }
.r-file-msg { overflow-wrap: anywhere; }

/* C27 Travel document: a line that opens in place */
.r-doc { display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; width: 100%; max-width: 40rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); }
.r-doc-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.r-doc-sum { min-width: 0; overflow-wrap: anywhere; }
.r-doc-body { display: flex; flex-direction: column; gap: var(--space-3); }
.r-doc-body:empty { display: none; }
/* #625: a column is never wider than the card holding it (200 % text on a phone): min() caps the field's measure at 100 %. */
.r-doc-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--measure-field), 100%), 1fr)); gap: var(--space-3); }
.r-doc-bar .r-doc-remove { margin-right: auto; }
.r-doc-bar { justify-content: flex-end; }
.r-doc-wait { display: flex; flex-direction: column; gap: var(--space-1); }
.r-doc-wait p { margin: 0; overflow-wrap: anywhere; }
.r-doc-wait-by { font-weight: var(--weight-medium); }
.r-doc-add { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* #886 (c): the in-form form (a C6 part's content): the documents one under another, Remove at the right of each
   heading beside the flag words, the adder at the part's foot. */
.r-docs-in { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.r-docs-in-list { display: flex; flex-direction: column; gap: var(--space-3); }
.r-docs-in-list:empty { display: none; }
.r-doc-in { max-width: none; margin: 0; }
.r-doc-in-lead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); flex: 1 1 10em; min-width: 0; }
.r-doc-in .r-doc-in-remove { flex: none; margin-left: auto; }
/* On a phone the document frame gives its side padding and edge to the boxes (the date boxes whole at 200 %). */
.k-phone .r-doc-in { padding-left: 0; padding-right: 0; border: 0; border-radius: 0; }

/* C28 Meter: a light track with an edge, one dark fill; past the limit the danger colour and ▲ */
.r-meter-list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 100%; }
.r-meter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); max-width: 100%; }
.r-meter-track { position: relative; flex: none; box-sizing: border-box; width: var(--r-meter-w, var(--space-12)); max-width: 100%; height: var(--r-meter-h, var(--space-1)); background: var(--color-border); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); overflow: hidden; }
.r-meter-fill { position: absolute; top: 0; bottom: 0; left: var(--r-from, 0%); right: calc(100% - var(--r-to, 0%)); background: var(--color-text); }
.r-meter-over { background: var(--color-danger); }
.r-meter-part { box-shadow: inset 1px 0 0 var(--color-surface-sunken); }
.r-meter-part:nth-child(even) { background: var(--color-text-muted); }
.r-meter-tick { position: absolute; top: 0; bottom: 0; left: var(--r-at, 50%); width: 1px; background: var(--color-text); }
.r-meter-centre { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--color-border-strong); }
.r-meter-words { min-width: 0; overflow-wrap: anywhere; }
/* A share's name and value are one piece: "5 others 37%" never splits (#600 round 2 item 3); the pieces wrap as
   wholes and the " · " before a piece that starts a line falls in the clipped margin, so no line starts or ends
   with a dot. */
.r-meter-pieces { overflow: hidden; }
.r-meter-flow { display: flex; flex-wrap: wrap; margin-left: -1em; }
.r-meter-piece { position: relative; margin-left: 1em; white-space: nowrap; }
.r-meter-sep { position: absolute; right: 100%; width: 1em; text-align: center; }
/* C28's header bar (#600 round 2 item 4): 8 px, the light track and its edge, dark parts in turn with 2 px gaps. */
.r-meter-header .r-meter-track { height: 8px; background: var(--color-surface-sunken); }
.r-meter-header .r-meter-fill { background: var(--color-text); }
.r-meter-header .r-meter-over { background: var(--color-danger); }
.r-meter-header .r-meter-part { box-shadow: none; }
.r-meter-header .r-meter-part + .r-meter-part { border-left: 2px solid var(--color-surface-sunken); }
.r-meter-header .r-meter-part:nth-child(3n+2) { background: var(--color-text-muted); }
.r-meter-header .r-meter-part:nth-child(3n) { background: var(--color-border); }
.r-meter-past .r-meter-words { color: var(--color-danger); font-weight: var(--weight-medium); }
.r-meter-sign { font-weight: var(--weight-semibold); }

/* C29 Steps toward a time: a dot a step in run order; dashed is not run */
.r-steps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-5); margin: 0; padding: 0; list-style: none; max-width: 100%; }
.r-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 var(--space-2); max-width: 100%; }
.r-step > .r-dot { grid-row: 1 / span 3; }
.r-step-label { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.r-step-state { color: var(--color-text-muted); }
.r-dot {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: none;
  width: var(--k-btn-h, var(--control-h-sm)); height: var(--k-btn-h, var(--control-h-sm)); padding: 0; font: inherit; font-weight: var(--weight-semibold);
  color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-border-strong); border-radius: var(--radius-full);
}
button.r-dot { cursor: pointer; }
button.r-dot:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.r-dot-red { background: var(--color-danger-surface); border-color: var(--color-danger-border-strong); }
.r-dot-yellow { background: var(--banner-bg); border-color: var(--banner-edge); }
.r-dot-clear { background: var(--color-success-surface); border-color: var(--color-success); }
.r-dot-dashed { border-style: dashed; color: var(--color-text-muted); }
/* under (#809, S5-12, S5-32): one row of equal columns, a dot over its name and age, all centred; the names wrap between their
   words. The state's words are for a screen reader only: the sign in the dot carries it (round 7, S5-12). */
.r-steps-under { display: flex; flex-wrap: wrap; gap: var(--space-3) 0; }
.r-steps-under .r-step { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: min-content; gap: var(--space-1) 0; text-align: center; overflow-wrap: break-word; }
.r-steps-under .r-step > .r-dot { grid-row: auto; }
.r-steps-under .r-step-text { display: contents; }
.r-steps-under .r-step-label { overflow-wrap: break-word; }
.r-steps-under .r-step-state {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* clearWord (#809, S5-14): a clear step's word is text, in one line with its age ("clear · 3 d"); @age-column: in a column too narrow
   for both, the age goes under the word within the column (the columns stay equal) and the "·" is not drawn. */
.r-steps-under .r-step-when { display: block; color: var(--color-text-muted); }
.r-steps-under .r-step-when .r-step-age { white-space: nowrap; }
.r-step-join-off { visibility: hidden; }
.r-steps-under .r-step-when .r-step-state-shown { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; }
/* The age alone under a dot, as the rendering draws it ("10 min ago"); the exact time and its joiner stay out of a column that narrow. */
.r-steps-under .b-age-exact { display: none; }
/* S5-32, the column form (the rendering's .b-strip.col, mockups/S5/index.html:300-301): where five columns cannot hold the
   longest name whole, one step a row of at least 44 px: the dot, then the name, then the age, left-aligned; the age wraps
   whole under the name. */
.r-steps-under.r-steps-col { flex-direction: column; flex-wrap: nowrap; gap: .2em 0; }
.r-steps-under.r-steps-col .r-step { flex: none; flex-direction: row; align-items: center; min-width: 0; min-height: var(--k-touch, var(--tap-target)); gap: 0 .6em; text-align: left; }
.r-steps-under.r-steps-col .r-step-text { display: flex; flex: 1 1 0; flex-wrap: wrap; align-items: baseline; gap: 0 .6em; min-width: 0; }
/* #809 round 9 (S5-32): the age at the row's right end, on the name's line (the rendering's `i { margin-left: auto }`); where
   the name and the age do not fit one line (the longest name at 200 % text) the age wraps whole under it, still at the right end. */
.r-steps-under.r-steps-col .r-step-text > :not(.r-step-label):not(.r-step-state):not(:empty) { flex: none; margin-left: auto; }
@media (pointer: coarse) { .r-dot { width: var(--k-touch, var(--tap-target)); height: var(--k-touch, var(--tap-target)); } }

/* C30 Number with its reason */
.r-figure { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 100%; }
.r-figure-plain { font-weight: var(--weight-semibold); }
.r-figure-sign { margin-left: var(--space-2); }
.r-figure-body { display: flex; flex-direction: column; gap: var(--space-2); max-width: 36rem; }
.r-figure-sum { margin: 0; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.r-figure-parts { margin: 0; padding-left: var(--space-5); overflow-wrap: anywhere; }
/* A part's link takes the line's height, so a part with a link is spaced like a plain one (#600 round 2 item 3); on
   touch its target is 44 px all the same, a hit area round it (::after, the template's way). */
.r-figure-go .k-link { position: relative; min-height: 0; padding: 0; }
@media (pointer: coarse) {
  .r-figure-go .k-link::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, var(--k-touch, var(--tap-target))); height: var(--k-touch, var(--tap-target));
    transform: translate(-50%, -50%);
  }
}

/* C30's Trend columns (#615 round 1 item 1, S7 A13): a bar over its letter inside the column's button, the bars on
   one scale in a well of one height, so the letters' line is the bars' base line. Past solid, this month dark, to come
   hollow ("rostered so far"); a zero is a hollow stub. */
/* #626 d (S7-615 round 2): the well is the room above the letter line inside the 44 px target (about 24 px at 16 px
   text), not a fixed 1.2 em: the column is the target's whole height (a bar column's button is 44 px on every
   pointer, no padding of its own above or below), the letter at its foot, the well the rest; the 3 px least stays. */
/* #634, #629 (a): the column and its label are C5's figure (.bt-fig-col over .bt-fig-in), 44 px on every pointer with no
   block padding: C5's form (built.css), never a rule here. */
/* #634: the well keeps at least the room it has at normal text (half the touch target), so at 200 % text, where the
   label grows, the bars still compare on a scale and the column grows instead. */
.r-bar-well { display: flex; align-items: flex-end; justify-content: center; width: 0.6em; min-width: 6px; flex: 1 1 0; min-height: calc(var(--k-touch, var(--tap-target)) / 2); }
.r-bar { display: block; box-sizing: border-box; width: 100%; min-height: 3px; border-radius: 1px; }
.r-bar-past { background: var(--color-text-subtle); }
.r-bar-now { background: var(--color-text); }
.r-bar-next, .r-bar-zero { background: transparent; border: 1px solid var(--color-text-subtle); }
.r-bar-now.r-bar-zero { border-color: var(--color-text); }
.r-bar-zero { height: 3px; }

/* C31 Action with its result: the result beside the button, under it on a phone */
.r-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); max-width: 100%; }
.r-action-result { min-width: 0; overflow-wrap: anywhere; }
.r-action-result:empty { display: none; }
/* #670 (f): againWord, the same action at the end of the result line, 44 px at every pointer. */
.r-action-result > .r-action-again { min-height: var(--tap-target); vertical-align: middle; }

/* C32 Passkey list: a line each */
.r-passkeys { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 100%; }
.r-passkey { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); max-width: 100%; }
.r-passkey-device { min-width: 0; overflow-wrap: anywhere; font-weight: var(--weight-medium); }
.r-passkey-when { color: var(--color-text-muted); }
.r-passkey-tip { margin: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--color-text-muted); }
.r-passkey-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.r-passkey-note:empty { display: none; }
.r-passkey-dismissed { margin: 0; }

/* C36 Reminder box: the accent wash, a 1 px edge and a 4 px left rule in the accent border; several stack */
.r-remind { display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; width: 100%; min-width: 0; }
.r-remind-box {
  box-sizing: border-box; width: 100%; min-width: 0; padding: var(--space-2) var(--space-3); text-align: left;
  color: var(--color-text); background: var(--color-accent-subtle); border: 1px solid var(--color-border-accent);
  border-left-width: 4px; border-radius: var(--radius-sm);
}
.r-remind-box p { margin: 0; overflow-wrap: anywhere; }
.r-remind-head { font-weight: var(--weight-bold); font-size: var(--text-sm); }
/* C36 onCard's gallery sample (#594 r17d): a card holding C16 and the stack, and a table row's cell across its columns. */
.r-card-sample { display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; width: min(100%, var(--measure-cell)); padding: var(--space-3);
  background: var(--color-surface); border: var(--hairline) solid var(--color-border); border-radius: var(--radius-card); }
.r-table-sample { width: min(100%, var(--measure-cell)); border-collapse: collapse; }
.r-table-sample td { padding: var(--space-2) var(--space-3); border-bottom: var(--hairline) solid var(--color-border); }