/* Sign-in pages and the customer portal. Builds on site.css and its tokens. */

/* ---------- sign-in, set and reset password ---------- */
.nav__links--plain { display: flex; }
@media (max-width: 1080px) {
  .nav__links--plain { display: flex; position: static; flex-direction: row; padding: 0; background: none; border: 0; }
  .nav__links--plain a:not(.btn) { padding: 0; border: 0; font-size: 15px; }
}

.auth {
  position: relative; overflow: hidden; min-height: calc(100vh - 64px);
  display: grid; place-items: center; padding: 56px 16px 96px;
  background:
    radial-gradient(800px 420px at 85% 100%, rgba(232, 69, 44, .14), transparent 65%),
    radial-gradient(800px 420px at 10% 0%, rgba(47, 165, 182, .16), transparent 65%),
    var(--navy-900);
}
.auth__card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 36px 32px 28px; box-shadow: 0 30px 80px rgba(8, 12, 22, .45);
}
.auth__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--flux-gradient);
}
.auth h1 { font-size: 28px; }
.auth__lede { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; }
.auth__lede strong { color: var(--ink); overflow-wrap: anywhere; }
.auth__form { display: grid; gap: 6px; margin-top: 22px; }
.auth__form label { font-size: 14px; font-weight: 600; margin-top: 10px; }
.auth__form input[type="email"], .auth__form input[type="password"], .auth__form input[type="text"] {
  font: inherit; font-size: 16px; width: 100%; min-height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
}
.auth__form input:focus-visible { outline: 2px solid var(--flux-5); outline-offset: 1px; border-color: transparent; }
.auth__form .btn { margin-top: 20px; justify-content: center; border: 0; cursor: pointer; font-family: inherit; }
.auth__form .btn:disabled { opacity: .6; cursor: progress; transform: none; }
.auth__code { font-family: var(--mono) !important; font-size: 26px !important; letter-spacing: .4em; text-align: center; }
.auth__check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: var(--ink-2); font-size: 14px !important; }
.auth__check input { margin-top: 4px; width: 16px; height: 16px; flex: none; }
.auth__hint { font-size: 13px; color: var(--muted); }
.auth__aside { margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.auth__fine { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.55; }
.auth__msg:empty { display: none; }
.auth__msg { margin-top: 14px; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; }
.auth__msg--error { background: rgba(232, 69, 44, .1); color: #B3301B; border: 1px solid rgba(232, 69, 44, .35); }
.auth__msg--ok { background: rgba(47, 165, 182, .1); color: #1D6F7B; border: 1px solid rgba(47, 165, 182, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth__msg--error { color: #FF9C88; }
  :root:not([data-theme="light"]) .auth__msg--ok { color: #7FD3DE; }
}
:root[data-theme="dark"] .auth__msg--error { color: #FF9C88; }
:root[data-theme="dark"] .auth__msg--ok { color: #7FD3DE; }
.auth .hero__field {
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .6) 75%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .6) 75%);
}
@media (max-width: 480px) { .auth { padding-top: 32px; } .auth__card { padding: 30px 20px 22px; } }

/* ---------- portal ---------- */
.brand__tag {
  margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--dk-line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dk-muted);
}
.portal-user { display: flex; align-items: center; gap: 16px; }
.portal-user form { margin: 0; }
.portal-user .btn { font-family: inherit; cursor: pointer; background: none; }
.portal-user__who { font-size: 14px; color: var(--dk-ink); text-align: right; line-height: 1.3; }
.portal-user__who strong { font-weight: 600; }
.portal-user__who span { display: block; color: var(--dk-muted); font-size: 13px; }
@media (max-width: 640px) { .portal-user__who, .brand__tag { display: none; } }

.portal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding-top: 48px; padding-bottom: 96px; }
.portal-side { position: sticky; top: 88px; align-self: start; }
.portal-side ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
.portal-side a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.portal-side a:hover { background: var(--bg-tint); color: var(--ink); }
.portal-side a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--card-shadow); border: 1px solid var(--line); }
.portal-side__out { margin-top: 22px; padding: 0 12px; font-size: 14px; }
.portal-status { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); padding: 0 12px; }
.portal-status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--flux-4); margin-right: 8px; vertical-align: 1px; }
.portal-status--lapsed::before { background: var(--flux-1); }
@media (max-width: 860px) {
  .portal { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .portal-side { position: static; }
  .portal-side ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .portal-side a { border: 1px solid var(--line); padding: 6px 12px; font-size: 14px; }
  .portal-side__out { display: none; }
}

/* document pages */
.prose-doc { max-width: 780px; color: var(--ink-2); }
.prose-doc h1 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 600; color: var(--ink); }
.prose-doc h2 { font-size: 22px; color: var(--ink); margin-top: 44px; }
.prose-doc h1 + .lede, .prose-doc .lede { margin-top: 16px; font-size: 18.5px; color: var(--ink-2); }
.prose-doc p { margin-top: 14px; }
.prose-doc ul, .prose-doc ol { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.prose-doc strong { color: var(--ink); }
.prose-doc img, .prose-doc figure img { border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.prose-doc figure { margin: 22px 0 0; }
.prose-doc figcaption { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.prose-doc form { margin-top: 14px; }
.prose-doc form .btn { cursor: pointer; font-family: inherit; }

.portal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; }
.portal-card {
  display: block; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); position: relative; overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.portal-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--flux-gradient); opacity: 0; transition: opacity .15s ease; }
.portal-card:hover { transform: translateY(-2px); border-color: var(--muted); }
.portal-card:hover::before { opacity: 1; }
.prose-doc .portal-card h2 { margin: 0; font-size: 18px; }
.prose-doc .portal-card p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }

.portal-steps { list-style: none; padding: 0 !important; counter-reset: s; gap: 0 !important; margin-top: 32px !important; }
.portal-steps > li { counter-increment: s; position: relative; padding: 0 0 26px 48px; border-left: 2px solid var(--line); margin-left: 14px; }
.portal-steps > li:last-child { border-left-color: transparent; }
.portal-steps > li::before {
  content: counter(s); position: absolute; left: -15px; top: -2px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: #fff;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
}
.portal-steps h2 { margin-top: 0 !important; font-size: 19px !important; }
.portal-steps ol { padding-left: 20px; }

.portal-list { list-style: none; padding: 0 !important; gap: 0 !important; margin-top: 24px !important; border-top: 1px solid var(--line); }
.portal-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.portal-list strong { grid-column: 1; }
.portal-list span { grid-column: 1; font-size: 14.5px; color: var(--muted); }
.portal-list em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; max-width: 22em; }
@media (max-width: 560px) { .portal-list li { grid-template-columns: 1fr; } .portal-list em { grid-column: 1; grid-row: auto; text-align: left; } }

.portal-note, .portal-notice, .portal-empty {
  margin-top: 24px !important; padding: 14px 18px; border-radius: 10px; font-size: 15px;
  background: var(--bg-tint); border: 1px solid var(--line); border-left: 3px solid var(--flux-5);
}
.portal-notice { border-left-color: var(--flux-4); }
.portal-small { font-size: 13.5px; color: var(--muted); }
.prose-doc .portal-small { margin-top: 18px; }

.portal-table { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--surface); }
.portal-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.portal-table th, .portal-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.portal-table thead th { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.portal-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.portal-table tr:last-child > * { border-bottom: 0; }
.portal-table .num { text-align: right; white-space: nowrap; }
.portal-files__desc { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.portal-hash { font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
.portal-release + .portal-release { margin-top: 12px; }
.portal-tag {
  display: inline-block; vertical-align: 3px; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  background: var(--flux-3); color: var(--navy-900);
}

/* the app's sign-in pages and the API key form */
.portal-device { max-width: 360px; }
.portal-device .linkish { justify-self: start; margin-top: 8px; }
.portal-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px !important; }
.portal-choice .btn { border: 0; }
.portal-table td form { margin: 0; display: inline-block; }
.portal-actions { white-space: normal !important; }
.portal-actions form + form { margin-left: 6px; }
.portal-access { margin-top: 14px; }
.portal-access summary { cursor: pointer; color: var(--link); font-size: 15px; }
.portal-access form { display: grid; gap: 6px; margin-top: 12px; max-width: 420px; }
.portal-access .btn { justify-self: start; margin-top: 8px; border: 0; }
.portal-access__member { margin-left: 26px; }

.portal-facts { margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.portal-facts > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.portal-facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.portal-facts dd { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- tutorials ---------- */
/* the sidebar's sections, under Tutorials */
.portal-side .portal-side__open { color: var(--ink); font-weight: 600; }
.portal-side ul.portal-side__sub { margin: 4px 0 8px 12px; padding-left: 8px; border-left: 1px solid var(--line); gap: 0; }
.portal-side__sub a { padding: 5px 10px; font-size: 13.5px; line-height: 1.35; }
.portal-side__sub a[aria-current="page"] { box-shadow: none; }
@media (max-width: 860px) { .portal-side ul.portal-side__sub { display: none; } }

.prose-doc h3 { font-size: 18.5px; color: var(--ink); margin-top: 34px; }
.prose-doc h4 { font-size: 15px; color: var(--ink); margin-top: 22px; font-weight: 600; }
.prose-doc h2 + h3 { margin-top: 20px; }
.prose-doc h2[id], .prose-doc h3[id] { scroll-margin-top: 84px; }
.prose-doc li > ol, .prose-doc li > ul { margin-top: 6px; }
.prose-doc pre {
  margin: 14px 0 0; padding: 14px 16px; overflow-x: auto; border-radius: 10px;
  background: var(--bg-tint); border: 1px solid var(--line); font-size: 14px; line-height: 1.6;
}
.prose-doc pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose-doc .eyebrow a { color: inherit; text-decoration: none; }
.prose-doc .eyebrow a:hover { text-decoration: underline; }

.tut-where {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: 10px !important;
  font-size: 14.5px; color: var(--ink-2);
}
.tut-where > span:first-child {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; margin-right: 4px;
}
.tut-where em { font-style: normal; color: var(--ink); font-weight: 500; }
.tut-tip, .tut-license {
  margin-top: 16px !important; padding: 12px 16px; border-radius: 10px; font-size: 15px;
  background: var(--bg-tint); border: 1px solid var(--line); border-left: 3px solid var(--flux-4);
}
.tut-license { border-left-color: var(--flux-2); }

.tut-toc { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.prose-doc .tut-toc__title { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prose-doc .tut-toc ol { margin-top: 10px; padding-left: 20px; gap: 10px; }
.tut-toc li > a { font-weight: 600; text-decoration: none; }
.tut-toc li > a:hover { text-decoration: underline; }
.tut-toc__items { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; font-size: 14px; }
.tut-toc__items a { color: var(--ink-2); text-decoration: none; }
.tut-toc__items a:hover { color: var(--link); text-decoration: underline; }

.tut-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.tut-pager a {
  display: block; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  text-decoration: none; color: var(--ink); font-weight: 600;
}
.tut-pager a:hover { border-color: var(--muted); }
.tut-pager a span { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tut-pager__next { text-align: right; grid-column: 2; }
.prose-doc .tut-pager__all { margin-top: 16px; text-align: center; font-size: 14.5px; }
@media (max-width: 560px) { .tut-pager { grid-template-columns: 1fr; } .tut-pager__next { grid-column: 1; } .tut-pager > span { display: none; } }

.prose-doc .tut-sections { list-style: none; padding: 0; margin-top: 32px; gap: 0; border-top: 1px solid var(--line); }
.tut-sections > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tut-sections__n { font-family: var(--mono); font-size: 14px; color: var(--muted); padding-top: 2px; }
.prose-doc .tut-sections h2 { margin: 0; font-size: 18.5px; }
.tut-sections h2 a { color: var(--ink); text-decoration: none; }
.tut-sections h2 a:hover { color: var(--link); text-decoration: underline; }
.prose-doc .tut-sections p { margin-top: 4px; font-size: 15px; }
.prose-doc .tut-sections__topics { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 14px; }
.tut-sections__topics a { color: var(--ink-2); }

/* the trainings page: lessons by group, each with the time it takes */
.prose-doc .tut-lessons__total { margin-top: 24px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--muted); }
.prose-doc .tut-group { margin-top: 40px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prose-doc .tut-lessons { margin-top: 10px; }
.tut-lessons > li { padding: 14px 0; }
.prose-doc .tut-lessons h3 { margin: 0; font-size: 17.5px; }
.tut-lessons h3 a { color: var(--ink); text-decoration: none; }
.tut-lessons h3 a:hover { color: var(--link); text-decoration: underline; }
.prose-doc .tut-lessons__meta { margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* a lesson's "What you'll learn" box and its tables of values to type */
.tut-learn { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.prose-doc .tut-learn__title { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prose-doc .tut-learn ul { margin-top: 8px; gap: 4px; }
.tut-values td:first-child { white-space: nowrap; }
.prose-doc .tut-files { margin-top: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 14.5px; }

/* the support requests: status badges, the thread, the forms */
.ticket-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.ticket-status--open { border-color: #2C62AC; color: #2C62AC; }
.ticket-status--in_progress { border-color: #b07000; color: #b07000; }
.ticket-status--waiting { border-color: #E8452C; color: #E8452C; }
.ticket-status--resolved { border-color: #1b7f5a; color: #1b7f5a; }
.ticket-status--closed { color: var(--muted); }
.ticket-thread { margin-top: 24px; display: grid; gap: 14px; }
.ticket-msg { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 18px; }
.ticket-msg--staff { border-left: 4px solid #2C62AC; }
.ticket-msg header { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14px; color: var(--muted); }
.ticket-msg header strong { color: var(--ink); font-size: 15px; }
.ticket-msg header time { margin-left: auto; font-family: var(--mono); font-size: 12px; }
.prose-doc .ticket-msg__body { margin-top: 8px; font-size: 15px; line-height: 1.55; }
.prose-doc .ticket-msg__file { margin-top: 10px; font-size: 14.5px; }
.ticket-form { max-width: 640px; }
.ticket-form textarea, .ticket-form select { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.ticket-form textarea { resize: vertical; min-height: 120px; }
.ticket-form input[type="file"] { font: inherit; font-size: 14px; margin-top: 4px; }
.ticket-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ticket-form__row > div { display: grid; gap: 6px; }
.ticket-form__actions { margin-top: 6px; }
.ticket-close { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ticket-close .btn { border: 0; cursor: pointer; font-family: inherit; }
@media (max-width: 560px) { .ticket-form__row { grid-template-columns: 1fr; } }

.prose-doc .tut-az__jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.tut-az__jump a {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--mono); font-size: 14px; text-decoration: none; background: var(--surface);
}
.prose-doc .tut-az { list-style: none; padding: 0; gap: 0; margin-top: 10px; border-top: 1px solid var(--line); }
.tut-az li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.tut-az span { font-size: 13.5px; color: var(--muted); }