/* AVS customer portal. Colours and fonts copied from www.avs-voip.com (site/desktop/index.html, v7).
   Dark is the site's own look. Light is the same palette turned around.
   The theme is the data-theme attribute on <html> (theme.js sets it before the page paints). */
:root,
[data-theme="dark"]{
  --night:#070b18;
  --deck:#0c1326;
  --deck-2:#111a33;
  --wire:#1f2b4d;
  --wire-hi:#2e3d69;
  --ink:#eaedf7;
  --ink-2:#aab4cf;
  --ink-3:#7f8bab;
  --violet:#8b2cf5;
  --violet-hi:#bf96ff;
  --violet-glow:rgba(139,44,245,.55);
  --signal:#6fe3b4;
  --fault:#ffb547;
  --danger:#ff8197;
  --head-bg:rgba(7,11,24,.92);
  --num:#e6d6ff;
  color-scheme:dark;
}
[data-theme="light"]{
  --night:#f6f4fb;
  --deck:#ffffff;
  --deck-2:#f0ecf8;
  --wire:#dcd6ea;
  --wire-hi:#c4bad9;
  --ink:#141a2e;
  --ink-2:#4a5470;
  --ink-3:#6b7490;
  --violet:#7a1fe0;
  --violet-hi:#6a17c9;
  --violet-glow:rgba(122,31,224,.25);
  --signal:#0f7a52;
  --fault:#9a5b00;
  --danger:#b4233c;
  --head-bg:rgba(246,244,251,.94);
  --num:#3b0a57;
  color-scheme:light;
}
:root{
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
  --r-sm:6px;
  --r-lg:14px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;
  font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--violet-hi);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--violet-hi);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.015em;font-weight:700}
h1{font-size:clamp(30px,3.6vw,44px);font-variation-settings:"wdth" 118;font-weight:750}
h2{font-size:24px;font-variation-settings:"wdth" 110;font-weight:700}
p{margin:0 0 12px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.muted{color:var(--ink-2)}
.small{font-size:15px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--head-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--wire)}
.top-in{display:flex;align-items:center;gap:18px;min-height:68px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;margin-right:auto}
.brand-word{font-size:25px;font-weight:800;letter-spacing:-.02em;font-variation-settings:"wdth" 112;
  background:linear-gradient(100deg,#d7bdff 0%,#a66bff 45%,#8b2cf5 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="light"] .brand-word{background:linear-gradient(100deg,#8b2cf5 0%,#6a17c9 55%,#3b0a57 100%);-webkit-background-clip:text;background-clip:text}
.brand-by{font-size:13px;color:var(--ink-2);margin-top:4px;padding-left:2px}
.nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav a,.linkbtn{color:var(--ink-2);text-decoration:none;font-size:16px;font-weight:500;padding:8px 12px;border-radius:var(--r-sm);
  background:none;border:0;font-family:var(--sans);cursor:pointer}
.nav a:hover,.linkbtn:hover{color:var(--ink);background:var(--deck)}
.nav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--violet)}
.theme-btn{min-width:44px}

main{flex:1;padding:32px 0 56px}
footer{border-top:1px solid var(--wire);padding:18px 0;color:var(--ink-3);font-size:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;font-family:var(--sans);
  font-size:16px;font-weight:650;line-height:1.1;text-decoration:none;cursor:pointer;border-radius:var(--r-sm);border:1px solid transparent;
  transition:background .15s,border-color .15s,box-shadow .15s,color .15s}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 0 0 1px rgba(191,150,255,.25) inset,0 8px 28px -10px var(--violet-glow)}
.btn-primary:hover{background:#9a45ff;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--wire-hi)}
.btn-ghost:hover{border-color:var(--violet-hi);color:var(--ink)}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-sm{min-height:36px;padding:0 14px;font-size:15px}
.btn-google{background:#fff;color:#1f1f1f;border-color:#dadce0;min-height:52px;font-size:17px}
.btn-google:hover{background:#f7f8fa;color:#1f1f1f}
.btn-google svg{width:20px;height:20px}
form.inline{display:inline}

/* panels */
.panel{background:var(--deck);border:1px solid var(--wire);border-radius:var(--r-lg);padding:24px;margin-bottom:24px}
.panel h2{margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px}
.card{background:var(--deck);border:1px solid var(--wire);border-radius:var(--r-lg);padding:18px 20px}
.card .k{color:var(--ink-2);font-size:14px}
.card .v{font-family:var(--mono);font-size:24px;color:var(--num);margin-top:4px;overflow-wrap:anywhere}
.card .v.sm{font-size:16px;font-family:var(--sans)}
.center{max-width:560px;margin:6vh auto 0;text-align:center}
.center .panel{text-align:left}
.lede{color:var(--ink-2);font-size:19px;margin:12px 0 24px}
.head-row{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}

/* tables (never bold inside a table) */
.table-wrap{overflow-x:auto;border:1px solid var(--wire);border-radius:var(--r-lg);background:var(--deck)}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--wire);vertical-align:middle;white-space:nowrap}
th{font-weight:500;color:var(--ink-2);font-size:14px;background:var(--deck-2)}
td.num,th.num{text-align:right}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
td.wrap-cell{white-space:normal;min-width:220px;overflow-wrap:anywhere}
td b,td strong,th b,th strong{font-weight:inherit}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:14px;border:1px solid var(--wire-hi);color:var(--ink-2)}
.pill.ok{color:var(--signal);border-color:var(--signal)}
.pill.warn{color:var(--fault);border-color:var(--fault)}
.pill.bad{color:var(--danger);border-color:var(--danger)}
.pill.info{color:var(--violet-hi);border-color:var(--violet-hi)}

/* forms */
label{display:block;font-size:15px;color:var(--ink-2);margin-bottom:6px}
input[type=text],input[type=email]{width:100%;max-width:420px;min-height:46px;padding:10px 14px;border-radius:var(--r-sm);
  border:1px solid var(--wire-hi);background:var(--deck-2);color:var(--ink);font-family:var(--sans);font-size:17px}
input.code{font-family:var(--mono);letter-spacing:.2em;max-width:220px}
/* 1.4.0: Pick your fax number */
input[type=tel]{width:100%;max-width:420px;min-height:46px;padding:10px 14px;border-radius:var(--r-sm);
  border:1px solid var(--wire-hi);background:var(--deck-2);color:var(--ink);font-family:var(--sans);font-size:17px}
.pick-search{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end;max-width:640px}
.pick-search .or{color:var(--ink-2);font-size:15px;padding-bottom:12px}
.pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 16px;margin:12px 0 16px}
.pick-list label.check{justify-content:flex-start;padding:8px 10px;border:1px solid var(--wire);border-radius:var(--r-sm);margin:0}
.pick-list .place{color:var(--ink-2);font-size:14px;font-weight:400}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,160px));gap:8px 24px;font-family:var(--mono);font-size:18px;margin:16px 0}
.qr{background:#fff;display:inline-block;padding:8px;border-radius:8px}
.qr svg{display:block;width:220px;height:220px}
.secret{font-family:var(--mono);overflow-wrap:anywhere;font-size:15px}
.divider{border:0;border-top:1px solid var(--wire);margin:22px 0}

/* pop-ups */
.toasts{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;max-width:min(440px,calc(100vw - 32px))}
.toast{background:var(--deck-2);color:var(--ink);border:1px solid var(--wire-hi);border-left:4px solid var(--violet);border-radius:var(--r-sm);
  padding:14px 40px 14px 16px;box-shadow:0 12px 32px rgba(0,0,0,.35);position:relative;font-size:16px}
.toast.ok{border-left-color:var(--signal)}
.toast.error{border-left-color:var(--danger)}
.toast.info{border-left-color:var(--violet-hi)}
.toast button{position:absolute;right:6px;top:6px;background:none;border:0;color:var(--ink-2);font-size:20px;cursor:pointer;padding:4px 8px}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--deck);border:1px solid var(--wire-hi);border-radius:var(--r-lg);padding:26px;max-width:480px;width:100%}
.modal p{font-size:18px}
.modal .row{margin-top:16px}

@media (max-width:720px){
  body{font-size:17px}
  .top-in{padding-top:8px;padding-bottom:8px}
  .nav a,.linkbtn{padding:8px}
  th,td{padding:10px}
}
h2.spaced{margin:32px 0 12px}
.center .btn + p{margin-top:16px}
.center > .btn{margin-bottom:16px}

/* invoices on a phone: one card per invoice, every value labelled, the Pay button full width */
@media (max-width:720px){
  table.invoices thead{display:none}
  table.invoices,table.invoices tbody,table.invoices tr,table.invoices td{display:block;width:100%}
  table.invoices tr{border-bottom:1px solid var(--wire);padding:10px 0}
  table.invoices tr:last-child{border-bottom:0}
  table.invoices td{border:0;padding:4px 14px;display:flex;justify-content:space-between;gap:12px;text-align:right;white-space:normal}
  table.invoices td::before{content:attr(data-label);color:var(--ink-2);font-family:var(--sans);font-size:15px;text-align:left}
  table.invoices td.pay-cell{display:block;padding-top:8px}
  table.invoices td.pay-cell::before{content:none}
  table.invoices td.pay-cell:empty{display:none}
  table.invoices td.pay-cell .btn{width:100%}
  table.invoices td.pay-cell form{display:block}
  .head-row{align-items:start}
}

/* 13 Oct 2026: remember box on the sign in page, theme icon */
.signin-form{display:flex;flex-direction:column;align-items:center;gap:14px;margin:18px 0}
label.check{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;font-weight:500;cursor:pointer}
label.check input{width:20px;height:20px;accent-color:var(--violet)}
.theme-btn svg{display:block}