@import url('./brand.css');

/* Sign-in, the member's account and Check a delivery: the working side of the site, dark
   like the editors, in the same sans and champagne gold as the home page. */
body { background:#000; color:#f5f5f7; font:400 15px/1.55 var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
:focus-visible { outline:2px solid #d8b46a; }
::selection { background:#d8b46a55; color:#fff; }
.skip-link { background:#d8b46a; color:#1d1d1f; }
.account-nav>a { min-width:44px; }
.quiet-label,.eyebrow { color:#a1a1a6; font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; }
html { scrollbar-gutter:stable; }
.entry-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; gap:clamp(35px,6vw,86px); max-width:1180px; padding:128px 6vw 80px; margin:auto; }
/* The sign-in card comes first in the page, so a phone shows the form first and a
   keyboard reaches it first. On a wider screen it stands on the right, beside the welcome
   and the story of a repair (story.css), which stay put when the card grows for Create
   account. */
.entry-layout>.account-card { grid-column:2; grid-row:1; }
.introduction { grid-column:1; grid-row:1; min-width:0; padding-top:20px; }
.introduction h1,.member-heading h1 { margin:22px 0; color:#f5f5f7; font:500 clamp(42px,5vw,68px)/1.04 var(--serif); font-variation-settings:'opsz' 72; letter-spacing:-.02em; }
/* The welcome is a longer line than the member page's heading, so it is set smaller. */
.introduction h1 { font-size:clamp(36px,3.6vw,52px); line-height:1.08; }
.welcome-story { margin-top:40px; }
.lede { max-width:430px; color:#a1a1a6; font-size:17px; line-height:1.55; }
.account-card { min-width:0; padding:34px; border-radius:28px; background:#161617; box-shadow:inset 0 0 0 1px #ffffff12; }
.account-card h2 { margin:10px 0 22px; font:700 30px/1.1 var(--sans); letter-spacing:-.02em; overflow-wrap:anywhere; }
/* Sign in and Create account sit in one segmented control. */
.tabs { display:flex; margin:18px 0 22px; padding:3px; border-radius:12px; background:#2c2c2e; }
button,input { font:inherit; }
button { padding:10px 16px; border:0; border-radius:999px; background:#2c2c2e; color:#f5f5f7; font-size:14px; font-weight:500; cursor:pointer; transition:background-color .16s,color .16s; }
button:hover { background:#3a3a3c; }
button:active { background:#48484a; }  /* pressed; .primary keeps its own */
button:disabled { opacity:.55; cursor:wait; }
.tabs button { flex:1; min-height:44px; padding:8px 0; border-radius:10px; background:transparent; color:#a1a1a6; }
.tabs button[aria-pressed="true"],.tabs button[aria-pressed="true"]:hover { background:#48484a; color:#f5f5f7; box-shadow:0 1px 3px #0006; }
.tabs button:hover { background:transparent; color:#f5f5f7; }
label { display:block; margin:18px 0 8px; color:#d1d1d6; font-size:13px; font-weight:600; }
input,select { display:block; width:100%; min-height:48px; padding:12px 14px; border:1px solid #424245; border-radius:12px; background:#1d1d1f; color:#f5f5f7; font-size:16px; }
input:focus-visible,select:focus-visible { outline:none; border-color:#d8b46a; box-shadow:0 0 0 3px #d8b46a40; }
.primary { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:50px; margin-top:24px; padding:13px 20px; border-radius:999px; background:#d8b46a; color:#1d1d1f; font-size:16px; font-weight:600; }
.primary:hover { background:#e5c687; }
.primary:active { background:#c7a35a; }
.primary.danger { background:#3a1512; color:#ffb4a8; }
.primary.danger:hover { background:#4a1d18; }
.form-note a,.lede a { color:#e3c68e; text-decoration:underline; text-underline-offset:3px; }
.form-note,.field-help { margin:16px 0 0; color:#a1a1a6; font-size:13px; line-height:1.6; }
.field-help { margin:6px 0 0; }
.message { min-height:20px; color:#eed7a6; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.message.error { color:#ff9f8f; }
/* The same footer as the pages people read (legal.css), drawn in the dark. */
.site-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 25px; padding:30px max(24px, calc((100% - 1120px) / 2)) calc(40px + env(safe-area-inset-bottom)); color:#86868b; font-size:13px; }
.site-footer>div { display:flex; flex-wrap:wrap; gap:0 22px; }
.site-footer>div>a { display:inline-flex; align-items:center; min-height:44px; }
.site-footer a:hover { color:#f5f5f7; text-decoration:underline; text-underline-offset:3px; }
.site-footer>.brand-name { display:inline-flex; align-items:center; min-height:44px; color:#f5f5f7; font-size:26px; letter-spacing:.05em; }
.member-layout { max-width:1060px; padding:130px 6vw 45px; margin:auto; }
.member-heading h1 { font-size:50px; }
.member-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.status-pill { display:inline-block; color:#86d39a; font-size:13px; }
.link-button { text-decoration:none; text-align:center; }
.key-reveal { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; margin-top:18px; }
.key-reveal label { grid-column:1 / -1; margin:0; }
.key-reveal input { font-family:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace; font-size:14px; }
.key-reveal button { min-height:48px; }
.key-list { list-style:none; padding:0; margin:18px 0 0; }
.key-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid #ffffff17; }
.key-list small { display:block; margin-top:3px; color:#a1a1a6; font-size:12px; }
.key-list strong { overflow-wrap:anywhere; }
.key-list button { min-height:44px; }
.credit-balance { margin:0 0 12px; color:#f5f5f7; font:700 44px/1 var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.plan-status { margin:14px 0 0; color:#f5f5f7; font-size:15px; line-height:1.6; }
.plan-list { margin:6px 0 0; padding-left:20px; color:#f5f5f7; font-size:15px; line-height:1.6; }
.plan-manage { margin-top:10px; background:transparent; color:#e3c68e; box-shadow:inset 0 0 0 1px #e3c68e66; }
.plan-manage:hover:not(:disabled) { background:#d8b46a14; }
.offer-list { display:grid; gap:10px; margin-top:22px; }
.offer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-radius:16px; background:#1d1d1f; box-shadow:inset 0 0 0 1px #ffffff14; }
.offer strong { display:block; color:#f5f5f7; font-size:15px; }
.offer small { display:block; margin-top:3px; color:#a1a1a6; font-size:13px; line-height:1.5; }
.offer button { flex-shrink:0; background:#d8b46a; color:#1d1d1f; font-weight:600; }
.offer button:hover:not(:disabled) { background:#e5c687; }
.offer button:disabled { background:transparent; color:#86868b; box-shadow:inset 0 0 0 1px #424245; cursor:default; opacity:1; }
/* On a phone the price button goes under the words, so a plan's name is not squeezed. */
@media (max-width:480px) {
  .offer { flex-wrap:wrap; }
  .offer > div { flex:1 1 100%; }
}
.usage-details { margin-top:22px; color:#a1a1a6; font-size:13px; line-height:1.6; }
.usage-details summary { padding:4px 0; color:#d1d1d6; cursor:pointer; }  /* a 24 px target */
.usage-details p { margin:10px 0 0; }
.monthly-usage { margin-top:24px; padding-top:20px; border-top:1px solid #ffffff17; }
.monthly-usage h3 { margin:0 0 14px; color:#f5f5f7; font-size:17px; font-weight:600; }
.monthly-usage dl { margin:0; }
.monthly-usage dl>div { margin-top:12px; }
.monthly-usage dt { color:#a1a1a6; font-size:14px; }
.monthly-usage dd { margin:2px 0 0; color:#f5f5f7; font-size:16px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.monthly-usage button { min-height:44px; margin-top:14px; }
.monthly-usage .form-note { font-size:14px; }
#processing-maintenance button { min-height:44px; }
#processing-maintenance .form-note { font-size:14px; }
#refresh-maintenance { margin-top:16px; }
.member-layout>.message { margin-bottom:22px; }
@media (max-width:760px) {
  .entry-layout { grid-template-columns:1fr; padding:calc(110px + env(safe-area-inset-top)) 6vw 45px; gap:22px; }
  .member-layout { padding-top:calc(110px + env(safe-area-inset-top)); }
  .entry-layout>.account-card,.introduction { grid-column:auto; grid-row:auto; }
  .introduction { padding-top:26px; }
  .introduction h1 { margin:0 0 12px; font-size:34px; overflow-wrap:break-word; }
  .introduction .lede { margin:0; }
  .welcome-story { margin-top:28px; }
  .account-card { padding:24px; border-radius:24px; }
  .tabs button { min-height:44px; }
  .member-columns { grid-template-columns:1fr; }
  .member-heading h1 { font-size:40px; }
}
/* A phone: the home page's 16 pixel gutter, so the story of a repair under the sign-in
   card has the width it had there, and its picture and steps still fit one screen. */
@media (max-width:480px) { .entry-layout { padding-inline:16px; } }