/* KahunaCart Licenses — the storefront's licence keys.

   This file styles nothing on its own. Every colour, radius and easing here
   reads a --kc-* token declared by the base plugin's stylesheet, which resolves
   --kahunacart-* (a site's override) → --grav-* (a theme's design tokens) →
   a neutral derived from --kahunacart-fg. See the base plugin's docs/theming.md
   for the full chain and the variable reference.

   Two consequences worth knowing. A theme that already colours KahunaCart
   colours the licence panels for nothing — there is no second set of variables
   to configure. And with the base plugin's `builtin_css` switched off this file
   is not enqueued either, because with the tokens gone it would paint licence
   panels in a palette nothing else on the page is using.

   Every rule is scoped to .kahunacart-license or .kahunacart-licenses, and the
   outer selector is wrapped in :where() wherever it is not load-bearing, so a
   theme's own plain class selector wins on its own weight. Nothing in this file
   forces a value past a theme's, and nothing in it ever should. */

/* ── the panel ──────────────────────────────────────────────────────────────
   One wrapper, three destinations: the receipt, the account tab and the
   overview card. They differ in spacing and nothing else, so the shared rules
   live here and each modifier only says what it moves. */

.kahunacart-licenses {
    display: grid;
    gap: 1rem;
}
.kahunacart-licenses--order {
    margin-block: 1rem;
}
.kahunacart-licenses--account {
    margin-block: 1.5rem;
}

/* Merchant-written Markdown, so it may be a paragraph or five. Its first and
   last margins are collapsed away to keep the block's own spacing honest. */
.kahunacart-licenses-intro :where(> :first-child) {
    margin-block-start: 0;
}
.kahunacart-licenses-intro :where(> :last-child) {
    margin-block-end: 0;
}

/* Keys not issued yet. Deliberately quiet: this state lasts seconds, and a
   warning-coloured box for something that is going fine reads as a problem. */
.kahunacart-licenses-pending {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--kc-border-strong);
    border-radius: var(--kc-radius);
    color: var(--kc-muted);
}

/* ── one licence ────────────────────────────────────────────────────────────
   A card rather than a table row. A key carries five or six facts of very
   different lengths — a product name, a monospace key, a seat count, two dates
   and a paragraph of instructions — and a table that fits all of them on a
   phone does not exist. */

.kahunacart-license {
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background: var(--kc-surface);
}
.kahunacart-license + .kahunacart-license {
    margin-block-start: 0.75rem;
}

/* A revoked or suspended key is still shown — the customer needs to know it
   exists and why it is not working — but it is faded so the working keys above
   it are the ones the eye lands on. */
.kahunacart-license--revoked,
.kahunacart-license--suspended {
    opacity: 0.75;
}

.kahunacart-license-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
}
.kahunacart-license-product {
    margin: 0;
    font-size: 1.05em;
}
.kahunacart-license-variant {
    color: var(--kc-muted);
    font-weight: 400;
}

/* ── status pill ────────────────────────────────────────────────────────────
   Tinted from the same token the rest of the storefront uses for that meaning,
   at low alpha so the pill reads as a label rather than as an alert. Expired
   and suspended share the warning tint on purpose: both mean "this needs your
   attention", and only revoked means "this is over". */

.kahunacart-license-status {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: 999px;
    color: var(--kc-muted);
    font-size: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.kahunacart-license-status--active {
    border-color: color-mix(in srgb, var(--kc-success) 45%, transparent);
    background: color-mix(in srgb, var(--kc-success) 10%, transparent);
    color: var(--kc-success);
}
.kahunacart-license-status--expired,
.kahunacart-license-status--suspended {
    border-color: color-mix(in srgb, var(--kc-warning) 45%, transparent);
    background: color-mix(in srgb, var(--kc-warning) 10%, transparent);
    color: var(--kc-warning);
}
.kahunacart-license-status--revoked {
    border-color: color-mix(in srgb, var(--kc-danger) 45%, transparent);
    background: color-mix(in srgb, var(--kc-danger) 8%, transparent);
    color: var(--kc-danger);
}

.kahunacart-license-note {
    margin: 0.5rem 0 0;
    color: var(--kc-muted);
    font-size: 0.9em;
}

/* ── the key itself ─────────────────────────────────────────────────────────
   The one thing on the page the customer came for, so it is the one thing set
   in a monospace face at full contrast, and it wraps rather than overflowing:
   a long key inside a narrow card must not push the page sideways.  */

.kahunacart-license-keyline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin-block: 0.75rem 0.5rem;
}
.kahunacart-license-keylabel {
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.kahunacart-license-key {
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
    color: var(--kc-fg);
    font-family: var(--kc-mono);
    font-size: 1.02em;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    user-select: all;
}
.kahunacart-license-copy {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 0.85em;
    transition: border-color var(--kc-dur) var(--kc-ease), color var(--kc-dur) var(--kc-ease);
}
.kahunacart-license-copy:hover {
    border-color: var(--kc-accent);
    color: var(--kc-accent);
}

/* ── terms ──────────────────────────────────────────────────────────────────
   Seats, expiry and updates: three short facts that belong on one line on a
   desktop and stack on a phone. Tabular figures so a column of counts and
   dates lines up down a list of keys. */

.kahunacart-license-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--kc-muted);
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

/* ── instructions and files ─────────────────────────────────────────────────
   Both are merchant-configured and both are optional, so they carry their own
   heading rather than relying on position to explain themselves. */

.kahunacart-license-instructions,
.kahunacart-license-files,
.kahunacart-license-activations {
    margin-block-start: 0.9rem;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--kc-border);
}
.kahunacart-license :where(h4) {
    margin: 0 0 0.5rem;
    color: var(--kc-subtle);
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.kahunacart-license-instructions :where(> :last-child) {
    margin-block-end: 0;
}
.kahunacart-license-filelist,
.kahunacart-license-seatlist {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── seats ──────────────────────────────────────────────────────────────────
   Each live activation with the control that frees it. The form is inline and
   pushed to the far edge, so the machine name reads first and the destructive
   control is the last thing reached — by pointer and by keyboard alike. */

.kahunacart-license-seat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.8rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius);
    background: var(--kc-bg);
}
.kahunacart-license-instance {
    font-family: var(--kc-mono);
    font-size: 0.92em;
    overflow-wrap: anywhere;
}
.kahunacart-license-seatmeta {
    color: var(--kc-muted);
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}
.kahunacart-license-deactivate {
    margin: 0;
    margin-inline-start: auto;
}
.kahunacart-license-deactivate :where(button) {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--kc-border-strong);
    border-radius: var(--kc-radius);
    background: transparent;
    color: var(--kc-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.85em;
    transition: border-color var(--kc-dur) var(--kc-ease), color var(--kc-dur) var(--kc-ease);
}
.kahunacart-license-deactivate :where(button):hover {
    border-color: color-mix(in srgb, var(--kc-danger) 55%, transparent);
    color: var(--kc-danger);
}
.kahunacart-license-empty {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.9em;
}

/* ── overview card ──────────────────────────────────────────────────────────
   One line on the account overview. The counts sit on the accent ink so the
   number is what registers; the qualifiers stay muted. */

.kahunacart-licenses--card {
    gap: 0.35rem;
}
.kahunacart-licenses-count {
    margin: 0;
    font-size: 1.05em;
}
.kahunacart-licenses-expiring,
.kahunacart-licenses-expired {
    display: inline-block;
    margin-inline-start: 0.5rem;
    color: var(--kc-warning);
    font-size: 0.88em;
}
.kahunacart-licenses-cardlink,
.kahunacart-licenses-manage {
    margin: 0;
    font-size: 0.92em;
}

/* Focus rings are the base stylesheet's job everywhere else; these two controls
   are ours, and a checkout is exactly where losing your keyboard position costs
   a sale. */
.kahunacart-license-copy:focus-visible,
.kahunacart-license-deactivate :where(button):focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .kahunacart-license-copy,
    .kahunacart-license-deactivate :where(button) {
        transition: none;
    }
}

/* Renewals: the key field on a renewal product's buy form, and the Renew link
   beside a key in the account tab. Inherits the theme's form controls and
   only sets the spacing and the secondary-text tones. */
.kahunacart-license-renewal {
    display: grid;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
}

.kahunacart-license-renewal-label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--kc-muted);
}

.kahunacart-license-renewal-select,
.kahunacart-license-renewal-key {
    max-width: 28rem;
    font-family: var(--kc-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.kahunacart-license-renewal-help {
    margin: 0;
    font-size: 0.85em;
    color: var(--kc-muted);
}

.kahunacart-license-renew {
    margin: 0.5rem 0 0;
    font-size: 0.92em;
}

.kahunacart-license-renew-link:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}