/* Shared form styles for the account and contact pages (contact, register, verify, signin, forgot-password,
   reset-password, account).
   Pill fields, labels, errors, checkboxes, submit button and the answer views without a frame follow
   the contact form of akos-chem.de (AKos-GmbH/akoa src/routes/contact.tsx), DECISIONS D31, D32. */

/* Form card */
/* No frame around the form cards (Nataliya, 2026-11-05, D45): a white card on the paper background. */
.ak-form-card { background: var(--ak-surface); border: 0; border-radius: var(--ak-radius-panel); padding: 1.5rem 1.25rem 1.75rem; }
@media (min-width: 768px) { .ak-form-card { padding: 2.25rem 2.25rem 2.5rem; } }
/* Thank-you and failure views replace the whole form column without a frame, as on akos-chem.de
   (AKos-GmbH/akoa src/routes/contact.tsx, Curator 2026-10-10). */
.ak-form-card.is-answer { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ak-form { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.ak-row { display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .ak-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Title | first name | last name in one row from 600 px (registration, My Account). */
@media (min-width: 600px) { .ak-row--name { grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1fr); } }

.ak-fld label, .ak-fld .ak-fld__label { display: block; margin-bottom: .4rem; font-size: 14px; font-weight: 600; color: var(--ak-ink); }
.ak-opt { font-weight: 400; color: var(--ak-muted); }
.ak-fld input[type=text], .ak-fld input[type=email], .ak-fld input[type=tel], .ak-fld input[type=password], .ak-fld select, .ak-fld textarea {
    width: 100%; height: var(--ak-ctl-h); padding: 0 1.125rem; border: 1px solid var(--ak-accent-line); border-radius: 999px; background: var(--ak-field-bg);
    color: var(--ak-field-fg); font: 400 15px/1.3 var(--ak-font-sans); transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.ak-fld select { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer;
    background: var(--ak-field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%238a1e1e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1.125rem center; }
.ak-fld textarea { min-height: 9.5rem; padding: .875rem 1.125rem; border-radius: 18px; resize: vertical; line-height: 1.55; }
/* Line fields on every form (Nataliya 2026-11-05, D45): label above on the left in regular AKos red, only a line below the field, no frame. */
.ak-main .ak-fld input[type=text], .ak-main .ak-fld input[type=email], .ak-main .ak-fld input[type=tel], .ak-main .ak-fld input[type=password], .ak-main .ak-fld select, .ak-main .ak-fld textarea {
    min-height: 40px; padding: 0 0 .25rem; border: 0; border-bottom: 1px solid var(--ak-field-line); border-radius: 0; background-color: transparent; }
.ak-main .ak-fld label, .ak-main .ak-fld .ak-fld__label, .ak-main .ak-roles legend { margin-bottom: .125rem; font-weight: 400; color: var(--ak-accent-fg); }  /* labels regular, AKos red (Nataliya) */
.ak-main .ak-fld select { padding-right: 1.75rem; background-position: right .25rem center; }
/* Line fields sit on the card, not on a white oval: the typed text uses the page ink, so it stays readable at night
   (it was #0b0d12 on the dark card, D74). The open list of a select keeps dark text on white. */
.ak-main .ak-fld input[type=text], .ak-main .ak-fld input[type=email], .ak-main .ak-fld input[type=tel], .ak-main .ak-fld input[type=password], .ak-main .ak-fld select, .ak-main .ak-fld textarea { color: var(--ak-ink); }
.ak-main .ak-fld select option { color: var(--ak-field-fg); background: var(--ak-field-bg); }
/* A select still on its empty first option ("Select one…") reads as a hint, like the placeholder of a text field; at night
   the chevron is milk instead of the brand red, which disappeared on the dark card (Nataliya, 2026-11-07). */
.ak-main .ak-fld select:has(option[value=""]:checked) { color: var(--ak-muted); }
html.dark .ak-main .ak-fld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23f3ebdd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ak-main .ak-fld textarea { min-height: 6.5rem; padding: .375rem 0; border-radius: 0; }
.ak-main .ak-fld input:hover, .ak-main .ak-fld select:hover, .ak-main .ak-fld textarea:hover { border-bottom-color: var(--ak-ink); }
.ak-main .ak-fld input:focus, .ak-main .ak-fld select:focus, .ak-main .ak-fld textarea:focus { border-bottom-color: var(--ak-accent-fg); box-shadow: 0 1px 0 var(--ak-accent-fg); }
.ak-main .ak-fld [aria-invalid=true] { border-bottom-color: var(--ak-error) !important; box-shadow: 0 1px 0 var(--ak-error); }
.ak-main .ak-row { column-gap: 2rem; }
.ak-main .ak-fld .ak-pw input { padding-right: 5.25rem; }
.ak-main .ak-fld input[readonly] { background-color: transparent; }
.ak-fld input[readonly] { background: var(--ak-paper); color: var(--ak-text-2); border-color: var(--ak-hairline); }
.ak-fld input:hover, .ak-fld select:hover, .ak-fld textarea:hover { border-color: #5e1414; }
.ak-fld input:focus, .ak-fld select:focus, .ak-fld textarea:focus { outline: none; border-color: var(--ak-accent-fg); box-shadow: 0 0 0 1px var(--ak-accent-line); }  /* focus: a thicker red line, no pink halo (D39) */
.ak-fld [aria-invalid=true] { border-color: var(--ak-error) !important; box-shadow: 0 0 0 2px var(--ak-error); }
.ak-fld__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .375rem; font-size: 12px; color: var(--ak-muted); }
.ak-count { font-variant-numeric: tabular-nums; margin-left: auto; }
/* Error tooltips: a red bubble under the field it belongs to, pointing at it (Nataliya, 2026-11-05).
   In the flow, not floating, so it never covers the next field; it appears with a short pop. */
.ak-err { position: relative; width: fit-content; max-width: 100%; margin: .625rem 0 0; padding: .5rem .8rem; border-radius: var(--ak-radius-sm);
    background: var(--ak-surface); color: var(--ak-ink); font-size: 13px; font-weight: 600; line-height: 1.4; box-shadow: 0 2px 10px var(--ak-shadow), 0 0 0 1px var(--ak-hairline); animation: ak-pop .18s ease-out; }   /* card background, black text (milk at night); the red line under the field marks the error (A38, Nataliya 2026-11-07) */
.ak-err::before { content: ""; position: absolute; top: -5px; left: 1.125rem; width: 10px; height: 10px; background: inherit; border-radius: 2px; transform: rotate(45deg); box-shadow: -1px -1px 0 0 var(--ak-hairline); }
.ak-err:empty { display: none; }
.ak-check + .ak-err::before { left: .25rem; }
.ak-fld__meta .ak-err { margin-top: .25rem; }
@keyframes ak-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ak-err { animation: none; } }

.ak-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; border: 0; margin: 0; padding: 0; }
@media (min-width: 600px) { .ak-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ak-roles legend { padding: 0; margin-bottom: .5rem; font-size: 14px; font-weight: 600; }
.ak-check { display: flex; align-items: flex-start; gap: .625rem; min-height: 40px; padding-top: .5rem; font-size: 14px; line-height: 1.45; color: var(--ak-text-2); cursor: pointer; }
.ak-check input { flex: none; width: 18px; height: 18px; margin: .1rem 0 0; accent-color: var(--ak-accent-fg); cursor: pointer; }
.ak-check a { color: var(--ak-accent-fg); text-decoration: underline; text-underline-offset: 2px; }

.ak-hint { margin: -.125rem 0 .5rem; font-size: 13px; line-height: 1.45; color: var(--ak-muted); }
.ak-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ak-submit { justify-self: start; }
.ak-submit svg { transition: transform .2s ease-out; }
.ak-submit:hover svg { transform: translateX(3px); }

/* Thank-you view */
.ak-done p { margin: 1rem 0 0; color: var(--ak-muted); font-style: italic; line-height: 1.65; }
.ak-done p + p { margin-top: .5rem; }
.ak-done .ak-actions { margin-top: 2rem; }
.ak-done .ak-btn svg { transition: transform .2s ease-out; }
.ak-done .ak-btn:hover svg { transform: translateX(3px); }
.ak-done__mail { color: var(--ak-accent-fg); font-style: normal; font-weight: 500; }
.ak-done p.ak-done__small { margin-top: 1.5rem; font-size: 14px; }
.ak-link { padding: 0; border: 0; background: none; color: var(--ak-accent-fg); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ak-done__ref { color: var(--ak-ink); font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.ak-done .ak-demo { margin-top: 1.5rem; font-style: normal; padding: .75rem 1rem; border-radius: var(--ak-radius-sm); background: var(--ak-header); color: #fff; font-size: 13px; }

/* Password field with a Show / Hide button inside the pill (register.html). */
.ak-pw { position: relative; }
.ak-fld .ak-pw input { padding-right: 5.25rem; }
.ak-pw__toggle { position: absolute; top: 50%; right: .375rem; transform: translateY(-50%); min-width: 44px; height: 36px; padding: 0 .875rem; border: 0; border-radius: 999px;
    background: transparent; color: var(--ak-accent-fg); font: 600 13px/1 var(--ak-font-sans); cursor: pointer; transition: background-color .15s ease-out; }
.ak-pw__toggle:hover { text-decoration: underline; text-underline-offset: 2px; }
.ak-pw__toggle:focus-visible { outline: 2px solid var(--ak-accent-fg); outline-offset: 1px; }

/* Single form column under the hero (register.html, verify.html). */
.ak-narrow { max-width: 44rem; margin: 0 auto; padding-bottom: var(--ak-gap); }
.ak-narrow h2 { font-size: clamp(20px, 5.5vw, 28px); line-height: 1.2; }
@media (min-width: 768px) { .ak-narrow h2 { font-size: 1.75rem; line-height: 1.15; } }   /* 28 px, as Search, Selection and Order (A36, Nataliya 2026-11-07); was up to 34 px */
.ak-narrow [hidden] { display: none !important; }
.ak-form-foot { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--ak-hairline); font-size: 14px; color: var(--ak-text-2); }
.ak-form-foot a { color: var(--ak-accent-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ak-hint--below { margin: .375rem 0 0; }
/* Answer views get focus for screen readers only; they are not controls, so no focus frame. */
.ak-done:focus { outline: none; }

/* Form-level error (wrong sign-in, server refusal) in the same red as the field tooltips (D37). */
.ak-form-err { margin: 0; padding: .75rem 1rem; border-radius: var(--ak-radius-sm); background: var(--ak-surface); color: var(--ak-ink); box-shadow: 0 2px 10px var(--ak-shadow), 0 0 0 1px var(--ak-hairline); font-size: 14px; font-weight: 500; line-height: 1.5; }
.ak-form-err:empty { display: none; }
.ak-form-err a { color: #fff; text-decoration: underline; }
/* Confirmation after saving (My Account): white with an AKos red line, no tinted fill. */
.ak-form-ok { margin: 0; padding: .75rem 1rem; border: 1px solid var(--ak-accent-line); border-radius: var(--ak-radius-sm); background: var(--ak-surface); color: var(--ak-accent-fg); font-size: 14px; font-weight: 600; line-height: 1.5; }
.ak-form-ok:empty { display: none; }

/* Short forms (Sign In, password reset). */
.ak-narrow--sm { max-width: 32rem; }
/* Label row with a link on the right ("Forgot password?"). */
.ak-fld__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.ak-fld__top label { margin-bottom: 0; }
.ak-fld__top a { color: var(--ak-accent-fg); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ak-fld input[readonly]:hover, .ak-fld input[readonly]:focus { border-color: var(--ak-hairline); box-shadow: none; }
.ak-hint a { color: var(--ak-accent-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Sign In: the button and "Forgot password?" in one line. */
.ak-si__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
@media (max-width: 599px) { .ak-si__actions { flex-direction: column; } }   /* phones: Sign In centred, the link below it */
.ak-si__actions a { color: var(--ak-accent-fg); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Account pages: an answer that replaces the form (link invalid, password changed, e-mail sent, account created,
   signed in) is centred: heading, text and buttons, as the empty Order (D61, D74). */
#si-card.is-answer .ak-done, #rg-card.is-answer .ak-done, #fp-card.is-answer .ak-done, #rp-card.is-answer .ak-done, #vf-card.is-answer .ak-done, #rv-card.is-answer .ak-done { text-align: center; }
#si-card.is-answer .ak-actions, #rg-card.is-answer .ak-actions, #fp-card.is-answer .ak-actions, #rp-card.is-answer .ak-actions, #vf-card.is-answer .ak-actions, #rv-card.is-answer .ak-actions { justify-content: center; }