/* Shared Postmarc form + account primitives.
   Loaded globally (App.razor) so the account/settings pages don't each re-declare
   them in scoped CSS. All classes are pm-* prefixed, so there is no collision with
   Bootstrap. Because these rules are global (not scoped), they match elements
   rendered by child components (InputText / EditForm) directly — no ::deep needed. */

/* ---------- Centered form shell ---------- */
.pm-edit {
    max-width: 620px;
    margin: 0 auto;
}
/* Auth pages (sign in / password) sit narrower than the profile edit forms, and
   carry the DS .wrap gutter inside the column (border-box, as the spec does). */
.pm-edit--narrow {
    box-sizing: border-box;
    max-width: 480px;
    padding: var(--spacing-16) var(--spacing-16) 120px;
}
@media (min-width: 860px) {
    .pm-edit--narrow { padding: var(--spacing-40) var(--spacing-40) 64px; }
}
.pm-edit__crumb {
    display: inline-block;
    margin-bottom: var(--spacing-12);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: none;
}
/* Default assumes a subheading follows; a page with no sub restores the gap on the title. */
.pm-edit__title {
    margin: 0 0 var(--spacing-8);
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--color-ink);
}
.pm-edit__sub {
    margin: 0 0 var(--spacing-24);
    max-width: 52ch;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-muted);
}
@media (min-width: 720px) {
    .pm-edit__title { font-size: 32px; }
}

/* ---------- Fields ---------- */
.pm-edit__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}
.pm-edit__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pm-edit__label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
}
.pm-edit__input {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    padding: 0 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-ink);
    background: var(--color-surface-hi);
    border: var(--border-sm) solid var(--color-rule);
    border-radius: var(--radius-10);
}
/* The element selector is load-bearing: AddressCapture emits `form-control` next
   to whatever InputClass it is given, and app.css forces a blue focus ring on
   .form-control:focus. `input.pm-edit__input` outranks it so address fields keep
   the teal ring the rest of the form uses. */
.pm-edit__input:focus,
input.pm-edit__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 var(--border-lg) var(--shadow-glow-color);
}
.pm-edit__input:disabled {
    color: var(--color-muted);
    background: var(--color-bg-deep);
    cursor: not-allowed;
}
/* "optional" qualifier inside a field label. */
.pm-edit__optional {
    margin-left: var(--spacing-6);
    font-weight: var(--font-weight-regular);
    font-size: 12px;
    color: var(--color-muted);
}

/* Inline checkbox + label row (e.g. "Remember me"). */
.pm-edit__check {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-ink);
    cursor: pointer;
}
.pm-edit__check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}
.pm-edit__hint {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--color-muted);
}
.pm-edit__hint a { color: var(--color-accent); }
.pm-edit__error {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--color-accent-italic);
}
/* Centered "← Back to sign in" style link under an auth form. The default is the
   orange italic accent (DS --accent2); --muted is the secondary/help variant. */
.pm-edit__back {
    margin: var(--spacing-16) 0 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 14px;
}
.pm-edit__back a {
    color: var(--color-accent-italic);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}
.pm-edit__back a:hover {
    text-decoration: underline;
}
.pm-edit__back--muted {
    margin-top: var(--spacing-10);
    font-size: 13px;
}
.pm-edit__back--muted a {
    color: var(--color-muted);
    font-weight: var(--font-weight-regular);
}
.pm-edit__summary {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-accent-italic);
}
/* Spacing wrapper for an <Alert> dropped between the sub/StatusMessage and the
   form on a Manage page (e.g. destructive-action warnings). */
.pm-edit__alert {
    margin-bottom: var(--spacing-16);
}

/* ---------- Password show/hide ---------- */
.pm-pw { position: relative; display: block; }
.pm-pw .pm-edit__input { padding-right: 44px; }
.pm-pw__toggle {
    position: absolute;
    top: 0;
    right: 6px;
    height: 48px;
    width: 34px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: var(--color-muted);
    cursor: pointer;
}
.pm-pw__eyeoff { display: none; }
.pm-pw--shown .pm-pw__eye { display: none; }
.pm-pw--shown .pm-pw__eyeoff { display: inline-flex; }

/* ---------- Toggle switch (from a checkbox) ---------- */
.pm-switch {
    position: relative;
    flex: none;
    display: inline-block;
    width: 44px;
    height: 26px;
}
.pm-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.pm-switch__slider {
    position: absolute;
    inset: 0;
    background: var(--color-rule);
    border-radius: var(--radius-full);
    transition: background 0.15s ease;
}
.pm-switch__slider::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-bg);
    transition: transform 0.15s ease;
}
.pm-switch input:checked + .pm-switch__slider { background: var(--color-accent); }
.pm-switch input:checked + .pm-switch__slider::before { transform: translateX(18px); }

/* ---------- Buttons (DS btn-p / btn-s) ---------- */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    padding: 14px 22px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.005em;
    color: var(--color-ink-on-accent);
    background: var(--color-accent);
    border: 0;
    border-radius: var(--radius-8);
    box-shadow: var(--shadow-primary);
    cursor: pointer;
    text-decoration: none;
    transition: transform 120ms ease;
}
.pm-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-primary-hover); }
.pm-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.pm-btn--block { width: 100%; }
.pm-btn--sm { padding: 10px 18px; font-size: 14px; }
.pm-btn--secondary {
    background: transparent;
    color: var(--color-ink);
    border: var(--border-md) solid var(--color-ink);
    box-shadow: none;
}
.pm-btn--secondary:hover { transform: none; box-shadow: none; background: var(--color-surface); }
.pm-btn--danger {
    background: transparent;
    color: var(--color-accent-italic);
    border: var(--border-md) solid var(--color-accent-italic);
    box-shadow: none;
}
.pm-btn--danger:hover { transform: none; box-shadow: none; }