@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/figtree.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;
}

/* Its Latin Extended letters (Polish, Turkish…): fetched only by a page that has some. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

:root {
  color-scheme: light dark;
  accent-color: var(--accent);
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  /* Violet-tinted neutrals, one action blue. */
  --bg: #f9f9fc;
  --card: #ffffff;
  --fill: #f5f5f8;
  --fill-strong: #ebeaf1;
  --text: #282d40;
  --text-2: #4d4b62;
  --muted: #6b6580;
  --subtle: #8a849c;
  --line: #e5e4ed;
  --line-strong: #d3d1de;
  --line-hover: #a7a3b5;
  --accent: #0073c3;
  --accent-hover: #0064aa;
  --accent-active: #005591;
  --accent-text: #ffffff;
  --accent-soft: rgb(95 191 255 / 0.12);
  --accent-softer: rgb(95 191 255 / 0.07);
  --accent-line: rgb(16 97 166 / 0.45);
  --ring: rgb(26 163 255 / 0.28);
  --gain: #008339;
  --gain-icon: #0b9c4a;
  --gain-soft: #e2fdf2;
  --loss: #6b3fd4;
  --loss-soft: #f1ecff;
  --negative: #bc0016;
  --negative-soft: #ffeaef;
  --negative-ring: rgb(188 0 22 / 0.18);
  --warning: #b73700;
  --warning-dot: #f59e0b;
  --warning-soft: #fef3c7;
  --info: #1061a6;
  --info-soft: #e1f2ff;
  --selection: rgb(26 163 255 / 0.2);
  --scroll: #d3d1de;
  --tip-bg: #282d40;
  --tip-line: #282d40;
  --tip-text: #ffffff;
  --shadow-lg: 0 0 6px -2px rgb(0 0 0 / 0.15), 0 24px 48px -12px rgb(40 45 64 / 0.3);
  --shadow-tip: 0 3px 7px rgb(0 0 0 / 0.1), 0 2px 4px rgb(0 0 0 / 0.06);
  --shadow-menu: 0 0 6px -2px rgb(0 0 0 / 0.12), 0 12px 28px -10px rgb(40 45 64 / 0.28);
  --gradient: linear-gradient(68deg, #5fbfff 0%, #87a7fa 50%, #b090f5 100%);
  /* The mark's blue to violet, deep enough for white initials. */
  --avatar: linear-gradient(to top right, #0073c3, #6a4fe0);
  /* Controls: 36 px, 28 px small, 44 px large. */
  --h: 36px;
  --h-sm: 28px;
  --h-lg: 44px;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-card: 12px;
  --radius-panel: 16px;
}

/* A page that is light whatever the system's theme (the landing page). */
:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d111c;
    --card: #141a29;
    --fill: #1d2435;
    --fill-strong: #282d40;
    --text: #ffffff;
    --text-2: #e4e3ec;
    --muted: #c7c5d1;
    --subtle: #a7a3b5;
    --line: rgb(255 255 255 / 0.1);
    --line-strong: rgb(255 255 255 / 0.16);
    --line-hover: rgb(255 255 255 / 0.32);
    --accent: #1aa3ff;
    --accent-hover: #4db8ff;
    --accent-active: #0a8de6;
    --accent-text: #08121f;
    --accent-soft: rgb(26 163 255 / 0.16);
    --accent-softer: rgb(26 163 255 / 0.07);
    --accent-line: rgb(26 163 255 / 0.5);
    --ring: rgb(26 163 255 / 0.35);
    --gain: #6ee7a8;
    --gain-icon: #34d399;
    --gain-soft: #163527;
    --loss: #c4b5fd;
    --loss-soft: #2b2350;
    --negative: #ff9caa;
    --negative-soft: #3f1520;
    --negative-ring: rgb(255 156 170 / 0.25);
    --warning: #fcd34d;
    --warning-dot: #fbbf24;
    --warning-soft: #3a2a0c;
    --info: #8fd0ff;
    --info-soft: #122d45;
    --selection: rgb(26 163 255 / 0.32);
    --scroll: #393b52;
    --tip-bg: #393b52;
    --tip-line: rgb(255 255 255 / 0.12);
    --tip-text: #ffffff;
    --shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.7);
    --shadow-tip: 0 4px 12px rgb(0 0 0 / 0.4);
    --shadow-menu: 0 12px 28px -10px rgb(0 0 0 / 0.7);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Nothing animates: every hover, opening and change shows at once. */
*,
*::before,
*::after,
::backdrop {
  animation: none !important;
  transition: none !important;
}

html {
  scroll-behavior: auto;
}

html {
  scrollbar-color: var(--scroll) var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--selection);
}

button,
input {
  margin: 0;
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* No focus ring, from a key or a touch (the owner's choice): what a key
   reaches looks hovered instead (below), a touch draws no highlight. */
:focus,
:focus-visible {
  outline: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}

p {
  margin: 0;
}

/* Vietnamese stacks its accents beyond Figtree's letters: the system's font, whole. */
html:lang(vi) {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Other scripts: Figtree for the Latin letters and figures, each system's
   best face for the rest. */
html:lang(ja) {
  --font: "Figtree", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
}

html:lang(ko) {
  --font: "Figtree", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}

html:lang(zh-CN) {
  --font: "Figtree", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

html:lang(zh-TW) {
  --font: "Figtree", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
}

html:lang(zh-HK) {
  --font: "Figtree", "PingFang HK", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans HK", system-ui, sans-serif;
}

html:lang(ar) {
  --font: "Figtree", "SF Arabic", "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
}

html:lang(th) {
  --font: "Figtree", "Thonburi", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif;
}

html:lang(hi) {
  --font: "Figtree", "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", system-ui, sans-serif;
}

/* Arabic letters join: spacing them apart would break the words. */
html:lang(ar),
html:lang(ar) * {
  letter-spacing: 0 !important;
}

/* Hidden means hidden, whatever display a class gives. */
[hidden] {
  display: none !important;
}

/* Icons (Lucide, 24 × 24 strokes) */

.glyph {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Buttons */

.btn {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}

.btn-primary:not(:disabled):hover,
.btn-primary:not(:disabled):focus-visible {
  background: var(--accent-hover);
}

.btn-primary:not(:disabled):active {
  background: var(--accent-active);
}

.btn-secondary {
  border-color: var(--accent-line);
  color: var(--accent);
}

.btn-secondary:not(:disabled):hover,
.btn-secondary:not(:disabled):focus-visible {
  border-color: var(--accent);
  background: var(--accent-softer);
}

.btn-secondary:not(:disabled):active {
  background: var(--accent-soft);
}

.btn-ghost {
  color: var(--muted);
}

.btn-ghost:not(:disabled):hover,
.btn-ghost:not(:disabled):focus-visible {
  background: var(--fill);
  color: var(--text);
}

.btn-ghost:not(:disabled):active {
  background: var(--fill-strong);
}

.btn-danger:not(:disabled):hover,
.btn-danger:not(:disabled):focus-visible {
  background: var(--negative-soft);
  color: var(--negative);
}

.btn-danger:not(:disabled):active {
  background: var(--negative-ring);
}

.btn-dashed {
  width: 100%;
  height: 44px;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}

.btn-dashed:not(:disabled):hover,
.btn-dashed:not(:disabled):focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-softer);
  color: var(--accent);
}

.btn-sm {
  height: var(--h-sm);
  padding: 0 10px;
  gap: 6px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

.btn-sm .glyph {
  width: 14px;
  height: 14px;
}

.btn-lg {
  height: var(--h-lg);
  padding: 0 18px;
  gap: 10px;
  font-size: 0.9375rem;
}

.btn-lg .glyph {
  width: 18px;
  height: 18px;
}

.btn-icon {
  width: var(--h);
  padding: 0;
}

.btn-sm.btn-icon {
  width: var(--h-sm);
}

.btn-block {
  width: 100%;
}

/* Waiting for an answer: a spinner in place of the icon. */
.btn[aria-busy="true"] {
  cursor: progress;
}

.btn[aria-busy="true"]:disabled {
  opacity: 1;
}

.btn[aria-busy="true"] > .glyph {
  display: none;
}

.btn[aria-busy="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.btn-sm[aria-busy="true"]::before {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

.btn-lg[aria-busy="true"]::before {
  width: 16px;
  height: 16px;
}

/* Text fields: filled, outlined once in use. */

.input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--fill);
  color: var(--text);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  caret-color: var(--accent);
}

.input::placeholder {
  color: var(--subtle);
  opacity: 1;
}

.input:hover {
  border-color: var(--line-strong);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--ring);
}

.input[aria-invalid="true"] {
  border-color: var(--negative);
  background: var(--card);
}

.input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--negative-ring);
}

.input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 100px var(--fill) inset;
}

.input.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.input.mono::placeholder {
  font-family: var(--font);
}

/* A field with an icon at its start. */
.input-wrap {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.input-wrap > .glyph {
  position: absolute;
  top: 50%;
  left: 12px;
  translate: 0 -50%;
  color: var(--subtle);
  pointer-events: none;
}

.input-wrap > .input {
  padding-left: 38px;
}

/* Pills: statuses and changes, tinted. */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pill .glyph {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

.pill.gain {
  background: var(--gain-soft);
  color: var(--gain);
}

.pill.loss {
  background: var(--loss-soft);
  color: var(--loss);
}

.pill.error {
  background: var(--negative-soft);
  color: var(--negative);
}

.pill.warning {
  background: var(--warning-soft);
  color: var(--warning);
}

/* Tooltips: one popover, in the top layer (above an open dialog). */

.tooltip {
  position: fixed;
  inset: 0 auto auto 0;
  max-width: min(320px, calc(100vw - 16px));
  margin: 0;
  padding: 6px 10px;
  overflow: visible;
  border: 1px solid var(--tip-line);
  border-radius: var(--radius);
  background: var(--tip-bg);
  color: var(--tip-text);
  box-shadow: var(--shadow-tip);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* Brand */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* The owner's mark: a gradient ring open on the right, bars stepping out of it. */
.brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
}

/* Login */

.card {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 380px;
  /* Never wider than the screen, whatever its content asks for. */
  min-width: 0;
  padding: 40px 32px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--card);
  text-align: center;
}

.card .brand-mark {
  width: 52px;
  height: 52px;
}

h1 {
  margin: 16px 0 4px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lede {
  margin-bottom: 28px;
  font-size: 0.875rem;
  color: var(--subtle);
}

#status {
  min-height: 1.5em;
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Making an account: a little wider, for two names side by side and the QR code. */
.card-wide {
  max-width: 440px;
}

/* A step of the login, the signup or the consent: its fields and buttons, a column. */
.auth-step,
.auth-form {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  text-align: start;
}

/* The login and the signup: the card, the language menu under it. */
body.auth {
  align-content: center;
  gap: 16px;
}

.auth-foot {
  display: flex;
  justify-content: center;
}

/* The card's mark: back to the site. */
.brand-home {
  display: block;
  border-radius: 50%;
}

/* Numbers read left to right, whatever the page's direction. */
.otp,
.identifier {
  direction: ltr;
}

/* The language menu: a quiet button, its links in a popover (a sheet on phones). */
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.lang-button:hover,
.lang-button:focus-visible,
.lang-button[aria-expanded="true"] {
  background: var(--fill);
  color: var(--text);
}

.lang-chevron {
  width: 14px;
  height: 14px;
  color: var(--subtle);
}

/* The panel, as Stripe's: the world's regions in columns, each country
   with its languages. */
.lang-menu {
  position: fixed;
  inset: auto;
  width: min(880px, calc(100vw - 16px));
  max-height: min(560px, calc(100dvh - 16px));
  margin: 0;
  padding: 6px 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-menu);
}

.lang-title {
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 600;
}

.lang-regions {
  columns: 4 180px;
  column-gap: 32px;
}

.lang-region-name {
  padding: 16px 0 4px;
  break-after: avoid;
  color: var(--subtle);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lang-country {
  display: grid;
  gap: 1px;
  padding: 6px 0;
  break-inside: avoid;
}

.lang-country-name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}

.lang-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

.lang-item {
  padding: 1px 0;
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.lang-item:hover,
.lang-item:focus-visible {
  color: var(--accent);
}

.lang-item[aria-current="true"] {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 559px) {
  .lang-menu {
    inset: auto 0 0 0;
    width: auto;
    max-height: 80dvh;
    padding: 4px 20px calc(16px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  }

  .lang-menu::backdrop {
    background: rgb(13 17 28 / 0.4);
  }

  .lang-regions {
    columns: 2;
    column-gap: 20px;
  }

  .lang-country {
    padding: 8px 0;
  }

  .lang-item {
    padding: 4px 0;
    font-size: 0.9375rem;
  }
}

.auth-step[hidden],
.auth-form[hidden] {
  display: none;
}

.step-help {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.auth-switch {
  margin-top: 16px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.auth-switch a {
  font-weight: 500;
  color: var(--accent);
}

.auth-switch a:hover,
.auth-switch a:focus-visible {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* First and last name side by side. */
.field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* The way the account logs in: one choice of three, outlined, its dot filled. */
.methods {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 4px 0 4px;
  padding: 0;
  border: 0;
}

.methods legend {
  margin-bottom: 6px;
  padding: 0;
}

.method {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  cursor: pointer;
}

.method:hover,
.method:has(input:focus-visible) {
  border-color: var(--line-hover);
  background: var(--fill);
}

.method:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-softer);
}

.method input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
  appearance: none;
  cursor: pointer;
}

.method input:checked {
  border: 5px solid var(--accent);
}

.method-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.method-name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.method-blurb {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

/* An authenticator code (code-input.js): six boxes, three and three, over
   one real field whose text and caret are clear. */
.otp {
  position: relative;
  width: 100%;
  max-width: 360px;
}

.otp-slots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.otp-slot {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-width: 0;
  height: 52px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--fill);
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.otp-dash {
  flex: none;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--line-strong);
}

.otp:hover .otp-slot {
  border-color: var(--line-strong);
}

/* The box the next digit goes in, as a focused field. */
.otp .otp-slot.active {
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Its caret, still. */
.otp-slot.caret::after {
  content: "";
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: var(--accent);
}

.otp:has(> .otp-input[aria-invalid="true"]) .otp-slot {
  border-color: var(--negative);
  background: var(--card);
}

.otp:has(> .otp-input[aria-invalid="true"]) .otp-slot.active {
  box-shadow: 0 0 0 3px var(--negative-ring);
}

.otp:has(> .otp-input[aria-invalid="true"]) .otp-slot.caret::after {
  background: var(--negative);
}

.otp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  -webkit-text-fill-color: transparent;
  /* 16 px: iOS zooms in on smaller fields. */
  font-size: 16px;
  outline: none;
  cursor: text;
}

.otp-input::selection {
  background: transparent;
}

/* A password manager's fill: its colours hidden too (one rule each: a
   browser drops a whole list for a selector it does not know). */
.otp-input:autofill {
  opacity: 0;
}

.otp-input:-webkit-autofill {
  opacity: 0;
}

/* The app's QR code: dark on white, whatever the theme. */
.qr {
  display: block;
  width: 176px;
  height: 176px;
  flex: none;
  margin: 0 auto;
  border-radius: var(--radius);
}

.qr-back {
  fill: #ffffff;
}

.qr-modules {
  fill: #000000;
}

.secret {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.secret-label {
  font-size: 0.8125rem;
  color: var(--muted);
}

.secret-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.secret-value,
.mono-value {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* The new account's number, to note. */
.identifier {
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--fill);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The MCP consent: the app, what it may read, the answer. */
.consent-app {
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

.consent-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px 14px 12px 32px;
  border-radius: var(--radius-card);
  background: var(--fill);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-2);
}

.consent-who {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
}

.consent-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Dashboard: a sidebar, the rest of the window for the content. */

body.dashboard {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  place-items: stretch;
  align-items: start;
  padding: 0;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: 20px 16px 16px;
  border-right: 1px solid var(--line);
  background: var(--card);
}

.sidebar .brand {
  padding: 0 8px;
}

/* The links and the foot: the sidebar's rest, the top bar's menu. */
.menu {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* Only with the top bar. */
.menu-toggle {
  display: none;
}

.nav {
  display: grid;
  gap: 2px;
  margin-top: 28px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
}

.nav-item .glyph {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  color: var(--subtle);
}

.nav-item:not(:disabled):hover,
.nav-item:not(:disabled):focus-visible {
  background: var(--fill);
  color: var(--text);
}

.nav-item:not(:disabled):hover .glyph,
.nav-item:not(:disabled):focus-visible .glyph {
  color: var(--text-2);
}

.nav-item[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-item[aria-current="page"] .glyph {
  color: var(--accent);
}

/* A platform in error, or the wallets shut: a dot on their page's link. */
.nav-item.alert::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  margin-left: auto;
  border-radius: 50%;
  background: var(--warning-dot);
}

.nav-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar-foot {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* The owner: an avatar and a name; a click opens its menu, over the button
   (on the rail's right when the sidebar is a rail). */
.profile {
  gap: 10px;
  padding: 0 8px;
}

.profile .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile .profile-chevron {
  width: 16px;
  height: 16px;
  flex: none;
}

.profile:has(+ :popover-open) {
  background: var(--fill);
  color: var(--text);
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--avatar);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.avatar-lg {
  width: 36px;
  height: 36px;
  font-size: 0.8125rem;
}

.profile-menu {
  inset: auto;
  width: 240px;
  margin: 0;
  padding: 6px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-menu);
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--line);
}

.profile-who {
  min-width: 0;
}

.profile-name,
.profile-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-name {
  font-size: 0.875rem;
  font-weight: 600;
}

.profile-host {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--muted);
}

.profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--radius);
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
}

.profile-item .glyph {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  color: var(--subtle);
}

.profile-item:hover,
.profile-item:focus-visible,
.profile-item[aria-current="page"] {
  background: var(--fill);
  color: var(--text);
}

.profile-item:hover .glyph,
.profile-item:focus-visible .glyph {
  color: var(--text-2);
}

/* Wide windows: by default the sidebar is a rail, the mark and the icons
   alone, each link named by its tooltip; #sidebar-toggle widens it. */
@media not all and (max-width: 900px) {
  body.dashboard.rail {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .rail .sidebar {
    padding-right: 15px;
  }

  .rail .sidebar .brand {
    padding: 0 4px;
  }

  .rail .brand-name {
    display: none;
  }

  .rail .nav-item {
    position: relative;
    justify-content: center;
    padding: 0;
  }

  /* Out of sight, still the link's name. */
  .rail .nav-item .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rail .nav-item.alert::after {
    position: absolute;
    top: 6px;
    right: 6px;
  }

  .rail .profile-chevron {
    display: none;
  }
}

.dashboard main {
  display: grid;
  gap: 24px;
  min-width: 0;
  padding: 32px 40px 48px;
}

/* A page: its title, then its content. One shown at a time. */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 36px;
}

.page-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.page {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.page[hidden] {
  display: none;
}

/* Key figures: the value first, its result beside it. */

.figures {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
}

.figure {
  padding: 0 40px;
}

.figure:first-child {
  padding-left: 0;
}

.figure + .figure {
  border-left: 1px solid var(--line);
}

.figure-value {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.figure-main {
  font-size: 2.25rem;
  letter-spacing: -0.02em;
}

.figure-value .glyph {
  width: 22px;
  height: 22px;
}

/* The currency after an amount, smaller and lighter. */
.currency {
  margin-left: 0.2em;
  font-size: 0.6em;
  font-weight: 400;
  color: var(--muted);
}

.figure-label {
  margin-top: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--subtle);
}

/* The overview: one card per market, the way to its page. */

.categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.category {
  display: grid;
  gap: 20px;
  min-width: 0;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
}

.category:hover,
.category:focus-visible {
  border-color: var(--line-hover);
}

.category-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.category-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category .go {
  color: var(--subtle);
}

.category:hover .go,
.category:focus-visible .go {
  color: var(--text-2);
}

.category-value {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Shown only while the live connection is down. */
.connection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.8125rem;
  font-weight: 500;
}

.connection::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warning-dot);
}

.connection:empty {
  display: none;
}

/* The loading view: the owner's animated mark (assets/loading.svg, its
   animation inside the file), alone, until the first figures are in. */
.loading-view {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: var(--bg);
}

.loading-mark {
  display: block;
  width: 80px;
  height: 80px;
}

/* Under the mark, which stays at the very centre. */
.loading-status {
  position: absolute;
  top: calc(50% + 40px + 20px);
  right: 16px;
  left: 16px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
}

/* Behind it, nothing to reach: no focus, nothing read out. */
body.is-loading > :not(.loading-view) {
  visibility: hidden;
}

.muted {
  color: var(--muted);
}

/* Connectors: a section for the platforms, one for the wallets. */

#page-connectors {
  gap: 32px;
}

.section {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.section-head h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.section-help {
  margin-top: 2px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}

.platforms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.platform {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
}

.platform-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.platform-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The head's buttons: retry, edit, close together at its end. */
.platform-head .btn:last-child {
  margin-right: -6px;
}

.platform-head .btn + .btn {
  margin-left: -8px;
}

/* Its keys (the end of their public part), its accounts. */
.platform-detail {
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform.not_configured > .btn {
  justify-self: start;
}

/* A wallet more: as tall as the cards beside it. */
.btn-dashed.add-card {
  height: auto;
  min-height: 112px;
  border-radius: var(--radius-card);
  font-size: 0.875rem;
}

.platform-value {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Waiting or not configured: the status where the value goes. */
.platform-status {
  justify-self: start;
  margin: 2px 0;
}

.platform.not_configured .platform-value,
.platform.pending .platform-value {
  color: var(--subtle);
}

.platform.error {
  border-color: color-mix(in srgb, var(--negative) 35%, transparent);
}

.platform .error-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--negative);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* A wallet's icon: the stroke glyph on a tile, as tall as a logo. */
.tile {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius);
  background: var(--fill);
  color: var(--muted);
}

.tile .glyph {
  width: 16px;
  height: 16px;
}

/* The wallets while their vault is shut: why, and the way to open it. */
.platform .vault-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.vault-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* "Réinitialiser" pressed once: the second press erases. */
.vault-actions .btn-danger {
  background: var(--negative-soft);
  color: var(--negative);
}

/* The account's settings: a panel per section, its rows on hairlines. */
#page-settings {
  gap: 32px;
}

.settings-panel {
  display: grid;
  gap: 16px;
  padding: 20px 24px;
}

.setting-list {
  display: grid;
}

.setting-list:empty {
  display: none;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  min-width: 0;
}

.setting-list .setting-row {
  padding: 10px 0;
}

.setting-list .setting-row + .setting-row {
  border-top: 1px solid var(--line);
}

.setting-text {
  flex: 1;
  min-width: 0;
}

.setting-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.setting-help {
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.setting-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.mono-value {
  font-size: 0.875rem;
}

/* "Retirer" or "Révoquer" pressed once: the second press does it. */
.setting-row .btn-danger,
.settings-foot .btn-danger {
  background: var(--negative-soft);
  color: var(--negative);
}

.settings-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
}

.form-note {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.form-note:empty {
  min-height: 0;
}

.totp-form {
  display: grid;
  gap: 16px;
}

/* The app's setup: its QR code beside its key and first code. */
.totp-setup {
  display: flex;
  align-items: center;
  gap: 24px;
}

.totp-side {
  display: grid;
  flex: 1;
  gap: 12px;
  min-width: 0;
  max-width: 420px;
}

.totp-side .secret-row {
  justify-content: flex-start;
}

/* Loading: grey blocks where the values go, still. */

.skeleton {
  display: inline-block;
  width: 64px;
  height: 12px;
  border-radius: 6px;
  background: var(--fill-strong);
  vertical-align: middle;
}

.skeleton.figure-main {
  width: 220px;
  height: 34px;
  border-radius: var(--radius);
}

.skeleton.figure {
  width: 132px;
  height: 24px;
  border-radius: var(--radius);
}

.skeleton.value {
  width: 112px;
  height: 20px;
}

.skeleton.logo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
}

.skeleton.name {
  width: 72px;
  height: 14px;
}

.skeleton.pill {
  width: 120px;
  height: 24px;
  border-radius: 999px;
}

.skeleton.total {
  width: 96px;
  height: 18px;
}

.skeleton.icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.skeleton.detail {
  width: 112px;
  height: 10px;
}

.skeleton.cell {
  width: 56px;
}

.skeleton.text {
  width: 80px;
}

.skeleton-lines {
  display: grid;
  gap: 8px;
}

tbody tr.loading:hover td {
  background: none;
}

/* Notes */

.notes {
  display: grid;
  gap: 8px;
}

.notes:empty {
  display: none;
}

.note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  background: var(--info-soft);
  color: var(--info);
  font-size: 0.875rem;
  line-height: 1.45;
}

.note .glyph {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* A source that cannot list its orders. */
.note.warning {
  background: var(--warning-soft);
  color: var(--warning);
}

/* A market page's tabs: its positions, its orders still open, its executions. */

.tabs {
  display: flex;
  gap: 24px;
  margin: -4px 0 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

.tab:hover {
  color: var(--text);
}

.tab[aria-selected="true"] {
  color: var(--text);
}

.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.tab .count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.tab[aria-selected="true"] .count {
  background: var(--accent-soft);
  color: var(--accent);
}

.tab-body {
  display: grid;
  gap: 12px;
}

/* An order's type, its triggers under it. */
.kind {
  white-space: nowrap;
}

.kind .trigger {
  font-size: 0.75rem;
  color: var(--subtle);
}

/* Panels: a market's positions, the transfers. */

.panel {
  container: panel / inline-size;
  min-width: 0;
  padding: 20px 24px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--card);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.panel-head h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.panel-totals {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.panel-total {
  font-size: 1.125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.empty {
  padding: 4px 0 12px;
  font-size: 0.875rem;
  color: var(--subtle);
}

.gain {
  color: var(--gain);
}

.loss {
  color: var(--loss);
}

.perf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trend {
  width: 14px;
  height: 14px;
}

.partial {
  margin-left: 2px;
  color: var(--subtle);
  cursor: help;
}

/* Tables: a filled, rounded header bar, hairline rows. */

.table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
}

th {
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--fill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

th:first-child {
  border-radius: 10px 0 0 10px;
}

th:last-child {
  border-radius: 0 10px 10px 0;
}

td {
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: var(--accent-softer);
}

.num {
  text-align: right;
  white-space: nowrap;
}

td.strong,
.asset {
  font-weight: 500;
  color: var(--text);
}

tr.unpriced td {
  color: var(--subtle);
}

.asset-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}

.asset-cell.compact {
  gap: 8px;
  min-width: 0;
}

.parts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--subtle);
}

.part {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* An asset's share of the total, with its bar. */
.share {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.bar {
  width: 56px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--fill-strong);
}

.bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--gradient);
}

.icon {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  object-fit: contain;
}

.icon-platform {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
}

.icon.small {
  width: 14px;
  height: 14px;
}

.icon-platform.small {
  border-radius: 4px;
}

.icon.medium {
  width: 20px;
  height: 20px;
}

.icon-platform.medium {
  border-radius: 5px;
}

.icon.letter {
  display: inline-grid;
  place-items: center;
  background: var(--fill-strong);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.icon.letter.small {
  font-size: 0.5625rem;
}

.icon.letter.medium {
  font-size: 0.6875rem;
}

.icon-wallet {
  color: var(--subtle);
}

.icon-wallet.small {
  width: 14px;
  height: 14px;
}

.icon-wallet.medium {
  width: 18px;
  height: 18px;
}

/* Transfers */

.operation {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.direction {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.direction .glyph {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.direction.deposit {
  background: var(--gain-soft);
  color: var(--gain-icon);
}

.direction.withdrawal {
  background: var(--negative-soft);
  color: var(--negative);
}

.when {
  display: grid;
  white-space: nowrap;
}

.when > span + span {
  font-size: 0.75rem;
  color: var(--subtle);
}

.end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* An address or id: mono, in a chip, with its copy button. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0 2px 0 8px;
  border-radius: var(--radius-sm);
  background: var(--fill);
}

.address {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-2);
}

.chip .btn {
  width: 24px;
  height: 24px;
}

/* Dialogs: a platform's connections, a wallet. */

dialog.sheet {
  width: min(600px, calc(100vw - 32px));
  max-height: min(800px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

dialog.sheet[open] {
  display: flex;
  flex-direction: column;
}

dialog.sheet::backdrop {
  background: rgb(13 17 28 / 0.45);
  backdrop-filter: blur(3px);
}

.sheet form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 18px 16px 24px;
}

.dialog-head > div {
  flex: 1;
  min-width: 0;
}

.dialog-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: var(--h-sm);
  letter-spacing: -0.01em;
}

.dialog-help {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}

.dialog-body {
  display: grid;
  gap: 12px;
  padding: 4px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}

.dialog-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}

.form-error {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--negative);
}

/* A labelled field. */
.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field-label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-2);
}

/* A secret, dotted as typed (not a password: no manager offers to keep it). */
.input.masked {
  -webkit-text-security: disc;
}

/* One API key of the platform: its state, its fields. */
.connection-edit {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.connection-edit.bare {
  padding: 0;
  border: 0;
}

.connection-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--h-sm);
}

.connection-edit-head > div {
  min-width: 0;
}

.connection-edit h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.connection-state {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--subtle);
  overflow-wrap: anywhere;
}

.connection-state.linked {
  color: var(--gain);
}

.connection-edit.removing .connection-state {
  color: var(--negative);
}

.connection-edit.removing .field {
  opacity: 0.5;
}

.remove-connection {
  margin: 0 -6px 0 0;
}

/* A new connector's platform: one line each, its logo, its name, what it takes. */
.choices {
  display: grid;
  gap: 8px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.choice:hover,
.choice:focus-visible {
  border-color: var(--line-hover);
  background: var(--fill);
}

.choice:active {
  background: var(--fill-strong);
}

.choice-text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.choice-name {
  font-weight: 500;
  line-height: 1.4;
}

.choice-blurb {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.choice .go {
  color: var(--subtle);
}

.import-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.import-note {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.wallets-list {
  display: grid;
  gap: 12px;
}

.wallets-list:empty {
  display: none;
}

/* How many security keys open the vault, and the way to add one. */
.vault-keys {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: var(--radius-card);
  background: var(--fill);
}

/* On the connectors' page, under the wallets. */
.section .vault-keys {
  border: 1px solid var(--line);
  background: var(--card);
}

.vault-keys-text {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.wallet-edit {
  display: grid;
  gap: 8px;
}

.wallet-edit > .field-label {
  margin-top: 8px;
}

.key-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.key-row .btn {
  width: 40px;
  height: 40px;
}

/* "Supprimer" pressed: the dialog's own buttons ask once more. */
.delete-item {
  margin-left: -8px;
}

.confirming .delete-item {
  display: none;
}

.confirming .form-error {
  color: var(--text-2);
}

.confirming .btn-primary {
  background: var(--negative);
  color: var(--card);
}

.wallet-name,
.connector-name {
  font-weight: 500;
}

.wallet-name::placeholder,
.connector-name::placeholder {
  font-weight: 400;
}

.key-row .input {
  flex: 1;
}

.key-list {
  display: grid;
  gap: 8px;
}

.key-entry {
  display: grid;
  gap: 4px;
}

/* Under a key: what it is, what its scan found. */
.entry-note {
  padding: 0 46px 0 13px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}

.entry-note:empty {
  display: none;
}

.entry-note.warning {
  color: var(--warning);
}

.key-list:empty {
  display: none;
}

.add-key {
  justify-self: start;
  margin-left: 1px;
}

/* Narrow windows: the sidebar becomes a top bar, its links in a menu. */
@media (max-width: 900px) {
  body.dashboard {
    display: block;
  }

  .sidebar {
    z-index: 3;
    flex-direction: row;
    align-items: center;
    height: 60px;
    padding: 0 10px 0 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar .brand {
    padding: 0;
  }

  .menu-toggle {
    display: inline-flex;
    margin-left: auto;
    color: var(--text-2);
  }

  .menu-toggle .glyph {
    width: 20px;
    height: 20px;
  }

  /* A platform in error, or the wallets shut: the dot shows on the button too. */
  .menu-toggle.alert::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning-dot);
    box-shadow: 0 0 0 2px var(--card);
  }

  .menu-open .menu-toggle::after {
    display: none;
  }

  /* The menu always has the pages' names. */
  #sidebar-toggle {
    display: none;
  }

  /* Over the page, under the bar; the page behind it does not scroll. */
  .menu {
    position: fixed;
    inset: 60px 0 0;
    display: none;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card);
  }

  .menu-open {
    overflow: hidden;
  }

  .menu-open .menu {
    display: flex;
  }

  .nav {
    margin-top: 0;
  }

  .nav-item {
    height: 48px;
    font-size: 0.9375rem;
  }

  .dashboard main {
    gap: 20px;
    padding: 24px 16px 32px;
  }

  .page {
    gap: 20px;
  }

  .figure {
    padding: 0 24px;
  }

  .figure-main {
    font-size: 2rem;
  }

  .panel {
    padding: 16px 16px 8px;
  }

  th,
  td {
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* A panel too narrow for its table: each row is a card, its cells placed
   by name (data-cell) and, for the details, labelled (data-label). The
   positions need 900 px, the transfers 720 px. */
@container panel (max-width: 899px) {
  table.positions,
  table.positions tbody {
    display: block;
  }

  table.positions thead {
    display: none;
  }

  table.positions tr {
    display: grid;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  table.positions td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  table.positions tbody tr:hover td {
    background: none;
  }

  /* A position: the asset and its value, then its figures on one line. */
  table.positions tr {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-areas:
      "asset asset asset value value"
      "asset asset asset perf perf"
      "quantity entry price pnl share";
    gap: 2px 16px;
  }

  table.positions [data-cell="asset"] {
    grid-area: asset;
  }

  table.positions [data-cell="value"] {
    grid-area: value;
    align-self: end;
  }

  table.positions [data-cell="perf"] {
    grid-area: perf;
    align-self: start;
  }

  table.positions [data-cell="quantity"] {
    grid-area: quantity;
  }

  table.positions [data-cell="entry"] {
    grid-area: entry;
  }

  table.positions [data-cell="price"] {
    grid-area: price;
  }

  table.positions [data-cell="pnl"] {
    grid-area: pnl;
  }

  table.positions [data-cell="share"] {
    grid-area: share;
  }

  table.positions .asset-cell {
    min-width: 0;
  }

  table.positions :is([data-cell="quantity"], [data-cell="entry"], [data-cell="price"], [data-cell="pnl"], [data-cell="share"]) {
    margin-top: 10px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  table.positions :is([data-cell="quantity"], [data-cell="entry"], [data-cell="price"], [data-cell="pnl"], [data-cell="share"])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--subtle);
  }

  table.positions .share {
    justify-content: flex-start;
  }
}

/* Narrower still: the figures three a line. */
@container panel (max-width: 519px) {
  /* The cards share their columns, the last as wide as the widest value
     or pill needs: the figures line up from one card to the next. */
  table.positions tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
    column-gap: 12px;
  }

  table.positions tr {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 2px 12px;
  }

  table.positions [data-cell="asset"] {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
  }

  table.positions [data-cell="value"] {
    grid-row: 1;
    grid-column: 3;
  }

  table.positions [data-cell="perf"] {
    grid-row: 2;
    grid-column: 3;
  }

  table.positions [data-cell="quantity"] {
    grid-row: 3;
    grid-column: 1;
  }

  table.positions [data-cell="entry"] {
    grid-row: 3;
    grid-column: 2;
  }

  table.positions [data-cell="price"] {
    grid-row: 3;
    grid-column: 3;
  }

  table.positions [data-cell="pnl"] {
    grid-row: 4;
    grid-column: 1 / 3;
  }

  table.positions [data-cell="share"] {
    grid-row: 4;
    grid-column: 3;
  }

  table.positions :is([data-cell="pnl"], [data-cell="share"]) {
    margin-top: 8px;
  }

  /* The share's figure alone. */
  table.positions .share .bar {
    display: none;
  }
}

/* The narrowest phones (320 px): the figures a size smaller, each on one line. */
@container panel (max-width: 299px) {
  table.positions :is([data-cell="quantity"], [data-cell="entry"], [data-cell="price"], [data-cell="pnl"], [data-cell="share"]) {
    font-size: 0.8125rem;
  }
}

@container panel (max-width: 719px) {
  table.transfers,
  table.transfers tbody {
    display: block;
  }

  table.transfers thead {
    display: none;
  }

  table.transfers tr {
    display: grid;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  table.transfers td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  table.transfers tbody tr:hover td {
    background: none;
  }

  /* A transfer: what and how much, when, then from where to where. */
  table.transfers tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "operation quantity asset"
      "when when when"
      "from from from"
      "to to to";
    gap: 4px 8px;
  }

  table.transfers [data-cell="operation"] {
    grid-area: operation;
  }

  table.transfers [data-cell="quantity"] {
    grid-area: quantity;
    align-self: center;
  }

  table.transfers [data-cell="asset"] {
    grid-area: asset;
    align-self: center;
  }

  table.transfers [data-cell="when"] {
    grid-area: when;
    padding-left: 38px;
  }

  table.transfers .when {
    display: flex;
    gap: 6px;
    align-items: baseline;
  }

  table.transfers [data-cell="from"] {
    grid-area: from;
    margin-top: 6px;
  }

  table.transfers [data-cell="to"] {
    grid-area: to;
  }

  table.transfers :is([data-cell="from"], [data-cell="to"]) {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding-left: 38px;
  }

  table.transfers :is([data-cell="from"], [data-cell="to"])::before {
    content: attr(data-label);
    width: 44px;
    flex: none;
    font-size: 0.8125rem;
    color: var(--subtle);
  }

  table.transfers .end {
    min-width: 0;
  }
}

/* Orders and executions: the pair and its side, then the details labelled. */
@container panel (max-width: 899px) {
  :is(table.orders, table.executions),
  :is(table.orders, table.executions) tbody {
    display: block;
  }

  :is(table.orders, table.executions) thead {
    display: none;
  }

  :is(table.orders, table.executions) tr {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  :is(table.orders, table.executions) tr:last-child {
    border-bottom: 0;
  }

  :is(table.orders, table.executions) td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  :is(table.orders, table.executions) tbody tr:hover td {
    background: none;
  }

  table.orders tr {
    grid-template-areas:
      "asset asset asset side side"
      "kind quantity price filled when";
  }

  table.executions tr {
    grid-template-areas:
      "asset asset asset side side"
      "quantity price amount fee when";
  }

  :is(table.orders, table.executions) [data-cell="asset"] {
    grid-area: asset;
  }

  :is(table.orders, table.executions) [data-cell="side"] {
    grid-area: side;
    justify-self: end;
    align-self: start;
  }

  :is(table.orders, table.executions) [data-cell="when"] {
    grid-area: when;
  }

  :is(table.orders, table.executions) [data-cell="kind"] {
    grid-area: kind;
  }

  :is(table.orders, table.executions) [data-cell="quantity"] {
    grid-area: quantity;
  }

  :is(table.orders, table.executions) [data-cell="price"] {
    grid-area: price;
  }

  :is(table.orders, table.executions) [data-cell="filled"] {
    grid-area: filled;
  }

  :is(table.orders, table.executions) [data-cell="amount"] {
    grid-area: amount;
  }

  :is(table.orders, table.executions) [data-cell="fee"] {
    grid-area: fee;
  }

  :is(table.orders, table.executions) .asset-cell {
    min-width: 0;
  }

  :is(table.orders, table.executions) td:not([data-cell="asset"], [data-cell="side"]) {
    margin-top: 10px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(table.orders, table.executions) td:not([data-cell="asset"], [data-cell="side"])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--subtle);
  }

  :is(table.orders, table.executions) :is(.kind, .share) {
    white-space: normal;
  }

  :is(table.orders, table.executions) .share {
    justify-content: flex-start;
  }

  :is(table.orders, table.executions) .when {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    align-items: baseline;
  }
}

/* Narrower: the details three a line, the date across two. */
@container panel (max-width: 519px) {
  :is(table.orders, table.executions) tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 12px;
  }

  table.orders tr {
    grid-template-areas:
      "asset asset side"
      "kind quantity price"
      "filled when when";
  }

  table.executions tr {
    grid-template-areas:
      "asset asset side"
      "quantity price amount"
      "fee when when";
  }

  :is(table.orders, table.executions) .share .bar {
    display: none;
  }
}

/* Narrow panels: the three tabs closer, smaller; on the narrowest, without their counts. */
@container panel (max-width: 419px) {
  .tabs {
    gap: 16px;
  }

  .tab {
    gap: 6px;
    font-size: 0.875rem;
  }

  .tab .count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.6875rem;
  }
}

@container panel (max-width: 299px) {
  .tab .count {
    display: none;
  }
}

/* Cards: the last without its line; under a panel's title, the first starts close. */
@container panel (max-width: 899px) {
  table.positions tr:last-child {
    border-bottom: 0;
  }

  .tab-panel table.positions tr:first-child {
    padding-top: 4px;
  }
}

@container panel (max-width: 899px) {
  .tab-panel :is(table.orders, table.executions) tr:first-child {
    padding-top: 4px;
  }
}

@container panel (max-width: 719px) {
  table.transfers tr:last-child {
    border-bottom: 0;
  }
}

/* Just wide enough for the orders' tables: tighter. */
@container panel (min-width: 900px) and (max-width: 1079px) {
  :is(table.orders, table.executions) :is(th, td) {
    padding-right: 10px;
    padding-left: 10px;
  }

  :is(table.orders, table.executions) .asset-cell {
    min-width: 150px;
  }
}

/* Just wide enough for the positions' table: tighter, the share without its bar. */
@container panel (min-width: 900px) and (max-width: 1079px) {
  table.positions :is(th, td) {
    padding-right: 10px;
    padding-left: 10px;
  }

  table.positions .asset-cell {
    min-width: 180px;
  }

  table.positions .bar {
    display: none;
  }
}

@media (max-width: 560px) {
  .figures {
    width: 100%;
  }

  /* The total alone on its line, its result below. */
  .figure:first-child {
    flex-basis: 100%;
  }

  .figure:nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }

  .figure-value {
    min-height: 0;
    font-size: 1.25rem;
  }

  .figure-main {
    font-size: 2rem;
  }

  /* The markets: one list, a line each. */
  .categories {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--card);
  }

  .category {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px 12px 14px 16px;
    border: 0;
    border-radius: 0;
  }

  .category + .category {
    border-top: 1px solid var(--line);
  }

  .category:active {
    background: var(--fill);
  }

  .category-head {
    display: contents;
  }

  .category .go {
    order: 1;
  }

  .category-value {
    font-size: 1rem;
    line-height: 1.5;
  }

  .category-value .skeleton.value {
    width: 88px;
    height: 16px;
  }

  .platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .platform.vault {
    grid-column: 1 / -1;
  }

  /* Half as wide: the error gets more lines. */
  .platform .error-text {
    -webkit-line-clamp: 4;
  }

  /* The wallets' editor: a sheet from the bottom, the whole width. */
  dialog.sheet {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  }

  .platform {
    padding: 14px;
  }

  .platform-value {
    font-size: 1.0625rem;
  }

  .dialog-head {
    padding: 16px 12px 12px 16px;
  }

  .dialog-body {
    padding: 4px 16px 16px;
  }

  .dialog-foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .connection-edit {
    padding: 12px;
  }

  .card {
    padding: 32px 20px 20px;
  }

  .totp-setup {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-panel {
    padding: 16px;
  }

  /* On the narrowest phones the label takes two lines rather than leaving the card. */
  .card .btn-block {
    height: auto;
    min-height: var(--h-lg);
    padding-block: 10px;
    line-height: 1.25;
    white-space: normal;
  }
}

/* The narrowest phones: a card a line, its name whole beside its buttons. */
@media (max-width: 379px) {
  .platforms {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-pair,
  .consent-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .btn-dashed.add-card {
    min-height: 64px;
  }
}

/* Touch screens: fields at 16 px (iOS zooms in on smaller ones), icon
   buttons big enough for a finger. */
@media (pointer: coarse) {
  .input,
  .input.mono {
    font-size: 1rem;
  }

  .btn-sm.btn-icon {
    width: 36px;
    height: 36px;
  }

  .chip {
    height: 36px;
  }

  .chip .btn {
    width: 32px;
    height: 32px;
  }
}