/* Layout: one narrow column on narrow screens, two from 820px (see the end of this sheet). The name of the step,
   a line about why, then the ways in: Apple, Google, or an email and a password. Once signed in, the same page shows the account. */
:root {
  /* single night-sky look, by choice: the page stays dark in every viewer theme */
  color-scheme: dark;
  --bg: #0A0F24;
  --bg-glow: #1A2350;
  --surface: #121935;
  --surface-2: #1B2447;
  --ink: #E7EBF8;
  --muted: #9BA7CA;
  --line: #2A3561;
  --accent: #9DB4FF;
  --accent-ink: #0A0F24;
  /* one hue for each tab */
  --k-pure: #E3A0BE;
  --k-bin: #B7A2FF;
  --k-iso: #5FD3C0;
  --k-sf: #F2B84B;
  --k-in: #F5A46B;
  --k-bw: #7FA0FF;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
body {
  background: radial-gradient(900px 420px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
.app {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eyebrow { margin: 0; }
h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
.app > header .lede { margin: 0; color: var(--muted); max-width: 56ch; }
.app > header .lede + .lede { margin-top: 8px; }


.app.account { gap: 18px; }
.app.account > header h1 { font-size: 2rem; }
.card { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 420px; margin: 0 auto; }
.card[hidden] { display: none; }
.lede2 { margin: 0; color: var(--muted); }
/* the ways in: one wide button each */
.providers { display: flex; flex-direction: column; gap: 10px; }
.wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.wide:hover { background: var(--surface-2); }
.wide.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.wide.primary:hover { background: color-mix(in srgb, var(--accent) 90%, #fff); }
.wide.danger { color: var(--danger); }
.wide[disabled] { opacity: 0.6; cursor: default; }
.wide:focus-visible, .field input:focus-visible, .link:focus-visible, .peek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root { --danger: #FF9D9D; --ok: #5FD3C0; }
/* "or" between two hairlines */
.or { display: flex; align-items: center; gap: 12px; margin: 2px 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 0.84rem; color: var(--muted); }
.field[hidden] { display: none; }
.field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.pw { position: relative; display: block; }
.pw input { padding-right: 84px; }
.peek { position: absolute; right: 6px; top: 50%; height: 36px; margin-top: -18px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--accent); font: inherit; font-size: 0.88rem; font-weight: 500; cursor: pointer; }
.hint { margin: -4px 0 0; font-size: 0.8rem; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0; }
.link { padding: 6px 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 0.92rem; font-weight: 500; cursor: pointer; text-align: left; }
.link[hidden] { display: none; }
.msg { margin: 0; padding: 11px 14px; border: 1px solid; border-radius: 12px; font-size: 0.92rem; }
.msg.err { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.msg.good { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
/* signed in */
.who { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.who small { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.who b { display: block; margin-top: 2px; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.rowbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.rowbtns .wide { flex: 1 1 150px; }
.label { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fineprint { margin: 0; font-size: 0.82rem; color: var(--muted); }
.legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;   /* small enough that the longest translation stays clearly shorter than the company name */
  color: var(--muted);
  text-align: center;
}
.legal p { margin: 0; }
.legal .org {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
}

/* the language drop-down (a flag) sits in the bar across the top. Moving between pages is done from the bar along the bottom
   on phones and tablets, and from the bar across the top on computers (see the end of this sheet). */
.app > header { display: block; }
.app > header::after { content: ""; display: block; clear: both; }
.app > header h1 + .lede, .app > header .titleline + .lede { margin-top: 6px; }
.tools { float: right; display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px 14px; }
.langpick { position: relative; }
.langbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.langbtn[aria-expanded="true"] { border-color: var(--accent); }
/* the one line at the bottom of every page sits in the middle, over the company name */
.fineprint, #awScreen .fineprint { max-width: none; margin-inline: auto; text-align: center; }
/* a short line set beside the title */
.titleline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.titleline .eyebrow { font-size: 0.64rem; letter-spacing: 0.06em; white-space: nowrap; }
.langpick svg { display: block; width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.langmenu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.langmenu button {
  display: flex;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.langmenu button:hover { background: var(--surface-2); }
.langmenu button[aria-selected="true"] { background: var(--surface-2); border-color: var(--accent); }
.langbtn:focus-visible, .langmenu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* longer words in other languages still fit the tabs on narrow phones */
@media (max-width: 380px) { .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; } }

/* ================= website format =================
   A bar across the top of every page: the mark and the name on the left, the flag in the right corner.
   On phones and tablets the pages run along the bottom, each a sign over its name; a play bar that sticks
   to the bottom of a page rests on top of them (--dock-bottom). On computers the pages move up into the
   bar across the top. */
:root { --nav-h: 56px; --tabbar-h: 60px; --dock-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
body { padding-top: var(--nav-h); padding-bottom: var(--tabbar-h); }

.topbar {
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.topbar-in { display: flex; align-items: center; gap: 10px; height: var(--nav-h); max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.brand { flex: none; display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; border-radius: 8px; }
.brandmark { display: block; width: auto; height: 28px; overflow: visible; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.topbar .tools { flex: none; float: none; margin: 0 0 0 auto; }

/* the pages, along the bottom */
.navlinks {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: calc(var(--tabbar-h) - 1px);   /* with its top line, the bar is --tabbar-h tall */
  padding: 0 max(6px, calc(50% - 280px)) env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.navlinks a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.navlinks a svg { display: block; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navlinks a:hover { color: var(--ink); }
.navlinks a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.navlinks a[aria-current="page"] svg { stroke-width: 2.1; }
.navlinks a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* a dot on Account says someone is signed in */
.navlinks a[data-in="true"]::after { content: ""; position: absolute; top: 7px; left: calc(50% + 6px); width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ok, #5FD3C0); }
/* six names side by side: smaller letters on narrower phones, so the longest (Générateur, Protocolos) still fit */
@media (max-width: 380px) { .navlinks { padding-inline: 2px; } .navlinks a { font-size: 0.64rem; letter-spacing: -0.01em; } }
@media (max-width: 340px) { .navlinks a { font-size: 0.58rem; } .navlinks a svg { width: 23px; height: 23px; } }

/* computers (a wide screen worked with a mouse or trackpad): the pages sit in the bar across the top */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root { --nav-h: 64px; --dock-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: 0; }
  .topbar { background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .topbar-in { gap: 14px; padding-inline: 32px; }
  .brandmark { height: 30px; }
  .topbar .tools { margin-left: 0; }
  .navlinks { position: static; display: flex; gap: 2px; height: auto; margin-left: auto; padding: 0; border: 0; background: none; }
  .navlinks a { flex-direction: row; gap: 8px; padding: 8px 13px; border-radius: 8px; font-size: 0.93rem; }
  .navlinks a svg { display: none; }
  .navlinks a:hover { background: var(--surface); }
  .navlinks a[aria-current="page"] { background: var(--surface-2); }
  .navlinks a:focus-visible { outline-offset: 3px; }
  .navlinks a[data-in="true"]::after { position: static; border: 0; }
}

/* the line about why, under the title: on narrow screens it stays inside the card, as before */
.app.account #lede { display: none; }

/* From 820px the page opens into two columns: the name of the step and the line about why on the left;
   the ways in (or, once signed in, the account) in a panel on the right. */
@media (min-width: 820px) {
  body { background: radial-gradient(1400px 520px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg); }
  .app.account { max-width: 1200px; padding-inline: clamp(20px, 3vw, 32px); padding-block: 72px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-rows: auto auto auto auto 1fr; column-gap: clamp(36px, 7vw, 96px); row-gap: 0; align-items: start; }
  /* the words keep the whole height of the left column; the last, stretching row takes up what the panels leave */
  .app.account > header { grid-column: 1; grid-row: 1 / span 5; padding-top: 30px; }
  .app.account > header h1 { font-size: clamp(2.6rem, 4.8vw, 3.4rem); letter-spacing: -0.025em; line-height: 1.08; }
  .app.account #lede { display: block; max-width: 38ch; margin-top: 20px; font-size: 1.14rem; line-height: 1.6; text-wrap: pretty; }
  .app.account #why, .app.account #in > .lede2 { display: none; }
  .app.account > .card { grid-column: 2; max-width: none; margin: 0; }
  .app.account > #out { grid-row: 1; }
  .app.account > #in { grid-row: 2; }
  .app.account > #msgs { grid-row: 3; gap: 0; }
  .app.account > #install { grid-row: 4; margin-top: 22px; }
  .app.account > #out, .app.account > #in { box-sizing: border-box; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--surface) 62%, transparent); }
  .app.account #msgs .msg { margin-top: 14px; }
  .app.account > .fineprint { grid-column: 1 / -1; grid-row: 6; margin-top: 80px; }
  .app.account > .legal { grid-column: 1 / -1; grid-row: 7; margin-top: 16px; }
}