/* Xanom accounts. Ledger design system (~/DESIGN.md v3). Fonts are self-hosted. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader.woff2) format("woff2-variations")}
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/geist-400.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/geist-500.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/geist-mono-400.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/geist-mono-500.woff2) format("woff2")}

:root{
  --canvas:#0E0E0D;--card:#141413;--hover:#1A1A18;--deep:#090908;
  --ink:#F2F0EA;--body:rgba(242,240,234,.86);--mute:rgba(242,240,234,.55);--stone:rgba(242,240,234,.28);
  --line:rgba(242,240,234,.08);--line-2:rgba(242,240,234,.18);--field:rgba(242,240,234,.42);
  --primary:#F2F0EA;--primary-on:#0E0E0D;--primary-hover:#E4E1D9;
  --accent:#4C8DFF;--accent-hover:#6FA3FF;--accent-on:#0E0E0D;
  --wash:rgba(76,141,255,.10);--selection:rgba(76,141,255,.35);
  --ok:#4FBF85;--danger:#EE5A4B;--warn:#D9A23A;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,0,0,1);color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --canvas:#F7F5EF;--card:#FBFAF6;--hover:#EFECE4;--deep:#141413;
  --ink:#16161A;--body:rgba(22,22,26,.86);--mute:rgba(22,22,26,.64);--stone:rgba(22,22,26,.28);
  --line:rgba(22,22,26,.10);--line-2:rgba(22,22,26,.22);--field:rgba(22,22,26,.5);
  --primary:#16161A;--primary-on:#F7F5EF;--primary-hover:#2A2A2F;
  --accent:#2A63CC;--accent-hover:#1F4FA8;--accent-on:#FFF;
  --wash:rgba(42,99,204,.09);--selection:rgba(42,99,204,.25);
  --ok:#1A7048;--danger:#BC2E23;--warn:#8A5E12;color-scheme:light;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--body);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--selection)}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.nav{height:56px;border-bottom:1px solid var(--line)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{font:500 21px/1 var(--serif);color:var(--ink);text-decoration:none}
.wordmark:hover{color:var(--ink)}
.nav-meta{font:400 12px/1.4 var(--mono);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
main.wrap{padding-top:64px;padding-bottom:96px}
.narrow{max-width:440px}

h1{font:400 40px/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink);margin:0 0 16px}
h2{font:400 24px/1.25 var(--serif);color:var(--ink);margin:0 0 8px}
h3{font:400 18px/1.35 var(--serif);color:var(--ink);margin:0}
.lede{font:400 20px/1.5 var(--serif);color:var(--body);margin:0 0 32px}
p{margin:0 0 16px}
.mute{color:var(--mute)}
.mono{font-family:var(--mono)}
.label{font:400 12px/1.4 var(--mono);color:var(--mute)}

.rule{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line-2);padding-top:12px;margin-bottom:24px;font:400 12px/1.4 var(--mono)}
.rule .l{color:var(--ink)}
.rule .r{color:var(--mute)}
section{margin-top:48px}

form{margin:0}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.field label{font:400 12px/1.4 var(--mono);color:var(--mute)}
input[type=email],input[type=text],input[type=password]{height:36px;width:100%;padding:0 12px;background:var(--card);color:var(--ink);border:1px solid var(--field);border-radius:4px;font:400 15px/1 var(--sans);transition:border-color 150ms var(--ease)}
input::placeholder{color:var(--mute)}
input.code{font:400 28px/1 var(--mono);letter-spacing:.2em;height:56px;text-align:left;font-variant-numeric:tabular-nums}
input[aria-invalid=true]{border-color:var(--danger)}
input[readonly]{color:var(--mute)}
.err{font:400 12px/1.4 var(--mono);color:var(--danger);margin:0}
.notice{font:400 12px/1.4 var(--mono);color:var(--ok);margin:0 0 24px}

.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:4px;border:1px solid transparent;font:500 14px/1.4 var(--sans);text-decoration:none;cursor:pointer;transition:background-color 150ms var(--ease),border-color 150ms var(--ease)}
.btn-accent{background:var(--accent);color:var(--accent-on)}
.btn-accent:hover{background:var(--accent-hover);color:var(--accent-on)}
.btn-primary{background:var(--primary);color:var(--primary-on)}
.btn-primary:hover{background:var(--primary-hover);color:var(--primary-on)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--hover);color:var(--ink)}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--line-2)}
.btn-danger:hover{background:var(--hover)}
.btn-text{background:none;border:0;padding:0;height:auto;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font:400 15px/1.55 var(--sans);cursor:pointer}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.or{display:flex;align-items:center;gap:12px;margin:32px 0 24px;font:400 12px/1.4 var(--mono);color:var(--mute)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.foot{margin-top:32px;color:var(--mute)}

/* Dashboard */
.who{display:flex;flex-direction:column;gap:4px;margin-bottom:48px}
.who .email{font:400 12px/1.4 var(--mono);color:var(--mute)}
.apps{display:grid;grid-template-columns:7fr 5fr;gap:24px}
.card{display:flex;flex-direction:column;gap:16px;padding:20px;background:var(--card);border:1px solid var(--line-2);border-radius:6px;min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-head img{width:20px;height:20px;border-radius:4px}
.card .headline{color:var(--body);margin:0}
.figs{display:flex;flex-wrap:wrap;gap:16px 32px;margin:0}
.fig dt{font:400 12px/1.4 var(--mono);color:var(--mute)}
.fig dd{margin:4px 0 0;font:400 28px/1 var(--mono);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.recent{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.recent li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.recent a{color:var(--ink);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent a:hover{text-decoration:underline}
.recent time{font:400 12px/1.4 var(--mono);color:var(--mute);white-space:nowrap}
.card .open{margin-top:auto}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 8px;border-bottom:1px solid var(--line)}
.rows li:first-child{border-top:1px solid var(--line)}
.rows .host{font:400 12px/1.4 var(--mono);color:var(--mute)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.empty{font:400 18px/1.35 var(--serif);color:var(--body);margin:0 0 16px}

@media (max-width:720px){
  .wrap{padding:0 16px}
  main.wrap{padding-top:48px;padding-bottom:64px}
  h1{font-size:32px}
  .apps,.split{grid-template-columns:1fr}
}
@media (pointer:coarse){
  .btn,input[type=email],input[type=text],input[type=password]{min-height:44px}
  .btn-text{min-height:44px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.gap-top{margin-top:32px}
.lede .mono{font-size:.85em}