/* PG-ACTV /activate (P4 §3, WF-42): the device-link authorize flow. Tokens only
   (X-R11); the page is plain server-rendered forms and needs no script.
   The page is the sign-in for an app, so it sits in the auth card and takes the
   card's column, gap and form rhythm as they are; this file adds only what the
   flow shows that a sign-in form does not. */

/* The review question (ATZ-R04) heads the panel, one step under the card's h1. */
.atz__question {
    font-size: var(--font-size-1);
}

/* Each state's one statement: a gate, the approval, a used or declined code. */
.atz__lead {
    color: var(--text-primary);
    font-size: var(--font-size-1);
}

/* The pairing code, shown as large as the app shows it, so the two can be matched at a glance
   (Jeff, 2026-10-07). The numeric face keeps 0 and O, 1 and I apart. */
.atz__code {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-heading);
    letter-spacing: 0.08em;
    color: var(--text-primary);
    margin: 0;
}

.atz__code-check {
    color: var(--text-primary);
    margin: 0;
}

/* The approval-phishing guard (ATZ-R04): quiet, but never small print. */
.atz__caution {
    color: var(--text-secondary);
}

/* The build's version reads in the numeric face (F-R08). */
.atz .chp--version {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

/* The shared short-code input is sized for six digits; a pairing code is nine
   characters with its hyphen (F-R27: content-sized, never full-width). */
.atz__code-input {
    width: 15ch;
}

/* A machine name is a name-class field (F-R27: about 36ch), never wider than the card. */
.atz__name-input {
    width: 36ch;
    max-width: 100%;
}

/* "Not now" submits this form from the review's action row. The card lays out
   every form as a flex column, and an author display rule outranks the hidden
   attribute's, so without this the empty form would take a gap of its own. */
.atz form[hidden] {
    display: none;
}

/* "Signed in as … — use a different account" (ATZ-R03), set apart from the state above. */
.atz__account {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-hairline);
    color: var(--text-secondary);
}

/* The switch signs out, so it is a form button (P2F-R09); .lnk--inline gives it
   the link's look, and this takes away the button's own. */
.atz__switch {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* Machine names and addresses are the person's own strings: isolated in the
   markup (<bdi>, F-R15) and wrapped here rather than widening the card. */
.atz bdi {
    overflow-wrap: anywhere;
}

/* ATZ-R12: the offline door — quiet, and on every state. */
.atz__offline {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* MachineRow (P4 §4.1): one machine — its name, what is known about it, then the
   surface's controls. Shared by the at-cap panel, the account page and the admin
   views, so it carries no surface's layout but its own. */
.mrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
}

.mrow__what {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.mrow__name {
    color: var(--text-primary);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.mrow__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* A middle dot between facts, never before the first. */
.mrow__meta > span + span::before {
    content: "\00B7";
    margin-inline-end: var(--space-sm);
}

.mrow__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* The at-cap panel's machines (ATZ-R06), one to a ruled row. */
.atz__machines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.atz__machines > li {
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-hairline);
}

/* The swap button names the machine. A long name takes a line of its own rather
   than being cut (F-R15), so the label wraps and its own line breaks count. */
.atz__machines .btn {
    white-space: pre-line;
    text-align: center;
}

/* MCH (P4 §4, WF-43): the account page's "Licenses and machines" block. It is one
   of the page's blocks (.acc-block) and adds only what a license and its machines
   need. */
.mch__license {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-lg);
}

.mch__product {
    margin: 0;
    font-size: var(--font-size-1);
}

/* An ended license stays in the record: struck, and quieter than a running one. */
.mch__product--ended {
    color: var(--text-secondary);
    font-weight: 400;
}

.mch__kind {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    color: var(--text-secondary);
}

/* The stated limit is a fact, not a warning: the primary text color and nothing more. */
.mch__slots {
    color: var(--text-primary);
}

.mch__machines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mch__machines > li {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border-hairline);
}

.mch__more > summary {
    padding: var(--space-sm) 0;
    color: var(--text-secondary);
    cursor: pointer;
}

.mch__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mch__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-lg);
}

.mch__foot p {
    margin: 0;
}

/* The stand-in forms a POST needs (see the block): an author display rule would
   outrank the hidden attribute's. */
.mch form[hidden] {
    display: none;
}

/* PG-OFA /account/activate-offline (P4 §5, WF-44): the same card and the same
   panels; these are the three things only that door shows. */

/* The three steps (OFA-R01): the whole errand, read before any control. */
.atz__steps {
    margin: 0;
    padding-inline-start: 1.5em;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    color: var(--text-secondary);
}

/* The browser's own file control, never wider than the card. */
.atz__file-input {
    max-width: 100%;
    color: var(--text-primary);
    font: inherit;
}

/* Its "choose" button is the browser's; dressed as the site's secondary button
   so it does not read as a control from somewhere else. */
.atz__file-input::file-selector-button {
    min-height: 36px;
    margin-inline-end: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--divider);
    border-radius: var(--radius-control);
    background-color: transparent;
    color: var(--text-primary);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.atz__file-input::file-selector-button:hover {
    background-color: var(--surface-hover);
}

/* The download's own form: the button, then the name the file will have. */
.atz__download {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.atz__filename {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    overflow-wrap: anywhere;
}

/* F-R12: on a phone the actions go full-width at the touch size. */
@media (max-width: 767px) {
    .atz .action-row .btn,
    .atz__machines .mrow__actions,
    .atz__machines .btn,
    .atz__file-input {
        width: 100%;
        min-height: 44px;
    }

    /* WF-43: a machine's name and facts stack above its actions, which take the touch size. */
    .mch .mrow__actions {
        width: 100%;
        gap: var(--space-lg);
    }

    .mch .mrow__actions .lnk,
    .mch .action-row .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .mch .action-row .btn {
        width: 100%;
    }
}