/* First production slices: register, multilingual form, dense report, Arabic reader. */ .ic-register, .ic-qreader, .ic-form-stack { display: grid; gap: var(--rw-field-stack); min-inline-size: 0; } .ic-register__bar, .ic-register__actions, .ic-session__actions, .ic-session__buttons, .ic-session__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rw-space-3); } /* The status reads as recessed, not just tinted: a well, with the recess's faint shade under its top edge. */ .ic-register__bar { padding: var(--rw-space-4); background: var(--rw-ground-2); border-radius: var(--rw-radius-panel); box-shadow: var(--rw-well-shade); } .ic-register__status { display: grid; gap: var(--rw-space-1); flex: 1 1 12rem; } .ic-register__meta, .ic-register__hint, .ic-report__note { font-size: var(--rw-text-small); color: var(--rw-ink-muted); } /* The same rounded band as the bar above it; a flat strip with one top rule read as unfinished. The commit bar joins the raised plane beside the roster sheet. It is not made sticky: focus not obscured comes first. */ .ic-register__actions { padding: var(--rw-space-4); border: 1px solid var(--rw-edge); border-radius: var(--rw-radius-panel); background: var(--rw-surface); box-shadow: var(--rw-shadow-rest); } /* The "not marked" bar is reserved on every row, so marking a learner no longer nudges the row 4px under the finger; the bar fades with the kit's row transition. Untouched rows keep the brass bar and the "Not marked" words as the non-colour cue. New rows are excluded so the reduced-motion brass flag in riwaq-components.css keeps winning. */ .ic-register .ic-record:not([data-record-state="untouched"]):not(.ic-record--new) { border-inline-start: var(--rw-space-1) solid transparent; } /* Forced colours draw a transparent border in CanvasText, which would give every settled row the bar that marks an unmarked one. Canvas keeps the space and hides the bar again. */ @media (forced-colors: active) { .ic-register .ic-record:not([data-record-state="untouched"]):not(.ic-record--new) { border-inline-start-color: Canvas; } } .ic-register__restoreband, .ic-session__confirm { display: grid; gap: var(--rw-space-3); padding: var(--rw-panel-inset); border: 1px solid var(--rw-control-border); border-radius: var(--rw-radius-panel); } /* The session's control and the print button share one quiet row; a step either of them opens (the two revealed buttons, or a confirmation) takes a line of its own beneath that row. */ .ic-session__actions > .ic-session__more, .ic-session__actions > .ic-session__confirm { flex-basis: 100%; } .ic-register__noprint { display: grid; gap: var(--rw-field-stack); } /* The conflict and the refused save are `Banner`s now (F10 §1's closed set), so `.ic-alert` owns their inset and their tone and these two carry only the stack's rhythm. Their own padding and `--rw-danger-bg` were removed with the hand-rolled bands rather than left to double up. */ .ic-register__conflictband, .ic-register__failband { display: grid; gap: var(--rw-space-3); } .ic-register__restoreband { background: var(--rw-info-bg); color: var(--rw-info-fg); } .ic-register__unsentchip { padding: var(--rw-space-1) var(--rw-space-2); background: var(--rw-warning-bg); color: var(--rw-warning-fg); border-radius: var(--rw-radius-control); font-weight: 700; } .ic-register__late, .ic-register__note, .ic-session__reason { display: grid; gap: var(--rw-label-gap); } /* A NUMBER OF MINUTES IS NOT A SENTENCE. The follow-up label is a grid so the caption sits above its field like every other one here — which stretched a three-character field to 880px at 1280 the moment this page started using the class. `justify-items: start` keeps the stack and gives the field back its own width; the excuse reason and the cancellation reason are prose and keep theirs. Seen in the frames, not in the numbers. */ .ic-register__late { justify-items: start; } .ic-register__late .ic-input--inline { min-inline-size: var(--rw-target-min); max-inline-size: 8rem; } .ic-session__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--rw-field-stack); } .ic-session__fields label { display: grid; gap: var(--rw-label-gap); } /* THE MARK STRIP IS A GRID, WHICH IS F8 §1's RECORDED DEPARTURE (B2 fix round, S-2). In the board's own words: "the kit's `.ic-choice__options` is a wrapping flex row, which for a four-value mark leaves one orphan on its own line at most widths. On the register the strip is a grid instead — four even columns where there is room, two by two where there is not, and never one option stranded." The page adopted the kit's wrapping flex — the markup the departure was recorded against — and at 320 the intrinsic label widths happened to land two by two, which is the right answer by accident: the columns are visibly uneven (Present 131px against Late 106px, each taking its own max-content basis before growing), and at the width where three fit and one does not the fourth press is alone on a line where no thumb is reaching. Danish and Arabic move that width. Scoped to `.ic-register` because it is the register's departure, not the kit's new default; every other `ChoiceGroup` keeps the wrapping row. The flex declarations on the strip and its presses go inert on a grid, and no target size or word changes. */ .ic-register .ic-rowchoice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rw-label-gap); } /* FOUR OR TWO, NEVER THREE — which is the departure's own promise and is NOT what the board's `repeat(auto-fit, minmax(8.5rem, 1fr))` gives. auto-fit takes as many 8.5rem columns as fit, so between roughly 420px and 550px of strip it takes THREE and leaves the fourth press alone on a line: the stranded option the departure exists to prevent, reproduced by the rule meant to prevent it. Two counts and one breakpoint state the promise instead, at the kit's own 40rem — the same block `.ic-rowchoice { flex-basis: 100% }` already lives in. Measured at 320, 768 and 1280 by `slice-b2-shots.mjs`, and the measure is proved against a three-column control. */ @media (max-width: 40rem) { .ic-register .ic-rowchoice { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ic-register__planned { color: var(--rw-ink-muted); } /* MARGIN ZERO AS WELL AS PADDING: a `