/* Openbook — активация и кабинет.
   Same tokens as the landing page; these are the two account surfaces, so they
   reuse `styles.css` for type, colour and buttons and add only layout here. */

.account-page{background:var(--bg)}
.account{max-width:44rem;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) var(--gutter) 4rem}
.account h1{margin:.4rem 0 .75rem;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.15;letter-spacing:-.02em}
.account h2{margin:0 0 .5rem;font-size:1.05rem;letter-spacing:-.01em}
.account-lede{color:var(--text-soft);max-width:38rem}
.account-muted{color:var(--muted);font-size:.9rem}
.account-foot{margin-top:2rem;color:var(--muted);font-size:.85rem;max-width:38rem}

.account-card{
  margin-top:1.5rem;padding:1.4rem;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg-raised);
}
.account-card + .account-card{margin-top:1rem}
.account-card-head{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:.75rem}
.account-card-head h2{margin:0}

.account-code{
  margin:.5rem 0 .25rem;font:600 1.6rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;color:var(--accent-bright);
}

.account-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.account-providers{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}

.account-form{display:grid;gap:.75rem;margin-top:1rem}
.account-form label{display:grid;gap:.35rem;font-size:.9rem;color:var(--text-soft)}
.account-form input{
  padding:.7rem .8rem;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--bg-sunken);color:var(--text);font:inherit;
}
.account-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.account-form button{justify-self:start}

.account-error{margin:.75rem 0 0;color:var(--danger);font-size:.9rem}

.account-list{display:grid;gap:.5rem;margin-top:.5rem}
.account-row{
  display:grid;gap:.25rem .9rem;align-items:center;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-sunken);font-size:.9rem;
}
.account-row > div:first-child{display:grid;gap:.15rem}
.account-row .account-muted{font-size:.8rem}
.account-row button{grid-column:1 / -1;justify-self:start;margin-top:.35rem}
.account-row--event{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.2fr)}

.account-licenses{display:grid;gap:.5rem;border:0;padding:0;margin:0 0 1rem}
.account-license{
  display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;
  padding:.75rem .85rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-sunken);font-size:.9rem;cursor:pointer;
}
.account-license span{display:grid;gap:.1rem}
.account-license em{font-style:normal;color:var(--muted);font-size:.8rem}
.account-license small{color:var(--muted);font-size:.78rem}
.account-license:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}

/* Orders: reference, tier and amount, status, date; the счёт link sits under them. */
.account-row--order{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
.account-row--order .account-link{grid-column:1 / -1;justify-self:start;color:var(--accent-bright);text-decoration:underline;text-underline-offset:.2em;min-height:2.25rem;display:inline-flex;align-items:center}
.account-row strong,.account-row .account-muted{overflow-wrap:anywhere}
.account-badge{
  display:inline-flex;align-items:center;width:fit-content;min-height:1.75rem;padding:.15rem .65rem;
  border-radius:99px;border:1px solid var(--line-strong);font-size:.8rem;font-weight:600;
}
.account-badge[data-state="pending"]{background:rgba(255,206,18,.1);border-color:rgba(255,206,18,.4);color:#ffe27a}
.account-badge[data-state="paid"]{background:rgba(120,220,160,.12);border-color:rgba(120,220,160,.45);color:#9ae6b9}
.account-notice{
  margin-top:1rem;padding:.8rem 1rem;border:1px solid rgba(255,206,18,.4);border-radius:var(--r-sm);
  background:rgba(255,206,18,.08);color:#ffe27a;font-size:.9rem;
}
.account-notice .account-actions{margin-top:.75rem}
.account .support-links{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}
.account .support-links a{display:inline-flex;align-items:center;min-height:2.5rem;color:var(--accent-bright);text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.account-providers .btn{min-height:2.75rem}

@media (max-width:640px){
  .account-row,.account-row--event,.account-row--order{grid-template-columns:1fr}
  .account-license{grid-template-columns:auto 1fr}
  .account-license small{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .account-page *{transition:none !important;animation:none !important}
}

/* The download card: two buttons, then what a customer needs to compare the file with its checksum. */
.account-downloads{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.9rem}
.account-downloads .btn{width:100%;margin-top:0}
.account-downloads .download-meta,.account-downloads .download-note{grid-column:1 / -1}
.account-downloads .download-meta{display:grid;gap:.2rem;font-size:.75rem;line-height:1.5;color:var(--muted)}
.account-downloads .download-meta p{margin:0;overflow-wrap:anywhere}
.account-downloads .download-meta code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem;color:var(--text-soft)}
.account-downloads .download-meta a,.account-downloads .download-note a{color:var(--accent-bright)}
.account-downloads .download-note{margin:0;font-size:.8rem;line-height:1.55;color:var(--muted)}
@media (max-width:640px){.account-downloads{grid-template-columns:1fr}}

/* Order rows: the status badge and its date stacked, so the badge never runs into the date. */
.account-row--order > div:last-child{display:grid;gap:.3rem;justify-items:start}