/*!
 * GBZ420 utility-pages layer v1 - account forms and account dashboard
 * Written 2026-09-23 (Europe/London). Local copy only: web root C:\Codex\GBZ420\site
 * (gbz420.test, PrestaShop 8.2.8, theme warehouse, shop 1, languages fr / en / de).
 * Production gbz420.com is not touched by this file and holds no copy of it.
 *
 * Scope correction (2026-09-23, independent review): this layer must not touch a surface that
 * already owns its design. Every cart rule and both cart palette bridges were removed, and no
 * cart selector or cart variable name is left anywhere in this file; the cart stays entirely with
 * its own stylesheet and the shared shell. Only the account surfaces below remain.
 *
 * Contract : docs/sitewide-maquettes-20260921/CHARTE-GRAPHIQUE.md section 2.1, level B
 *            ("extension prudente": tokens, buttons, forms, hairlines, display titles) and the
 *            acceptance list of section 9. Level A families stay untouched.
 * Audit    : docs/sitewide-maquettes-20260921/sitewide-charter-audit-20260923/style-coverage.md
 *            section 3 (sign in / registration / password still on the stock theme markup).
 * Tokens   : assets/css/gbz-tokens.css - declared once on `body`, consumed here, never redeclared.
 *
 * Body ids in scope, each observed on the served HTML on 2026-09-23 in fr / en / de:
 *   #authentication  /fr/connexion, /en/login, /de/anmeldung. A guest asking /mon-compte is
 *                    served by the same controller, so these rules cover that entry point too.
 *   #registration    /fr/inscription, /en/registration, /de/Registrierung
 *   #password        /{fr,en,de}/index.php?controller=password (forgot and reset states)
 *   #my-account      customer dashboard, source-derived from templates/customer/page.tpl only:
 *                    no anonymous render of it exists, so nothing here is claimed as rendered.
 *
 * Deliberately out of scope: #cart and its own stylesheet gbz-cart-v1.css, checkout (#checkout),
 * order (#order), order confirmation, guest tracking, every payment callback, and every
 * transactional action or button.
 *
 * Rules for this file:
 *  1. Presentation only: colour, type face, case, border colour and radius. No position,
 *     visibility, float, flex-basis or grid rule, no width and no border-width change: nothing
 *     here can move an element to another track or hide content. No !important.
 *     Amendment (2026-09-24, account-charter pass, audited in
 *     docs/sitewide-maquettes-20260921/qa-account-charter-20260924): section 4 may set a
 *     minimum target height and the vertical alignment of an existing control, because charter
 *     11 asks for a 44 x 44 px touch target and the two social controls of the module were 34
 *     and 32 px tall with the label pinned to the top. Those rules keep every outer box width,
 *     the icon position, the brand fills and the label text unchanged; `inline-flex` is used only
 *     to centre the existing single line inside the taller box, never to re-flow a track.
 *     Section 6 goes further and changes no box at all: it centres an invisible overlay on the
 *     existing password-visibility button so its pointer target reaches 44 x 44 px while the
 *     button keeps its measured size, its icon, its focus ring and its own click handler.
 *  2. body + id scoping, so the file wins on specificity instead of on load order. These account
 *     templates emit no family stylesheet, so no competing family file is involved.
 *  3. No token is redeclared and no legacy green (#075F39 / #087747 / #159463) is re-used: every
 *     colour below resolves to var(--gbz-*).
 */

/* ----------------------------------------------------------------------------------------------
 * 1. Titles - display face, uppercase, 30 px floor
 *    Charter 4.3 rule 1 (H1 and H2 in uppercase display) and 4.4 / criterion 9.10 (no page title
 *    under 30 px at a 390 px viewport). 2.5vw keeps the desktop size close to the
 *    calc(1.375rem + 1.5vw) = 41 px the theme already rendered, while the clamp floor replaces the
 *    22 px the account titles measured at 390 px.
 * ------------------------------------------------------------------------------------------- */

body:is(#authentication, #registration, #password, #my-account, #identity, #addresses, #history, #order-slip) #main .page-title {
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift", "Arial Narrow", "Helvetica Neue", Karla, sans-serif;
    font-size: clamp(30px, 2.5vw, 42px);
    line-height: 1.05;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------------------------------------
 * 2. Account surfaces: #authentication, #registration, #password
 *
 * No panel is added here on purpose. The theme already draws #content as a hairline panel
 * (`.page-authentication #content, .page-customer-account #content` in theme.css: border 1 px,
 * padding 1rem, margin auto) and gbz-tokens.css section 9 already re-colours that border to
 * --gbz-hairline-color and flattens the radius, so the visible box already follows the charter.
 * A second border around the form would nest two boxes inside each other.
 * This section only closes the palette and the type differences left inside that panel.
 * ------------------------------------------------------------------------------------------- */

/* Helper text keeps the muted role of the charter instead of the theme's opacity .8 on body ink. */
body:is(#authentication, #registration, #password) #main :is(.form-control-comment, .help-block, .send-renew-password-link) {
    color: var(--gbz-muted);
    opacity: 1;
}

/* The theme ships the Bootstrap link colour #2fb5d2 on these pages; the charter has no cyan and
   forbids lime as text, so links take the ink role and darken on hover and focus. */
body:is(#authentication, #registration, #password) #main a {
    color: var(--gbz-ink);
}

body:is(#authentication, #registration, #password) #main a:hover,
body:is(#authentication, #registration, #password) #main a:focus {
    color: var(--gbz-black);
}

/* Custom checkbox and radio: the theme outlines both with rgba(160,160,160,.25), which is
   invisible next to the #D0D0D0 border gbz-tokens.css gives the text fields in the same form.
   The checked radio had no fill at all in the bundle. Both take the black pill role. */
body:is(#authentication, #registration, #password) #main .custom-checkbox input[type="checkbox"] + span,
body:is(#authentication, #registration, #password) #main .custom-radio {
    border-color: var(--gbz-hairline-color-strong);
}

body:is(#authentication, #registration, #password) #main .custom-checkbox input[type="checkbox"]:checked + span {
    background-color: var(--gbz-black);
    border-color: var(--gbz-black);
    color: var(--gbz-white);
}

body:is(#authentication, #registration, #password) #main .custom-radio input[type="radio"]:checked + span {
    background-color: var(--gbz-black);
}

/* The real input is transparent by design, so the focus ring has to sit on the painted control. */
body:is(#authentication, #registration, #password) #main .custom-checkbox input:focus-visible + span,
body:is(#authentication, #registration, #password) #main .custom-radio input:focus-visible + span {
    outline: 2px solid var(--gbz-black);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------------------------
 * 3. Account dashboard - customers only
 *    A guest asking /mon-compte is served the authentication page, so these rules are derived from
 *    templates/customer/page.tpl and theme.css and are NOT claimed as visually verified. They only
 *    recolour the side-link hairlines and the link colour; the panel of that page is drawn by the
 *    theme (.my-account-page-content-wrapper) and already re-coloured by gbz-tokens.css section 9.
 * ------------------------------------------------------------------------------------------- */

body#my-account #main a {
    color: var(--gbz-ink);
}

body#my-account #main .my-account-page-content-wrapper .my-account-side-links,
body#my-account #main .my-account-page-content-wrapper .my-account-side-links > a {
    border-color: var(--gbz-hairline-color);
}

/* ----------------------------------------------------------------------------------------------
 * 4. Interaction targets - the three account-entry pages
 *    Charter 11: a CTA pill is at least 40 px high on desktop and a touch target at least
 *    44 x 44 px. Measured on 2026-09-24 at 1440 and 390 in fr / en / de before this section:
 *    #submit-login 106x35 (91x30 at 390), the registration submit 110x35 (at 390: 30 px), and
 *    #send-reset-link 258x35 (at 390: 30 px). Only the height floor is added: the theme's own
 *    padding, radius, colours, hover, focus ring, disabled rendering and the form action are
 *    untouched, and no link is restyled into a button.
 * ------------------------------------------------------------------------------------------- */

body:is(#authentication, #registration, #password) #main .form-footer button[type="submit"],
body:is(#authentication, #registration, #password) #main button#submit-login,
body:is(#authentication, #registration, #password) #main button#send-reset-link {
    min-height: 44px;
}

/* ----------------------------------------------------------------------------------------------
 * 5. Social controls - the two module buttons of #fbpsc on sign-in and registration
 *    The module draws two inline-block `<p>` controls (classes btn-social / btn-shadow):
 *    "Google" measured 275x34 at 1440 and 322x34 at 390 with padding 7px and no border;
 *    "Facebook" measured 275x32 / 322x32 with padding 5px and a 1 px border. Same role, two
 *    different heights, and the label of the two is not on the same x. Their single line is
 *    centred in a 44 px box, the label returns to the 44 px left inset the module's own
 *    `.btn-social` rule declares (the brand-specific rules had overridden it to 8 px and 5 px),
 *    so both labels share one x. The artwork is untouched: the icon span is absolutely
 *    positioned, keeps its 30x20 box, its 20 px left offset and its brand background, and is
 *    only re-centred vertically with the taller box; the Google plate stays white, the Facebook
 *    plate keeps rgb(59, 89, 152). Nothing is hidden, clipped or re-coloured here.
 * ------------------------------------------------------------------------------------------- */

body:is(#authentication, #registration) #fbpsc .bt-btn-sl {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
    padding-left: 44px;
    text-align: left;
}

body:is(#authentication, #registration) #fbpsc .bt-btn-sl > :first-child {
    bottom: auto;
    top: calc(50% - 10px);
}

/* ----------------------------------------------------------------------------------------------
 * 6. Password visibility toggle - hit area only, no visual change
 *    The theme renders the eye as `button.btn[data-action="show-password"]` inside
 *    `.input-group-append`. Measured 2026-09-24: 54.5 x 29 px at 1440 and 47 x 29 px at 390, the
 *    button is already `position: relative`, `overflow: visible` and paints no ::before/::after
 *    of its own, so its width clears the 44 px floor and only the height is short.
 *    The visible button is left exactly as it is; an invisible 44 px-tall overlay is centred on
 *    it, which turns the real hit area into 54.5 x 44 / 47 x 44 (measured with
 *    elementFromPoint and a real click on the top and bottom edges). The overlay is
 *    transparent, has no border and no background, so the eye icon, the field and the label look
 *    unchanged. It spans only the button's own x-range, which stays clear of the field's text
 *    ink (13 px at 1440, 11 px at 390), so no input text is covered; it sits over the label box
 *    exactly where the button already did (the button keeps its z-index). The focus ring is
 *    painted on the button, not on the overlay, and the toggle stays the theme's own JS: the
 *    click target is still the same button.
 *    The overlay is sized against the button's border box (`calc(100% + 2px)`), because an
 *    absolutely positioned child resolves its 100 % against the padding box: that 1 px shim on
 *    each side is what keeps the two extreme corners of the target on the button instead of
 *    letting them fall through to the form group.
 * ------------------------------------------------------------------------------------------- */

body:is(#authentication, #registration, #password) #main .input-group .btn[data-action="show-password"]::after {
    background: none;
    border: 0;
    content: "";
    height: 44px;
    left: 50%;
    min-width: 44px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 2px);
}

/* ----------------------------------------------------------------------------------------------
 * Rollback: delete this file and remove its single include from templates/_partials/head.tpl.
 * It is not referenced by any other template, so nothing else has to be reverted. The cart, the
 * checkout and every family already styled keep working without it.
 * ------------------------------------------------------------------------------------------- */