/* UR-5 / UR-6 (S-WEB-ROUND-1): the *?* beside a field's label, and the forms' sections. Own origin, the fifth sheet,
   after office-built.css. TOKENS' VARIABLES ONLY: no colour, no font, no font size of its own; every length a spacing
   token or an `em` of the inherited font. */

/* the label row: the label, then the *?* on the same line; the opened text a block beneath them */
.office .field-label { display: block; }
.office .field-label > label { display: inline; }
.office details.field-help { display: inline; margin-left: var(--space-1); }
.office details.field-help > summary { display: inline-block; list-style: none; cursor: pointer; width: 1.6em;
  height: 1.6em; line-height: 1.6em; text-align: center; vertical-align: middle; border-radius: 50%;
  border: var(--hairline) solid var(--border-strong); color: var(--accent); background: var(--surface-panel); }
.office details.field-help > summary::-webkit-details-marker { display: none; }
.office details.field-help > summary:focus-visible { outline: 0.15em solid var(--accent); outline-offset: 0.15em; }
.office details.field-help[open] > summary { background: var(--surface-accent-tint); }
.office details.field-help > .field-help-text { display: block; margin-top: var(--space-1); padding: var(--space-2) var(--space-3);
  border-left: 0.2em solid var(--accent); background: var(--surface-sunken); color: var(--ink-secondary); }

/* UR-6 (c): a form's sections show where they start and end */
.office fieldset.form-section { border: var(--hairline) solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-4); margin: 0 0 var(--space-5); min-width: 0; }
.office fieldset.form-section > legend { padding: 0 var(--space-2); font-weight: 600; color: var(--ink); }

/* UR-6 (b): the filter box above a concept list */
.office .option-filter { margin-bottom: var(--space-1); }
.office .field-help-list { display: block; }

/* FX10-6 (S-WEB-FIX-10): a field a person must fill -- a `*` after its label, and the word for a screen reader, hidden
   from the eye but not from the reader. Tokens' variables only; the `*` takes the label's own ink. */
.required-mark { margin-left: 0.15em; }
.visually-hidden { position: absolute; width: 0.0625em; height: 0.0625em; padding: 0; margin: -0.0625em; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }