/* The personal account, the cart and signing in (accounts/), on the inner
 * page frame (page.css): the section band with the account's tabs as glass
 * chips; forms on white cards; statuses as small coloured pills; a paper's
 * way through the editors as a line of dots.
 */

/* ── the tabs and the way out, in the band ── */
.acc__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xs); }
.acc__tabs { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.acc__tabs a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 999px; color: #fff; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; }
.acc__tabs a:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.acc__tabs a[aria-current] { background: #fff; color: var(--brand-deep); }
.acc__out { min-height: 2.5rem; padding: 0 1rem; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.acc__out:hover { background: rgb(255 255 255 / 0.1); }
@media (max-width: 40rem) {
  .acc__tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .acc__tabs::-webkit-scrollbar { display: none; }
}

.acc { display: grid; gap: var(--space-lg); }
.acc > .psheet + .psheet { margin-top: 0; }

/* ── forms ── */
.pform { display: grid; gap: var(--space-md); }
.pform h2 { margin: var(--space-sm) 0 0; }
.pform h2:first-child { margin-top: 0; }
.pform--wide { max-width: none; }
.pform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-md); }
.pfield { display: grid; gap: 0.35rem; }
.pfield > label { font-size: 0.8125rem; font-weight: 600; color: var(--color-ink-2); }
.pfield input:not([type="checkbox"]), .pfield select, .pfield textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 6%, #f6f8f9);
  box-shadow: inset 0 0 0 1px rgb(6 30 38 / 0.08);
  color: var(--color-ink);
  font: inherit;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.pfield textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.pfield input:focus, .pfield select:focus, .pfield textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--brand); }
.pfield.has-error input, .pfield.has-error select, .pfield.has-error textarea { box-shadow: inset 0 0 0 2px #c8443c; }
.pfield__error, .pform__error { margin: 0; font-size: 0.875rem; color: #b3352d; }
.pform__error { padding: var(--space-sm) var(--space-md); border-radius: 12px; background: #fbeceb; }
.pfield__help { margin: 0; font-size: 0.8125rem; color: var(--color-ink-2); }
.pfield__help ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.pfield--check label { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; font-weight: 400; color: var(--color-ink); cursor: pointer; }
.pfield--check input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--brand-tile); }
.pform__go { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: 3.25rem; padding: 0 2rem; border: 0; border-radius: 999px; background: var(--brand-tile); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 14px 30px -16px rgb(6 30 38 / 0.6); transition: background-color 0.2s ease; }
.pform__go:hover { background: var(--brand-deep); color: #fff; }
.pform__go:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pform__aside { margin: 0; font-size: 0.9375rem; }
.pform__aside a, .acc-auth__text a { font-weight: 600; color: var(--brand-tile); }

/* signing in and up: one card in the middle */
.acc-auth { display: grid; gap: var(--space-lg); max-width: 28rem; margin-inline: auto; }
.acc-auth .pform__go { justify-self: stretch; }
.acc-auth__switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.acc-auth__switch p { margin: 0; color: var(--color-ink-2); }
.acc-auth__alt { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-ink); font-weight: 600; }
.acc-auth__alt:hover { background: color-mix(in srgb, var(--brand) 8%, #fff); color: var(--color-ink); }
.acc-auth__text { margin: 0; font-size: var(--text-lead); line-height: 1.55; }

/* ── buttons and statuses ── */
.acc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--color-ink); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease; }
.acc-btn:hover { background: color-mix(in srgb, var(--brand) 22%, #fff); color: var(--color-ink); }
.acc-btn--small { min-height: 2.25rem; padding: 0 0.9rem; font-size: 0.875rem; }
.acc-status { display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; background: #eef1f3; color: #44525a; }
.acc-status--new, .acc-status--received, .acc-status--check, .acc-status--pending { background: #e6f0f7; color: #245a80; }
.acc-status--invoiced, .acc-status--revision { background: #fbf1dc; color: #8a5a00; }
.acc-status--review { background: #ece8f8; color: #4c3a96; }
.acc-status--paid, .acc-status--accepted, .acc-status--confirmed, .acc-status--shipped { background: #e3f3e8; color: #22663a; }
.acc-status--done, .acc-status--published { background: #dff0ee; color: #155e57; }
.acc-status--cancelled, .acc-status--rejected { background: #f7e4e2; color: #9a2f27; }
.acc-hint { font-size: 0.875rem; color: var(--color-ink-2); }
.acc-hint a { font-weight: 600; color: var(--color-ink); }
.acc-note { margin: 0; padding: var(--space-md) var(--space-lg); border-radius: 18px; background: #fbf1dc; color: #5c4200; line-height: 1.5; }

/* ── the overview ── */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-lg); }
.acc-grid > .psheet + .psheet { margin-top: 0; }
.acc-tile { display: grid; align-content: start; gap: var(--space-md); }
.acc-tile--wide { grid-column: 1 / -1; }
.acc-tile__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.acc-tile__head h2 { margin: 0; }
.acc-tile__more { font-weight: 600; color: var(--brand-tile); }
.acc-tile__empty { margin: 0; color: var(--color-ink-2); line-height: 1.55; }
.acc-tile .acc-btn { justify-self: start; }
.acc-big { margin: 0; font-family: var(--font-display); font-size: 3rem; font-weight: 650; line-height: 1; }
.acc-me { margin: 0; font-weight: 600; line-height: 1.5; }
.acc-me span { font-weight: 400; color: var(--color-ink-2); }
.acc-mini { display: grid; margin: 0; padding: 0; list-style: none; }
.acc-mini li > a, .acc-mini li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0.6rem 0; border-top: 1px solid var(--color-rule); color: var(--color-ink); }
.acc-mini li:first-child, .acc-mini li:first-child > a { border-top: 0; }
.acc-mini li > a { border-top: 0; padding: 0; }
.acc-split { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 62rem) { .acc-split { grid-template-columns: minmax(0, 1fr) 18rem; } }
.acc-side { display: grid; gap: var(--space-sm); justify-items: start; }

/* ── papers on their way ── */
.acc-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 var(--space-sm); font-size: 0.75rem; color: var(--color-ink-2); }
.acc-legend span { counter-increment: leg; }
.acc-legend span::before { content: counter(leg) ". "; font-weight: 700; }
.acc-papers { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; counter-reset: leg; }
.acc-paper { display: grid; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: 18px; background: color-mix(in srgb, var(--jc) 6%, #f7f8f9); box-shadow: inset 3px 0 0 var(--jc); }
.acc-paper__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.acc-paper__journal { font-size: 0.875rem; font-weight: 600; color: color-mix(in srgb, var(--jc) 70%, #1b2024); }
.acc-paper__title { margin: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.acc-paper__title a { color: var(--color-ink); }
.acc-paper__note { margin: 0; padding: var(--space-sm) var(--space-md); border-radius: 12px; background: #fff; font-size: 0.9375rem; line-height: 1.5; }
.acc-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.acc-steps li span { display: block; height: 6px; border-radius: 3px; background: rgb(0 0 0 / 0.08); }
.acc-steps li.is-done span { background: color-mix(in srgb, var(--jc) 55%, #fff); }
.acc-steps li.is-now span { background: var(--jc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jc) 25%, transparent); }
.acc-paper--revision .acc-steps li.is-now span { background: #e0a32a; box-shadow: 0 0 0 3px rgb(224 163 42 / 0.25); }
.acc-paper__path summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--color-ink-2); }
.acc-paper__path ol { margin: var(--space-xs) 0 0; padding-left: 1.1rem; font-size: 0.875rem; line-height: 1.6; }
.acc-paper__path time { color: var(--color-ink-2); font-variant-numeric: tabular-nums; }

/* finding oneself among the authors */
.acc-find { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.acc-find input { flex: 1 1 16rem; min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--brand) 6%, #f6f8f9); box-shadow: inset 0 0 0 1px rgb(6 30 38 / 0.08); font: inherit; }
.acc-find input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); background: #fff; }
.acc-found { display: grid; margin: 0; padding: 0; list-style: none; }
.acc-found li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding: 0.6rem 0; border-top: 1px solid var(--color-rule); }
.acc-found li:first-child { border-top: 0; }
.acc-found a { font-weight: 600; color: var(--color-ink); }
.acc-found li > span { font-size: 0.875rem; color: var(--color-ink-2); }
.acc-found form, .acc-found .acc-status { margin-left: auto; }
.acc-claims { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }

/* ── purchases ── */
.acc-order { display: grid; gap: var(--space-md); scroll-margin-top: calc(var(--header-h, 4.5rem) + var(--space-md)); }
.acc-order:target { box-shadow: 0 0 0 3px var(--brand), 0 24px 50px -36px rgb(6 30 38 / 0.45); }
.acc-order__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.acc-order__head h2 { margin: 0; }
.acc-order__date { color: var(--color-ink-2); }
.acc-order__total { margin-left: auto; font-family: var(--font-display); font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.acc-items { display: grid; margin: 0; padding: 0; list-style: none; }
.acc-items li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-xs) var(--space-md); padding: 0.75rem 0; border-top: 1px solid var(--color-rule); }
.acc-items__kind { font-size: 0.75rem; font-weight: 700; color: var(--color-ink-2); }
.acc-items__title a { color: var(--color-ink); font-weight: 600; }
.acc-items__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 40rem) { .acc-items li { grid-template-columns: 3rem minmax(0, 1fr); } .acc-items__price, .acc-items__act { grid-column: 2; } }

/* ── the cart ── */
.cart { display: grid; margin: 0; padding: 0; list-style: none; }
.cart__line { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto 7rem 2.5rem; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); }
.cart__line:first-child { border-top: 0; padding-top: 0; }
.cart__thumb { display: block; width: 4rem; line-height: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.4); }
.cart__thumb img { width: 100%; height: auto; aspect-ratio: 300 / 440; object-fit: cover; }
.cart__thumb--paper { display: grid; place-items: center; aspect-ratio: 300 / 410; background: linear-gradient(160deg, color-mix(in srgb, var(--jc) 70%, #fff), var(--jc)); color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1; }
.cart__what { display: grid; gap: 0.25rem; min-width: 0; }
.cart__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-weight: 600; line-height: 1.35; color: var(--color-ink); }
.cart__meta { font-size: 0.875rem; color: var(--color-ink-2); }
.cart__stepper { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem; border-radius: 999px; background: color-mix(in srgb, var(--brand) 8%, #fff); }
.cart__stepper button { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: #fff; color: var(--color-ink); font: inherit; font-size: 1.1rem; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px -3px rgb(0 0 0 / 0.3); }
.cart__stepper span { min-width: 1.5rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart__price { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart__ask { font-size: 0.875rem; font-weight: 500; color: var(--color-ink-2); }
.cart__remove button { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: none; color: var(--color-ink-2); cursor: pointer; }
.cart__remove button:hover { background: #f7e4e2; color: #9a2f27; }
.cart__remove svg { width: 1rem; height: 1rem; }
@media (max-width: 40rem) {
  .cart__line { grid-template-columns: 3.25rem minmax(0, 1fr) 2.25rem; }
  .cart__thumb { width: 3.25rem; }
  .cart__qty, .cart__price { grid-column: 2; text-align: left; }
  .cart__remove { grid-column: 3; grid-row: 1; }
}
.acc-sum li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 0.35rem 0; color: var(--card-ink, var(--color-ink)); font-size: 0.9375rem; }
.acc-sum strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.acc-empty .pnotice__contacts { margin-top: var(--space-md); }