/* ======================================================================
   The Operator realm (SAAS-48, typeset in SAAS-52, renamed with the realm in SAAS-108).

   A sheet of its own rather than more rules in app.css, for the reason the realm is its own
   realm: this is the vendor-side screen where SQL is written, not part of the owner-facing
   portal. It sits *beside* app.css — both are linked on every page of both realms — and relies on
   it for the shared vocabulary: .lead, .muted, .stated, .scope, table.branches, and the whole
   .report-results block the preview renders through, so a preview looks exactly like the owner's
   report page, which is the point of previewing.

   ----------------------------------------------------------------------
   THE ONE RULE THIS FILE OBEYS

   Every colour here comes from a token declared in app.css. This file names no colour of its own:
   no hex, no rgb(), no named colour, and no grey derived from `currentColor` — which is how dark
   mode arrived undesigned the first time round, and how the report dropdowns once rendered white
   on white. So the ink cannot be changed in one realm and not the other, because there is nowhere
   in this file to change it from.

   That is enforced rather than promised: OperatorStylesheetTests reads both sheets and fails if this
   one declares a token, writes a colour literal, or references a `--token` app.css does not
   define. The last case is the quiet one — an invalid var() renders as *nothing*, so a typo would
   show up only to whoever next opened the screen.

   Before SAAS-52 the two sheets shared tokens by accident and decided everything else twice:
   two monospace stacks differing by a font, two answers for what an input's background is
   (`transparent` here, `var(--surface)` there), and two system colour keywords for a native
   dropdown's popup (`Canvas` here, `Field` there). All three are now app.css's answer.

   ----------------------------------------------------------------------
   WHAT MAKES THIS REALM LOOK DIFFERENT, AND WHY IT IS NOT A COLOUR

   An Operator must never be unsure which realm they are in, and the design system spends colour
   on exactly two things — the one primary action, and status. "Which realm is this" is neither, so
   a vendor accent would be a third use and would cost the freshness ladder and the stated failures
   the very trust they are painted for.

   The marker is therefore the code face. This is the realm whose subject *is* code: the qualifier
   in the wordmark is set in --mono, uppercase and letterspaced, so the words `Daclaria · OPERATOR`
   name the realm in the realm's own idiom. An Owner never sees it, because MainLayout only writes
   the `operator` class when the path says so, and every rule below is written under it.

   ⚠ THE MARKER USED TO BE TWO THINGS, AND THE SECOND ONE LEFT (SAAS-117). This sheet made the
   vendor header sticky, and argued for it in these words: the Owner realm's own marker was the
   sidebar, which was already always on screen, and this realm had no sidebar — so its header was
   the only thing left carrying the answer. The masthead is sticky in *both* realms now, from
   app.css, which means "the header stays put" no longer distinguishes anything and the code face is
   the whole of the marker. Nothing was lost: the words are still on screen at every scroll position
   of a 40-line SQL body, and now the Owner's wordmark is too.

   ⚑ AND BOTH REALMS HAVE A RAIL AGAIN (SAAS-162, ADR 0027) — including this one. It is app.css's,
   drawn from the same ShellNav for the same reason the masthead was: one shell shape, two realms.
   This sheet adds nothing to it. If a vendor-only rail rule ever seems necessary, that is the
   moment to check whether the two shells are still one thing.
   ====================================================================== */

/* --- The realm marker -------------------------------------------------- */

/* The code face, in the wordmark. Achromatic by construction — it borrows the header's own
   --on-brand through `inherit` and changes only shape. */
.site-header.operator .brand-qualifier {
    font-family: var(--mono);
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .14em;

    /* Full strength, unlike the Owner realm's quiet qualifier: there it would be decoration, and
       here it is the answer to "am I about to edit the corpus". */
    opacity: 1;
}

/* --- Control roles, shared by every Operator screen -------------------- */

/* The field label idiom app.css uses on the report form and both sign-ins: small, uppercase,
   letterspaced, muted. Stated once here for the whole realm rather than three times down the
   file, which is how this sheet previously carried it. */
.operator-signin label,
.operator-account label,
.operator-editor .field > label,
.operator-editor fieldset.preview-period legend,
.operator-editor fieldset.filter-variable legend,
.operator-editor .custom-range label,
.history-entry dl.prior dt,
.history-entry .prior-sql-label {
    display: block;
    font-size: var(--t-small);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin: 0 0 var(--s1);
}

/* Every text control in the realm.

   The selector is `input` rather than `input[type="text"]`, and that is a fix rather than a
   loosening: Blazor's InputText renders no `type` attribute at all unless the markup passes one,
   so `.operator-editor input[type="text"]` had matched neither the Name nor the Description field
   since SAAS-48 shipped — both were browser-default boxes sitting under styled labels. The
   sign-in escaped it only because its rule never named a type.

   Surface and border-strong, which is app.css's answer for the report form and the Owner sign-in.
   `transparent` was this file's own, and on a page whose panels are washes it left a field with
   no edge on one side. */
.operator-signin input,
.operator-account input,
.operator-editor input,
.operator-editor select,
.operator-editor textarea {
    font: inherit;
    box-sizing: border-box;
    width: 100%;
    padding: var(--s2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
}

/* The open dropdown is painted by the platform, not by us. app.css's note on the report form has
   the whole argument; the short version is that Field/FieldText follow `color-scheme` in both
   themes, and this file used to say Canvas/CanvasText, which is the *page's* pair rather than the
   *control's*. Two answers to one question, which is the thing SAAS-52 exists to end. */
.operator-editor select option {
    background: Field;
    color: FieldText;
}

/* A short string does not need a 60rem box. Narrowing the prose fields is what makes the SQL
   panel below read as the wide thing on the page — measure carries meaning here, and a name
   field as wide as a 40-line query says the two are the same kind of content. */
.operator-editor input,
.operator-editor select {
    max-width: 42rem;
}

/* Outlined, everywhere but the one primary action. Two filled buttons on a screen leave a reader
   no way to tell which one is the screen's verb. */
.operator-editor button,
.operator-actions .button {
    font: inherit;
    padding: var(--s2) var(--s4);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.operator-editor button:hover,
.operator-actions .button:hover {
    border-color: var(--ink);
}

/* The one filled control on a list screen: the trigger that opens its entry dialog (SAAS-121).
   Filled for the editor's Preview reason — a reader should be able to find the screen's verb
   without reading every control on it — and there is exactly one per screen, so the rule above
   still holds for everything beside it. The dialog's own buttons are app.css's `.action`, which
   the .form-dialog block dresses in the same tokens. */
.operator-actions .button.primary {
    font-weight: 600;
    border-color: transparent;
    background: var(--action);
    color: var(--on-action);
}

.operator-actions .button.primary:hover {
    border-color: transparent;
    background: var(--action-hover);
}

/* Preview is the editor's one action, and the guardrail's shape is the reason: ADR 0018 wants a
   draft tried before it is saved, so the filled button is the one that tries it and Save is the
   outlined one beside it. It also used `border-color: currentColor`, the exact idiom SAAS-49
   removed from this product. */
.operator-editor button.primary,
.operator-signin button,
.operator-account button {
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--action);
    color: var(--on-action);
    cursor: pointer;
}

.operator-editor button.primary:hover,
.operator-signin button:hover,
.operator-account button:hover {
    background: var(--action-hover);
    border-color: transparent;
}

.operator-signin button,
.operator-account button {
    font-family: inherit;
    font-size: inherit;
    padding: var(--s2) var(--s4);
}

.operator-actions {
    margin: 0 0 var(--s5);
}

/* --- The library ------------------------------------------------------- */

.operator-admin {
    max-width: 100%;
}

/* The dashboard's rule and the report result's, for the third time (SAAS-50, SAAS-51): the table
   scrolls inside its own box, never the page. A name, a scope pill with a Tenant beside it and a
   description have a min-content width no phone has. */
.library-scroll {
    overflow-x: auto;
}

table.operator-library tbody tr:hover td {
    background: var(--row-hover);
}

/* Underlined rather than blue. This column is *all* links — every row is one — and forty lines of
   --action would make the library read as a page of warnings-in-blue while the scope pills, which
   are the only thing on it carrying meaning through colour, competed for the same attention. An
   underline is an unambiguous link affordance that spends nothing, and the colour arrives on
   hover, where it applies to the one link being acted on. */
table.operator-library a {
    color: var(--ink-strong);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: .18em;
}

table.operator-library a:hover {
    color: var(--action);
    text-decoration-color: var(--action);
}

table.operator-library td.description {
    color: var(--muted);
    max-width: 52ch;
}

/* The Report Category headings (SAAS-131). One <tbody> per category, so the grouping is the
   table's own structure rather than a styled row that merely looks like a heading — a reader on a
   screen reader gets the same four groups a sighted one does.

   Quiet on purpose. The category is the shelf, not the subject: the name column and the scope
   pills are what an Operator reads, and a heading painted in --action would put four bands of
   colour against the pills that carry the only meaning on this page. Small uppercase and a rule
   under it is enough to say "a new group starts here". */
table.operator-library tr.category-heading th {
    border-bottom: 1px solid var(--border-strong);
    color: var(--ink-strong);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

/* Space above every group but the first — the gap belongs between groups, not at the top of the
   table, where the header row already provides it. */
table.operator-library tbody.category-group + tbody.category-group tr.category-heading th {
    padding-top: 1.6rem;
}

/* The count beside the heading: how big this shelf is, without spending a column on it. Muted and
   un-transformed so it reads as an aside rather than as part of the category's name. */
table.operator-library tr.category-heading th .small {
    font-weight: 400;
    letter-spacing: 0;
    margin-left: .5rem;
    text-transform: none;
}

/* The Survey's refused rows (SAAS-102). A Claimed or Superseded database stays in the list — an
   Operator asking why an attached Branch misbehaves needs the same answer the picker would have
   given — but it is not a pick target, and the grey says so before the words do. Grey, never
   hidden: the reason is the feature. */
tr.refused td {
    color: var(--muted);
}

/* --- Sign-in ----------------------------------------------------------- */

/* A column, like the Owner's at 24rem. It used to be 62rem — the admin width — which gave a
   two-field form the measure of a report table and left the fields floating at the top left of a
   very wide empty page. */
.operator-signin,
.operator-account {
    max-width: 26rem;
}

.operator-signin .field,
.operator-account .field {
    margin: 0 0 var(--s4);
}

/* --- The editor -------------------------------------------------------- */

.operator-editor .field {
    margin-bottom: var(--s5);
}

.operator-editor .hint,
.operator-account .hint {
    display: block;
    color: var(--muted);
    font-size: var(--t-small);
    line-height: 1.55;
    margin-top: var(--s1);
    max-width: 74ch;
}

.operator-editor .hint.inline {
    display: inline;
    margin-left: var(--s3);
}

/* The dialect's placeholders, named inside a sentence. A chip rather than bare monospace, because
   `{fromdate}` and `{WHERE}` are literal text a reader may need to copy exactly, and the braces
   are the part that gets lost in running prose.

   Ink rather than the muted of the sentence around it, and that is a contrast fix before it is a
   design choice: measured on the real sheet, muted grey on the code surface reads 4.51:1 — over
   the 4.5:1 line by a hundredth, which is not a margin. In ink it is 15.99:1. It is also the
   right answer independently, since the one thing on this line that has to be transcribed exactly
   should not be the quietest thing on it. */
.operator-editor .hint code,
.operator-editor p code {
    font-size: .95em;
    color: var(--ink);
    padding: .05em .3em;
    border-radius: var(--r-sm);
    background: var(--code-surface);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.operator-editor .fixed-scope {
    margin: 0;
}

/* The one Filter Variable (SAAS-147). Grouped for the preview period's reason turned round: this
   IS part of the definition, but it is a pair of fields that only mean anything together — a label
   with no condition is a box that narrows nothing — and a border is the cheapest way to say so.
   It carries the same frame rather than one of its own, because two boxed groups on one form that
   were boxed differently would read as two kinds of thing. */
.operator-editor fieldset.filter-variable,
.operator-editor fieldset.preview-period {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: var(--s4);
    margin: 0 0 var(--s5);
    max-width: 42rem;
}

.operator-editor fieldset.filter-variable legend,
.operator-editor fieldset.preview-period legend {
    margin-bottom: 0;
    padding-inline: var(--s1);
}

.operator-editor fieldset.filter-variable .field {
    margin-bottom: var(--s3);
}

/* The label is a few words and the condition is a line of SQL, so they are not the same width —
   sizing both to the widest would leave the label box mostly empty and reading as a mistake.

   THE TYPE SELECTOR IS THE FIX FOR SAAS-148's WALK. Without it this rule also caught the
   doctor-restricted CHECKBOX that SAAS-148 added to this group, and stretched a tick to 24rem —
   the width of the whole form. A checkbox that wide does not read as a checkbox; it reads as an
   empty text box with some words stranded to the right of it, which is how a flag with a sentence
   beside it became something an Operator could look straight past. Written as :not() rather than
   [type=text] because Blazor's InputText renders no type attribute at all, so the positive
   selector would have missed the two boxes this rule is actually for. */
.operator-editor fieldset.filter-variable input:not([type="checkbox"]) {
    width: 24rem;
    max-width: 100%;
}

.operator-editor fieldset.filter-variable textarea {
    width: 100%;
    box-sizing: border-box;
}

/* THE DOCTOR-RESTRICTION (SAAS-148), drawn as a call-out inside the Filter group rather than as a
   third field in it. The two fields above describe a filter; this says who fills it, which is a
   different kind of statement about the same thing — so it sits inside the same frame (it is about
   this filter) and carries its own (it is not another box to type in).

   Inset rather than boxed in a second border: a border inside a border reads as a nested form. A
   left rule in --action plus a wash of it is the same idiom the report page uses for a block that
   qualifies the one above it, and it survives a narrow window, where a second frame would not. */
.operator-editor .doctor-restricted {
    border-left: 3px solid var(--action);
    background: color-mix(in srgb, var(--action) 6%, transparent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: var(--s3);
    margin: var(--s4) 0 var(--s2);
}

/* The tick and its name on one line, the tick never shrinking and never stretching. `flex-start`
   rather than `center` because the name wraps to two lines in a narrow window and a centred tick
   would then float in the middle of them, pointing at nothing. */
.operator-editor .doctor-restricted-tick {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    margin-bottom: var(--s2);
    cursor: pointer;
}

/* The tick, undone from the realm's text-control rule and handed back to the platform.
   `.operator-editor input` gives every control in this realm `width: 100%`, a padding, a border and
   a surface — right for a name field and wrong for a checkbox, which the browser draws itself. Both
   that rule and the Filter group's 24rem are why the flag rendered as an empty box; this is the
   half that puts a checkbox back. */
.operator-editor .doctor-restricted input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    max-width: none;
    flex: 0 0 auto;
    margin: 0.1rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--action);
    cursor: pointer;
}

/* Full strength and at lead size: this is the sentence the walk said could be missed, so it is the
   heaviest text in the group rather than a caption under a field. */
.operator-editor .doctor-restricted-name {
    color: var(--ink);
    font-size: var(--t-lead);
    font-weight: 600;
    line-height: 1.35;
}

/* What ticking it does, in the reader's own terms and beside the tick rather than under the form.
   Muted, because it explains rather than asks — but at body size, not caption size: an Operator
   deciding whether a commission report locks itself to whoever opens it is reading a consequence,
   not a hint. */
.operator-editor .doctor-restricted-consequence,
.operator-editor .doctor-restricted-needs {
    color: var(--muted);
    margin: 0 0 var(--s2) calc(1.15rem + var(--s2));
    max-width: 46ch;
    line-height: 1.5;
}

.operator-editor .doctor-restricted-consequence strong,
.operator-editor .doctor-restricted-consequence em {
    color: var(--ink);
}

.operator-editor .doctor-restricted-needs {
    margin-bottom: 0;
    font-size: var(--t-small);
}

/* Tighter inside the group than between the definition's own fields: these three belong to one
   another and the whitespace should say so. */
.operator-editor fieldset.preview-period .field {
    margin-bottom: var(--s3);
}

.operator-editor fieldset.preview-period input,
.operator-editor fieldset.preview-period select {
    width: 16rem;
}

.operator-editor .custom-range {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: var(--s3) 0 var(--s2);
}

.operator-editor .custom-range label {
    margin-bottom: 0;
}

.operator-editor .custom-range input {
    width: 11rem;
}

.operator-editor .editor-buttons {
    margin: var(--s5) 0 var(--s6);
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-wrap: wrap;
}

/* Saved. Achromatic on purpose, and it is worth saying why, because green is the reflex here:
   app.css states that --ok, --warn and --bad belong to the freshness ladder and to stated
   failures and to nothing else, so painting a save confirmation --ok would be a fourth meaning
   for a hue an owner is being asked to read as "this branch is keeping up". A wash of ink and a
   full-strength rule is the same idiom the report page uses for its totals block. */
.saved {
    border: 1px solid var(--border-strong);
    border-inline-start: 3px solid var(--ink);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    color: var(--ink);
    padding: var(--s2) var(--s3);
    margin: 0 0 var(--s5);
    max-width: 70ch;
}

/* The editor's own statements: a shape fault caught before anything ran, and the "this changed
   since the last preview" refusal. Boxed, in ink, on a warn wash — SAAS-50's idiom for exactly
   this kind of sentence, and the reason it is not left as `p.stated` is that app.css sets that to
   muted at 44ch, which is right for a caption under a branch name and much too quiet for the
   sentence explaining why a save did not happen.

   Direct children only. `.stated` also arrives inside the preview from ReportResultsTable, where
   a Branch's own refusal must go on looking exactly as it does on the owner's page. */
.operator-editor > p.stated {
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    background: color-mix(in srgb, var(--warn) 8%, transparent);
    color: var(--ink);
    font-size: var(--t-lead);
    border-radius: var(--r-sm);
    padding: var(--s2) var(--s3);
    margin: 0 0 var(--s4);
    max-width: 70ch;
}

/* --- The SQL surface --------------------------------------------------- */

/* The screen this ticket is really about. An Operator reads, diffs and previews whole bodies here, and
   until now it was 12.8px at 1.45 in a browser-default box.

   Every number below was measured rather than guessed, and two of them moved after measuring.

   Size and leading: 14.4px on 23.04px, which is .9rem/1.6 — the same size the report tables run
   at, one step up from the old 12.8px, and opened out from 1.45 because indentation is the only
   structure a 40-line body has and tight leading is what makes a nested CASE read as a wall.

   Height: 58% of the viewport, never under 26rem. A fixed height was the first attempt and it is
   wrong in both directions — 40 lines are 922px, which is taller than a 900px laptop window and
   half a 1440px desk monitor, so the box has to take the screen it is actually on. Measured: 22
   lines visible in a 900px window, 36 in a 1440px one. It still resizes vertically, because the
   Kidz Customs are single 3,000-character lines that no height helps.

   Width: 76rem, wider than the prose fields. The worst line in the seeded corpus is Attendance's
   bilingual status regex — 115 characters, and 970px in this face, not the ~930px estimated
   before it was put in front of a text metric. Measured at a 1280px window the box takes 138
   characters across, so the body an Operator is most likely to be reading has no horizontal scroll at
   all. `white-space: pre` keeps the rest honest: SQL that wraps softly reads as SQL indented
   differently, which on this screen is a lie about the query. */
.operator-editor textarea {
    font-family: var(--mono);
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: 76rem;
    min-height: max(26rem, 58vh);
    resize: vertical;
    padding: var(--s3);
    background: var(--code-surface);
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    tab-size: 4;
}

/* --- The preview ------------------------------------------------------- */

.preview-result,
.edit-history {
    border-top: 1px solid var(--border-strong);
    padding-top: var(--s5);
    margin-top: var(--s6);
}

.preview-result h2,
.edit-history h2 {
    font-size: var(--t-h3);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ink-strong);
    margin: 0 0 var(--s2);
}

/* A failed preview is the case this whole screen exists for, so it is shown plainly and in full
   rather than truncated into a tooltip — SAAS-48's intent, kept and made legible.

   It carries MySQL's own words, which means table and column names, quoting and line breaks that
   a proportional face mangles: `doctor_clinicdb_kdc_puri.patient` has to be readable character by
   character, because the whole use of the message is spotting which character is wrong. So it is
   set in --mono and `pre-wrap`, never collapsed.

   Colour is spent here, and it is inside the rule: this is a stated failure, which is one of the
   two things the palette pays for. The sentence itself is ink rather than --bad — SAAS-50's
   measurement stands, muted or coloured text on a tinted wash falls under 4.5:1 — so the wash,
   the border and the full-strength edge carry the meaning and the words stay readable. */
p.preview-failed {
    font-family: var(--mono);
    font-size: var(--t-body);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 90ch;
    border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent);
    border-inline-start: 3px solid var(--bad);
    background: color-mix(in srgb, var(--bad) 8%, transparent);
    color: var(--ink);
    border-radius: var(--r-sm);
    padding: var(--s3);
    margin: 0 0 var(--s3);
}

/* --- The edit history -------------------------------------------------- */

/* A chronology, not a stack of boxes. The entries hang off one continuous rule with a marker per
   entry, newest at the top, so "how many times has this been edited" is answered by the shape of
   the column before any date is read. Achromatic: the newest marker is ink and the rest are
   border-strong, which is the same weight-and-wash idiom the sidebar uses to mark the page you
   are on.

   The rule is drawn as each entry's own inline-start border rather than as one border on the
   list, because the markers have to sit *on* it and an entry is the only element that knows where
   its own marker goes. */
.edit-history .history-entry {
    position: relative;
    border-top: 0;
    border-inline-start: 2px solid var(--border);
    margin: 0;
    padding: 0 0 var(--s6) var(--s5);
}

.edit-history .history-entry:last-of-type {
    padding-bottom: var(--s1);
}

.edit-history .history-entry::before {
    content: "";
    position: absolute;
    inset-inline-start: -6px;
    top: .45rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-strong);

    /* Sits on the page, not on the rule: without an outline in the page colour the rule shows
       through the gap between the marker and its own edge. */
    outline: 3px solid var(--page);
}

.edit-history .history-entry:first-of-type::before {
    background: var(--ink);
}

.edit-history .history-entry h3 {
    font-size: var(--t-lead);
    font-weight: 650;
    color: var(--ink-strong);
    margin: 0 0 var(--s2);
}

.history-entry dl.prior {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;
    gap: var(--s1) var(--s4);
    margin: 0 0 var(--s3);
}

/* Both sides on one baseline in the grid — the label's own bottom margin would push the term off
   the value it names. */
.history-entry dl.prior dt,
.history-entry dl.prior dd {
    margin: 0;
}

.history-entry .prior-sql-label {
    margin: 0 0 var(--s1);
}

/* The prior body, in the same face and the same size as the editor above it. Deliberately not
   quieter: this is the copy an Operator recovers a broken report from, and reading it means
   diffing it against the live body by eye — which two different sizes make impossible.

   What separates it from the current body is position rather than treatment. The current body is
   the one editable panel at the top of the page; every prior one is indented under a marker on
   the chronology, under a label saying so. Capped at 24rem so a 30-line body does not push the
   next entry off the screen, and scrolling in its own box for the Customs, which are single lines
   thousands of characters long. */
pre.prior-sql {
    font-family: var(--mono);

    /* Exactly the editor's size and leading, not merely a similar one. Measured at .875rem
       against the editor's .9rem the two were 14px and 14.4px — close enough to look intentional
       and far enough that a line-by-line comparison drifts. */
    font-size: var(--t-body);
    line-height: 1.6;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--code-surface);
    color: var(--ink);
    padding: var(--s3);
    margin: 0;
    overflow: auto;
    max-height: 24rem;
    tab-size: 4;
}

/* --- The interim notice ------------------------------------------------ */

/* A standing condition, not an alarm — SAAS-48's decision, and the reason it survives the move
   onto the token set unchanged in intent. It says what the edit trail is and is not, on every
   visit, forever. A banner is for something that just happened and will stop happening; this
   stops when SAAS-3 lands and not before, and a reader who meets an amber box on every page load
   learns to stop reading it, which would cost the one sentence that has to keep landing.

   Muted ink, a hairline rule down its start edge, measured prose. No fill, no border box, no
   icon, no hue — and in particular not --warn, which on this product means a branch is drifting
   or a run refused. */
.interim-note {
    color: var(--muted);
    font-size: var(--t-body);
    line-height: 1.6;
    max-width: 74ch;
    border-inline-start: 2px solid var(--border-strong);
    padding-inline-start: var(--s4);
    margin: var(--s6) 0;
}

.operator-signin .interim-note,
.operator-account .interim-note {
    margin-top: var(--s6);
}

/* Inside the history it introduces the chronology below it rather than closing the page, so it
   sits tighter to its heading. */
.edit-history .interim-note {
    margin-top: var(--s3);
}

/* --- Narrow screens ---------------------------------------------------- */

@media (max-width: 767.98px) {
    /* The un-sticking that used to live here moved to app.css with the rest of the masthead
       (SAAS-117) — it applies to both realms now, for the reason it always gave: a sticky band
       is a fair trade for 44px of a desktop and a bad one for a quarter of a phone. */

    .operator-editor textarea {
        min-height: 20rem;
    }

    .operator-editor .editor-buttons {
        flex-wrap: wrap;
    }

    .operator-editor .custom-range {
        flex-wrap: wrap;
    }
}

/* --- Touch targets (SAAS-163) ------------------------------------------ */

/* THE FLOOR ITSELF IS APP.CSS'S, and it reaches these screens because both sheets are served on
   every page — `a`, `button` and `summary` are floored at 44px under `pointer: coarse` there. What
   is left for this sheet is its own two inline anchors, which a floor cannot reach until they are
   boxes: the action links at the head of a list screen, and the report names in the library.

   Written here rather than in app.css because these are the vendor-side screen's own selectors, and
   the split between the two sheets is that app.css owns the shared idioms and this one owns what
   only an Operator sees. */
@media (pointer: coarse) {
    /* Already `inline-block`, so the floor reaches it — this only centres the caption in a box that
       is now taller than the words it was drawn around. */
    .operator-actions .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The report name is the whole of its cell and the handle into the definition, so it is a
       standalone target rather than a link inside a sentence. */
    table.operator-library a {
        display: inline-flex;
        align-items: center;
    }
}

/* --- The enrolment code (SAAS-108, joined by the setup key in SAAS-114) -- */

/* The two ways into an authenticator, side by side: the symbol a phone scans, and the key a person
   types when it will not. Laid out as a wrapping flex row rather than a grid, because the pair has
   exactly one breakpoint worth having — beside each other when the key fits, stacked when it does
   not — and `flex-wrap` finds it from the content instead of from a width guessed here.

   The QR is first in the source and first on screen, because scanning is still the path almost
   everybody takes. */
.enrolment-code {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--s4);
    margin: 0 0 var(--s5);
}

/* The QR an Operator scans once, at their first sign-in. Two things here are not decoration.

   The white plate is drawn by the SVG itself rather than by this rule, because the symbol has to
   read in either theme and a page served into dark mode would otherwise put light modules on a
   near-black ground — which does not scan. What this rule adds is the SPACE around it: the symbol
   already carries its four-module quiet zone, and the padding keeps the page's own background from
   crowding it on a narrow screen.

   max-width rather than a fixed size, so the symbol shrinks with a phone's viewport instead of
   pushing the form off the side of it. A QR that has to be scrolled to is a QR nobody scans. The
   drawn size went 220px → 300px once an independent decoder proved the symbol readable (SAAS-114);
   this rule is what keeps the larger one from costing a narrow screen anything. */
.enrolment-qr {
    flex: 0 1 auto;
    min-width: 0;
}

.enrolment-code svg {
    display: block;
    max-width: 100%;
    height: auto;
    padding: var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

/* The typed setup key, and the two labels an app asks for beside it.

   `flex-basis` is set to roughly the width the grouped key needs, so the pair sits side by side on
   a screen wide enough for both and drops below the symbol on one that is not. */
.enrolment-key {
    flex: 1 1 15rem;
    min-width: 0;
    margin: 0;
}

.enrolment-key dt {
    font-size: var(--t-small);
    color: var(--muted);
}

.enrolment-key dd {
    margin: 0 0 var(--s3);
    color: var(--ink);
}

/* The key itself. Set in the realm's own code face, at a size that survives being read off a
   screen while holding a phone in the other hand, and allowed to break between its groups —
   `anywhere` rather than `break-all` so a wrap lands on a space and never inside a group of four,
   which is the one place a wrap could make a character ambiguous. */
.enrolment-key .setup-key {
    font-family: var(--mono);
    font-size: var(--t-lead);
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    color: var(--ink-strong);
}

/* --- The invitation column and the link shown once (SAAS-180) ----------- */

/* The member row's invitation sub-state, and the two actions that can act on it. The sentence and
   the actions stack rather than sit inline: "Invited — expires in 6 days" is a clause, and a
   clause with two links trailing it on the same line reads as though the links were part of it. */
.operator-tenant-owners td.invitation-state {
    white-space: normal;
}

.operator-tenant-owners td.invitation-state .says {
    display: block;
}

/* Muted, because it is not a standing. An account's Standing is the column to its left and it is
   the axis that decides whether anybody may sign in; an invitation state is about a link. Painting
   it at full strength would make an ordinary countdown compete with a Disabled beside it. */
.operator-tenant-owners td.invitation-state .says {
    color: var(--muted);
}

.operator-tenant-owners .row-actions {
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap;
    margin-top: var(--s1);
}

/* ⚠ THE MINTED LINK PANEL MOVED TO app.css IN SAAS-181, and this note is what stops it coming
   back. It was written here for the Owners screen, and the People screen mints the same link the
   same way — so it is a shared component wearing shared tokens, and app.css is where those live.
   Two copies would be two things to keep true. Search `.minted-link` there. */