@visns-studio/visns-components 6.3.17 → 6.3.18

package/src/components/styles/Profile.module.scss

@@ -1,24 +1,36 @@
 @use 'controls' as *;
 
+/* ============================================================================
+   Profile — density hooks
+   ----------------------------------------------------------------------------
+   The screen is an account-settings page: a tab rail on the left, and a panel
+   whose tabs are a stack of titled sections rather than one flat form. Each
+   section is the classic settings two-column — what the section is on the
+   left, the controls on the right — so the panel's right half is used rather
+   than left empty.
+
+   Every measurement below is written `var(--hook, <the value it always had>)`,
+   so an unset hook is a no-op and a project retunes the page from `:root`
+   without forking the component:
+
+     --profile-rail-width       the tab rail column. default: 14rem
+     --profile-content-width    the measure the sections and the footer share,
+                                so Save lands under the right edge of the
+                                fields. default: 68rem
+     --profile-aside-width      the section's title/description column.
+                                default: 18rem
+     --profile-signature-width  the signature pad. default: 29rem
+
+   Literal fallbacks throughout: `--spacing-*`, `--font-size-*`, `--radius-*`,
+   `--muted-color` and `--surface-color` are not in every consuming project's
+   token set, and a bare `var()` for a token that does not exist is invalid at
+   computed-value time — the whole declaration is dropped, which is how a form
+   like this silently loses its padding.
+   ========================================================================= */
+
 .btn {
     @include button-primary;
 }
-/* Profile.module.scss */
-
-/* Form field label animation */
-input:not(:placeholder-shown) + .fi__span,
-textarea:not(:placeholder-shown) + .fi__span,
-select:not(:placeholder-shown) + .fi__span,
-input:focus + .fi__span,
-textarea:focus + .fi__span,
-select:focus + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.9);
-    opacity: 1;
-    padding: 0 0.25rem;
-    background: var(--tertiary-color);
-    font-weight: 400;
-    border-radius: var(--br);
-}
 
 .grid {
     width: 100%;
@@ -50,96 +62,84 @@ select:focus + .fi__span {
     box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
 }
 
+/* The rail/panel row.
+
+   It was a wrapping flex row of `flex: 1` against `flex: 0 1 80%` — two
+   percentage bases plus a gap, which is the arrangement that puts the panel's
+   right edge past the page's right padding while the rail keeps its left one,
+   and the reason the page read as lopsided. Two grid tracks always sum to the
+   container, gap included, so the two cards sit inside the same gutters. */
 .grid__subrow {
     width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    height: auto;
-    gap: 0.35rem;
+    display: grid;
+    grid-template-columns:
+        minmax(0, var(--profile-rail-width, 14rem))
+        minmax(0, 1fr);
+    /* The rail is as tall as its two tabs. `stretch` — the flex and grid
+       default — ran it the full height of the panel beside it, so a card
+       holding two links was most of a screen of empty white. */
+    align-items: start;
+    gap: var(--spacing-md, 1rem);
+
+    @media (max-width: 900px) {
+        grid-template-columns: minmax(0, 1fr);
+    }
 }
 
+/* The tab rail. Same spec as `.grid__subnav` in GenericIndex/GenericDetail —
+   a flat surface, a hairline, and the framing of the items left to
+   TableFilter's own stylesheet, which is what actually draws them.
+
+   Deliberately not sticky: neither of the two pages that share this rail is,
+   and the app's nav bar is itself `position: sticky` at `top: 0` on a higher
+   z-index, so a rail stuck to the top of the viewport would slide underneath
+   it. */
 .grid__subnav {
-    flex: 1;
-    background: white;
+    background: var(--surface-color, #fff);
+    border: 1px solid var(--border-color, #e1e1e1);
     border-radius: var(--br);
-    border: 1px solid var(--border-color);
     box-sizing: border-box;
-    padding: 5px;
+    padding: var(--spacing-xs, 0.25rem);
     margin: 8px 0;
     height: auto;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
-}
-
-.grid__subnav > ul {
-    width: 100%;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.grid__subnav > ul li {
-    width: 100%;
-    margin-bottom: 3px;
+    box-shadow: none;
 }
 
-.grid__subnav > ul li a {
-    width: 100%;
-    padding: 0.35rem 1rem;
-    box-sizing: border-box;
-    display: block;
-    text-decoration: none;
-    background: rgba(var(--primary-rgb), 0.05);
-    color: var(--primary-color);
-    border-radius: 5px;
-    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-    outline: none;
-    cursor: pointer;
-}
-
-.grid__subnav > ul li:hover a {
-    background: var(--primary-color);
-    color: var(--tertiary-color);
-}
-
-.grid__subnav > ul li .subactive {
-    font-weight: 700;
-    background: var(--primary-color);
-    color: var(--tertiary-color);
+/* `.tableFilterContainer` carries a 20px bottom margin, which is the right
+   amount of room under a rail that runs the height of the page and dead space
+   under one that hugs its two items. */
+.grid__subnav > div {
+    margin-bottom: 0;
 }
 
 .grid__subcontent {
-    flex: 0 1 80%;
-    background: var(--tertiary-color);
+    background: var(--surface-color, #fff);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--primary-rgb), 0.05);
+    border: 1px solid var(--border-color, #e1e1e1);
     box-sizing: border-box;
-    /* Was 2px, which left the section header's hairline floating a couple of
-       pixels short of the panel edge. The panel is a card; its header, body and
-       footer own their own padding, so the card itself has none. */
+    /* The card has none of its own: its header, sections and footer each own
+       their padding, and a couple of pixels here left the header's hairline
+       floating short of the card edge. */
     padding: 0;
     margin: 8px 0;
+    min-width: 0;
     height: auto;
     position: relative;
 }
 
-.grid__subcontent h2 {
-    color: var(--primary-color);
-    font-size: 1.35em;
-    padding: 0;
-    margin: 0 0 30px 0;
+/* The tab panel: header, sections, footer. The card around it has no padding
+   of its own, so each of those three owns its inset — which is what lets the
+   header's and the footer's hairlines run the full width of the card while the
+   sections in between stay on a measure. */
+.gridtxt {
+    display: flex;
+    flex-direction: column;
 }
 
-/* The panel's section header. It follows the same spec as the unified page
-   header documented at the top of GenericIndex.module.scss — the panel's own
-   surface, one bottom hairline, the title left-aligned on the same padding as
-   the body beneath it — a step down in type size because this names a section
-   inside a page rather than the page.
-
-   It used to be a pale centred band with its own fill and radius: a second
-   card sitting on top of the card, and the only centred heading in the
-   library. */
+/* The panel header. Same spec as the unified page header documented at the top
+   of GenericIndex.module.scss — the panel's own surface, one bottom hairline,
+   the title left-aligned on the padding the body below it uses, one step down
+   in type size because this names a tab inside a page rather than the page. */
 .gridtxt__header {
     width: 100%;
     display: flex;
@@ -147,7 +147,7 @@ select:focus + .fi__span {
     justify-content: space-between;
     gap: var(--spacing-md, 1rem);
     box-sizing: border-box;
-    padding: var(--spacing-md, 1rem);
+    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
     background: none;
     border-bottom: 1px solid var(--border-color, #e1e1e1);
     border-radius: 0;
@@ -158,146 +158,175 @@ select:focus + .fi__span {
 
 .gridtxt__header span {
     font-weight: 700;
-    /* One step under the page title above it, so the two read as a hierarchy
-       rather than as two competing headings. */
     font-size: var(--font-size-lg, 1.125rem);
     line-height: 1.25;
 }
 
-.gridtxt {
-    /* One column width, shared by the form body and the footer under it, so
-       Save lands beneath the right edge of the fields instead of out at the
-       card's edge. A project can retune it from `:root` like the rest of the
-       library's density hooks. */
-    --profile-form-width: 56rem;
-}
-
-.gridtxt > ul {
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: row;
-    flex-wrap: wrap;
-    list-style: none;
-    box-sizing: border-box;
-    padding: 0.85rem;
-    margin: 0;
-}
-
-.gridtxt > ul li {
-    flex: 0 0 calc(50% - 10px);
-    padding: 0.85rem;
-    box-sizing: border-box;
-    border: 1px solid rgba(var(--primary-rgb), 0.095);
-    color: var(--paragraph-color);
-    background: rgba(var(--primary-rgb), 0.015);
-    margin: 5px;
-    border-radius: var(--br);
-    line-height: 1.45;
-    font-size: 1rem;
-}
-
-.gridtxt > ul .fw-grid-item {
-    flex: 0 0 calc(100% - 10px);
-}
-
-.gridtxt > ul .notecolor {
-    border: 1px solid var(--secondary-color);
-}
+/* --- Sections -------------------------------------------------------------
+   A settings tab is a list of decisions, not one continuous form. Each of them
+   gets a title, a line saying what it is for, and only the controls that
+   belong to it; a hairline separates one from the next.
 
-.formcontainer {
-    width: 100%;
-    /* Two columns across the full width of a 1600px panel gave every field a
-       ~600px line — far past the point where a name box reads as a box. The
-       form takes the width it needs and the rest of the panel stays quiet.
-       The 2FA tab is a document rather than a form and opts out with its own
-       `max-width: 100%`. */
-    max-width: var(--profile-form-width, 56rem);
+   The two columns are what keeps the panel from having an empty right half:
+   the prose that used to have nowhere to live now occupies the left third, and
+   the fields take a measure a name actually wants rather than 600px of empty
+   box. */
+.form {
     box-sizing: border-box;
+    max-width: var(--profile-content-width, 68rem);
+    padding: 0 var(--spacing-lg, 1.5rem);
 }
 
-.modalForm {
-    width: 100%;
-    box-sizing: border-box;
-    /* Was flex-wrap with 50%-wide children, so a field that needed the full
-       row had no way to say so and the row it started stayed half empty. */
+.section {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns:
+        minmax(0, var(--profile-aside-width, 18rem))
+        minmax(0, 1fr);
     align-items: start;
-    gap: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
-    padding: var(--spacing-md, 1rem);
+    gap: var(--spacing-md, 1rem) var(--spacing-xl, 2rem);
+    padding: var(--spacing-lg, 1.5rem) 0;
 
-    @media (max-width: 768px) {
-        grid-template-columns: 1fr;
+    @media (max-width: 900px) {
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--spacing-sm, 0.5rem);
     }
 }
 
-.formItem {
-    width: auto;
-    padding: 0;
-    position: relative;
-    box-sizing: border-box;
+.section + .section {
+    border-top: 1px solid var(--border-color, #e1e1e1);
 }
 
-/* A field that spans the row — the signature, which is a canvas rather than a
-   line of text and does not pair with anything beside it. */
-.formItemFull {
-    grid-column: 1 / -1;
+.sectionAside {
+    min-width: 0;
 }
 
-.fi__label {
-    position: relative;
-    display: block;
+.sectionTitle {
+    margin: 0;
+    font-size: var(--font-size-md, 0.9375rem);
+    font-weight: var(--font-weight-semibold, 600);
+    line-height: 1.3;
+    letter-spacing: 0;
+    color: var(--heading-color, #10192a);
 }
 
-.fi__span {
-    position: absolute;
-    transition: all 200ms;
-    opacity: 1;
-    left: 0;
-    padding: 19px 20px;
-    transform-origin: top left;
-    cursor: text;
+.sectionDescription {
+    margin: 0.35rem 0 0;
+    max-width: 42ch;
+    font-size: var(--font-size-sm, 0.8125rem);
+    line-height: 1.55;
+    color: var(--muted-color, #6b7285);
 }
 
-.prefocus {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
-    opacity: 1;
-    padding: 0 4px;
-    background: var(--tertiary-color);
-    font-weight: 300;
-    border-radius: var(--br);
-    z-index: 500;
+.sectionFields {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md, 1rem);
+    min-width: 0;
 }
 
-.input,
-.textarea,
-.select {
-    background: var(--item-color);
-    border-radius: var(--br);
-    /* Was transparent: on a white panel the fields had no edge at all and the
-       form read as text floating in space. The width stays 1px so the floating
-       label, which is positioned against this box, does not move. */
-    border: 1px solid var(--border-color, #e1e1e1);
-    padding: 1rem;
-    outline: none;
+/* Two fields on a line where the column is wide enough for two, one where it
+   is not. `auto-fit` measures the column it is actually in, which a media
+   query on the viewport cannot do — the fields column is two-thirds of the
+   panel, and the panel is a fraction of the page. */
+.fieldPair {
     width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+    align-items: start;
+    gap: var(--spacing-md, 1rem);
+}
+
+/* --- Fields ---------------------------------------------------------------
+   The notched floating label — a `<span>` absolutely positioned inside the
+   box, sliding up into a gap in the border once the field held something —
+   was the last of that treatment in the library, and it read a decade older
+   than every other control on the page. The label is a line of text above the
+   box now, on the same uppercase/semibold/muted spec the library gives a small
+   label everywhere else (`h5`/`h6` in global.css, the section headings in
+   GenericDetail).
+
+   Profile owns these classes outright: nothing here reaches the shared
+   `Field`/`Form` components, whose floating treatment is left exactly as it
+   is. */
+.formItem {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    min-width: 0;
     box-sizing: border-box;
-    color: var(--paragraph-color);
-    transition: box-shadow 0.15s linear;
 }
 
-.input:hover,
-.textarea:hover,
-.select:hover {
-    border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
-    transition: border 0.15s linear;
+.fieldLabel {
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: var(--font-weight-semibold, 600);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    line-height: 1.3;
+    color: var(--muted-color, #6b7285);
+}
+
+/* Why the `!important`s.
+   ----------------------------------------------------------------------------
+   `global.css` — which this component imports — dresses every text input on
+   the page through
+
+       textarea, select,
+       input[type]:not([type='search'])…:not(.react-datepicker__year-select)
+
+   Thirteen `:not()`s put that selector at specificity (0, 14, 1). A CSS module
+   can only ever produce one hashed class, (0, 1, 0), so *every* property that
+   rule sets — background, border, radius, padding, font-size, line-height,
+   box-shadow — lands on these fields no matter what is written here, and the
+   only way a scoped stylesheet can restate one is `!important`. That is the
+   sole reason for them below; a property the global rule does not touch
+   (`min-height`, `font-family`, `::placeholder`) is left plain and comes from
+   the shared `input-base` mixin as usual.
+
+   This is also why the previous pass's field styling never showed: it was
+   correct CSS that never won. Fixing it at the source means rewriting a
+   selector every component in the library is sitting under, which is a
+   separate job. */
+.input {
+    /* The shared control shape: one height, one radius, one border, the same
+       as every other input in 6.3. */
+    @include input-base;
+
+    padding: 0 0.65rem !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-sm) !important;
+    background: var(--paper) !important;
+    font-size: var(--font-size-md) !important;
+    line-height: 1.25 !important;
+
+    &:hover:not(:disabled):not([readonly]):not(.inputError) {
+        border-color: var(--border-color-dark) !important;
+    }
+
+    &:focus {
+        outline: none;
+        border-color: var(--primary-color) !important;
+        /* A ring rather than a thicker border, so nothing shifts on focus. */
+        box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 118, 192, 0.32)) !important;
+    }
+
+    /* Email is filled from the profile and only an administrator can change
+       it. Same surface the shared mixin gives a disabled control, so it reads
+       as "not yours to edit" rather than as a field that has gone wrong — but
+       the value keeps full-strength ink, because it is still information the
+       user came here to read. */
+    &[readonly] {
+        background: var(--bg-color-secondary, #f4f5f7) !important;
+        cursor: default;
+    }
 }
 
-.input:focus,
-.textarea:focus,
-.select:focus {
-    border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
+/* Set from JS as `styles.inputError`, appended to the input's class list. It is
+   written as a compound so it outranks `.input:focus` above — an invalid field
+   that has been focused to correct it should still look invalid. */
+.input.inputError {
+    border-color: var(--danger-color, #e74c3c) !important;
+    box-shadow: 0 0 0 3px var(--danger-light, rgba(231, 76, 60, 0.14)) !important;
 }
 
 /* --- Password strength ---------------------------------------------------
@@ -311,8 +340,10 @@ select:focus + .fi__span {
    empty password box telling the user off before they had typed. */
 .strengthMeter {
     /* Sits directly under the input it measures, close enough to read as part
-       of the field rather than as a rule floating beneath it. */
-    margin-top: 0.35rem;
+       of the field rather than as a rule floating beneath it. The distance is
+       `.formItem`'s own gap — this only cancels the library's default so the
+       two do not stack. */
+    margin-top: 0 !important;
 
     /* The segments: 2px hairlines with 4px of white between them read as four
        unrelated underlines. A little more weight and a rounded cap makes them
@@ -332,68 +363,100 @@ select:focus + .fi__span {
 }
 
 /* --- Signature ------------------------------------------------------------
-   The canvas geometry (2px border, 10px padding) is deliberately unchanged:
-   signature_pad maps pointer coordinates through the element's bounding rect,
-   so border and padding shift where the ink lands. Only the colour and radius
-   are tokenised, and the frame moved off the inline `canvasProps.style` onto
-   this class where a project can reach it. */
-.sigcanvas {
-    border: 2px solid var(--border-color, #ccc);
-    border-radius: var(--radius-md, 10px);
-    padding: 10px;
-    box-sizing: border-box;
-}
-
+   signature_pad maps a pointer to a canvas coordinate through the element's
+   bounding rect and assumes that rect is the drawing surface. A border and
+   padding on the canvas itself sit inside the rect and outside the surface, so
+   every stroke landed up and to the left of the cursor by exactly the border
+   plus the padding. The frame belongs on the wrapper; the canvas keeps its own
+   box model and nothing else.
+
+   The pad's size comes from `--profile-signature-width` and the `height` prop
+   in Profile.jsx together. The wrapper library writes `width`/`height`
+   attributes of `offsetWidth * dpr` by `height prop * dpr` and scales the
+   context by `dpr`; with `width: 100%` and `height: auto` the canvas's own
+   intrinsic ratio then renders it at exactly `height` CSS pixels, so the
+   attribute geometry and the CSS geometry agree and a stroke lands under the
+   cursor. Change one of the two and check the other.
+
+   Neither may be made smaller. Profile loads a stored signature into the pad
+   on mount and `handleSubmitProfile` re-exports the canvas on any save, so a
+   smaller pad writes back a cropped signature without anyone asking it to —
+   the full reasoning is at the `height` prop in Profile.jsx. */
 .signatureField {
+    width: 100%;
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
-    /* A signature is a fixed-size mark, not a field that benefits from more
-       room. Left to fill the row it became the largest thing on the page. */
-    max-width: 32rem;
+    /* A signature is a fixed-size mark, not a field that gains anything from
+       more room. Left to fill the row it became the largest thing on the
+       page. */
+    max-width: var(--profile-signature-width, 29rem);
 }
 
-/* The label was a floating `.fi__span`, absolutely positioned so it landed on
-   top of the canvas border — the treatment belongs to inputs that have a value
-   to sit above. A canvas has none, so this is an ordinary label. */
-.signatureLabel {
-    font-size: var(--font-size-sm, 0.8125rem);
+/* The caption and the Clear action share the line above the pad. Clear used to
+   be promoted into the page footer beside Save, where a control that wipes one
+   field sat at the same rank as the one that saves the screen. */
+.signatureHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-sm, 0.5rem);
+}
+
+.signatureCaption {
+    font-size: var(--font-size-xs, 0.75rem);
     font-weight: var(--font-weight-semibold, 600);
-    color: var(--paragraph-color);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    line-height: 1.3;
+    color: var(--muted-color, #6b7285);
 }
 
 .signaturePadWrapper {
     width: 100%;
     position: relative;
     z-index: 1;
+    box-sizing: border-box;
+    padding: var(--spacing-xs, 0.25rem);
+    border: 1px solid var(--border-color, #e1e1e1);
+    border-radius: var(--radius-sm, 6px);
+    background: var(--paper, #fff);
 
     canvas {
+        display: block;
+        width: 100%;
         max-width: 100%;
         height: auto !important;
-        display: block;
     }
 }
 
-.signatureHint {
-    font-size: var(--font-size-xs, 0.75rem);
-    color: var(--muted-color, #666);
+/* Nothing here changes the canvas's box model — see the note above. */
+.sigcanvas {
+    cursor: crosshair;
+    touch-action: none;
 }
 
-/* The form card's footer. This was `position: fixed` in the bottom-right
-   corner of the viewport: the page's Save button floated over whatever the
-   user had scrolled to, unattached to the form it saved. It is now the bottom
-   edge of the card, on the same hairline-and-padding spec as the header at the
-   top of it. Secondary before primary, so the destructive-ish action is not
-   the one under the thumb. */
+/* A small, quiet button for an action that belongs to one field rather than to
+   the page. */
+.btnQuiet {
+    @include button-secondary;
+    @include button-small;
+}
+
+/* The panel's footer. Save was `position: fixed` in the bottom-right corner of
+   the viewport, floating over whatever the user had scrolled to. It is the
+   bottom edge of the card now, on the same hairline-and-padding spec as the
+   header, and it shares the sections' measure so it lands under the right edge
+   of the fields rather than out at the card's edge. */
 .polActions {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: var(--spacing-sm, 0.5rem);
     width: 100%;
-    max-width: var(--profile-form-width, 56rem);
+    max-width: var(--profile-content-width, 68rem);
     box-sizing: border-box;
-    padding: var(--spacing-md, 1rem);
+    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
     border-top: 1px solid var(--border-color, #e1e1e1);
 }
 
@@ -401,12 +464,6 @@ select:focus + .fi__span {
     margin: 0;
 }
 
-
-
-.inputError {
-    border-color: red !important;
-}
-
 .loading {
     position: relative;
     cursor: wait;
@@ -432,64 +489,67 @@ select:focus + .fi__span {
     }
 }
 
-/* Two-Factor Authentication Styles */
-.twoFactorSection {
-    padding: var(--spacing-md, 1rem);
-    width: 100%;
+/* --- Two-Factor Authentication -------------------------------------------
+   The tab is sectioned exactly like Overview — the status in one section, the
+   pairing walkthrough in the next — so moving between the two tabs does not
+   feel like moving between two different pages. */
+.twoFactorStatus {
     display: flex;
     flex-direction: column;
-}
-
-.twoFactorStatus {
-    margin-bottom: 1.5rem;
+    align-items: flex-start;
+    gap: var(--spacing-md, 1rem);
 
-    h3 {
-        margin-bottom: 0.75rem;
-        font-size: 1rem;
+    h4 {
+        margin: 0;
         display: flex;
         align-items: center;
         gap: 0.5rem;
-        font-weight: 500;
-    }
-
-    p {
-        margin-bottom: 1.25rem;
-        line-height: 1.4;
-        color: var(--paragraph-color);
-        font-size: 0.9rem;
-        /* This tab is deliberately full width — it holds a QR code and a grid
-           of recovery codes — but the prose explaining 2FA ran the whole way
-           across a 1600px panel. Only the paragraphs are capped. */
-        max-width: 68ch;
+        font-size: var(--font-size-xs, 0.75rem);
+        font-weight: var(--font-weight-semibold, 600);
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--muted-color, #6b7285);
     }
 }
 
 .statusEnabled {
     color: var(--success-color, #2ecc71);
-    font-weight: 500;
-    padding: 0.2rem 0.4rem;
+    font-weight: var(--font-weight-semibold, 600);
+    padding: 0.15rem 0.45rem;
     background-color: var(--success-color-light, rgba(46, 204, 113, 0.1));
-    border-radius: var(--radius-sm, 4px);
-    font-size: 0.85rem;
+    border-radius: var(--radius-sm, 6px);
+    font-size: var(--font-size-xs, 0.75rem);
+    letter-spacing: 0.04em;
 }
 
 .statusDisabled {
     color: var(--danger-color, #e74c3c);
-    font-weight: 500;
-    padding: 0.2rem 0.4rem;
+    font-weight: var(--font-weight-semibold, 600);
+    padding: 0.15rem 0.45rem;
     background-color: var(--danger-light, rgba(231, 76, 60, 0.1));
-    border-radius: var(--radius-sm, 4px);
-    font-size: 0.85rem;
+    border-radius: var(--radius-sm, 6px);
+    font-size: var(--font-size-xs, 0.75rem);
+    letter-spacing: 0.04em;
 }
 
 .confirmedMessage {
-    margin: 1rem 0;
+    margin: 0;
     padding: 0.75rem;
     background-color: var(--success-color-light, rgba(46, 204, 113, 0.1));
     border-left: 3px solid var(--success-color, #2ecc71);
-    border-radius: var(--br);
-    color: #333;
-    font-size: 0.9rem;
+    border-radius: var(--radius-sm, 6px);
+    color: var(--paragraph-color, #333);
+    font-size: var(--font-size-sm, 0.8125rem);
+    line-height: 1.5;
+}
+
+/* The confirmed message and the button that undoes it, stacked and left-hung
+   under the status line. */
+.statusActions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md, 1rem);
 }
 
 /* The three variants each carried their own font size and padding, so a row of
@@ -520,75 +580,67 @@ select:focus + .fi__span {
     }
 }
 
+/* The setup walkthrough. It used to be a bordered, shadowed card inside the
+   panel card, carrying a heading that repeated the heading above it. The
+   section owns the title and the separation now, so this is only the steps. */
 .twoFactorSetup {
-    margin-top: 1.5rem;
-    padding: 1.5rem;
-    background-color: var(--paper, #fff);
-    border-radius: var(--br);
-    border: 1px solid var(--border-color, #e0e0e0);
-    box-shadow: var(--shadow-sm, 0 3px 8px rgba(0, 0, 0, 0.05));
     width: 100%;
-
-    h3 {
-        margin-bottom: 1.25rem;
-        font-size: 1rem;
-        font-weight: 500;
-        color: var(--primary-color);
-        padding-bottom: 0.75rem;
-        border-bottom: 1px solid var(--border-color, #f0f0f0);
-    }
+    min-width: 0;
 }
 
 .setupSteps {
-    margin-left: 0;
-    margin-bottom: 1.5rem;
-    font-size: 0.9rem;
+    margin: 0;
+    padding: 0;
+    font-size: var(--font-size-sm, 0.8125rem);
     counter-reset: step-counter;
     list-style-type: none;
 
     li {
-        margin-bottom: 1.5rem;
-        padding-left: 2.5rem;
+        margin-bottom: var(--spacing-lg, 1.5rem);
+        padding-left: 2.25rem;
         position: relative;
 
+        &:last-child {
+            margin-bottom: 0;
+        }
+
         &:before {
             content: counter(step-counter);
             counter-increment: step-counter;
             position: absolute;
             left: 0;
             top: 0;
-            width: 1.75rem;
-            height: 1.75rem;
+            width: 1.5rem;
+            height: 1.5rem;
             background-color: var(--primary-color);
-            color: white;
+            color: #fff;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 0.85rem;
-            font-weight: 500;
+            font-size: var(--font-size-xs, 0.75rem);
+            font-weight: var(--font-weight-semibold, 600);
         }
 
         p {
-            margin-bottom: 0.75rem;
-            font-weight: 500;
-            font-size: 0.9rem;
-            color: #333;
+            margin-bottom: var(--spacing-sm, 0.5rem);
+            font-weight: var(--font-weight-medium, 500);
+            font-size: var(--font-size-sm, 0.8125rem);
+            line-height: 1.5;
+            color: var(--text-color, #333);
         }
 
         ul {
-            margin-left: 0;
-            margin-bottom: 1rem;
+            margin: 0 0 var(--spacing-md, 1rem);
             list-style-type: none;
-            background-color: #f9f9f9;
-            padding: 0.75rem 1rem;
-            border-radius: var(--br);
+            background: var(--bg-color-secondary, #f9f9f9);
+            padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+            border-radius: var(--radius-sm, 6px);
             border-left: 3px solid var(--primary-color);
 
             li {
-                margin-bottom: 0.5rem;
-                font-size: 0.85rem;
-                padding-left: 0;
+                margin-bottom: 0.4rem;
+                font-size: var(--font-size-sm, 0.8125rem);
                 position: relative;
                 padding-left: 1rem;
 
@@ -613,7 +665,7 @@ select:focus + .fi__span {
                 a {
                     color: var(--primary-color);
                     text-decoration: none;
-                    font-weight: 500;
+                    font-weight: var(--font-weight-medium, 500);
 
                     &:hover {
                         text-decoration: underline;
@@ -626,17 +678,20 @@ select:focus + .fi__span {
 
 .qrCodeContainer {
     display: flex;
-    justify-content: center;
-    margin: 0.75rem 0;
-    padding: 1rem;
-    background-color: var(--paper, #fff);
-    border-radius: var(--br);
+    justify-content: flex-start;
+    margin: 0 0 var(--spacing-sm, 0.5rem);
+    padding: var(--spacing-md, 1rem);
+    background: var(--paper, #fff);
+    border-radius: var(--radius-sm, 6px);
     border: 1px solid var(--border-color, #e0e0e0);
-    width: 100%;
-    /* The panel used to lift and deepen its shadow on hover. Nothing here is
+    /* Was full width with the code centred in it, which drew a wide empty
+       panel around a 180px square. It is the size of what it holds. */
+    width: max-content;
+    max-width: 100%;
+    /* The panel used to lift and deepen its shadow on hover. Nothing in it is
        clickable — it is a QR code to point a phone at — so the affordance was
        promising an interaction that does not exist. */
-    box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.08));
+    box-shadow: none;
 }
 
 .qrCodeSvg {
@@ -656,9 +711,9 @@ select:focus + .fi__span {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #f5f5f5;
-    color: #666;
-    font-size: 0.85rem;
+    background-color: var(--bg-color-secondary, #f5f5f5);
+    color: var(--muted-color, #666);
+    font-size: var(--font-size-sm, 0.8125rem);
     border-radius: 4px;
     animation: pulse 1.5s infinite ease-in-out;
 }
@@ -678,146 +733,131 @@ select:focus + .fi__span {
 .secretKeyContainer {
     display: flex;
     align-items: center;
-    margin: 0.75rem 0;
-    gap: 0.5rem;
-    background-color: #f9f9f9;
-    padding: 0.75rem;
-    border-radius: var(--br);
+    margin: 0 0 var(--spacing-sm, 0.5rem);
+    gap: var(--spacing-sm, 0.5rem);
+    background: var(--bg-color-secondary, #f9f9f9);
+    padding: var(--spacing-sm, 0.5rem);
+    border-radius: var(--radius-sm, 6px);
     border: 1px solid var(--border-color, #e0e0e0);
     width: 100%;
+    box-sizing: border-box;
 }
 
 .secretKey {
-    padding: 0.5rem 0.75rem;
-    background-color: white;
-    border-radius: var(--br);
+    padding: 0.4rem 0.65rem;
+    background: var(--paper, #fff);
+    border-radius: var(--radius-sm, 6px);
     font-family: monospace;
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm, 0.8125rem);
     letter-spacing: 1px;
-    color: #333;
+    color: var(--text-color, #333);
     user-select: all;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-color, #ddd);
     flex-grow: 1;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+    min-width: 0;
+    overflow-wrap: anywhere;
 }
 
 .copyButton {
-    padding: 0.4rem 0.75rem;
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    border-radius: var(--br);
-    cursor: pointer;
-    font-size: 0.8rem;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-        filter: brightness(90%);
-    }
-
-    &:active {
-        transform: translateY(1px);
-    }
+    @include button-secondary;
+    @include button-small;
 }
 
 .verificationCodeContainer {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-    margin: 0.75rem 0;
-    background-color: #f9f9f9;
-    padding: 1rem;
-    border-radius: var(--br);
-    border: 1px solid var(--border-color, #e0e0e0);
-    width: 100%;
+    flex-wrap: wrap;
+    gap: var(--spacing-sm, 0.5rem);
+    /* Was a tinted, bordered strip around an input and a button — a third
+       surface for two controls that already have their own edges. */
+    margin: 0;
 }
 
+/* Same fight with `global.css` as `.input` — see the note there. */
 .verificationCodeInput {
-    padding: 0.75rem;
-    font-size: 1.1rem;
+    @include input-base;
+
+    width: 9rem !important;
+    flex: 0 0 auto;
+    padding: 0 0.65rem !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-sm) !important;
+    background: var(--paper) !important;
+    font-size: 1.05rem !important;
+    line-height: 1.25 !important;
     letter-spacing: 4px;
-    width: 140px;
     text-align: center;
-    border: 1px solid #ddd;
-    border-radius: var(--br);
     font-family: monospace;
-    font-weight: 600;
-    color: #333;
-    background-color: white;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+    font-weight: var(--font-weight-semibold, 600);
 
     &:focus {
-        border-color: var(--primary-color);
         outline: none;
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
+        border-color: var(--primary-color) !important;
+        box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 118, 192, 0.32)) !important;
     }
 
     &::placeholder {
-        color: #bbb;
+        color: var(--muted-color, #bbb);
         letter-spacing: 2px;
     }
 }
 
 .recoveryCodes {
-    margin: 0.75rem 0;
-    padding: 1rem;
-    background-color: #f9f9f9;
-    border-radius: var(--br);
+    margin: 0 0 var(--spacing-sm, 0.5rem);
+    padding: var(--spacing-md, 1rem);
+    background: var(--bg-color-secondary, #f9f9f9);
+    border-radius: var(--radius-sm, 6px);
     border: 1px solid var(--border-color, #e0e0e0);
     width: 100%;
+    box-sizing: border-box;
 }
 
 .recoveryCodesContainer {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-
-    @media (max-width: 768px) {
-        grid-template-columns: 1fr;
-    }
+    /* Was two fixed columns, which on the narrower fields column left the
+       codes stretched to twice the width of the text in them. */
+    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+    gap: var(--spacing-sm, 0.5rem);
+    margin-bottom: var(--spacing-md, 1rem);
 }
 
 .recoveryCode {
-    padding: 0.5rem 0.75rem;
-    background-color: white;
-    border-radius: var(--br);
-    border: 1px solid #ddd;
+    padding: 0.4rem 0.65rem;
+    background: var(--paper, #fff);
+    border-radius: var(--radius-sm, 6px);
+    border: 1px solid var(--border-color, #ddd);
     font-family: monospace;
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm, 0.8125rem);
     letter-spacing: 1px;
-    color: #333;
+    color: var(--text-color, #333);
     user-select: all;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
     text-align: center;
 }
 
 .noRecoveryCodes {
-    padding: 1rem;
+    padding: var(--spacing-md, 1rem);
     text-align: center;
-    color: #666;
+    color: var(--muted-color, #666);
     font-style: italic;
-    font-size: 0.9rem;
+    font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .recoveryCodesWarning {
-    margin-top: 0.75rem;
+    margin: 0;
     padding: 0.75rem;
     background-color: var(--danger-light, rgba(231, 76, 60, 0.1));
     border-left: 3px solid var(--danger-color, #e74c3c);
-    border-radius: var(--br);
-    color: #333;
-    font-size: 0.85rem;
+    border-radius: var(--radius-sm, 6px);
+    color: var(--paragraph-color, #333);
+    font-size: var(--font-size-sm, 0.8125rem);
+    line-height: 1.5;
 }
 
 .setupActions {
     display: flex;
-    justify-content: flex-end;
-    margin-top: 1.5rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--border-color, #f0f0f0);
+    /* The steps hang off the left margin; so does the way out of them. */
+    justify-content: flex-start;
+    margin-top: var(--spacing-lg, 1.5rem);
 }
 
 .crmtitle {