/* Shared working-scale typography and controls, after module styles. */

body{font-family:var(--font-ui);font-size:var(--text-md);line-height:1.5}
h1,h2,h3,h4,h5,.hero h1,.stats span{font-family:var(--font-ui)}
label,legend{font-family:var(--font-ui);font-size:var(--font-label);line-height:1.4}
input,select,textarea,button{font-family:var(--font-ui);font-size:var(--text-sm);line-height:1.4}

/* Form layout contract (owner report "fix ui buttons still not aligned", 14 October 2026;
   docs/implementation/2026-10-14-form-alignment.md). The one owner of form layout; core.js builds
   the same structure (formField, formActions, formGrid, actionGroup).
   1. A field is a label above its control: a <label> wrapping its control, or a .form-field
      (<label for> then the control). A label placed before its control as a sibling sits on its own row.
   2. A form or .form-grid is a grid of equal columns; a single-line field takes one column and fills it;
      fields of one row align to the top. Everything else takes a full row: help text, fieldsets,
      textareas, reason fields, tables and the action row.
   3. A reason field is a full row: the input fills it, the saved-reason picker is attached at the right
      with the same height and drops below it when the row is narrow.
   4. Actions come after the fields in their own .form-actions row, left-aligned; a form's lone button
      takes its own row.
   5. Inputs, selects and buttons share one height (--control-height) and vertical metrics. */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select:not([multiple]):not([size]){min-height:var(--control-height);padding:8px 11px}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select:not([multiple]):not([size]){height:var(--control-height)}
button{min-height:var(--control-height);padding:6px 13px;line-height:1.4;vertical-align:middle}
select{min-width:0}
textarea{padding:9px 11px}
form,.form-grid,.profile-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--field-min-width)),1fr));gap:var(--field-gap-row) var(--field-gap-column);align-items:start;min-width:0}
form{margin:16px 0}
.form-grid{margin:12px 0}
:is(form,.form-grid,.profile-fields,.form-contents)>*{grid-column:1/-1;min-width:0;margin-top:0;margin-bottom:0}
.form-contents{display:contents}.form-contents[hidden]{display:none}
/* A field takes one equal column and two row tracks shared with its row (subgrid): its label, then its
   control. Labels of one row align at the top and single-line controls share their top and bottom edge,
   whatever a neighbour's label length; a multi-line control only makes its own row taller. */
:is(form,.form-grid,.profile-fields,.form-contents)>:is(label,.form-field):has(>:is(input:not([type=checkbox]):not([type=radio]),select,textarea,.reason-entry)){display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:var(--label-gap);align-items:start;margin:0;min-width:0}
:is(form,.form-grid,.profile-fields,.form-contents)>:is(label,.form-field):has(>:is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select)):not(:has(.reason-entry,textarea)):not(.form-field-wide){grid-column:auto}
.form-field>label{margin:0}
/* A field may carry one help line below its control (for example a suggested value's origin): it then takes
   a third row track, so the line never overlaps the control. */
:is(form,.form-grid,.profile-fields,.form-contents)>.form-field:has(>.field-help:not([hidden])):has(>:is(input,select,textarea)){grid-row:span 3}
.form-field>.field-help{margin:0}
/* An error or warning note pointed to a field (core.js pointTo) sits directly below its control, before any
   help line, in a row track of its own: it never covers or replaces the control (owner report, 15 October
   2026: "Warning message should be next to the field and not on top of the field"). */
:is(form,.form-grid,.profile-fields,.form-contents)>:is(label,.form-field):has(>.point-note):has(>:is(input:not([type=checkbox]):not([type=radio]),select,textarea,.reason-entry)){grid-row:span 3}
:is(form,.form-grid,.profile-fields,.form-contents)>.form-field:has(>.point-note):has(>.field-help:not([hidden])):has(>:is(input:not([type=checkbox]):not([type=radio]),select,textarea,.reason-entry)){grid-row:span 4}
:is(label,.form-field)>.point-note{margin:0}
/* The pointed-to control keeps its error or warning outline while it has the focus. */
[data-point]:focus-visible{outline-color:var(--error)}[data-point=warning]:focus-visible{outline-color:var(--warning)}
:is(form,.form-grid,.profile-fields,.form-contents) :is(label,.form-field)>:is(input:not([type=checkbox]):not([type=radio]),select,textarea,.reason-entry),:is(form,.form-grid,.profile-fields,.form-contents)>:is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){width:100%;max-width:100%;min-width:0;margin:0}
/* A label placed before its control as a sibling: the label sits directly above it. */
:is(form,.form-grid,.profile-fields,.form-contents)>label:not(:has(input,select,textarea)){margin-bottom:calc(var(--label-gap) - var(--field-gap-row))}
:is(form,.form-grid,.profile-fields,.form-contents)>:is(.field-help,small.field-help){margin-top:calc(var(--label-gap) - var(--field-gap-row))}
:is(form,.form-grid,.profile-fields,.form-contents)>button{justify-self:start;margin:0}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;gap:8px;margin:0;min-width:0}
.form-actions>*{margin:0}
.form-grid+.form-actions,.form-field+.form-actions{margin-top:var(--field-gap-row)}
.reason-entry{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;width:100%;min-width:0}
.reason-entry>:is(input,textarea){flex:1 1 var(--reason-input-min);width:auto;min-width:0;margin:0}
.reason-entry:has(>textarea){align-items:flex-start}
.reason-entry>.reason-suggestions{flex:0 0 var(--reason-select-width);width:var(--reason-select-width);min-width:0;margin:0;font-size:var(--text-xs);background:var(--surface-mist)}
@media(max-width:550px){.reason-entry>.reason-suggestions{flex-basis:100%;width:100%}}
.user-directory-filters{grid-template-columns:minmax(200px,1fr) minmax(170px,220px) minmax(150px,210px);gap:16px}
.user-directory-filters label{display:block;margin:0 0 7px}
.workspace-table table{font-family:var(--font-ui)}
@media(max-width:700px){.user-directory-filters{grid-template-columns:1fr}}

@media(max-width:650px){.agent-settings-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.agent-settings-tabs button{min-width:0;white-space:normal;padding:9px 6px;font-size:var(--text-xs)}}

/* Prospective design summaries retain field/state/meaning at narrow widths. */
.analysis-design { width:100%; border-collapse:collapse; font-size:var(--text-md); }
.analysis-design th,.analysis-design td { padding:.6rem .45rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--border-sage); }
@media (max-width:520px) {
 .analysis-design tr:not(:first-child) { display:grid; grid-template-columns:1fr 1fr; padding:.4rem 0; border-bottom:1px solid var(--border-sage); }
 .analysis-design tr:not(:first-child) td { border:0; }
 .analysis-design tr:not(:first-child) td:last-child { grid-column:1/-1; }
 .analysis-design tr:first-child { display:none; }
}

/* The shared QC editor follows the form layout contract (labels above, 14 October 2026). */
form.regression-plan-form > fieldset { border: 1px solid var(--line); border-radius: 5px; padding: 12px; }
form.regression-plan-form fieldset input[type=checkbox] { width: auto; margin: 0 8px 0 0; }
form.regression-plan-form table input[type=checkbox] { width: auto; }
.analysis-design.regression-table { min-width: 580px; }
.analysis-design.regression-table th { white-space: nowrap; }
.analysis-design.regression-table tr:first-child, .analysis-design.regression-table tr:not(:first-child) { display: table-row; }
#regression-result, #regression-review-criteria { min-width: 0; overflow-wrap: anywhere; }

/* Origin is a property of a record. It is not a quality or workflow status. */
.record-origin{display:block;width:fit-content;margin-top:.35rem;padding:.15rem .45rem;border:1px solid var(--border-mist);border-radius:.3rem;background:var(--surface-mist);color:var(--text-forest);font-size:var(--text-xs);font-weight:500;line-height:1.4}
.record-origin[data-record-origin="unknown"]{background:var(--canvas);border-color:var(--border-neutral);color:var(--text-dark-neutral)}
.method-scope{font-size:var(--text-sm);color:var(--text-steel);margin:.5rem 0}
.sample-data-tool{border-top:1px solid var(--border-mist);padding:1rem 0}
.dataset-import-link{display:inline-block;margin-bottom:.7rem}
.operator-commands{margin:8px 0;border:1px solid var(--line);border-radius:6px;padding:4px 10px;background:var(--surface-light);min-width:0;max-width:100%}.operator-commands>summary{cursor:pointer;font-weight:600;color:var(--muted);padding:4px 0}.operator-commands[open]>summary{margin-bottom:4px}
.operator-command{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0;min-width:0}.operator-command code{padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--paper);overflow-wrap:anywhere;min-width:0;max-width:100%}
/* One purpose per page (13 October 2026): an opened account shows only that account, not the directory's audit history. */
#users:has(.object-manager-editor:not([hidden])) #user-audit-panel{display:none}
.record-page-back{margin:0 0 12px}
/* One purpose per page, second round: a page family shows only the parts of the current view (navigation.js). */
[data-view-current=false]{display:none!important}
.record-page-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}.record-page-head .record-page-back{margin:0}
/* An opened project or task shows only itself: the page's head, notice, state line, tabs and list heading belong
   to the lists (owner, 19 October 2026: projects and tasks are different objects, each on its own page). */
#research-work[data-record] > .section-head,#research-work[data-record] > .notice,#research-work[data-record] #work-state,#research-work[data-record] .work-page-tabs,#research-work[data-record] .work-columns > section > h3,#research-work[data-record] .work-columns > section > .field-help{display:none}
body[data-work-view=tasks] #research-work .work-columns{grid-template-columns:1fr}
#research-work #work-task-detail{border-top:0;margin-top:0;padding-top:0}
a.record-page-back{display:inline-block}
/* Add a file: one question where the file belongs, each answer with one line saying what follows. */
.intake-target{grid-column:1/-1;border:1px solid var(--line);border-radius:6px;padding:8px 12px;min-width:0}.intake-target legend{font-weight:600}
.intake-target-choice{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:start;margin:6px 0;font-weight:400}.intake-target-choice input{margin-top:3px}.intake-target-choice .field-help{grid-column:2;margin:2px 0 0}

/* An opened record hides its page family's tabs, as the Library does (one purpose per page). */
[data-workspace-page="sources"]:has(#source-detail:not([hidden]),#study-package-detail:not([hidden]),[data-source-proposal]) > .work-page-tabs,
[data-workspace-page="dossiers"]:has(#candidate-detail:not([hidden]),#proposal-detail:not([hidden])) > .work-page-tabs{display:none}
/* A kept file's data class sits under its header facts; its correction is a clearly visible action (owner, 14 October 2026). */
.intake-file-head{margin:0 0 12px}
.intake-trial-relabel{margin:0 0 16px;padding:8px 12px;border:1px solid var(--development-orange);border-radius:6px;background:var(--development-orange-surface)}
.intake-trial-relabel>summary{cursor:pointer;font-weight:600;color:var(--development-orange)}
/* Keyboard focus is always visible (22 October 2026): one ring for every focusable element. Zero specificity, so a
   component's own focus style still wins; on the dark menu the ring uses the light focus colour. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
:where(#workspace-navigation) :where(a,button,summary,select):focus-visible{outline-color:var(--focus-ring-on-dark)}
/* Page sections (22 October 2026): each part of a long page is a framed card with a header bar that opens or
   collapses it; a collapsed section is its header bar only. */
.page-section{position:relative;margin:16px 0;padding:0 18px 16px;border:1px solid var(--border-strong);border-radius:10px;background:var(--white);min-width:0;scroll-margin-top:calc(var(--navigation-sticky-height,0px) + 72px)}
.page-section>.page-section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 -18px 14px;padding:6px 14px 6px 12px;background:var(--surface-sage);border-bottom:1px solid var(--border-strong);border-radius:10px 10px 0 0}
.page-section>.page-section-head>.page-section-title{margin:0;font-size:var(--text-lg);font-weight:650;min-width:0}
.page-section>.page-section-head .page-section-toggle{font-size:inherit;font-weight:inherit;color:var(--ink)}
.page-section>.page-section-head .page-section-toggle:hover{background:transparent;color:var(--green-deep)}
.page-section[data-collapsed]{padding-bottom:0}
.page-section[data-collapsed]>.page-section-head{margin-bottom:0;border-bottom:0;border-radius:10px}
.page-section[data-collapsed]>:not(.page-section-head){display:none!important}
.page-section .page-section{margin:12px 0}
.page-section-index{position:sticky;top:var(--navigation-sticky-height,0px);z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 14px;padding:8px 12px;background:var(--surface-light);border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 6px var(--shadow-weak)}
.page-section-index-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.4px;color:var(--muted);margin-right:4px}
.page-section-index button{min-height:30px;padding:4px 10px;font-size:var(--text-sm);font-weight:600;border-radius:999px}
.page-section-index .page-section-link[data-collapsed=true]{color:var(--muted);background:transparent;border-style:dashed}
.page-section-index .page-section-all{margin-left:auto;background:transparent;border-color:transparent;color:var(--green);text-decoration:underline;text-underline-offset:3px}
.page-section-index .page-section-all+.page-section-all{margin-left:0}
@media(max-width:650px){.page-section{padding:0 12px 12px}.page-section>.page-section-head{margin:0 -12px 12px;padding:6px 10px}.page-section-index{position:static}}
/* A section's toggle has the height of the buttons beside it, so their edges line up on touch screens too. */
.page-section>.page-section-head .page-section-toggle{min-height:var(--control-height)}
/* On a phone the section toggle keeps the 44px touch target of every section toggle (it outranks the rule above). */
@media(max-width:650px){.page-section>.page-section-head .page-section-toggle,.page-section>.page-section-head>button{min-height:44px}}