/* admin-v2 "Choose your practice web address": the fixed suffix inside the shared field
   shell, and the About popover trigger. The field and the consequence note are the shared hooks. */

.practice-address__suffix {
    flex: none;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.practice-address__about {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 2rem;
    font-size: 0.8125rem;
}

.practice-address__about-mark {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-size: 0.75rem;
}

.practice-address__final {
    /* Breaks only where it must, at a natural boundary - break-all split mid-syllable
       ("staging.akash/ic.health"); the deck's own inline style is overflow-wrap:anywhere. */
    overflow-wrap: anywhere;
}

/* The held address is the field it was chosen in, filled and read-only: the shared field's box and type. */
.practice-address__held {
    box-sizing: border-box;
    min-height: var(--ak-field-height);
    padding: 11px var(--ak-field-padding-x);
    border: 1px solid var(--line);
    border-radius: var(--ak-field-radius);
    background-color: var(--surface);
    color: var(--ink);
    font-size: var(--ak-field-font-size);
    line-height: var(--ak-field-line-height);
}

/* A host name breaks between its labels, never at a hyphen inside one; a label wider than the
   line (they run to 63 characters) still breaks rather than overflow. */
.practice-address__host-label {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.practice-address__about-trigger {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.practice-address__about-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}