/* ============================================================================
   licence.css — what the licence does not include, and what is running out.

   Two pieces, both drawn from ClientSharedLibrary/Service/LicenseNudges.cs:

   .lf-*  A locked feature, shown rather than hidden: greyed, with a lock and
          a tag naming the cheapest plan that has it (PlanTag). A tap opens
          the sheet (LockedFeatureSheet) — the feature's demo, the plan, and
          the way to the plans page. A locked page shows the same panel in
          place (.lf-page).
   .cw-*  Consumable warnings (ConsumableWarningsBanner): WebStore credits,
          the licence's days and the usage limits, low (warn) or out (danger).

   Colours are the semantic tokens only, so both read in light and dark.
   ============================================================================ */

/* ── The plan tag ──────────────────────────────────────────────────────────── */
.lf-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: var(--mp-radius-pill);
    background: var(--mp-warn-soft);
    color: var(--mp-warn);
    border: 1px solid color-mix(in srgb, var(--mp-warn) 28%, transparent);
    font-size: var(--mp-text-xs);
    font-weight: var(--mp-weight-bold);
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
.lf-tag .bi { font-size: 0.85em; }
.lf-tag-l { overflow: hidden; text-overflow: ellipsis; }

/* ── A locked item, in place ───────────────────────────────────────────────── */
.lf-locked { position: relative; }
/* An item that draws nothing for this user (a role it is not for) stays out of sight, locked or not. */
.lf-locked:not(:has(> .lf-locked-body > *)) { display: none; }
.lf-locked-body {
    opacity: .55;
    filter: grayscale(.5);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
.lf-locked-tag {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 55%;
    pointer-events: none;
    z-index: 1;
}
.lf-locked-hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.lf-locked-hit:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: -2px; border-radius: var(--mp-radius-sm); }

/* The language picker when billing in your language is not in the plan. */
.lf-lang-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 10px;
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-radius-pill);
    background: var(--mp-surface);
    color: var(--mp-ink-2);
    font-size: var(--mp-text-sm);
    cursor: pointer;
}
.lf-lang-locked:hover { background: var(--mp-surface-2); }

/* ── The panel: sheet body, or a locked page ───────────────────────────────── */
.lf-panel {
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-3);
    color: var(--mp-ink);
    font-family: var(--mp-font);
}
.lf-head { display: flex; align-items: flex-start; gap: var(--mp-space-3); }
.lf-head-ico {
    flex: none;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--mp-accent-soft);
    color: var(--mp-accent);
    font-size: 1.3rem;
}
.lf-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-head-title { font-size: var(--mp-text-lg); font-weight: var(--mp-weight-bold); line-height: var(--mp-leading-tight); }
.lf-head-sub { font-size: var(--mp-text-sm); color: var(--mp-muted); }
.lf-x {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; border-radius: var(--mp-radius-pill);
    background: var(--mp-surface-2);
    color: var(--mp-ink-2);
    cursor: pointer;
}
.lf-x:hover { background: var(--mp-surface-sunk); }

.lf-plan {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mp-space-2);
    padding: var(--mp-space-2) var(--mp-space-3);
    border-radius: var(--mp-radius);
    background: var(--mp-surface-2);
    font-size: var(--mp-text-sm);
    color: var(--mp-ink-2);
}

.lf-demo { border-radius: 16px; overflow: hidden; }
.lf-demo-soon {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mp-space-2);
    padding: var(--mp-space-5);
    text-align: center;
    border-radius: 16px;
    background: radial-gradient(120% 90% at 50% 0%, #3a1640 0%, #140d22 70%);
    color: #eef2f7;
}
.lf-demo-soon-ico {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: 1.6rem;
}
.lf-demo-soon-title { font-weight: var(--mp-weight-bold); font-size: var(--mp-text-md); }
.lf-demo-soon-sub { font-size: var(--mp-text-sm); color: #a3afc0; max-width: 34ch; }

.lf-acts { display: flex; flex-wrap: wrap; gap: var(--mp-space-2); }
.lf-acts .btn { min-height: 44px; flex: 1 1 160px; }
.lf-ask { flex: 1 1 100%; margin: 0; font-size: var(--mp-text-sm); color: var(--mp-muted); }

/* A locked page: the panel as the page's card. */
.lf-page {
    max-width: 620px;
    margin: var(--mp-space-5) auto;
    padding: var(--mp-space-5);
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius-lg);
    box-shadow: var(--mp-shadow);
}

/* ── The sheet ─────────────────────────────────────────────────────────────── */
.lf-sheet-backdrop {
    position: fixed; inset: 0;
    z-index: 10400;          /* over the app's modals and toasts; a full-screen demo (10500) goes over it */
    background: rgba(10, 12, 18, .5);
    animation: lf-fade .2s ease both;
}
.lf-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10401;
    max-height: 94vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--mp-space-2) var(--mp-space-4) max(var(--mp-space-4), env(safe-area-inset-bottom));
    background: var(--mp-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--mp-shadow-lg);
    animation: lf-up .26s cubic-bezier(.2, .8, .2, 1) both;
}
.lf-sheet-grip {
    display: block;
    width: 40px; height: 5px;
    margin: 0 auto var(--mp-space-3);
    border-radius: 3px;
    background: var(--mp-line-strong);
}
@media (min-width: 768px) {
    .lf-sheet {
        left: 50%; right: auto; bottom: auto; top: 50%;
        width: min(580px, 92vw);
        transform: translate(-50%, -50%);
        padding: var(--mp-space-5);
        border-radius: 20px;
        animation: lf-pop .2s ease both;
    }
    .lf-sheet-grip { display: none; }
}
@keyframes lf-fade { from { opacity: 0; } }
@keyframes lf-up { from { transform: translateY(100%); } }
@keyframes lf-pop { from { opacity: 0; transform: translate(-50%, -46%); } }
@media (prefers-reduced-motion: reduce) {
    .lf-sheet, .lf-sheet-backdrop { animation: none; }
}

/* ── Consumable warnings ───────────────────────────────────────────────────── */
.cw-banner {
    --cw-fg: var(--mp-warn);
    --cw-bg: var(--mp-warn-soft);
    --cw-ink: var(--mp-warn-ink);
    margin: var(--mp-space-2) var(--mp-space-3) 0;
    border-radius: var(--mp-radius);
    background: var(--cw-bg);
    border: 1px solid color-mix(in srgb, var(--cw-fg) 30%, transparent);
    color: var(--mp-ink);
    font-family: var(--mp-font);
}
.cw-banner--out { --cw-fg: var(--mp-danger); --cw-bg: var(--mp-danger-soft); --cw-ink: var(--mp-danger-ink); }
.cw-main, .cw-row {
    display: flex;
    align-items: center;
    gap: var(--mp-space-2) var(--mp-space-3);
    padding: var(--mp-space-2) var(--mp-space-3);
}
.cw-ico {
    flex: none;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: var(--mp-radius-pill);
    background: var(--cw-fg);
    color: var(--cw-ink);
    font-size: 1rem;
}
.cw-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cw-title { font-weight: var(--mp-weight-bold); font-size: var(--mp-text-sm); color: var(--cw-fg); line-height: var(--mp-leading-tight); }
.cw-detail { font-size: var(--mp-text-xs); color: var(--mp-ink-2); }
.cw-go {
    flex: none;
    display: inline-flex; align-items: center;
    min-height: 34px;
    padding: 0 var(--mp-space-3);
    border-radius: var(--mp-radius-pill);
    background: var(--cw-fg);
    color: var(--cw-ink);
    font-size: var(--mp-text-sm);
    font-weight: var(--mp-weight-bold);
    text-decoration: none;
    white-space: nowrap;
}
.cw-go:hover { filter: brightness(1.08); color: var(--cw-ink); }
.cw-ask { flex: none; font-size: var(--mp-text-xs); color: var(--mp-muted); }
.cw-more {
    flex: none;
    border: 0; background: none;
    color: var(--cw-fg);
    font-size: var(--mp-text-xs);
    font-weight: var(--mp-weight-bold);
    text-decoration: underline;
    cursor: pointer;
}
.cw-x {
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0; border-radius: var(--mp-radius-pill);
    background: transparent;
    color: var(--mp-ink-2);
    cursor: pointer;
}
.cw-x:hover { background: color-mix(in srgb, var(--cw-fg) 12%, transparent); }
.cw-rest { border-top: 1px solid color-mix(in srgb, var(--cw-fg) 22%, transparent); }
.cw-row { --cw-fg: var(--mp-warn); --cw-ink: var(--mp-warn-ink); }
.cw-row--out { --cw-fg: var(--mp-danger); --cw-ink: var(--mp-danger-ink); }

/* Settings' list of them. */
.cw-list {
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    border: 1px solid var(--mp-line);
    overflow: hidden;
}
.cw-list .cw-row + .cw-row { border-top: 1px solid var(--mp-line); }

@media (max-width: 575.98px) {
    .cw-banner { margin: var(--mp-space-2) var(--mp-space-2) 0; }
    .cw-main { flex-wrap: wrap; }
    .cw-main .cw-txt { flex-basis: calc(100% - 80px); }
    .cw-banner .cw-main .cw-detail { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .cw-main .cw-go { margin-left: 44px; }
}