/*
* Medworx — app-only additions.
*
* style.css is the locked Phase 2C design system and the source of truth for
* tokens, type, spacing and primitives. Anything here is a component the
* wireframes did not cover (sign-in screen, flash messages, form fields).
* Always reach for an existing token — never a raw colour.
*/
/* ────────────────────────────────────────────────
`hidden` has to win
────────────────────────────────────────────────
The browser's own [hidden] { display: none } is a user-agent rule, so ANY
author rule that sets display beats it. `.field` is display:flex, so the
failure-reason field would have stayed on screen while the attribute said it
was hidden — the markup and the page disagreeing, silently.
This is the third instance (see .combobox-list[hidden] below, and the
section-toggle divs that only work because they carry no class at all), so
it is fixed once, here, rather than per component. */
[hidden] { display: none !important; }
/* ────────────────────────────────────────────────
Flash messages
──────────────────────────────────────────────── */
.flash-stack {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.flash {
font-size: 14px;
padding: 9px 14px;
border-radius: var(--radius-md);
border: 0.5px solid var(--border-tertiary);
}
.flash-info {
background: var(--bg-info);
border-color: var(--border-info);
color: var(--text-info-dark);
}
.flash-danger {
background: var(--bg-danger);
border-color: var(--border-danger);
color: var(--text-danger);
}
/* ────────────────────────────────────────────────
Form fields
──────────────────────────────────────────────── */
.field {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 14px;
}
.field-label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
}
/* Form controls are styled here by CLASS, deliberately.
*
* style.css:279 styles them by enumerating input types — text, search, email,
* number, plus textarea and select. Every type it does not name gets no
* font-size, padding, border, radius, background or 36px height and falls back
* to the browser default. Two were missed: `tel` (the client and site forms'
* phone boxes) and `password` (the sign-in box, which therefore did not match
* the email box directly above it). Joel found both by eye, unprompted, on the
* 2026-08-11 click-through.
*
* The fix is the class rather than the two types. `.field-input` is already on
* every one of these fields, so declaring here covers whatever helper a future
* chunk renders — Chunk 10's booking `date_field` would have been the third
* miss. Do not "fix" this by adding types to the list in style.css: that is the
* locked token file (decision #69), and the next new type would be missed
* again. Enforced by spec/requests/form_field_styling_spec.rb, which fails if a
* form control is rendered without the class.
*
* The values are copied from style.css's rule so the two agree exactly. Where
* both apply (a text input carries the class and matches the type selector),
* the attribute selector wins on specificity and sets the identical value.
*/
.field-input {
width: 100%;
font-family: inherit;
font-size: 14px;
padding: 8px 12px;
border: 0.5px solid var(--border-secondary);
border-radius: var(--radius-md);
background: var(--bg-primary);
color: var(--text-primary);
height: 36px;
outline: none;
transition: border-color 80ms ease, box-shadow 80ms ease;
}
/* A textarea grows with its content. style.css's own `textarea { height: auto }`
* is a bare element selector and loses to the class above, so without this a
* notes box collapses to a single 36px line. */
textarea.field-input {
height: auto;
min-height: 64px;
}
/* ────────────────────────────────────────────────
Buttons
Styled by CLASS, never by element or input type — the same correction made
for form fields above, and for the same reason.
style.css:302 styles `button { … }`: the *element*. Rails' `form.submit`
renders ``, which that selector never matches, so every
submit in the app was falling back to browser default for height, padding,
border, radius and font while its class supplied only colour. Joel found two
on 2026-08-12 — the sign-in button, and the site search inside a client,
which had no class at all and so was entirely unstyled. There were seven.
.btn-geometry below is the shared control shape; the variants add only what
makes them different. A new button class inherits the shape by joining this
selector list, and a submit with no button class at all fails
spec/requests/form_field_styling_spec.rb.
──────────────────────────────────────────────── */
.btn-primary,
.btn-action,
.btn-danger,
.btn-compact {
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1;
height: 36px;
padding: 0 18px;
border: 0.5px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: background 80ms ease;
}
/* An is not a