/*
 * AIE Solicitor Directory: shared front-end design system.
 *
 * Built on the Abuse Injury Group (AIG) visual language
 * (docs/DESIGN_SYSTEM.md, design-reference/notes/aig-visual-language.md).
 * Depends on tokens.css. Every rule is scoped to the plugin's component root
 * (.aie-ui), so the theme's own header, footer and content are never
 * restyled. The plugin's stylesheets print after the theme's, so a rule here
 * wins any tie with a theme rule of the same specificity.
 *
 * Surface stylesheets (directory.css, firm-card.css, account.css, portal.css,
 * article.css, quick-exit.css) build on these shared components.
 */

/* ------------------------------------------------------------------ */
/* Root and base typography                                            */
/* ------------------------------------------------------------------ */

.aie-ui {
    /* Kadence sets `word-break: break-word` on .entry-content, which a panel
       dropped into a page inherits. By CSS Text 3 that legacy value is exactly
       `word-break: normal` plus `overflow-wrap: anywhere`, and `anywhere` is
       the part that does the damage: it counts towards a grid item's minimum
       width, so a card is free to shrink below its longest word and the word
       is chopped in the middle. That is the defect seen on two other sites.

       `break-word` instead. It still breaks a word that genuinely cannot fit,
       but it keeps whole words in the minimum width, so a column stays as wide
       as its longest word rather than cutting one up to fit.

       Nothing on a card is a long unbroken string: the buttons carry fixed
       labels ("Visit firm website", "Email the firm") and a telephone number,
       never a raw address or URL, so there is nothing here that needs
       `anywhere` to stay inside its column. */
    word-break: normal;
    overflow-wrap: break-word;
    color: var(--aie-ink);
    font-family: var(--aie-font-body);
    font-size: var(--aie-text-size);
    font-weight: 400;
    line-height: var(--aie-text-leading);
    letter-spacing: normal;
    text-align: left;
    -webkit-text-size-adjust: 100%;
}

.aie-ui,
.aie-ui *,
.aie-ui *::before,
.aie-ui *::after {
    box-sizing: border-box;
}

/* Page-level roots (directory, application, sign-in, portal): the root
   spans its container and its side padding centres the content in AIG's
   1320px wrap (1256px of content between 32px gutters), so no child needs
   its own centring. AIG ends every page 56px above the footer. */
.aie-ui.aie-ui--page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0;
    padding-right: max(var(--aie-gutter), calc((100% - var(--aie-wrap)) / 2 + var(--aie-gutter)));
    padding-bottom: var(--aie-space-10);
    padding-left: max(var(--aie-gutter), calc((100% - var(--aie-wrap)) / 2 + var(--aie-gutter)));
}

.aie-ui [hidden] {
    display: none !important;
}

.aie-ui h1,
.aie-ui h2,
.aie-ui h3,
.aie-ui h4 {
    margin: 0 0 0.5em;
    padding: 0;
    color: var(--aie-plum);
    font-family: var(--aie-font-heading);
    font-weight: 700;
    line-height: var(--aie-heading-leading);
    letter-spacing: var(--aie-heading-tracking);
    text-transform: none;
}

.aie-ui h1 {
    font-size: clamp(2.1rem, 3.8vw, 3rem);
}

.aie-ui h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.aie-ui h3 {
    font-size: 1.25rem;
}

.aie-ui h4 {
    font-size: 1.08rem;
}

.aie-ui p {
    margin: 0 0 1rem;
}

.aie-ui p:last-child {
    margin-bottom: 0;
}

.aie-ui ul,
.aie-ui ol {
    margin: 0 0 1rem;
    padding-left: 1.4em;
}

.aie-ui li {
    margin: 0 0 0.35em;
}

.aie-ui li:last-child {
    margin-bottom: 0;
}

.aie-ui strong,
.aie-ui b {
    font-weight: 700;
}

.aie-ui small {
    font-size: 0.82em;
}

.aie-ui img,
.aie-ui svg {
    max-width: 100%;
}

.aie-ui img {
    height: auto;
}

.aie-ui hr {
    height: 0;
    margin: var(--aie-space-8) 0;
    border: 0;
    border-top: 1px solid var(--aie-line);
}

.aie-ui a {
    color: var(--aie-rose);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: var(--aie-transition);
}

.aie-ui a:hover {
    color: var(--aie-plum);
}

/* One keyboard focus ring everywhere: teal on light surfaces. Mouse and
   touch presses draw no ring. Components on plum switch to white. */
.aie-ui :focus {
    outline: none;
}

.aie-ui :focus-visible {
    outline: var(--aie-focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}

.aie-ui .aie-visually-hidden,
.aie-ui .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Neutralise theme button styles (background, radius, hover shadows) on
   every plugin button; components below give each button its look. */
.aie-ui button {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

.aie-ui button:hover,
.aie-ui button:focus,
.aie-ui button:active {
    box-shadow: none;
}

.aie-ui button:disabled {
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* Labels                                                              */
/* ------------------------------------------------------------------ */

.aie-ui .aie-eyebrow,
.aie-ui .aie-directory-portal__eyebrow,
.aie-ui .aie-directory-application__eyebrow,
.aie-ui .aie-firm-directory__eyebrow {
    text-wrap: balance;
    margin: 0 0 0.3rem;
    color: var(--aie-rose);
    font-family: var(--aie-font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: var(--aie-label-tracking);
    text-transform: uppercase;
}

/* Small box label (AIG .toc__title) */
.aie-ui .aie-box-label {
    text-wrap: balance;
    margin: 0 0 0.5rem;
    color: var(--aie-rose);
    font-family: var(--aie-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: var(--aie-label-tracking);
    text-transform: uppercase;
}

.aie-ui .aie-lead {
    max-width: 44rem;
    color: var(--aie-ink);
    font-size: 1.15rem;
}

/* ------------------------------------------------------------------ */
/* Buttons (AIG .btn-action family: pills, Manrope 700, plum)          */
/* ------------------------------------------------------------------ */

.aie-ui .aie-button,
.aie-ui .aie-directory-button,
.aie-ui .aie-directory-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    margin: 0;
    padding: 0.7rem 1.35rem;
    color: var(--aie-white);
    font-family: var(--aie-font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    background: var(--aie-plum);
    border: 2px solid var(--aie-plum);
    border-radius: var(--aie-radius-pill);
    box-shadow: none;
    cursor: pointer;
    transition: var(--aie-transition);
}

.aie-ui .aie-button:hover,
.aie-ui .aie-directory-button:hover,
.aie-ui .aie-directory-form__submit:hover {
    color: var(--aie-white);
    background: var(--aie-plum-deep);
    border-color: var(--aie-plum-deep);
    box-shadow: none;
}

.aie-ui .aie-button:focus-visible,
.aie-ui .aie-directory-button:focus-visible,
.aie-ui .aie-directory-form__submit:focus-visible {
    outline: var(--aie-focus-ring);
    outline-offset: 3px;
}

/* Outline: white with a plum edge (AIG .dir-toggle / .belt__pause) */
.aie-ui .aie-button--secondary,
.aie-ui .aie-directory-button--secondary,
.aie-ui .aie-directory-form__submit--secondary {
    color: var(--aie-plum);
    background: var(--aie-white);
    border-color: var(--aie-plum);
}

.aie-ui .aie-button--secondary:hover,
.aie-ui .aie-directory-button--secondary:hover,
.aie-ui .aie-directory-form__submit--secondary:hover {
    color: var(--aie-plum-deep);
    background: var(--aie-pale);
    border-color: var(--aie-plum-deep);
}

/* Quiet: rose outline pill (AIG "Website" pill), for tertiary actions */
.aie-ui .aie-button--quiet {
    color: var(--aie-rose);
    background: var(--aie-white);
    border-color: var(--aie-rose);
}

.aie-ui .aie-button--quiet:hover {
    color: var(--aie-plum);
    background: var(--aie-pale);
    border-color: var(--aie-plum);
}

/* Destructive actions */
.aie-ui .aie-button--danger,
.aie-ui .aie-directory-button--danger {
    color: var(--aie-white);
    background: var(--aie-error-line);
    border-color: var(--aie-error-line);
}

.aie-ui .aie-button--danger:hover,
.aie-ui .aie-directory-button--danger:hover {
    color: var(--aie-white);
    background: var(--aie-error-ink);
    border-color: var(--aie-error-ink);
}

/* Danger outline: a red-edged pill for a first, reversible step */
.aie-ui .aie-button--danger-outline {
    color: var(--aie-error-ink);
    background: var(--aie-white);
    border-color: var(--aie-error-line);
}

.aie-ui .aie-button--danger-outline:hover {
    color: var(--aie-error-ink);
    background: var(--aie-error-bg);
    border-color: var(--aie-error-ink);
}

/* Compact size for row actions; still a 44px touch target. */
.aie-ui .aie-button--small {
    min-height: 44px;
    padding: 0.5rem 1.05rem;
    font-size: 0.92rem;
}

.aie-ui .aie-button--block {
    width: 100%;
}

/* A trailing arrow nudges on hover (AIG member-row button). */
.aie-ui .aie-button__arrow {
    display: inline-block;
    transition: transform var(--aie-duration) var(--aie-easing);
}

.aie-ui .aie-button:hover .aie-button__arrow,
.aie-ui .aie-directory-button:hover .aie-button__arrow {
    transform: translateX(4px);
}

.aie-ui .aie-button:disabled,
.aie-ui .aie-button[aria-disabled="true"],
.aie-ui .aie-directory-button:disabled,
.aie-ui .aie-directory-form__submit:disabled {
    color: var(--aie-muted);
    background: var(--aie-pale);
    border-color: var(--aie-line);
    cursor: not-allowed;
}

/* Text-style button: reads as a link, keeps a 44px target. */
.aie-ui .aie-link-button,
.aie-ui .aie-directory-link-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
    color: var(--aie-rose);
    font-family: var(--aie-font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: 0;
    border-radius: var(--aie-radius-small);
    cursor: pointer;
    transition: var(--aie-transition);
}

.aie-ui .aie-link-button:hover,
.aie-ui .aie-directory-link-button:hover {
    color: var(--aie-plum);
}

/* A row of buttons: 12px apart, wraps on small screens. */
.aie-ui .aie-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aie-space-3);
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

.aie-ui form {
    margin: 0;
}

.aie-ui fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.aie-ui legend {
    padding: 0;
}

.aie-ui label {
    color: var(--aie-ink);
    font-family: var(--aie-font-body);
    font-weight: 700;
    line-height: 1.45;
}

/* Text fields, selects and text areas (AIG .dir-search input, with a 3:1
   border). */
.aie-ui :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], input:not([type]), select, textarea) {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.7rem 0.9rem;
    color: var(--aie-ink);
    font-family: var(--aie-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    background-color: var(--aie-white);
    border: 2px solid var(--aie-line-field);
    border-radius: var(--aie-radius-field);
    box-shadow: none;
    transition: var(--aie-transition);
}

.aie-ui textarea {
    min-height: 9rem;
    line-height: 1.6;
    resize: vertical;
}

.aie-ui select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23512C59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 16px 16px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.aie-ui :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], input:not([type]), select, textarea):hover {
    border-color: var(--aie-muted);
}

.aie-ui :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], input:not([type]), select, textarea):focus {
    border-color: var(--aie-teal);
    outline: var(--aie-focus-ring);
    outline-offset: 1px;
    box-shadow: none;
}

.aie-ui select:not([multiple]) {
    padding-right: 2.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aie-ui :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--aie-error-line);
    background-color: #FFFBFB;
}

.aie-ui :is(input, select, textarea)[aria-invalid="true"]:hover:not(:focus) {
    border-color: var(--aie-error-ink);
}

.aie-ui :is(input, select, textarea):disabled {
    color: var(--aie-muted);
    background-color: var(--aie-pale);
    border-color: var(--aie-line);
    cursor: not-allowed;
}

.aie-ui ::placeholder {
    color: var(--aie-muted);
    opacity: 1;
}

.aie-ui :is(input[type="checkbox"], input[type="radio"]) {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0.15em 0 0;
    accent-color: var(--aie-plum);
    cursor: pointer;
}

.aie-ui :is(input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: var(--aie-focus-ring);
    outline-offset: 2px;
}

.aie-ui input[type="file"] {
    display: block;
    width: 100%;
    max-width: 34rem;
    padding: 0;
    color: var(--aie-ink);
    font-family: var(--aie-font-body);
    font-size: 1rem;
    line-height: 44px;
    background: none;
    border: 0;
    border-radius: var(--aie-radius-pill);
    cursor: pointer;
}

.aie-ui input[type="file"]::file-selector-button {
    min-height: 44px;
    margin-right: 0.9rem;
    padding: 0.55rem 1.1rem;
    color: var(--aie-plum);
    font-family: var(--aie-font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    background: var(--aie-white);
    border: 2px solid var(--aie-plum);
    border-radius: var(--aie-radius-pill);
    cursor: pointer;
    transition: var(--aie-transition);
}

.aie-ui input[type="file"]:hover::file-selector-button {
    background: var(--aie-pale);
}

.aie-ui input[type="file"]:focus-visible {
    outline: var(--aie-focus-ring);
    outline-offset: 3px;
}

.aie-ui input[type="file"][aria-invalid="true"] {
    background: none;
}

.aie-ui input[type="file"][aria-invalid="true"]::file-selector-button {
    color: var(--aie-error-ink);
    background: var(--aie-error-bg);
    border-color: var(--aie-error-line);
}

.aie-ui input[type="file"]:disabled {
    color: var(--aie-muted);
    background: none;
    cursor: not-allowed;
}

.aie-ui input[type="file"]:disabled::file-selector-button {
    color: var(--aie-muted);
    background: var(--aie-pale);
    border-color: var(--aie-line);
    cursor: not-allowed;
}

/* Field: label above the control, help and error below it. */
.aie-ui .aie-directory-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
}

.aie-ui .aie-directory-field > label {
    margin: 0;
    font-size: 0.95rem;
}

.aie-ui .aie-directory-field > label > span[aria-hidden="true"],
.aie-ui .aie-required-mark {
    color: var(--aie-rose);
}

.aie-ui .aie-directory-field__optional {
    margin-left: 0.35em;
    color: var(--aie-muted);
    font-size: 0.88em;
    font-weight: 500;
}

.aie-ui .aie-directory-field__help {
    margin: 0;
    color: var(--aie-muted);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.55;
}

.aie-ui .aie-directory-field__error {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.1rem 0 0;
    color: var(--aie-error-ink);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
}

.aie-ui .aie-directory-field__error::before {
    content: "";
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.2em;
    background: var(--aie-error-line);
    border-radius: 50%;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zm-1 4h2v6.5H9zm0 8h2v2H9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zm-1 4h2v6.5H9zm0 8h2v2H9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Two-column field grid; one column on narrow screens. */
.aie-ui .aie-directory-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aie-space-5) var(--aie-space-6);
}

.aie-ui .aie-directory-field--full {
    grid-column: 1 / -1;
}

/* Fieldset sections (AIG .mock-form fieldset). */
.aie-ui .aie-directory-form__section {
    margin: 0 0 var(--aie-space-6);
    padding: var(--aie-space-5) calc(var(--aie-inset) - 2px) var(--aie-space-6);
    background: var(--aie-white);
    border: 2px solid var(--aie-line);
    border-radius: var(--aie-radius-panel);
}

.aie-ui .aie-directory-form__section > legend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    margin: 0;
    padding: 0 0.4rem;
    color: var(--aie-plum);
    font-family: var(--aie-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.aie-ui .aie-directory-form__step {
    color: var(--aie-rose);
    font-family: var(--aie-font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: var(--aie-label-tracking);
    text-transform: uppercase;
}

.aie-ui .aie-directory-form__section-help {
    margin: 0.4rem 0 var(--aie-space-4);
    color: var(--aie-muted);
    font-size: 0.95rem;
}

.aie-ui .aie-directory-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aie-space-3);
    margin-top: var(--aie-space-6);
}

.aie-ui .aie-directory-form__required {
    margin: 0;
    color: var(--aie-muted);
    font-size: 0.95rem;
}

/* A heading over one set of tiles: the three groups the claim types sit in.
   A bare fieldset, so the legend is read as a heading without drawing a second
   box inside the step it already belongs to. */
.aie-ui .aie-directory-choice-group {
    margin: 0 0 var(--aie-space-4);
    padding: 0;
    border: 0;
}

.aie-ui .aie-directory-choice-group:last-of-type {
    margin-bottom: 0;
}

.aie-ui .aie-directory-choice-group > legend {
    margin: 0 0 var(--aie-space-2);
    padding: 0;
    font-weight: 600;
}

/* Checkbox and radio tiles (regions, claim types, services). */
.aie-ui .aie-directory-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--aie-space-3);
}

.aie-ui .aie-directory-choice-grid > label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 52px;
    margin: 0;
    padding: 0.8rem 1rem;
    color: var(--aie-ink);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    background: var(--aie-white);
    border: 1px solid var(--aie-line-field);
    border-radius: var(--aie-radius-field);
    cursor: pointer;
    transition: var(--aie-transition);
}

.aie-ui .aie-directory-choice-grid > label:hover {
    border-color: var(--aie-rose);
    box-shadow: inset 0 0 0 1px var(--aie-rose);
}

.aie-ui .aie-directory-choice-grid > label:has(input:checked) {
    background: var(--aie-pale);
    border-color: var(--aie-plum);
    box-shadow: inset 0 0 0 1px var(--aie-plum);
}

.aie-ui .aie-directory-choice-grid > label:has(input:focus-visible) {
    outline: var(--aie-focus-ring);
    outline-offset: 2px;
}

.aie-ui :is(.aie-directory-choice-grid > label, .aie-directory-choice) > input:focus-visible {
    outline: none;
}

.aie-ui .aie-directory-choice-grid > label:has(input[aria-invalid="true"]) {
    border-color: var(--aie-error-line);
    box-shadow: inset 0 0 0 1px var(--aie-error-line);
}

/* A single checkbox with a statement (declarations, confirmations). */
.aie-ui .aie-directory-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin: 0;
    padding: 0.9rem 1.1rem;
    color: var(--aie-ink);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.55;
    background: var(--aie-pale);
    border: 1px solid var(--aie-line);
    border-radius: var(--aie-radius-field);
    cursor: pointer;
}

.aie-ui .aie-directory-choice:hover {
    border-color: var(--aie-rose);
}

.aie-ui .aie-directory-choice:has(input:focus-visible) {
    outline: var(--aie-focus-ring);
    outline-offset: 2px;
}

.aie-ui .aie-directory-choice:has(input[aria-invalid="true"]) {
    border-color: var(--aie-error-line);
}

/* Password field with its show/hide button (password-visibility.js). */
.aie-ui .aie-password-control {
    position: relative;
    display: block;
}

.aie-ui .aie-password-control > input {
    padding-right: 3.6rem;
}

.aie-ui .aie-password-control__toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--aie-muted);
    background: transparent;
    border: 0;
    border-radius: 10px;
    transform: translateY(-50%);
    transition: var(--aie-transition);
}

.aie-ui .aie-password-control__toggle:hover {
    color: var(--aie-plum);
    background: var(--aie-pale);
}

.aie-ui .aie-password-control__toggle[aria-pressed="true"],
.aie-ui .aie-password-control__toggle.is-visible {
    color: var(--aie-plum);
    background: var(--aie-pale);
}

.aie-ui .aie-password-control__toggle:focus-visible {
    outline: var(--aie-focus-ring);
    outline-offset: -3px;
}

.aie-ui .aie-password-control__toggle svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.aie-ui .aie-password-control__toggle[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    box-shadow: 0 0 0 1.5px var(--aie-pale);
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ------------------------------------------------------------------ */
/* Messages (AIG .callout / .draft-note / .note shapes)                */
/* ------------------------------------------------------------------ */

.aie-ui .aie-directory-message {
    margin: 0 0 var(--aie-space-6);
    padding: var(--aie-space-4) var(--aie-inset) var(--aie-space-4) calc(var(--aie-inset) - 6px);
    color: var(--aie-info-ink);
    font-size: 1rem;
    line-height: 1.6;
    background: var(--aie-info-bg);
    border: 0;
    border-left: 6px solid var(--aie-info-line);
    border-radius: 0 var(--aie-radius-box) var(--aie-radius-box) 0;
}

.aie-ui .aie-directory-message > :last-child {
    margin-bottom: 0;
}

.aie-ui .aie-directory-message h2,
.aie-ui .aie-directory-message h3,
.aie-ui .aie-directory-message h4 {
    margin: 0 0 0.35rem;
    color: var(--aie-plum);
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.aie-ui .aie-directory-message p {
    margin: 0 0 0.6rem;
}

.aie-ui .aie-directory-message ul {
    margin: 0.4rem 0 0;
}

.aie-ui .aie-directory-message--success {
    background: var(--aie-success-bg);
    border-left-color: var(--aie-success-line);
}

.aie-ui .aie-directory-message--success h2,
.aie-ui .aie-directory-message--success h3,
.aie-ui .aie-directory-message--success h4 {
    color: var(--aie-success-ink);
}

.aie-ui .aie-directory-message--error {
    background: var(--aie-error-bg);
    border-left-color: var(--aie-error-line);
}

.aie-ui .aie-directory-message--error h2,
.aie-ui .aie-directory-message--error h3,
.aie-ui .aie-directory-message--error h4 {
    color: var(--aie-error-ink);
}

.aie-ui .aie-directory-message--error a:not(.aie-button, .aie-directory-button, .aie-directory-form__submit) {
    color: var(--aie-error-ink);
    font-weight: 600;
}

.aie-ui .aie-directory-message--error a:not(.aie-button, .aie-directory-button, .aie-directory-form__submit):hover {
    color: var(--aie-ink);
}

.aie-ui .aie-directory-message--notice {
    color: var(--aie-notice-ink);
    background: var(--aie-notice-bg);
    border-left-color: var(--aie-notice-line);
}

.aie-ui .aie-directory-message--notice h2,
.aie-ui .aie-directory-message--notice h3,
.aie-ui .aie-directory-message--notice h4 {
    color: var(--aie-notice-ink);
}

.aie-ui .aie-directory-message--notice a:not(.aie-button, .aie-directory-button, .aie-directory-form__submit) {
    color: var(--aie-notice-ink);
}

.aie-ui .aie-directory-message[tabindex="-1"]:focus,
.aie-ui .aie-directory-message[tabindex="-1"]:focus-visible {
    outline: var(--aie-focus-ring);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Surfaces: card, panel, note, empty state                            */
/* ------------------------------------------------------------------ */

/* White card (AIG .org / .area-box) */
.aie-ui .aie-card {
    padding: 22px calc(var(--aie-inset) - 1px);
    background: var(--aie-white);
    border: 1px solid var(--aie-line-card);
    border-radius: var(--aie-radius-card);
    box-shadow: var(--aie-shadow-card);
}

/* Pale panel (AIG .note / .dir-filters) */
.aie-ui .aie-panel {
    padding: var(--aie-space-4) calc(var(--aie-inset) - 1px);
    background: var(--aie-pale);
    border: 1px solid var(--aie-line);
    border-radius: var(--aie-radius-panel);
}

/* "How this works" note (AIG .note-box) */
.aie-ui .aie-note-box {
    padding: 1.2rem var(--aie-inset) 1.2rem calc(var(--aie-inset) - 6px);
    background: var(--aie-peach);
    border-left: 6px solid var(--aie-rose);
    border-radius: 0 var(--aie-radius-panel) var(--aie-radius-panel) 0;
}

/* Guidance callout (AIG .callout): 6px teal bar on pale; --warn uses a
   rose bar for cautions that are not errors. */
.aie-ui .aie-callout {
    margin: 0 0 var(--aie-space-6);
    padding: 1.1rem var(--aie-inset) 1.1rem calc(var(--aie-inset) - 6px);
    background: var(--aie-pale);
    border-left: 6px solid var(--aie-teal);
    border-radius: 0 var(--aie-radius-box) var(--aie-radius-box) 0;
}

.aie-ui .aie-callout > :last-child {
    margin-bottom: 0;
}

.aie-ui .aie-callout h2,
.aie-ui .aie-callout h3 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
}

.aie-ui .aie-callout--warn {
    background: #FFF7FB;
    border-left-color: var(--aie-rose);
}

/* "Back to ..." link (AIG .back-link) with a drawn arrow. */
.aie-ui .aie-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    color: var(--aie-rose);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aie-ui .aie-back-link::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}

.aie-ui .aie-back-link:hover {
    color: var(--aie-plum);
}

/* Content on plum, rose or gradient surfaces: white text and a white focus
   ring, because teal on plum is only 2.39:1. */
.aie-ui .aie-on-colour {
    --aie-focus-ring: var(--aie-focus-ring-on-colour);
    color: var(--aie-white);
}

.aie-ui .aie-on-colour :is(h1, h2, h3, h4, .aie-eyebrow, .aie-box-label) {
    color: var(--aie-white);
}

.aie-ui .aie-on-colour a:not(.aie-button, .aie-directory-button, .aie-directory-form__submit) {
    color: var(--aie-white);
}

.aie-ui .aie-on-colour a:not(.aie-button, .aie-directory-button, .aie-directory-form__submit):hover {
    color: var(--aie-on-plum-label);
}

/* White solid pill for coloured surfaces (AIG .btn--solid / .member-row__btn). */
.aie-ui .aie-button--on-colour {
    color: var(--aie-plum);
    background: var(--aie-white);
    border-color: var(--aie-white);
}

.aie-ui .aie-button--on-colour:hover {
    color: var(--aie-plum);
    background: var(--aie-pale);
    border-color: var(--aie-pale);
}

.aie-ui .aie-button--on-colour:focus-visible {
    outline: var(--aie-focus-ring-on-colour);
}

/* Empty result (AIG .legal-empty) */
.aie-ui .aie-empty-state {
    padding: var(--aie-space-5) calc(var(--aie-inset) - 1px);
    background: var(--aie-pale);
    border: 1px solid var(--aie-line);
    border-radius: var(--aie-radius-field);
}

.aie-ui .aie-empty-state h2,
.aie-ui .aie-empty-state h3 {
    margin-bottom: 0.4rem;
    font-size: 1.2rem;
}

/* ------------------------------------------------------------------ */
/* Pills, chips and badges                                             */
/* ------------------------------------------------------------------ */

/* Category chip (AIG .chip) */
.aie-ui .aie-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.65rem;
    color: var(--aie-plum);
    font-family: var(--aie-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
    background: var(--aie-pale);
    border: 1px solid var(--aie-line);
    border-radius: var(--aie-radius-pill);
}

/* Status pill (AIG .carousel__status), with state colours */
.aie-ui .aie-status,
.aie-ui .aie-directory-visibility-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.75rem;
    color: var(--aie-plum);
    font-family: var(--aie-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    background: var(--aie-pale);
    border: 1px solid var(--aie-line);
    border-radius: var(--aie-radius-pill);
}

.aie-ui .aie-status::before,
.aie-ui .aie-directory-visibility-badge::before {
    content: "";
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    background: currentColor;
    border-radius: 50%;
}

.aie-ui .aie-status--success {
    color: var(--aie-success-ink);
    background: var(--aie-success-bg);
    border-color: #BBDAD8;
}

.aie-ui .aie-status--info,
.aie-ui .aie-directory-visibility-badge--public {
    color: var(--aie-plum);
    background: var(--aie-pale);
    border-color: #D8C6D4;
}

.aie-ui .aie-status--notice {
    color: var(--aie-notice-ink);
    background: var(--aie-notice-bg);
    border-color: #EBCB8B;
}

.aie-ui .aie-status--error {
    color: var(--aie-error-ink);
    background: var(--aie-error-bg);
    border-color: #EDB9C1;
}

.aie-ui .aie-status--neutral,
.aie-ui .aie-directory-visibility-badge--private {
    color: var(--aie-muted);
    background: var(--aie-white);
    border-color: var(--aie-line-field);
}

.aie-ui .aie-status--strong,
.aie-ui .aie-directory-visibility-badge--current {
    color: var(--aie-white);
    background: var(--aie-plum);
    border-color: var(--aie-plum);
}

/* Count bubble (unread notifications, waiting items) */
.aie-ui .aie-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    padding: 0 0.4em;
    color: var(--aie-white);
    font-family: var(--aie-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.5;
    background: var(--aie-rose);
    border-radius: var(--aie-radius-pill);
}

.aie-ui .aie-count--on-colour {
    color: var(--aie-plum);
    background: var(--aie-white);
}

/* ------------------------------------------------------------------ */
/* Tables (AIG .price-table)                                           */
/* ------------------------------------------------------------------ */

.aie-ui .aie-table {
    width: 100%;
    margin: 0 0 var(--aie-space-4);
    font-size: 1rem;
    border: 0;
    border-collapse: collapse;
    background: var(--aie-white);
}

.aie-ui .aie-table th,
.aie-ui .aie-table td {
    padding: 0.6rem 0.8rem;
    text-align: left;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--aie-line);
}

.aie-ui .aie-table th {
    color: var(--aie-plum);
    font-family: var(--aie-font-heading);
    font-size: 0.9rem;
    font-weight: 700;
}

/* While a form is being sent, its submit buttons say so without moving. */
.aie-ui form[data-aie-submitting="1"] :is(button[type="submit"], .aie-directory-form__submit) {
    cursor: progress;
    opacity: 0.72;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
    .aie-ui .aie-directory-message li > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (max-width: 600px) {
    .aie-ui .aie-directory-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aie-ui .aie-directory-form__section > legend {
        float: left;
        width: 100%;
        margin: 0 0 var(--aie-space-2);
        padding: 0;
    }

    .aie-ui .aie-directory-form__section > legend + * {
        clear: both;
    }

    .aie-ui .aie-directory-form__section {
        padding-top: var(--aie-space-4);
        padding-bottom: var(--aie-space-5);
    }

    .aie-ui .aie-directory-form__actions > .aie-directory-form__submit,
    .aie-ui .aie-directory-form__actions > .aie-button {
        width: 100%;
    }

    .aie-ui .aie-directory-message li {
        margin: 0;
    }
}

/* Nothing moves when less motion is requested. */
@media (prefers-reduced-motion: reduce) {
    .aie-ui *,
    .aie-ui *::before,
    .aie-ui *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .aie-ui .aie-button:hover .aie-button__arrow,
    .aie-ui .aie-directory-button:hover .aie-button__arrow {
        transform: none;
    }
}

@media print {
    .aie-ui {
        color: #000000;
        font-size: 12pt;
    }

    .aie-ui .aie-button,
    .aie-ui .aie-directory-button,
    .aie-ui .aie-directory-form__submit {
        color: #000000;
        background: none;
        border-color: #000000;
    }
}