/* License row (KL-38, extracted to features/ in KL-126). The Active
   state gets a green left-border + check glyph as the visual reward
   for a successful activation. */
@layer features {

.license-row {
    border-left: 3px solid transparent;
    transition: border-color 0.3s ease;
}
.license-row[data-state="active"] {
    border-left-color: #4caf50;
}
.license-row[data-state="active"] .setting-status {
    color: #4caf50;
    font-weight: 700;
}
.license-row[data-state="error"] {
    border-left-color: var(--danger);
}

.license-key-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.5rem 0.6rem;
    border-radius: 0.3rem;
    font-family: inherit;
    font-size: 0.75rem;
    min-width: 0;
    letter-spacing: 0.05em;
}
.license-key-input:focus {
    outline: none;
    border-color: var(--accent);
}
.license-key-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.license-error {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--danger);
    line-height: 1.4;
}

.license-active-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.license-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #4caf50;
    color: #0a1410;
    font-weight: 900;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6);
}
.license-row[data-state="active"] .license-check {
    animation: license-check-pulse 1.6s ease-out 1;
}
@keyframes license-check-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}
.license-tier-pill {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.license-active-pill {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.4);
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
}

.license-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg);
    border-radius: 0.3rem;
}
.license-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.7rem;
    gap: 0.6rem;
}
.license-meta-label {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6rem;
}
.license-meta-value {
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    text-align: right;
    word-break: break-all;
}

.license-deactivate {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 0.65rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}
.license-deactivate:hover {
    opacity: 1;
    color: var(--danger);
}

.license-restart-hint {
    margin-top: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-left: 2px solid var(--accent);
    background: var(--bg);
    font-size: 0.65rem;
    color: var(--text-dim);
    line-height: 1.4;
    border-radius: 0 0.2rem 0.2rem 0;
}

/* Tier-override state: dev secret, env license key, or --force-tier
   are pinning the runtime tier to something the .license cache doesn't
   back. Render a clear amber banner so the user knows why the sidebar
   says one thing and the License row would otherwise say another. */
.license-row[data-state="override"] {
    border-left-color: var(--flash, #f5a623);
}
.license-row[data-state="override"] .setting-status {
    color: var(--flash, #f5a623);
    font-weight: 700;
}
.license-override {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.7rem;
    background: var(--bg);
    border-radius: 0.3rem;
    border: 1px solid rgba(245, 166, 35, 0.35);
}
.license-override-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.license-override-glyph {
    font-size: 1rem;
    color: var(--flash, #f5a623);
}
.license-override-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--flash, #f5a623);
    letter-spacing: 0.04em;
}
.license-override-body {
    font-size: 0.72rem;
    color: var(--text);
    line-height: 1.45;
}
.license-override-body strong {
    color: var(--flash, #f5a623);
}
.license-override-hint {
    font-size: 0.65rem;
    color: var(--text-dim);
    line-height: 1.45;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

} /* end @layer features */
