/* =============================================================================
   DEX Portal - Domains

   The domains list. It borrows the counters and toolbar from the Websites
   page - those classes are shared - and adds only what a domain table needs
   that a website table did not: dates that carry how close they are, and the
   two flags a reseller watches.
   ============================================================================= */

.domain-list-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 12px var(--gutter) var(--gutter);
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
}

.domain-table {
    width: 100%;
    table-layout: fixed;
}

.domain-table__column--name      { width: 34%; }
.domain-table__column--status    { width: 14%; }
.domain-table__column--registered{ width: 16%; }
.domain-table__column--expires   { width: 18%; }
.domain-table__column--flags     { width: 18%; }

.domain-name {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.domain-identifier {
    display: block;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}


/* -----------------------------------------------------------------------------
   DATES

   A date, and under it - only when it matters - how near it is. The note is
   silent for a renewal comfortably in the future, and speaks up for one that
   is close or already past, because that is the whole reason to look.
   -------------------------------------------------------------------------- */

.domain-date {
    display: block;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    white-space: nowrap;
}

.domain-date--unknown {
    color: var(--text-muted);
}

.domain-date__note {
    display: block;
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.domain-date__note--soon {
    color: var(--status-warning);
}

.domain-date__note--overdue {
    color: var(--status-danger);
}


/* -----------------------------------------------------------------------------
   FLAGS

   Renewal and lock, the two states that quietly cost a reseller a domain. The
   dangerous readings - no renewal, no lock - wear the warning colour, because
   a row of neutral grey pills is a row nobody scans.
   -------------------------------------------------------------------------- */

.domain-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.domain-flag {
    padding: 1px 7px;
    border-radius: var(--radius-small);
    font-size: var(--font-size-tiny);
    white-space: nowrap;
}

.domain-flag--on {
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

.domain-flag--off {
    background: var(--status-warning-tint);
    color: var(--status-warning);
}

.domain-flag--warn {
    background: var(--status-danger-tint);
    color: var(--status-danger);
}

.domain-truncation-note {
    margin: 0;
    padding: 12px var(--gutter);
    color: var(--text-muted);
    font-size: var(--font-size-small);
}


@media (max-width: 720px) {
    .domain-list-scroll {
        margin: 10px var(--gutter-tight) var(--gutter-tight);
    }

    /* Below this width the five columns no longer fit, so the table keeps its
       shape and the container scrolls sideways rather than crushing the name
       into one letter per line. */
    .domain-table {
        min-width: 640px;
    }
}


/* =============================================================================
   THE ROW AS A DOORWAY

   Once a row opens a domain, it has to look like it does. A pointer, a hover
   wash and a focus ring are the whole of it - the affordance a table row needs
   to read as a button without becoming one.
   ============================================================================= */

.domain-table--clickable .domain-row {
    cursor: pointer;
}

.domain-table--clickable .domain-row:hover {
    background: var(--surface-subtle);
}

.domain-table--clickable .domain-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}


/* =============================================================================
   DOMAIN DETAIL PANEL

   Four sections behind a tab strip. Everything inside is fluid so the panel can
   be widened, and the DNS table - the one thing with too many columns for a
   phone - scrolls sideways rather than crushing its inputs.
   ============================================================================= */

.domain-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.domain-detail__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-default);
}

.domain-detail__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-chip, 4px);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    font-weight: 500;
    cursor: pointer;
}

.domain-detail__tab:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.domain-detail__tab--active,
.domain-detail__tab--active:hover {
    background: var(--accent-tint);
    border-color: var(--accent-border);
    color: var(--accent);
}


/* ---- The editors (nameservers, DNS, pricing share the frame) ------------- */

.domain-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.domain-editor__intro {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    line-height: 1.5;
}

.domain-editor__toolbar {
    display: flex;
    justify-content: flex-end;
}

.domain-editor__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* ---- Nameservers --------------------------------------------------------- */

.nameserver-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nameserver-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nameserver-row .form-field__control {
    flex: 1;
    min-width: 0;
}

.nameserver-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    overflow-wrap: anywhere;
}


/* ---- Icon buttons -------------------------------------------------------- */

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-secondary);
    cursor: pointer;
}

.icon-button:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.icon-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.icon-button--primary,
.icon-button--primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.icon-button--primary:hover {
    background: var(--accent-hover);
}

.icon-button--danger:hover {
    background: var(--status-danger-tint);
    border-color: var(--status-danger-tint);
    color: var(--status-danger);
}


/* ---- Ghost button, used for Reset ---------------------------------------- */

.button--ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
}

.button--ghost:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}


/* ---- DNS table ----------------------------------------------------------- */

.dns-table {
    width: 100%;
}

.dns-table th,
.dns-table td {
    vertical-align: middle;
}

.dns-table__actions-head {
    text-align: right;
}

.dns-table__actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.dns-table__empty {
    color: var(--text-muted);
    text-align: center;
    padding: 20px 0;
}

.dns-type-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-chip, 4px);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.dns-host,
.dns-value {
    overflow-wrap: anywhere;
}

.dns-value {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

.dns-row--editing td {
    background: var(--surface-subtle);
}

.dns-input {
    width: 100%;
    min-width: 0;
}

.dns-input--type { min-width: 84px; }
.dns-input--ttl,
.dns-input--priority { min-width: 64px; }


/* ---- Pricing ------------------------------------------------------------- */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
}

.pricing-card__label {
    font-size: var(--font-size-tiny);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.pricing-card__amount {
    font-size: var(--font-size-large, 20px);
    font-weight: 600;
    color: var(--text-primary);
}


/* ---- Inset state message (a section that is loading or empty) ------------- */

.state-message--inset {
    padding: 28px 12px;
}


@media (max-width: 720px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    /* Five editable columns will not fit a phone, so the section scrolls
       sideways rather than crushing each input to a sliver. */
    .domain-detail__content {
        overflow-x: auto;
    }

    .domain-detail__content .dns-table {
        min-width: 560px;
    }
}


/* =============================================================================
   DOMAIN DETAIL PANEL - stacked layout (v2)

   Domain details + Contacts side by side, then Name servers, then DNS. No tabs:
   a domain is small enough to read whole. Cards use the light panel theme, the
   same tokens as the rest of the product.
   ============================================================================= */

.domain-detail__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.domain-card {
    padding: 18px 20px 20px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    overflow: hidden;
}

/* The head is a soft-blue band pulled to the card's edges - it clips to the
   card's radius via overflow:hidden, so each card wears its title like a
   header rather than a rule. */
.domain-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -18px -20px 16px;
    padding: 12px 20px;
    background: var(--am-blue-tint);
    border-bottom: 1px solid var(--border-strong);
}

.domain-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

/* A small accent glyph beside a card title. Text-only titles are unaffected
   (a single flex child), so this is safe to apply everywhere. */
.domain-card__title .icon {
    flex: 0 0 auto;
    color: var(--accent, #19213b);
}

.domain-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.domain-card__note {
    margin: 12px 4px 0;
    color: var(--text-muted);
    font-size: var(--font-size-small);
    line-height: 1.5;
}


/* ---- Key / value rows ---------------------------------------------------- */

.domain-kv {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-top: 1px solid var(--border-subtle, var(--border-default));
}

.domain-kv:first-of-type {
    border-top: none;
}

.domain-kv__key {
    flex: 0 0 40%;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

.domain-kv__value {
    flex: 1;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    overflow-wrap: anywhere;
}

.domain-kv__value--code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.domain-status {
    font-weight: 700;
    font-size: var(--font-size-small);
    letter-spacing: 0.02em;
}

.domain-status--ok { color: var(--status-success); }
.domain-status--bad { color: var(--status-danger); }
.domain-status--warn { color: var(--status-warning); }

.toggle-pill {
    flex: 0 0 auto;
    padding: 5px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-chip, 4px);
    background: var(--surface-panel);
    color: var(--text-secondary);
    font-size: var(--font-size-tiny);
    cursor: pointer;
}

.toggle-pill:hover { background: var(--surface-subtle); color: var(--text-primary); }
.toggle-pill:disabled { opacity: 0.5; cursor: not-allowed; }


/* ---- Header connect / connected control ---------------------------------- */

.domain-connect-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.connected-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-chip, 4px);
    background: var(--status-success-tint);
    color: var(--status-success);
    font-size: var(--font-size-small);
    font-weight: 600;
    white-space: nowrap;
}


/* ---- Name servers -------------------------------------------------------- */

.ns-table {
    width: 100%;
    border-collapse: collapse;
}

.ns-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: var(--font-size-tiny);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-default);
}

.ns-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
    font-size: var(--font-size-small);
}

.ns-table__label { color: var(--text-muted); width: 90px; }
.ns-table__host,
.ns-table__ip { font-family: var(--font-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.ns-table__ip { color: var(--text-muted); }

.ns-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ns-edit-row {
    display: grid;
    grid-template-columns: 54px 1fr 1fr auto;
    align-items: center;
    gap: 8px;
}

.ns-edit-row__label {
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.ns-edit-row__remove { color: var(--status-danger); }


/* ---- DNS settings -------------------------------------------------------- */

.dns-scroll {
    overflow-x: auto;
}

.dns-table {
    width: 100%;
    border-collapse: collapse;
}

.dns-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: var(--font-size-tiny);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-default);
}

.dns-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
    font-size: var(--font-size-small);
    vertical-align: middle;
}

.dns-cell-type { color: var(--text-secondary); white-space: nowrap; }
.dns-cell-host,
.dns-cell-value {
    font-family: var(--font-mono, ui-monospace, monospace);
    overflow-wrap: anywhere;
}

.dns-row--editing td { background: var(--surface-subtle); }

.dns-table__empty { color: var(--text-muted); text-align: center; padding: 18px 0; }

.dns-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.dns-actions__ask { color: var(--text-muted); font-size: var(--font-size-small); }

.dns-input--type { min-width: 92px; }

.dns-add-form {
    display: grid;
    grid-template-columns: 110px 180px 1fr auto;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-default);
}


/* ---- Text link buttons (MODIFY / DELETE / Cancel) ------------------------ */

.link-button {
    padding: 2px 2px;
    border: none;
    background: none;
    color: var(--accent);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.link-button:hover { text-decoration: underline; }
.link-button:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }
.link-button--danger { color: var(--status-danger); }


/* ---- Dark button (Add record / Connect domain) --------------------------- */

.button--dark {
    background: var(--text-primary);
    border: 1px solid var(--text-primary);
    color: #fff;
}

.button--dark:hover { background: #000; border-color: #000; color: #fff; }
.button--dark:disabled { opacity: 0.5; cursor: not-allowed; }


/* ---- Connect-a-website modal --------------------------------------------- */

.domain-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 20, 28, 0.45);
}

.domain-modal {
    width: 100%;
    max-width: 460px;
    padding: 0 24px 24px;
    border-radius: var(--radius-large, 16px);
    background: var(--surface-panel);
    box-shadow: 0 24px 60px rgba(17, 20, 28, 0.28);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

/* Bled out to the modal's edges so it is a header bar rather than a dark
   rectangle floating inside one, which is why the modal itself lost its top
   padding above. */
.domain-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -24px 0;
    padding: 16px 24px;
    background: var(--panel-header);
}

.domain-modal__title {
    margin: 0;
    font-size: var(--font-size-large, 18px);
    font-weight: 600;
    color: var(--text-on-dark);
}

.domain-modal__head .icon-button,
.domain-modal__head button {
    color: rgba(255, 255, 255, 0.72);
}

.domain-modal__head button:hover {
    color: var(--text-on-dark);
}

.domain-modal__intro {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    line-height: 1.55;
}


@media (max-width: 720px) {
    .domain-detail__grid {
        grid-template-columns: 1fr;
    }

    .dns-table { min-width: 520px; }

    .dns-add-form {
        grid-template-columns: 1fr 1fr;
    }

    .ns-edit-row {
        grid-template-columns: 40px 1fr auto;
    }

    .ns-edit-row .form-field__control:nth-of-type(2) {
        grid-column: 2 / -1;
    }
}


/* =============================================================================
   REGISTER A DOMAIN
   ============================================================================= */

.register-search {
    display: flex;
    gap: 10px;
    align-items: stretch;
    /* Breathing room under the page header - it used to sit almost on top of
       the search box. */
    margin: 22px var(--gutter) 0;
}

/* A small rotating spinner, shown while a search is in flight. */
@keyframes dex-spin { to { transform: rotate(360deg); } }

.dex-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: dex-spin 0.7s linear infinite;
    vertical-align: middle;
}

.dex-spinner--large {
    width: 30px;
    height: 30px;
    border-width: 3px;
}

.register-search__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    color: var(--text-muted);
}

.register-search__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.register-results {
    margin: 16px var(--gutter) var(--gutter);
}

.register-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    overflow: hidden;
    background: var(--surface-panel);
}

.register-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-subtle, var(--border-default));
}

.register-row:first-child { border-top: none; }
.register-row--taken { opacity: 0.6; }

.register-row__name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.register-row__domain {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.register-row__badge {
    padding: 1px 8px;
    border-radius: var(--radius-chip, 4px);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.register-row__status {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.register-row__price {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    white-space: nowrap;
}

.register-row__taken {
    font-size: var(--font-size-small);
    color: var(--text-muted);
}


/* ---- Register form (in the slide-over) ----------------------------------- */

.register-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.register-form__summary {
    padding: 14px 16px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-medium);
    background: var(--accent-tint);
}

.register-form__domain {
    font-size: var(--font-size-large, 18px);
    font-weight: 600;
    color: var(--text-primary);
}

.register-form__cost {
    margin-top: 2px;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.register-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.register-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.register-form__note {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-small);
    line-height: 1.5;
}

/* New / Existing client toggle + Dreamscape customer search */
.register-form__section { display: contents; }
/* display:contents overrides the [hidden] attribute's display:none, so the
   inactive section is hidden explicitly with higher specificity. */
.register-form__section[hidden] { display: none; }

.register-form__seg {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--surface-subtle, #f4f6f8);
    border: 1px solid var(--border-subtle, #e5e8ec);
    border-radius: var(--radius-button);
}
.register-form__seg-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 7px 14px;
    border-radius: var(--radius-button);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
}
.register-form__seg-btn--active {
    background: var(--surface, #fff);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.register-form__cust-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 6px;
}
.register-form__cust-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: transparent;
    cursor: pointer;
    font: inherit;
}
.register-form__cust-row:hover {
    background: var(--surface-subtle, #f4f6f8);
    border-color: var(--border-subtle, #e5e8ec);
}
.register-form__cust-name { font-weight: 600; color: var(--text-primary); }
.register-form__cust-email { font-size: var(--font-size-small); color: var(--text-secondary); }
.register-form__cust-empty {
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}
.register-form__cust-picked {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-button);
    background: var(--surface-subtle, #f4f6f8);
    border: 1px solid var(--border-subtle, #e5e8ec);
}
.register-form__cust-chip { flex: 1; min-width: 0; font-size: var(--font-size-small); color: var(--text-secondary); }
.register-form__cust-chip strong { color: var(--text-primary); }
.register-form__cust-id { color: var(--text-muted); }


@media (max-width: 720px) {
    .register-search { margin: 16px var(--gutter-tight) 0; flex-direction: column; }
    .register-results { margin: 14px var(--gutter-tight) var(--gutter-tight); }
    .register-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .register-form__grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   TRANSFER A DOMAIN IN
   ============================================================================= */

.transfer-card {
    margin: 4px var(--gutter) 0;
    /* This card is the page's only form - a frame and a shadow around it just
       draw a box inside a box. Flat, with room to breathe instead. */
    border: 0;
    box-shadow: none;
    padding: 26px 28px 28px;
}

.transfer-card .domain-editor__actions {
    margin-top: 16px;
}

.transfer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 200px;
    gap: 12px;
    align-items: end;
}

.transfer-grid__wide {
    grid-column: auto;
}

.transfer-result {
    margin: 16px var(--gutter) var(--gutter);
}


@media (max-width: 720px) {
    .transfer-card { margin: 4px var(--gutter-tight) 0; }
    .transfer-grid { grid-template-columns: 1fr; }
    .transfer-result { margin: 14px var(--gutter-tight) var(--gutter-tight); }
}


/* =============================================================================
   CLIENT PROFILE - Domains tab (customer's domains)
   ============================================================================= */

/* Not a ruled table - a list of soft cards. The rows are separated by spacing
   and each is drawn as its own tinted card, so the tab reads like the rest of
   the redesigned profile rather than a flat grid. */
.record-domains__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

/* The header becomes quiet captions sitting above the cards. */
.record-domains__table thead th {
    padding: 0 12px 2px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* A <tr> cannot carry a border when cells are separated, so the card outline is
   drawn on the cells: fill on every cell, side borders on the two ends. */
.record-domains__table tbody td {
    padding: 12px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
    vertical-align: middle;
}

.record-domains__table tbody td:first-child {
    border-left: 1px solid var(--border-subtle);
    border-top-left-radius: var(--radius-medium);
    border-bottom-left-radius: var(--radius-medium);
}

.record-domains__table tbody td:last-child {
    border-right: 1px solid var(--border-subtle);
    border-top-right-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
}

.record-domains__table tbody tr.client-domain-row {
    cursor: pointer;
}

.record-domains__table tbody tr:hover td {
    background: var(--surface-panel);
    border-color: var(--border-default);
}

.record-domains__table tbody tr.client-domain-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.record-domains__name {
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.record-domains__tld {
    margin-left: 4px;
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
}

/* The actions cell hugs the right edge rather than stretching across a third of
   the row. */
.record-domains__action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.record-domains__id {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
}

/* The edit-website action is a solid dark button, not the light secondary one. */
.button.client-website-edit,
.button--secondary.client-website-edit {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--text-on-dark);
}

.button.client-website-edit:hover,
.button--secondary.client-website-edit:hover {
    background: #000;
    border-color: #000;
    color: var(--text-on-dark);
}


/* =============================================================================
   TWO-COLUMN PANEL BODY (email package panel: details | actions/links)
   auto-fit collapses to one column when the panel is narrow (opened beside).
   ============================================================================= */

.panel-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

.panel-two-col__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Detail rows stacked (not the 2-col grid) inside a narrow column. A clean
   label | value row, with a small muted glyph on the label - the package card
   on the email panel reads as a modern spec sheet rather than run-together
   text. */
.domain-detail__stack {
    display: flex;
    flex-direction: column;
}

.domain-detail__stack .domain-detail__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 2px;
    border-top: 1px solid var(--border-subtle, #eef0f5);
}

.domain-detail__stack .domain-detail__row:first-child {
    border-top: none;
}

.domain-detail__stack .domain-detail__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: var(--font-size-small);
    white-space: nowrap;
}

.domain-detail__stack .domain-detail__label .icon {
    color: var(--text-muted);
    flex: 0 0 auto;
}

.domain-detail__stack .domain-detail__value {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    overflow-wrap: anywhere;
}


/* =============================================================================
   BILLING SUBSCRIPTION ATTACH CARD (shared: domain panel + email package panel)
   A single subscription attached one-to-one, so a renewal email's widget can
   carry a Pay button straight to its pay page.
   ============================================================================= */

.subscription-attach__search {
    width: 100%;
    margin: 12px 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    font-size: var(--font-size-small);
    font-family: inherit;
    color: var(--text-primary);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}

.subscription-attach__search:focus {
    outline: none;
    border-color: var(--accent, #19213b);
    box-shadow: var(--am-focus);
}

.subscription-attach__results {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.subscription-attach__option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.subscription-attach__option:hover,
.subscription-attach__option:focus-visible {
    border-color: var(--accent, #19213b);
    background: var(--status-info-tint);
    outline: none;
}

.subscription-attach--linked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle, var(--surface-panel));
}

.subscription-attach__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.subscription-attach__name {
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--text-primary);
}

.subscription-attach__meta {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.subscription-attach__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* The domain panel opened BESIDE another (as a companion) is narrower, so its
   two-column details/contacts stack rather than crush. */
.domain-detail--beside .domain-detail__grid {
    grid-template-columns: 1fr;
}

.domain-detail--beside .dns-add-form {
    grid-template-columns: 1fr 1fr;
}

/* RM-041 step 6: the client price under what the agency pays */
.register-row__price small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-muted, #6b7280); text-align: right; }
.register-form__client { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-muted, #6b7280); }
.register-form__balance { margin: 10px 0 14px; padding: 10px 12px; border-radius: 5px; background: var(--am-blue-tint, #f4f5fa); font-size: 13px; color: var(--text-secondary, #5b6170); }
.register-form__balance--short { background: var(--status-warning-tint, #fff4e0); color: var(--status-warning, #a15c00); }
.register-form__balance a { color: inherit; font-weight: 600; }


/* AM Dark Navy on Domains (Leone, 17 Oct): the domain panel, its pop-ups and
   the Register, Transfer, All Domains and Email Hosting screens follow the
   navy instead of the old purple and light blue. */
.domain-detail, .domain-modal-overlay, .domain-card, .domain-list-scroll,
.register-panel, .register-form, .register-results, .transfer-grid, .transfer-result {
    --accent: var(--am-blue, #19213b);
    --accent-hover: var(--am-blue-hover);
    --accent-tint: var(--am-blue-tint);
    --accent-border: var(--border-strong);
}
.domain-card { border-radius: 5px; }
.domain-card__head { border-radius: 5px 5px 0 0; }
.domain-card__head .domain-card__title { color: var(--am-blue, #19213b); }

/* Connect Website sits on the panel header: white with navy text. */
.am-btn.domain-connect-website {
    background: var(--surface-panel);
    color: var(--am-blue, #19213b);
    border: 1px solid var(--border-strong);
}
.am-btn.domain-connect-website:hover {
    background: var(--am-blue-tint);
    border-color: var(--am-blue, #19213b);
}

/* Turn on / Turn off in the settings rows. */
.am-btn.domain-toggle { min-width: 84px; justify-content: center; }

/* MODIFY and Cancel links in navy. */
.domain-detail .link-button { color: var(--am-blue, #19213b); font-weight: 600; }
.domain-detail .link-button:hover { color: var(--am-blue-hover); }
.domain-detail .link-button--danger { color: var(--status-danger); }


/* Domain panel redesign (Leone, 17 Oct): flat cards with no shadow and no
   coloured header band, an overview strip of the figures people open a domain
   to check, switches for the settings and the Kudio notched fields for values
   and editing. Everything is scoped to the panel. */
.domain-detail {
    --dd-line: var(--border-default);
    --dd-soft: var(--border-subtle);
    --dd-fill: var(--surface-subtle);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.domain-detail .domain-detail__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
.domain-detail .domain-detail__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.domain-detail--beside .domain-detail__columns { grid-template-columns: 1fr; }

/* Cards */
.domain-detail .domain-card {
    padding: 18px 20px;
    border: 1px solid var(--dd-line);
    border-radius: 5px;
    background: var(--surface-panel);
    box-shadow: none;
}
.domain-detail .domain-card__head {
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.domain-detail .domain-card__title {
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--am-blue, #19213b);
}
.domain-detail .domain-card__title .icon {
    width: 15px;
    height: 15px;
    color: var(--am-blue, #19213b);
    opacity: 0.55;
}
.domain-detail .domain-card__note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Overview strip */
.domain-overview {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--dd-line);
    border-radius: 5px;
    background: var(--surface-panel);
}
.domain-overview__tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.domain-detail--beside .domain-overview__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.domain-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 5px;
    background: var(--dd-fill);
}
.domain-tile__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}
.domain-tile__value {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--am-blue, #19213b);
    overflow-wrap: anywhere;
}
.domain-tile__value small {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}
.domain-tile__value .domain-status { font-size: inherit; letter-spacing: 0; text-transform: none; }
.domain-tile__sub { font-size: 12px; color: var(--text-muted); }
.domain-tile--warn { background: var(--status-warning-tint, #fff6e5); }
.domain-tile--warn .domain-tile__sub { color: var(--status-warning, #a15c00); font-weight: 600; }
.domain-overview__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--dd-soft);
}
.domain-overview__note {
    margin-right: auto;
    font-size: 13px;
    color: var(--text-muted);
}

/* Settings switches */
.domain-switch-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--dd-soft);
}
.domain-switch-row:first-child { padding-top: 0; border-top: 0; }
.domain-switch-row:last-child { padding-bottom: 0; }
.domain-switch-row__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.domain-switch-row__label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.domain-switch-row__hint { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.domain-switch {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--border-strong);
    cursor: pointer;
    transition: background 0.15s ease;
}
.domain-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-panel);
    box-shadow: 0 1px 2px rgba(25, 33, 59, 0.3);
    transition: transform 0.15s ease;
}
.domain-switch[aria-checked="true"] { background: var(--am-blue, #19213b); }
.domain-switch[aria-checked="true"] .domain-switch__knob { transform: translateX(16px); }
.domain-switch:hover:not(:disabled) { background: var(--border-strong); }
.domain-switch[aria-checked="true"]:hover:not(:disabled) { background: var(--am-blue-hover); }
.domain-switch:focus-visible { outline: none; box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, 0.25)); }
.domain-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* Registration values in Kudio fields */
.domain-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
}
/* Read-only values keep the AM read-only field: dashed outline on the subtle
   surface (kudio-field.css), the same as Bookings. */
.domain-field-value {
    display: block;
    height: 28px;
    overflow: hidden;
    font-size: 14px;
    line-height: 28px;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.domain-field-value--code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }

/* Name servers as a list */
.domain-list { display: flex; flex-direction: column; }
.domain-list__row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--dd-soft);
}
.domain-list__row:first-child { padding-top: 0; border-top: 0; }
.domain-list__tag {
    justify-self: start;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--dd-fill);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--am-blue, #19213b);
}
.domain-list__main { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.domain-list__meta { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }

.domain-detail .ns-edit-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.domain-detail .ns-edit-row__label { font-size: 12px; font-weight: 600; color: var(--am-blue, #19213b); }

/* Icon buttons in rows */
.am-btn.domain-icon-btn {
    width: 30px;
    padding: 0;
    justify-content: center;
    color: var(--text-muted);
}
.am-btn.domain-icon-btn:hover:not(:disabled) { color: var(--am-blue, #19213b); }
.am-btn.domain-icon-btn--danger:hover:not(:disabled),
.domain-detail .ns-edit-row__remove:hover:not(:disabled) { color: var(--status-danger); }

/* DNS table */
.domain-detail .dns-table { width: 100%; border-collapse: collapse; }
.domain-detail .dns-table th {
    padding: 0 12px 8px 0;
    border-bottom: 1px solid var(--dd-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
}
.domain-detail .dns-table td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--dd-soft);
    vertical-align: middle;
}
.domain-detail .dns-table tbody tr:last-child td { border-bottom: 0; }
.domain-detail .dns-row:hover td { background: var(--surface-subtle); }
.domain-detail .dns-type-pill {
    display: inline-block;
    min-width: 46px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--dd-fill);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    color: var(--am-blue, #19213b);
}
.domain-detail .dns-actions {
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
}
.domain-detail .dns-actions > * + * { margin-left: 4px; }
.domain-detail .dns-actions__ask { margin-right: 6px; font-size: 13px; color: var(--status-danger); font-weight: 500; }
.domain-detail .dns-row--editing td { background: var(--surface-subtle); vertical-align: top; padding-top: 12px; }
.domain-detail .dns-row--editing .dns-actions { padding-top: 18px; }

/* Add a record */
.domain-detail .dns-add {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--dd-soft);
}
.domain-detail .dns-add__title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--am-blue, #19213b);
}
.domain-detail .dns-add__fields {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.6fr) auto;
    align-items: end;
    gap: 10px;
}
.domain-detail .dns-add__submit { height: 38px; }

@media (max-width: 860px) {
    .domain-detail .domain-detail__columns { grid-template-columns: 1fr; }
    .domain-overview__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .domain-detail .dns-add__fields { grid-template-columns: 1fr 1fr; }
    .domain-detail .dns-add__submit { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .domain-fields { grid-template-columns: 1fr; }
    .domain-list__row { grid-template-columns: 44px minmax(0, 1fr); }
    .domain-list__meta { grid-column: 2; }
    .domain-detail .ns-edit-row { grid-template-columns: 1fr auto; }
    .domain-detail .ns-edit-row__label { grid-column: 1 / -1; }
    .domain-overview__actions .am-btn { flex: 1 1 auto; justify-content: center; }
}
.domain-detail .dns-table .dns-row--editing td.dns-actions { background: var(--surface-subtle); }

/* Header tools (Leone, 17 Oct): Billing and Project sit before Connect Website,
   each opening a small pop-up with a search, or what is linked. */
.domain-header-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.domain-header-tools__slot:empty { display: none; }
.domain-overview__actions { justify-content: flex-end; }
.domain-readonly-note {
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 5px;
    background: var(--dd-fill, #f6f7fb);
    font-size: 12.5px;
    color: var(--text-muted);
}
.attach-button { position: relative; }
.attach-button[hidden] { display: none; }
.am-btn.attach-button__trigger {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.am-btn.attach-button__trigger:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.6); }
.am-btn.attach-button__trigger--linked { background: var(--surface-panel); color: var(--am-blue, #19213b); border-color: var(--surface-panel); }
.am-btn.attach-button__trigger--linked .icon { color: var(--status-success, #15803d); }
.am-btn.attach-button__trigger--linked:hover { background: var(--am-blue-tint); border-color: var(--am-blue-tint); }
.attach-button__popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 14px;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: var(--surface-panel);
    box-shadow: 0 12px 32px rgba(25, 33, 59, 0.16);
    color: var(--text-primary);
    text-align: left;
}
.attach-button__popup[hidden] { display: none; }
.attach-button__results { display: flex; flex-direction: column; margin-top: 10px; max-height: 300px; overflow-y: auto; }
.attach-button__option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 5px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.attach-button__option:hover, .attach-button__option:focus-visible { background: var(--surface-subtle); outline: none; }
.attach-button__option:disabled { opacity: 0.5; cursor: wait; }
.attach-button__name { font-size: 13.5px; font-weight: 600; color: var(--am-blue, #19213b); overflow-wrap: anywhere; }
.attach-button__meta { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.attach-button__note { margin: 4px 2px; font-size: 12.5px; color: var(--text-muted); }
.attach-button__eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--status-success, #15803d); }
.attach-button__linked { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 5px; background: var(--surface-subtle); }
.attach-button__actions { display: flex; gap: 6px; margin-top: 12px; }
.attach-button__unlink { margin-left: auto; color: var(--status-danger); }
.attach-button__back { margin-top: 8px; }
@media (max-width: 520px) { .attach-button__popup { position: fixed; top: 112px; left: 16px; right: 16px; width: auto; } }

/* Email hosting inline on the domain panel (Leone, 17 Oct). */
.domain-email-package + .domain-email-package { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--dd-soft, #eef0f5); }
.domain-email-package__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.domain-email-package__title { font-size: 13.5px; font-weight: 600; color: var(--am-blue, #19213b); }
.domain-fields--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.domain-detail--beside .domain-fields--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .domain-fields--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .domain-fields--wide { grid-template-columns: 1fr; } }
.domain-detail .domain-card__head { flex-wrap: wrap; row-gap: 8px; }
.domain-detail .domain-card__actions { flex-wrap: wrap; gap: 6px; }
.domain-empty-line { margin: 0; font-size: 13px; color: var(--text-muted); }
/* The pop-up sits in the header, outside the panel body: navy there too. */
.attach-button__popup { --accent: var(--am-blue, #19213b); --accent-tint: var(--am-blue-tint); --accent-border: var(--border-strong); }

/* Billing / Project connected, shown on project and organisation lists. */
.link-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.link-chips--none { color: var(--text-muted); }
.link-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; background: var(--am-blue-tint); font-size: 11.5px; font-weight: 600; color: var(--am-blue, #19213b); white-space: nowrap; }

/* Buy email hosting (RM-067): Kudio fields, the two prices, the balance. */
.email-buy { --accent: var(--am-blue, #19213b); --accent-tint: var(--am-blue-tint); --accent-border: var(--border-strong); }
.email-buy__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.email-buy__renew { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: 5px; cursor: pointer; }
.email-buy__renew input { margin-top: 3px; accent-color: var(--am-blue, #19213b); }
.email-buy__renew span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--text-primary); }
.email-buy__renew small { font-size: 12.5px; color: var(--text-muted); }
.email-buy__summary { margin-top: 16px; }
.email-buy__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.email-buy__figure { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 5px; background: var(--surface-subtle); }
.email-buy__figure span { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.email-buy__figure strong { font-size: 20px; font-weight: 600; color: var(--am-blue, #19213b); }
.email-buy__figure small { font-size: 12px; color: var(--text-muted); }
@media (max-width: 560px) { .email-buy__grid, .email-buy__figures { grid-template-columns: 1fr; } }

/* A status pill inside an overview tile (email package panel). */
.domain-tile__value .status-pill { font-size: 13px; vertical-align: middle; }
.domain-overview__actions .am-btn--danger-soft { margin-left: auto; }
.domain-overview__actions { flex-wrap: wrap; }

/* Email hosting as a table on the domain panel (Leone, 17 Oct). */
.domain-detail .email-table__row { cursor: pointer; }
.domain-detail .email-table__row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--am-blue, #19213b); }
.domain-detail .email-table__plan { display: block; font-weight: 600; color: var(--am-blue, #19213b); }
.domain-detail .email-table__type { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.domain-detail .email-table__money { text-align: right; white-space: nowrap; }
.domain-detail .email-table .domain-status { font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.domain-detail .email-table .dns-actions .icon { color: var(--text-muted); }

/* Register a domain, in AM Dark Navy (Leone, 17 Oct). */
.register-page { --accent: var(--am-blue, #19213b); --accent-tint: var(--am-blue-tint); --accent-border: var(--border-strong); }
.register-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; margin-bottom: 20px; }
.register-page__wallet { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border: 1px solid var(--border-default); border-radius: 5px; background: var(--surface-panel); }
.register-page__wallet-icon { display: inline-flex; color: var(--am-blue, #19213b); opacity: 0.6; }
.register-page__wallet-text { display: flex; flex-direction: column; line-height: 1.2; }
.register-page__wallet-text small { font-size: 11.5px; color: var(--text-muted); }
.register-page__wallet-text strong { font-size: 15px; color: var(--am-blue, #19213b); }
.register-hero { margin: 0 var(--gutter, 24px) 18px; padding: 20px; border: 1px solid var(--border-default); border-radius: 5px; background: linear-gradient(180deg, var(--surface-subtle) 0%, #fff 100%); }
.register-search--hero { display: flex; gap: 10px; margin: 0; padding: 0; border: 0; }
.register-search--hero .register-search__field { flex: 1; height: 48px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface-panel); }
.register-search--hero .register-search__field:focus-within { border-color: var(--am-blue, #19213b); box-shadow: inset 0 0 0 1px var(--am-blue); }
.register-search--hero .register-search__input { font-size: 15.5px; }
.register-search__go.am-btn { height: 48px; padding: 0 22px; }
.register-hero__endings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }
.register-hero__ending { padding: 2px 8px; border-radius: 4px; background: var(--am-blue-tint); font-weight: 600; color: var(--am-blue, #19213b); }
.register-page .register-results { margin: 0 var(--gutter, 24px) 32px; }
.register-results__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.register-results__head strong { font-size: 14px; color: var(--am-blue, #19213b); }
.register-page .register-list, .register-panel .register-list { border: 1px solid var(--border-default); border-radius: 5px; background: var(--surface-panel); box-shadow: none; overflow: hidden; }
.register-page .register-row, .register-panel .register-row { padding: 14px 18px; align-items: center; }
.register-page .register-row:hover, .register-panel .register-row:hover { background: var(--surface-subtle); }
.register-page .register-row--taken, .register-panel .register-row--taken { opacity: 1; background: var(--surface-subtle); }
.register-page .register-row--taken .register-row__domain, .register-panel .register-row--taken .register-row__domain { color: var(--text-muted); font-weight: 500; }
.register-row__domain { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.register-row__tld { color: var(--am-blue, #19213b); }
.register-row--taken .register-row__tld { color: inherit; }
.register-row__badge--best { background: var(--am-blue-tint); color: var(--am-blue, #19213b); }
.register-row__status { display: flex; align-items: center; gap: 16px; }
.register-row__pill { padding: 2px 9px; border-radius: var(--radius-chip, 4px); background: var(--status-neutral-tint); font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.register-row__pill--free { background: var(--status-success-tint, #ecfdf3); color: var(--status-success, #15803d); }
.register-row__price { min-width: 110px; text-align: right; font-size: 13px; color: var(--text-muted); }
.register-row__price strong { font-size: 16px; color: var(--am-blue, #19213b); }
.register-row__price span { margin-left: 2px; }
.register-row__price small { display: block; margin-top: 2px; font-size: 12px; }
.register-form__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; border: 0; background: none; }
.register-form__tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 5px; background: var(--surface-subtle); }
.register-form__tile span { font-size: 12px; color: var(--text-muted); }
.register-form__tile strong { font-size: 18px; font-weight: 600; color: var(--am-blue, #19213b); }
.register-form__tile small { font-size: 11.5px; color: var(--text-muted); }
.register-form__section-head { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 13px; font-weight: 600; color: var(--am-blue, #19213b); }
.register-form .register-form__check input { accent-color: var(--am-blue, #19213b); }
@media (max-width: 720px) {
    .register-hero, .register-page .register-results { margin-left: 16px; margin-right: 16px; }
    .register-search--hero { flex-direction: column; }
    .register-page .register-row, .register-panel .register-row { flex-wrap: wrap; gap: 10px; }
    .register-row__status { width: 100%; justify-content: space-between; }
    .register-form__summary { grid-template-columns: 1fr; }
}

/* Transfer a domain in, same look as Register (Leone, 17 Oct). */
.transfer-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 var(--gutter, 24px) 16px; padding: 0; list-style: none; }
.transfer-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: 5px; background: var(--surface-panel); }
.transfer-steps__num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--am-blue, #19213b); color: #fff; font-size: 12px; font-weight: 600; }
.transfer-steps strong { display: block; font-size: 13.5px; color: var(--am-blue, #19213b); }
.transfer-steps small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.transfer-page .transfer-form .transfer-grid { margin: 0; }
.transfer-form__actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.transfer-form__spacer { flex: 1; }
.transfer-form__secret { -webkit-text-security: disc; }
.transfer-form__note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); }
.transfer-page .transfer-result { margin: 0 var(--gutter, 24px) 18px; }
.transfer-page .transfer-result:empty { display: none; }
.transfer-card { padding: 18px 20px; border: 1px solid var(--border-default); border-radius: 5px; background: var(--surface-panel); box-shadow: none; }
.transfer-page .transfer-card { margin: 0; }
.transfer-card--ok { border-color: var(--border-strong); }
.transfer-card__head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.transfer-card__head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--am-blue, #19213b); }
.transfer-card__count { padding: 1px 8px; border-radius: 999px; background: var(--am-blue-tint); font-size: 12px; font-weight: 600; color: var(--am-blue, #19213b); }
.transfer-card__note { margin: 14px 0 0; font-size: 12.5px; color: var(--text-muted); }
.transfer-card__empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px; border-radius: 5px; background: var(--surface-subtle); font-size: 13px; color: var(--text-muted); }
.transfer-card__empty p { margin: 0; }
.transfer-card__empty > span { display: inline-flex; color: var(--am-blue, #19213b); opacity: 0.5; }
.transfer-page .transfer-table { margin: 0; }
@media (max-width: 720px) {
    .transfer-steps { grid-template-columns: 1fr 1fr; margin-left: 16px; margin-right: 16px; }
    .transfer-page .transfer-result { margin-left: 16px; margin-right: 16px; }
    .transfer-form__spacer { display: none; }
}

/* A toolbar button as tall as the search box beside it (Leone, 17 Oct). */
.am-btn.am-btn--field { height: var(--control-height, 38px); min-height: var(--control-height, 38px); padding: 0 16px; }

/* The Renew pop-up, styled like the Billing and Project pop-ups (Leone, 17 Oct). */
.renew-popover { display: inline-flex; }
.renew-popover__popup { width: 300px; }
.renew-popover__popup--left { right: auto; left: 0; }
.renew-popover .attach-button__eyebrow.renew-popover__eyebrow { color: var(--am-blue, #19213b); }
.renew-popover__choices { display: flex; flex-direction: column; gap: 6px; }
.renew-popover__choice { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: 5px; background: var(--surface-panel); font: inherit; font-size: 13.5px; color: var(--text-primary); text-align: left; cursor: pointer; }
.renew-popover__choice strong { color: var(--am-blue, #19213b); font-weight: 600; }
.renew-popover__choice:hover { background: var(--surface-subtle); }
.renew-popover__choice:focus-visible { outline: none; box-shadow: var(--am-focus); }
.renew-popover__choice--on { border-color: var(--am-blue, #19213b); background: var(--am-blue-tint); box-shadow: inset 0 0 0 1px var(--am-blue, #19213b); }
.renew-popover__sum { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; margin-top: 12px; padding: 10px 12px; border-radius: 5px; background: var(--surface-subtle); font-size: 12.5px; color: var(--text-muted); }
.renew-popover__sum strong { font-size: 16px; color: var(--am-blue, #19213b); }
.renew-popover__sum small { grid-column: 1 / -1; font-size: 12px; }
.renew-popover__short { color: var(--status-danger, #b42318); }
.renew-popover__cancel { margin-left: auto; }
.domain-card--danger .domain-card__title { color: var(--status-danger, #b42318); }

/* Domains > Settings > Automations: the shared look lives in automations.css. */

/* The package's details as a one-row table, like the domain's email table. */
.package-table .email-table__plan { display: block; font-weight: 600; color: var(--am-blue, #19213b); }
.package-table th, .package-table td { text-align: left; white-space: nowrap; }

/* All Domains and Email Hosting tiles in AM navy, like the domain panel's tiles (Leone, 17 Oct). */
.domain-tiles .summary-counters { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.domain-tiles .summary-counter { position: relative; align-items: flex-start; padding: 14px 16px; border: 1px solid transparent; border-radius: 5px; background: var(--surface-subtle); box-shadow: none; }
.domain-tiles .summary-counter:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
.domain-tiles .summary-counter--selected { border-color: var(--am-blue, #19213b); background: var(--surface-panel); box-shadow: inset 0 0 0 1px var(--am-blue, #19213b); }
.domain-tiles .summary-counter:focus-visible { outline: none; box-shadow: var(--am-focus); }
.domain-tiles .summary-counter__badge { position: absolute; top: 18px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.domain-tiles .summary-counter__badge .icon { display: none; }
.domain-tiles .summary-counter__badge--success { background: var(--status-success, #15803d); }
.domain-tiles .summary-counter__badge--info { background: var(--status-info); }
.domain-tiles .summary-counter__badge--danger { background: var(--status-danger, #b42318); }
.domain-tiles .summary-counter__badge--warning { background: var(--status-warning); }
.domain-tiles .summary-counter__badge--accent { background: var(--am-blue, #19213b); }
.domain-tiles .summary-counter__text { display: flex; flex-direction: column-reverse; gap: 4px; }
.domain-tiles .summary-counter__label { font-size: 12.5px; color: var(--text-muted); }
.domain-tiles .summary-counter__value { font-size: 24px; font-weight: 600; color: var(--am-blue, #19213b); }

/* No dots on the domain tiles (Leone, 18 Oct). */
.domain-tiles .summary-counter__badge { display: none; }

/* Console > All Domains (Leone, 18 Oct). */
.console-domains__table th, .console-domains__table td { text-align: left; }
.console-domains__table td small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.console-domains__row { cursor: pointer; }
.console-domains__row:hover { background: var(--surface-subtle); }
.console-domains__row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--am-blue, #19213b); }
.console-domains__customer { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; color: var(--am-blue, #19213b); }

/* A package and all its actions inside the domain page (console, Leone 18 Oct). */
.email-inline { padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.email-inline:first-of-type { border-top: 0; }
.email-inline__facts { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 10px; }
.email-inline__fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 5px; background: var(--surface-subtle); }
.email-inline__fact > span { font-size: 12px; color: var(--text-muted); }
.email-inline__fact strong { font-size: 14px; font-weight: 600; color: var(--am-blue, #19213b); overflow-wrap: anywhere; }
.email-inline__fact small { font-size: 12px; color: var(--text-muted); }
.email-inline__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 760px) { .email-inline__facts { grid-template-columns: 1fr 1fr; } .email-inline__actions { justify-content: flex-start; } }

/* Editing a domain's owner (Leone, 18 Oct). */
.domain-owner-form .domain-fields { margin-bottom: 4px; }
.domain-owner-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Console email: actions above the tiles, the status inside the Plan tile (Leone, 18 Oct). */
.email-inline__facts { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
.email-inline__actions { justify-content: flex-start; margin: 0 0 10px; }
.email-inline__status { align-self: flex-start; margin-top: 4px; font-size: 12px; }

/* Console > Transfers (Leone, 18 Oct). */
.console-transfers__body { margin: 0 var(--gutter, 24px) 32px; }
/* .page-surface is a fixed-height column that clips: the body takes the leftover
   height and scrolls. Below 900px the page grows and the stage scrolls. */
.console-transfers__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 900px) { .console-transfers__body { flex: none; overflow-y: visible; } }
.console-transfers__title { margin: 20px 0 10px; font-size: 15px; font-weight: 600; color: var(--am-blue, #19213b); }
.console-transfers__empty { margin: 0; padding: 14px; border-radius: 5px; background: var(--surface-subtle); font-size: 13px; color: var(--text-muted); }
.console-transfers .summary-counter { cursor: default; }
.email-inline__actions { justify-content: flex-end; }

/* The Renew pop-up floats on the page while open, so no panel clips it (Leone, 18 Oct). */
.attach-button__popup.renew-popover__popup--floating { position: fixed; right: auto; z-index: 10050; overflow-y: auto; }

/* Many terms (1 month to 10 years) in two compact columns, so the pop-up stays short (Leone, 18 Oct). */
.renew-popover__popup { width: 340px; }
.renew-popover__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 248px; overflow-y: auto; }
.renew-popover__choice { padding: 7px 10px; font-size: 12.5px; }
.renew-popover__choice strong { font-size: 12.5px; }