/* License Manager (/license). Built from the site's own pieces: DM Serif
   Display headings, SF Pro text, cream cards like the ones on /buy, and the
   pill-shaped inputs, selects and buttons used across the site. */

/* Short pages would end while the header glow is still bright, leaving a hard
   edge above the footer, so the glow fades out to the page color instead. */
.license-main {
    margin-bottom: 0;
    padding-bottom: 110px;
    background-image:
        linear-gradient(to bottom, rgba(253, 242, 202, 0) calc(100% - 260px), #fdf2ca 100%),
        radial-gradient(1500px circle at 50% 500px, #ffffff 0%, #fff8dd 40%, transparent 70%);
}

/* No "Last updated" line above the title as on the legal pages, so the title
   takes that line's place instead of sitting below the empty space. */
.license-main .blog-post-title {
    margin-top: 0;
}

.license-manager {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.license-manager strong {
    color: #333;
    font-weight: 600;
}

/* Email addresses wrap as a whole, not at a hyphen inside them */
.license-account strong,
.license-panel strong {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.license-inline-form {
    margin: 0;
}

/* Cards: white, with the shadow of the /buy pricing cards and no outline,
   like the content blocks on the other pages */

.license-panel,
.license-card {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.license-panel {
    max-width: 440px;
    margin: 0 auto;
    padding: 40px 36px 36px;
    text-align: center;
}

.license-panel-title,
.license-product {
    font-family: 'DM Serif Display', serif;
    font-weight: normal;
    color: #333;
}

.license-panel-title {
    font-size: 32px;
    line-height: 1.15;
    margin: 0 0 12px;
}

.license-panel p {
    margin: 0 0 24px;
}

.license-panel p:last-child {
    margin-bottom: 0;
}

.license-panel-title + .license-form {
    margin-top: 24px;
}

/* Same controls, sizes and gaps as the "One More Seat" block on /buy */
.license-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    line-height: normal;
}

.license-input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-width: 1px;
    padding: 11px 16px;
    text-align: center;
}

.license-submit {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
}

.license-note {
    margin: 24px 0 0 !important;
    font-size: 14px;
    line-height: 1.55;
    color: #666;
}

.license-secondary-link {
    display: inline-block;
    font-size: 15px;
}

/* Messages */

/* Tinted panel with a colored edge, like the callouts in the site's articles */
.license-banner {
    margin: 0 0 20px;
    padding: 12px 16px 12px 19px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

.license-banner-ok {
    background: rgba(85, 159, 63, 0.1);
    box-shadow: inset 3px 0 0 #559F3F;
    color: #2f5402;
}

.license-banner-error {
    background: rgba(192, 57, 43, 0.08);
    box-shadow: inset 3px 0 0 #c0392b;
    color: #8c1d18;
}

/* Dashboard. One spacing rhythm: 20px under the card head, 24px between
   blocks, 10px from a label to what it labels. */

.license-account {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 0 28px;
    font-size: 15px;
    color: #666;
    text-align: center;
}

.license-link-button {
    font: inherit;
    font-weight: 700;
    color: #3B6702;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.license-link-button:hover {
    text-decoration: underline;
}

.license-card {
    margin: 0 0 24px;
    padding: 28px 32px;
    scroll-margin-top: 120px;
}

/* Title and subnote, like the plan cards on /buy */
.license-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
}

.license-heading {
    min-width: 0;
}

.license-product {
    font-size: 26px;
    line-height: 1.15;
    margin: 0;
    overflow-wrap: anywhere;
}

.license-subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #666;
}

/* Same shape as the badges on /buy, in quiet tints */
.license-status {
    flex: none;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.license-status-active {
    background: #eafaf1;
    color: #1e824c;
}

.license-status-inactive {
    background: #fdecea;
    color: #c0392b;
}

/* The key box of the license key email: green border, mint fill, bold key */
.license-key-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
    padding: 7px 7px 7px 20px;
    background: #eafaf1;
    border: 2px solid #2ecc71;
    border-radius: 20px;
}

.license-key {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #1e824c;
    overflow-wrap: anywhere;
}

/* Fixed widths keep the row still when the labels change to Hide and Copied */
.license-reveal {
    flex: none;
    min-width: 3.6em;
    padding: 4px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #1e824c;
    cursor: pointer;
}

.license-reveal:hover {
    text-decoration: underline;
}

.license-copy {
    flex: none;
    min-width: 100px;
    justify-content: center;
}

.license-button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.license-button:focus-visible,
.license-link-button:focus-visible,
.license-reveal:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(85, 159, 63, 0.3);
}

.license-button:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Quiet until hovered: a list of red buttons reads like a warning */
.license-remove:hover {
    color: #b3261e;
    background: rgba(179, 38, 30, 0.08);
}

.license-restore {
    color: #3B6702;
}

.license-restore:hover {
    background: rgba(59, 103, 2, 0.08);
}

.license-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}

/* Small labels, like the FAQ subheading on /buy */
.license-label {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    color: #333;
}

.license-usage {
    font-size: 14px;
    color: #666;
    text-align: right;
}

.license-devices {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
}

.license-device {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    box-sizing: border-box;
    padding: 6px 8px 6px 18px;
}

.license-device + .license-device {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.license-device-name {
    color: #333;
    overflow-wrap: anywhere;
}

.license-removed-head {
    margin-top: 24px;
}

.license-removed .license-device-name {
    color: #848484;
}

.license-empty {
    margin: 0;
    padding: 14px 18px;
    border: 1px dashed rgba(0, 0, 0, 0.18);
    border-radius: 14px;
    font-size: 15px;
    color: #666;
}

.license-caption {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: #666;
}

/* Buying seats is the card's footer: label on the left, controls on the right */
.license-add {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px -32px -28px;
    padding: 18px 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0 0 16px 16px;
    background: #fbfbf9;
}

.license-add-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.license-add-text .license-usage {
    font-size: 13px;
    text-align: left;
}

.license-add-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.license-amount {
    flex: none;
    min-width: 112px;
    padding: 12px 38px 12px 18px;
    background-position: right 12px center;
    font-size: 14px;
    line-height: 1.2;
}

.license-checkout {
    flex: none;
    justify-content: center;
}

@media (max-width: 600px) {
    /* The article around it already has side padding on phones */
    .license-manager {
        padding: 0;
    }

    .license-panel {
        padding: 32px 22px 28px;
    }

    .license-panel-title {
        font-size: 28px;
    }

    .license-card {
        padding: 22px 18px;
    }

    .license-product {
        font-size: 22px;
    }

    .license-key-row {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px 16px;
        padding: 12px 12px 12px 16px;
    }

    .license-key {
        flex-basis: 100%;
        font-size: 12px;
        letter-spacing: 0;
    }

    /* Seats and removals go on their own line under "Macs" */
    .license-macs-head {
        flex-wrap: wrap;
        gap: 2px 12px;
    }

    .license-macs-head .license-usage {
        flex-basis: 100%;
        text-align: left;
    }

    .license-add {
        flex-direction: column;
        align-items: stretch;
        margin: 22px -18px -22px;
        padding: 16px 18px 18px;
    }

    .license-add-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .license-amount,
    .license-checkout {
        width: 100%;
    }
}