/* The dealer pages: sign in, the account, an order, the invoices and the statement (account.py), variant E's "login, account"
   section with the account-table pieces of its home and product sections, and the few classes the order, invoice and statement pages
   add in the same manner. The shell's classes (.wrap, .btn, .field, .input, .panel, .pagehead, .note, .linkish, .crumbs, .mono...) are
   site.css's and are never restyled here; the tokens (--ink, --dove, --cream, --accent...) are site.css's :root. */

@layer site {
  /* ---------- sign in ---------- */
  .auth { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: start; max-width: 940px; }
  .auth--one { grid-template-columns: minmax(0, 420px); }
  .auth form, .auth__body { display: grid; gap: 12px; padding: 18px; }
  .auth .input { height: 40px; }
  .auth__note { margin-bottom: 14px; max-width: 940px; }
  .auth__intro { color: var(--steel); font-size: 13px; }
  .auth__small { color: var(--fog); font-size: 12px; }
  .auth__links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
  .auth__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .auth__apply { padding: 18px; display: grid; gap: 10px; background: var(--sand); border-radius: 6px; }
  .auth__apply h2 { font-size: 16px; }
  .auth__apply p, .auth__apply li { color: var(--steel); font-size: 13px; }
  .auth__apply ol { display: grid; gap: 6px; counter-reset: s; }
  .auth__apply ol li { counter-increment: s; display: flex; gap: 10px; }
  .auth__apply ol li::before { content: counter(s); font: 700 12px/20px var(--mono); color: var(--ink); width: 20px; height: 20px; border-radius: 50%; background: var(--white); text-align: center; flex-shrink: 0; }
  .auth__applybtn { justify-self: start; }
  .check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
  .check input { accent-color: var(--ink); }

  /* a shared email's accounts: E's cart radios, one account a row */
  .picker { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
  .field__legend { font-size: 12px; font-weight: 500; color: var(--steel); padding: 0; margin-bottom: 4px; }
  .picker__list { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
  .picker__row { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 6px 8px; border: 1px solid var(--dove); border-radius: 4px; cursor: pointer; }
  .picker__row:has(input:checked) { border-color: var(--ink); background: var(--cream); }
  .picker__row input { margin-top: 3px; accent-color: var(--ink); }
  .picker__row small { color: var(--fog); font-size: 12px; }
  .picker__filter { margin-bottom: 2px; }

  /* ---------- the account ---------- */
  .acctpage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
  .acctmain, .acctside, .acctstack { display: grid; gap: 16px; align-content: start; }
  .acct__note { margin-bottom: 14px; }
  .figures { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--dove); border-radius: 6px; margin-bottom: 20px; }
  .figures div { padding: 12px 14px; display: grid; gap: 2px; align-content: start; min-width: 0; }
  .figures div + div { border-left: 1px solid var(--dove); }
  .figures small { font-size: 12px; color: var(--steel); }
  .figures b { font: 700 20px/26px var(--mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
  .figures b a { text-decoration: none; }
  .figures b a:hover { text-decoration: underline; }
  .figures span { font-size: 12px; color: var(--fog); min-height: 16px; }
  .figures .figures__word { font: 700 18px/26px var(--sans); letter-spacing: -.015em; }
  .figures .figures__word--open { color: var(--accent-deep); }
  .figures .figures__word--late { color: var(--red); }
  .osearch { display: flex; gap: 8px; align-items: center; }
  .osearch .input { width: 260px; height: 32px; }

  /* the order and statement tables are site.css's .otable with its --orders, --lines and --statement variants */
  .acct__notes { white-space: pre-line; }

  /* label and value rows: E's product facts table, inside a panel */

  .shiptos { font-size: 13px; }
  .shiptos li { padding: 10px 14px; }
  .shiptos li + li { border-top: 1px solid var(--cream); }
  /* the People panel: each Login, whether it may place orders, and the owner's switch */
  .people__intro { font-size: 13px; color: var(--steel); margin: 0; padding-bottom: 0; }
  .people { font-size: 13px; }
  .people li { padding: 10px 14px; display: grid; gap: 6px; }
  .people li + li { border-top: 1px solid var(--cream); }
  .people__email { color: var(--steel); overflow-wrap: anywhere; }
  .people__switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .people__switch .btn { height: 30px; font-size: 12.5px; padding: 0 10px; }
  /* Change card on the card figure: a button of the hidden card form, drawn as a link */
  .figures__act { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .acctside__address { font-size: 13px; }

  /* an order's and an invoice's totals: E's cart summary */
  .sums { margin: 0; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13.5px; }
  .sums dt { color: var(--steel); }
  .sums dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .sums .sums__total { font-weight: 700; color: var(--ink); font-size: 16px; padding-top: 8px; border-top: 1px solid var(--dove); }

  /* ====================================================== responsive, at E's breakpoints */
  @media (max-width: 1024px) {
    .acctpage { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 800px) {
    .figures { grid-template-columns: 1fr 1fr; }
    .figures div:nth-child(3) { border-left: 0; }
    .figures div:nth-child(n+3) { border-top: 1px solid var(--dove); }
    .auth { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .osearch { flex-wrap: wrap; width: 100%; }
    .osearch .input { width: 100%; }
  }
  @media (max-width: 480px) {
    .figures b { font-size: 17px; line-height: 22px; }
    .figures .figures__word { font-size: 16px; }
    .auth__pair { grid-template-columns: 1fr; }
  }
}