/* manage.html: find a purchase with licence key + email, then a "pass" for it and only the actions that apply
 * (switch to yearly, billing page, cancel). Shares the site's tokens. */

/* step 1: find your purchase */
.mg-find{margin-top:28px;padding:clamp(20px,4vw,32px);border-radius:var(--radius);background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line),var(--shadow)}
.policy .mg-find h2{margin:0 0 4px}
.mg-field{margin-top:18px}
.mg-field label{display:block;margin-bottom:6px;font-weight:700;color:var(--ink)}
.mg-field input{display:block;width:100%;min-height:54px;padding:0 18px;border:0;border-radius:16px;background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);font:500 1.0625rem/1 var(--font);outline:none;transition:box-shadow .15s ease}
.mg-field input#mg-key{font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em}
.mg-field input::placeholder{font-family:var(--font);letter-spacing:0;color:var(--muted);opacity:.85}
.mg-field input:focus{box-shadow:inset 0 0 0 2px var(--focus)}
.mg-field input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--bad-ink)}
.policy .mg-err{margin-top:6px;font-size:.92rem;font-weight:600;color:var(--bad-ink)}
.mg-err:empty{display:none}
.policy .mg-go{margin-top:22px;width:100%}
.mg-go[aria-busy="true"]{cursor:progress;opacity:.75}
.policy .mg-why{margin-top:14px;font-size:.92rem}

/* messages */
.policy .mg-alert{margin-top:16px;padding:12px 16px;border-radius:14px;font-weight:600;color:var(--ink);background:var(--blush)}
.policy .mg-alert[data-kind="good"]{background:var(--mint)}

/* step 2: the pass */
.policy .mg-found{margin-top:28px;padding:0}
.mg-pass{position:relative;padding:clamp(22px,4vw,34px);padding-right:clamp(110px,22vw,150px);border-radius:var(--radius);
  background:var(--night-2);color:var(--on-night);box-shadow:var(--shadow),inset 0 0 0 1.5px color-mix(in srgb,var(--on-night) 10%,transparent);overflow:hidden}
.mg-pass::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:var(--focus);opacity:.2}
.mg-pet{position:absolute;right:clamp(14px,3vw,26px);bottom:clamp(12px,3vw,22px);width:clamp(80px,16vw,112px);z-index:1}
.policy .mg-pass h2{margin:0;color:var(--on-night);font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
.policy .mg-pass h2:focus{outline:none}
.policy .mg-state{margin-top:10px;color:var(--on-night);font-size:1.05rem;font-weight:600}
.mg-state[data-tone="warn"]::before,.mg-state[data-tone="good"]::before,.mg-state[data-tone="off"]::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;vertical-align:1px}
.mg-state[data-tone="good"]::before{background:#7ee2a0}
.mg-state[data-tone="warn"]::before{background:var(--coin)}
.mg-state[data-tone="off"]::before{background:var(--on-night-muted)}
.policy .mg-who{margin-top:6px;color:var(--on-night-muted);font-size:.95rem;overflow-wrap:anywhere}
.mg-switch-key{margin-top:14px;padding:0;border:0;background:none;color:var(--on-night);font:600 .95rem/1.4 var(--font);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px;cursor:pointer}
.mg-switch-key:hover{text-decoration-color:currentColor}
.policy .mg-again{display:inline-flex;margin:14px 14px 0 0;min-height:44px;padding:0 18px;font-size:.98rem;color:var(--on-coin)}

/* step 2: only the actions that apply, as rows */
.mg-actions{margin-top:22px;display:grid}
.mg-act{display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:center;padding:20px 0}
.mg-act:not([hidden])~.mg-act{border-top:1.5px solid var(--line)}  /* a divider only between visible rows */
.mg-act h3{color:var(--ink)}
.policy .mg-act-text p{margin-top:4px;font-size:.95rem}
.policy .mg-act>.btn{margin:0}
.mg-confirm{grid-column:1/-1;padding:16px 18px;border-radius:18px;background:var(--sun)}
.mg-act-cancel .mg-confirm{background:var(--blush)}
.policy .mg-confirm p{margin:0;color:var(--ink);font-weight:600}
.mg-confirm-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.policy .mg-confirm-btns .btn{margin:0}
.btn.danger{background:var(--bad-ink);color:var(--paper)}
.btn.danger:hover{box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 8px 20px -8px color-mix(in srgb,var(--bad-ink) 70%,transparent)}
.mg-found[aria-busy="true"] .btn{opacity:.6;cursor:progress}
.policy .mg-help-title{margin-top:48px}
.mg-pass{animation:mg-in .28s ease-out both}
@keyframes mg-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.mg-pass{animation:none}}

@media (max-width:560px){
  .mg-act{grid-template-columns:1fr}
  .mg-act>.btn,.mg-confirm-btns .btn{width:100%}
  .mg-pass{padding-right:clamp(22px,4vw,34px);padding-bottom:96px}
}