/**
 * /new-dealer/, account design system v2.
 *
 * WHAT THIS FILE IS NOT. It does not restyle inputs, labels, hints, buttons or alerts. Those are
 * .enttec-input, .enttec-label, .enttec-help, .enttec-btn--primary and .enttec-alert, defined in
 * the theme's enttec-account-ui.css, and the markup uses them directly.
 *
 * The first cut of this file re-implemented all of them from the --acct-* tokens under an endui-
 * prefix. It looked close but was not the design system: the inputs came out at 15px/40px with
 * the strong focus ring, where the real component is 14px/42px with --acct-ring-soft. Copying
 * tokens is not the same as using components, and the difference showed.
 *
 * What remains here is only the things the account DS has no component for, because it was built
 * for single-column account screens and this is a wide multi-column form:
 *
 *   1. the page shell (full-bleed grey, centred column)
 *   2. the card, its numbered sections and section headers
 *   3. the field grid, and the one override it needs
 *   4. the radio choice cards
 *   5. the email adornment, and the actions bar
 *
 * Loaded after enttec-account-ui so the overrides below win where they need to.
 */

/* ONE BACKGROUND: WHITE.
   This page used to tint the content area grey, which meant the white theme header above it
   and the grey content below met at a visible seam, and the ~113px the header reserves for its
   (now suppressed) title band read as a stray band between two tones.

   Kim's call, and the right one: drop the tint. With the page all one colour there is no seam
   to align and no gap to hide, so the whole problem goes away rather than being papered over.
   The form card still reads as a card because it carries its own border and shadow.

   Nothing is painted here at all now; the theme's own white is left alone. */


/* 16px top, not 40: the theme header already leaves ~113px above this, and stacking another
   40 on top pushed the heading a long way down the page. */
/* STICKY FOOTER. On the short states (the two notices) the content is only ~300px tall, so
   the footer floated in the middle of the screen with white below it.

   Flexing the body and letting #container grow pushes the footer to the bottom on a short page
   and leaves a long page completely unaffected, which a min-height in viewport units would not.

   Safe to flex the body here: #navbar is position:absolute so it is out of flow, and the
   remaining children (#container, footer) are already in normal document order. #container is
   itself display:flex with the default stretch, so main fills the height it gains.
   Scoped to this mu-plugin's body class, so no other page changes. */
body.enttec-dealers-ui-page {
    display: flex;
    flex-direction: column;
    /* height:auto is the load-bearing line. common.min.css sets `body, html { height: 100% }`,
       and a definite height overrides min-height entirely, so the 100vh below was being
       ignored and the body sized to its content instead of the viewport. */
    /* !important, deliberately and narrowly. Something outside this stylesheet sets
       `min-height: 100%` on body, and 100% against an auto-height html collapses to nothing.
       It is not reachable through the CSSOM (cross-origin sheets throw on cssRules), so it
       cannot be out-specified by selector. Two declarations on one scoped body class is a
       smaller cost than a magic calc() of header and footer heights that would rot. */
    height: auto !important;
    min-height: 100vh !important;
}
body.enttec-dealers-ui-page > #container { flex: 1 0 auto; }
body.enttec-dealers-ui-page > footer { flex-shrink: 0; margin-top: auto; }

.endui {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 40px 80px;
}

/* ---------- head ---------- */
.endui-head { margin-bottom: 28px; }
.endui h1 {
    font-family: var(--acct-font-head);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    color: var(--acct-text);
}
.endui-lede {
    font-size: 17px;
    line-height: 1.5;
    color: var(--acct-text-3);
    max-width: 62ch;
    margin: 0;
}

/* ---------- card and sections ---------- */
.endui-card {
    background: var(--acct-surface);
    /* A touch stronger than --acct-border-soft: on a tinted page the soft border was enough,
       but white on white needs the edge to carry the card on its own. */
    border: 1px solid var(--acct-border);
    border-radius: var(--acct-radius-lg);
    box-shadow: var(--acct-shadow-sm);
    overflow: hidden;
}
.endui-section { padding: 26px 30px; border-bottom: 1px solid var(--acct-border-soft); }
.endui-section:last-of-type { border-bottom: 0; }
.endui-section-head { margin-bottom: 20px; }
.endui-section-head h2 {
    font-family: var(--acct-font-head);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.005em;
    margin: 0 0 4px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--acct-text);
}
/* A STEP MARKER, NOT A TAG. This was a pill with horizontal padding, so a single digit sat in a
   wide lozenge that read as a label rather than a position in a sequence. Fixed square box plus
   a 50% radius makes it a true circle at any digit width, and 22px matches the 17px heading's
   first line box so flex-start keeps it on that line even when the heading wraps. Baseline
   alignment was what made it sit low: it lined up 12px text against 17px text. */
.endui-step {
    font-family: var(--acct-font-body);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: var(--acct-info);
    background: var(--acct-info-tint);
    border: 1px solid var(--acct-info-line);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.endui-section-head p { margin: 0; font-size: 14px; color: var(--acct-text-muted); max-width: 60ch; }

/* ---------- field grid ---------- */
.endui-grid { display: grid; gap: 18px; }
.endui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.endui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.endui-span-2 { grid-column: span 2; }

/* THE ONE OVERRIDE THE DS NEEDS HERE. #enttec-account .enttec-field caps at max-width: 380px,
   which is right for the single-column account screens it was written for and wrong inside a
   three-column grid, where it leaves each field short of its own cell. Specificity has to match
   the DS's #enttec-account prefix to win. */
#enttec-account .endui-grid .enttec-field { max-width: none; }

/* The required marker. The DS label has no variant for it. */
#enttec-account .enttec-label .req { color: var(--acct-danger); font-weight: 400; margin-left: 2px; }

/* ---------- email adornment ---------- */
.endui-input-group { display: flex; }
.endui-adorn {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--acct-surface-2);
    border: 1px solid var(--acct-border);
    border-right: 0;
    border-radius: var(--acct-radius) 0 0 var(--acct-radius);
    color: var(--acct-text-muted);
    font-size: 14px;
}
#enttec-account .endui-input-group .enttec-input { border-radius: 0 var(--acct-radius) var(--acct-radius) 0; }

/* ---------- radio choice cards ---------- */
/* fieldset carries the group semantics for the radios, so it has to be stripped back to looking
   like nothing. min-width is the one that bites: a fieldset defaults to min-width: min-content
   and will not shrink inside a grid or flex track, so a long option pushes the column wider
   instead of wrapping. The legend needs display:block and its padding zeroed because a legend is
   rendered outside normal flow by default and keeps browser padding otherwise. */
.endui-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.endui-legend { display: block; width: 100%; padding: 0; }

.endui-choices { display: flex; flex-direction: column; gap: 10px; }
.endui-choice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid var(--acct-border);
    border-radius: var(--acct-radius);
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color var(--acct-dur) var(--acct-ease), background var(--acct-dur) var(--acct-ease);
}
/* SELECTED HAS TO BEAT HOVER. Before this there was no checked rule at all: hover tinted the
   whole card, selection was carried by a 16px dot, so running the mouse down the list made an
   unselected option look more chosen than the actual answer. Selected now owns the strongest
   treatment (blue border, tint, darker label) and hover is only a border change, so the
   hierarchy reads correctly while the pointer is moving. */
.endui-choice:has(input:checked) { border-color: var(--acct-blue); background: var(--acct-info-tint); }
.endui-choice:has(input:checked) .endui-choice-label { color: var(--acct-text); }
.endui-choice:hover { border-color: var(--acct-blue); }
/* Focus stays a ring, so it composes with the selected state instead of replacing it: a keyboard
   user needs to see which one is focused AND which one is chosen at the same time. */
.endui-choice:focus-within { border-color: var(--acct-blue); box-shadow: var(--acct-ring-soft); }

/* THE DS ALREADY DRAWS THIS RADIO, SO OVERRIDE IT, DO NOT REDRAW IT.
   enttec-account-ds2.css styles every bare radio at
   #enttec-account.acct-ds2 input[type="radio"], which outranks any plain .endui-choice rule, and
   it draws the dot with ::after. An earlier attempt here added its own ::before dot: the DS rule
   still won on sizing, so the only thing that actually landed was a SECOND dot. Both are flex
   items in the same centred row, so each got squashed from 8px to 4.625px and sat beside the
   other, which is the lopsided two-tone blob that started this. Measured in Chrome, not guessed.

   So: no ::before here, match the DS's specificity, and restyle its ::after.

   Ring rather than the DS's filled blue disc, deliberately. The card already carries the
   selected state (blue border plus tint), so filling the control solid blue as well says the
   same thing twice and loses the dot against it. This does mean the dealer form's radio differs
   from the account screens' radio. That is the one place this file breaks house style, and it is
   scoped to .endui-choice so nothing else moves.

   flex: none on the dot is not optional: without it the dot is a shrinkable flex item and
   collapses to an oval the moment anything else shares the line. */
#enttec-account.acct-ds2 .endui-choice input[type="radio"] {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid var(--acct-border);
    background: #fff;
    margin: 1px 0 0;
    transition: border-color var(--acct-dur) var(--acct-ease);
}

/* WORDPRESS CORE DRAWS ITS OWN DOT, AND THAT IS THE ORIGINAL BUG.
   wp-includes/css/dist/components/style.css (forms.min.css) ships
   input[type="radio"]:checked::before with a 0.5rem dot and 0.1875rem margins. It is admin
   styling but it loads on the front end for anyone with the admin bar, which is every member of
   staff who reviews this page. The DS control is display:flex, so core's ::before and the DS's
   ::after both become flex items in the same 14px row: 2.25px plus 3.75px of margin plus the
   8px dot fills the row exactly, which pins our dot hard against the right edge and reads as a
   half moon. Confirmed by reading the rule out of document.styleSheets, not by guessing.

   Two defences, because one is not enough. Hide core's dot in this scope, and take our own dot
   out of flex flow entirely so that no pseudo-element anyone adds later can push it off centre
   again. */
#enttec-account.acct-ds2 .endui-choice input[type="radio"]::before { display: none; }
#enttec-account.acct-ds2 .endui-choice input[type="radio"]:checked {
    background: #fff;
    border-color: var(--acct-blue);
}
#enttec-account.acct-ds2 .endui-choice input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acct-blue);
}

.endui-choice-label { font-size: 14px; color: var(--acct-text-2); font-weight: 600; }
.endui-choice-sub { display: block; font-size: 13px; color: var(--acct-text-muted); font-weight: 400; margin-top: 1px; }
/* Full width and three lines deep, at Kim's direction 2026-09-11. It was a single-line input
   indented to line up with the option labels, which made it read as a stray fourth choice and
   gave no room to actually answer.

   The indent is gone, so width can safely be 100% again: the overflow this rule used to cause
   was 100% PLUS a left margin, and with no margin there is nothing to overflow by. Do not
   reintroduce an indent without going back to calc().

   The handler's sanitiser moved to sanitize_textarea_field in the same change. Leave it there:
   sanitize_text_field silently flattens every newline, so a three-line answer would arrive as
   one run-on line and nobody would know why. */
.endui-choice-other { margin: 10px 0 0; width: 100%; }

/* ---------- actions ---------- */
.endui-actions {
    padding: 22px 30px;
    background: var(--acct-surface-2);
    border-top: 1px solid var(--acct-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.endui-actions-note { font-size: 13px; color: var(--acct-text-muted); max-width: 48ch; margin: 0; }

/* ---------- alerts ----------
   .enttec-alert supplies the box. Only the icon and the inner type need saying, because the DS
   alert is written for a single line of text and these carry a heading too. */
.endui-alert-ico {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    /* evenodd: each icon is a disc plus an inner mark as a second subpath, and the default
       nonzero rule fills that mark instead of knocking it through, giving a solid circle. */
    fill-rule: evenodd;
}
#enttec-account .enttec-alert h2 {
    font-family: var(--acct-font-head);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 3px;
    color: inherit;
}
#enttec-account .enttec-alert p { margin: 0; color: var(--acct-text-3); }
#enttec-account .enttec-alert a { color: var(--acct-blue); font-weight: 600; }

@media (max-width: 720px) {
    .endui { padding: 24px 14px 60px; }
    .endui-grid--2, .endui-grid--3 { grid-template-columns: 1fr; }
    .endui-span-2 { grid-column: auto; }
    .endui-section { padding: 22px 18px; }
    .endui-actions { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    /* The dot still appears and the border still turns blue, so the checked state never depended
       on the scale animation alone. */
    .endui-choice,
    #enttec-account.acct-ds2 .endui-choice input[type="radio"] { transition-duration: 0.001ms; }
}