/* The account page. It sits on page.css (frame, header, type) and adds what an account needs: buttons, plans, facts, a list of devices, messages. Its fonts come from this site, because nothing from another origin may load here. Light only, as the rest of the site is. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* the key of the landing page, and the two colours a message can take */
:root{
  --key:#1d3b94;
  --key-hi:#2547ad;
  --key-lo:#12276a;
  --on-key:#ffffff;
  --warn:#8a5700;
  --bad:#b3261e;
  --bad-lo:#7d1611;
}

body{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(28px,env(safe-area-inset-bottom))}
::selection{background:var(--key);color:var(--on-key)}
[hidden]{display:none!important}
@media (pointer:coarse){.nav a{padding-block:13px;margin-block:-9px}.foot a{padding-block:13px}}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
h1:focus,#soon:focus{outline:0}

/* header: who is signed in, where the other pages have the search box */
.who{display:flex;align-items:center;gap:4px 18px;flex-wrap:wrap;justify-content:flex-end;min-width:0;font:14px/1.3 var(--body);color:var(--mute)}
.who-mail{min-width:0;overflow-wrap:anywhere}

/* buttons: the key of the landing page, a paper one beside it, and one that reads as a link */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:45px;font:700 16px/1.15 var(--body);color:var(--on-key);background:var(--key);border:0;border-radius:3px;padding:12px 24px 11px;margin:0 0 4px;cursor:pointer;text-decoration:none;text-align:center;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 0 var(--key-lo);transition:transform .08s ease-out,box-shadow .08s ease-out,background-color .15s}
.btn:hover{background:var(--key-hi)}
.btn:active{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 var(--key-lo)}
.btn.quiet{color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 4px 0 var(--line)}
.btn.quiet:hover{background:var(--tint)}
.btn.quiet:active{box-shadow:inset 0 0 0 1px var(--line),0 0 0 var(--line)}
.btn.danger{color:#fff;background:#b3261e;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 0 var(--bad-lo)}
.btn.danger:hover{background:#c22f26}
.btn.danger:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 var(--bad-lo)}
.btn[disabled],.lnk[disabled]{opacity:.55;cursor:default;pointer-events:none}
.lnk{display:inline-flex;align-items:center;min-height:44px;font:600 15px/1.2 var(--body);color:var(--blue);background:none;border:0;padding:0 2px;margin:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);-webkit-tap-highlight-color:transparent}
.lnk:hover{text-decoration-color:currentColor}
/* a link in the middle of a sentence */
.lnk.in{display:inline;min-height:0;font:inherit;font-weight:600;padding:0;text-align:inherit}
.who .lnk{font-size:14px}
.acts{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin:22px 0 10px}
.small{font-size:13px;line-height:1.5;color:var(--mute);margin:0;max-width:46em}
.lead{color:var(--ink-2);margin:0 0 14px}

/* signed out: what it is on the left, the prices and the way in on the right */
.out{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding:56px var(--gx) 72px}
.out h1{font-size:clamp(44px,7vw,76px);line-height:.95;letter-spacing:-.035em;margin:0 0 20px}
.lede{font-size:19px;line-height:1.42;color:var(--ink);max-width:24em;margin:0 0 12px;text-wrap:pretty}
.more{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:30em;margin:0;text-wrap:pretty}
.join .btn{width:100%;margin-top:22px}
.join .small{margin-top:16px}
.join #out-intro,.join #out-soon{margin-top:10px}
.join .err{margin:10px 0 0}

/* signed in: one row per subject, its name on the left as the index is on the other pages */
.acct{padding:32px var(--gx) 40px}
.acct h1{margin-bottom:8px}
/* how things stand: the answer to "what happened", so it is read first */
.status{font-size:19px;line-height:1.42;color:var(--ink);margin:0 0 28px;max-width:30em;text-wrap:pretty}
.status.warn{color:var(--warn)}
.row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:8px 40px;border-top:1px solid var(--rule);padding:28px 0 32px}
.row>h2{font-size:21px;line-height:1.25;margin:0;padding:0;border:0}
/* lists and facts run to the right edge, as the rules between the rows do; running text keeps a readable measure */
.row>div{min-width:0}
.row p{text-wrap:pretty;max-width:600px}
/* deleting is the least of the three subjects */
.row.minor>h2{font:600 16px/1.5 var(--body);letter-spacing:0;color:var(--ink-2)}
.row .swap>.facts:first-child>div:first-child{border-top:0;padding-top:0}

/* facts: name and value on a hairline, as in the specification on the landing page */
.facts{margin:0}
.facts>div{display:grid;grid-template-columns:124px minmax(0,1fr);gap:12px;align-items:baseline;border-top:1px solid var(--rule);padding:10px 0}
.facts>div:last-child{border-bottom:1px solid var(--rule)}
.facts dt{font-weight:600}
.facts dd{margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.facts dd b{color:var(--ink);font-weight:700}
.facts dd small{display:block;font-size:13px;color:var(--mute);margin-top:2px;max-width:46em;text-wrap:pretty}
.facts dd small.warn{color:var(--warn)}
.prices dd b{font:900 22px/1 var(--display);letter-spacing:-.02em;margin-right:2px}
.prices>div{padding:12px 0}
/* with the price of a first month in the line, the name of the tier stands above its prices */
.prices.wide>div{grid-template-columns:minmax(0,1fr);gap:6px}
.nb{white-space:nowrap}

progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;margin:9px 0 7px;border:0;border-radius:3px;overflow:hidden;background:var(--rule);color:var(--blue-hi)}
progress::-webkit-progress-bar{background:var(--rule)}
progress::-webkit-progress-value{background:var(--blue-hi);border-radius:3px}
progress::-moz-progress-bar{background:var(--blue-hi);border-radius:3px}
progress.full{color:var(--warn)}
progress.full::-webkit-progress-value{background:var(--warn)}
progress.full::-moz-progress-bar{background:var(--warn)}

/* the tiers: the same weight, the same button. In each, monthly or yearly is a choice of two on hairlines, as the facts are */
.plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:0 0 18px}
.plans.one{grid-template-columns:minmax(0,340px)}
.plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:3px;padding:18px 20px 20px;min-width:0}
.plan h3{font:900 24px/1.1 var(--display);letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.hrs{margin:0 0 14px;color:var(--ink-2)}
.opts{border:0;padding:0;margin:0 0 18px;min-width:0}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;min-height:52px;border-top:1px solid var(--rule);padding:8px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.opt:last-child{border-bottom:1px solid var(--rule)}
.opt input{width:18px;height:18px;margin:0;accent-color:var(--key);cursor:pointer}
.opt-n{font-weight:600}
.opt-p{color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.opt-p small{display:block;font-size:13px;line-height:1.3;color:var(--mute);margin-top:2px}
.opt-p b{font:900 20px/1 var(--display);letter-spacing:-.02em;color:var(--ink);margin-right:2px}
/* a price in two parts, the first month and what follows: where the card is too narrow for it beside the name, it goes on the line below, still at the right edge */
.opt.first{display:flex;flex-wrap:wrap}
.opt.first .opt-p{margin-left:auto;min-width:0}
.opt-p.two{white-space:normal}
.opt-p.two small{white-space:nowrap}
.plan .err{margin:12px 0 0}
.allow{color:var(--ink);margin:0 0 16px}
.after{color:var(--ink-2);margin:0 0 10px}
.plan .btn{width:100%;margin-top:auto}
.more-h{margin-top:6px}

/* messages: a rule on the left, as the notes in the documentation */
.msg{border-left:3px solid var(--blue-hi);padding:3px 0 3px 14px;margin:0 0 22px;max-width:600px}
.msg p{margin:0 0 6px}
.msg p:last-child{margin-bottom:0}
.msg .btn{margin-top:8px}
.msg.warn{border-left-color:var(--warn)}
.msg.bad{border-left-color:var(--bad)}
.msg b{font-weight:700}
.err{color:var(--bad);font-size:14px;margin:8px 0 0}
.acct h1+.msg{margin-top:22px}
.field+.err{margin-top:8px}
.field~.small{margin-top:8px}
.acts+.err{margin:0 0 10px}

/* payment being confirmed: a quiet line that moves */
.wait-t{margin:0;color:var(--ink)}
.wait{position:relative;height:3px;margin:12px 0 14px;max-width:600px;border-radius:2px;overflow:hidden;background:var(--rule)}
.wait::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;border-radius:2px;background:var(--blue-hi)}

/* devices */
.devs{list-style:none;margin:0;padding:0}
.devs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;align-items:center;border-top:1px solid var(--rule);padding:6px 0;margin:0;min-height:60px}
.devs li:last-child{border-bottom:1px solid var(--rule)}
.dev-n{font-weight:600;overflow-wrap:anywhere;text-wrap:balance}
.dev-m{display:block;font-size:13px;line-height:1.45;color:var(--mute);font-weight:400;text-wrap:balance}
.done{font-size:14px;color:var(--ink-2);margin:14px 0 0}
.devs .err{grid-column:1/-1;margin:0 0 8px}
.tag{display:inline-block;font:600 12px/1.5 var(--body);color:var(--blue);border:1px solid color-mix(in srgb,currentColor 45%,transparent);border-radius:2px;padding:0 6px;margin-left:8px;vertical-align:1px;white-space:nowrap}

/* delete account */
.field{display:block;margin:16px 0 0}
.field span{display:block;font-weight:400;margin-bottom:6px;overflow-wrap:anywhere}
.field span b{font-weight:700}
.field input{display:block;width:100%;max-width:380px;height:46px;font:16px/1.2 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:0 12px;transition:border-color .15s,box-shadow .15s}
.field input:hover{border-color:var(--blue)}
.field input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.field input[aria-invalid=true]{border-color:var(--bad)}

/* loading */
.sk{height:14px;margin:0 0 14px;border-radius:2px;background:var(--rule)}
.sk-h1{width:min(280px,70%);height:38px;margin-bottom:14px}
.sk-sub{width:min(200px,50%);margin-bottom:30px}
.sk-h2{width:120px;height:22px}
.sk-line{width:100%}
.sk-line:nth-child(2){width:82%}
.sk-line:nth-child(3){width:64%}
.sk-btn{width:190px;height:45px;margin-top:22px}

@media (prefers-reduced-motion:no-preference){
  .sk{animation:sk 1.4s ease-in-out infinite}
  .wait::after{animation:wait 1.6s ease-in-out infinite}
  .swap{animation:swap .22s ease-out}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .wait::after{width:100%;opacity:.5}
}
@keyframes sk{50%{opacity:.45}}
@keyframes wait{0%{left:-34%}100%{left:100%}}
@keyframes swap{from{opacity:0;transform:translateY(4px)}}

@media (max-width:900px){
  .out{gap:40px}
  .row{grid-template-columns:150px minmax(0,1fr);gap:8px 28px}
}
@media (max-width:760px){
  body{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .who{width:100%;justify-content:space-between;flex-wrap:nowrap;gap:12px}
  .out{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:36px 48px;align-items:start}
  .lede{font-size:18px}
  .acct{padding-block:26px 28px}
  .acct h1{font-size:34px}
  .row{grid-template-columns:minmax(0,1fr);gap:14px;padding:24px 0 28px}
  .acts .btn{flex:1 1 auto}
  #del .acts .btn{flex:0 0 auto}
  /* the version has no job on an account page; the links stay */
  .ver-n{display:none}
}
@media (max-width:520px){
  .plans{grid-template-columns:minmax(0,1fr)}
  .facts>div{grid-template-columns:96px minmax(0,1fr)}
}
@media (max-width:400px){
  :root{--gx:14px}
  body{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));padding-top:6px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .frame{border-width:4px}
  .word{font-size:36px}
  .brand img{width:52px;height:52px}
  .nav{gap:18px}
}