/* Work InProgress customer accounts: the website's own colours and type (from the theme), with plain fallbacks. */
.wip-acct{
  --wa-ink:var(--wp--preset--color--ink,#14181F);--wa-slate:var(--wp--preset--color--slate,#5A6472);--wa-line:var(--wp--preset--color--line,#D9DEE4);
  --wa-bg:var(--wp--preset--color--concrete,#F2F4F6);--wa-card:var(--wp--preset--color--base,#fff);--wa-amber:var(--wp--preset--color--amber,#F2A900);
  --wa-amber-soft:var(--wp--preset--color--amber-soft,#FFF1CC);--wa-blue:var(--wp--preset--color--blueprint,#1F5FBF);--wa-blue-soft:var(--wp--preset--color--blueprint-soft,#E6EEFA);
  --wa-go:var(--wp--preset--color--go,#1D8A49);--wa-bad:#B42318;--wa-mono:var(--wp--preset--font-family--mono,ui-monospace,monospace);
  color:var(--wa-ink);font-size:1rem;line-height:1.5;margin:0 auto;max-width:1200px
}
.wip-acct *{box-sizing:border-box}
.wip-acct h2{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1;margin:.2rem 0 .4rem;font-weight:800}
.wip-acct h3{font-size:1.05rem;margin:1.2rem 0 .5rem}
.wip-acct a{color:var(--wa-blue)}
.wip-acct-label{font:500 .72rem/1.2 var(--wa-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wa-slate);margin:0 0 .5rem}
.wip-acct-small{font-size:.875rem;color:var(--wa-slate)}
.wip-acct-sub{margin:0;color:var(--wa-slate)}
.wip-acct .mono{font-family:var(--wa-mono)}

/* cards, grid */
.wip-acct-card{background:var(--wa-card);border:1px solid var(--wa-line);border-radius:12px;padding:1.5rem;position:relative}
.wip-acct-card::before{content:"";position:absolute;left:1.5rem;top:0;width:48px;height:4px;border-radius:0 0 3px 3px;background:var(--wa-amber)}
.wip-acct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:1.25rem}
.wip-acct-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.wip-acct-head-btns{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.wip-acct-head select{padding:.6rem .8rem;border:1px solid var(--wa-line);border-radius:8px;font:inherit;background:var(--wa-card)}

/* buttons */
.wip-acct-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:700;font-size:.95rem;padding:.6rem 1rem;border-radius:8px;border:1px solid var(--wa-line);background:var(--wa-card);color:var(--wa-ink);cursor:pointer;text-decoration:none;line-height:1.2}
.wip-acct-btn:hover{border-color:var(--wa-ink)}
.wip-acct-btn.pri{background:var(--wa-amber);border-color:var(--wa-amber);color:var(--wa-ink)}
.wip-acct-btn.pri:hover{filter:brightness(.95)}
.wip-acct-btn.ghost{background:transparent}
.wip-acct-btn:focus-visible,.wip-acct input:focus-visible,.wip-acct select:focus-visible{outline:3px solid var(--wa-blue);outline-offset:2px}
.wip-acct-inline{display:inline;margin:0}
.wip-acct-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.wip-acct-card > .wip-acct-inline{display:inline-block;margin-top:.5rem}

/* notes and banners */
.wip-acct-note{border-radius:8px;padding:.75rem 1rem;margin:0 0 1rem;font-size:.95rem;border-left:4px solid var(--wa-slate);background:var(--wa-bg)}
.wip-acct-note.good{border-color:var(--wa-go);background:#E7F4EC}
.wip-acct-note.bad{border-color:var(--wa-bad);background:#FDECEA}
.wip-acct-note.warn{border-color:var(--wa-amber);background:var(--wa-amber-soft)}
.wip-acct-banner{background:var(--wa-amber-soft);border:1px solid color-mix(in srgb,var(--wa-amber) 50%,transparent);border-radius:10px;padding:.8rem 1rem;margin:1rem 0 0}
.wip-acct-banner.bad{background:#FDECEA;border-color:#F4B9B2}

/* chips */
.wip-acct-chip{display:inline-block;font:600 .75rem/1 var(--wa-mono);padding:.3rem .5rem;border-radius:999px;background:var(--wa-bg);color:var(--wa-slate);white-space:nowrap;vertical-align:middle}
.wip-acct-chip.good{background:#E7F4EC;color:var(--wa-go)}
.wip-acct-chip.warn{background:var(--wa-amber-soft);color:#8A5A00}
.wip-acct-chip.bad{background:#FDECEA;color:var(--wa-bad)}

/* plan */
.wip-acct-big{font-size:2.4rem;font-weight:800;line-height:1;margin:.3rem 0 .2rem}
.wip-acct-big span{font-size:1rem;font-weight:500;color:var(--wa-slate)}

/* tables */
.wip-acct-scroll{overflow-x:auto}
.wip-acct-table{width:100%;border-collapse:collapse;margin:.75rem 0;font-size:.95rem}
.wip-acct-table th{font:500 .7rem var(--wa-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--wa-slate);text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--wa-line)}
.wip-acct-table td{padding:.55rem .5rem;border-bottom:1px solid var(--wa-line);vertical-align:top}
.wip-acct-table td:last-child{text-align:right}
.wip-acct-inv td:last-child{text-align:left}
.wip-acct-table .r{text-align:right}
.wip-acct-pay td{font-size:.875rem;background:var(--wa-amber-soft);border-bottom:1px solid var(--wa-line)}

/* help */
.wip-acct-search{display:flex;gap:.5rem;margin:.25rem 0 .75rem}
.wip-acct-search input{flex:1;min-width:0}
.wip-acct-topics{list-style:none;padding:0;margin:0 0 .5rem;display:flex;flex-wrap:wrap;gap:.4rem}
.wip-acct-topics a{display:inline-block;padding:.35rem .7rem;border:1px solid var(--wa-line);border-radius:999px;text-decoration:none;font-size:.875rem;color:var(--wa-ink)}
.wip-acct-topics a:hover{border-color:var(--wa-ink)}
.wip-acct-tickets{list-style:none;padding:0;margin:0}
.wip-acct-tickets li{padding:.5rem 0;border-bottom:1px solid var(--wa-line);display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline}

/* forms */
.wip-acct-form p{margin:0 0 .9rem}
.wip-acct label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.wip-acct input[type=text],.wip-acct input[type=email],.wip-acct input[type=password],.wip-acct input[type=tel],.wip-acct input[type=search],.wip-acct select{width:100%;font:inherit;font-size:1rem;padding:.65rem .8rem;border:1px solid var(--wa-line);border-radius:8px;background:var(--wa-card);color:var(--wa-ink)}
.wip-acct .bad input{border-color:var(--wa-bad)}
.wip-acct-err{display:block;color:var(--wa-bad);font-size:.85rem;margin-top:.25rem}
.wip-acct-hint{display:block;color:var(--wa-slate);font-size:.8rem;margin-top:.25rem}
.wip-acct-two{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.wip-acct-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.wip-acct label.wip-acct-check{display:flex;align-items:center;gap:.4rem;font-weight:500;margin:0}
.wip-acct-form .wip-acct-btn.pri{width:100%;padding:.8rem 1rem}
#details .wip-acct-btn.pri{width:auto}

/* sign in */
.wip-acct-auth{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.5rem;align-items:start;padding:1rem 0 2rem}
.wip-acct-intro p{color:var(--wa-slate);font-size:1.05rem}
.wip-acct-intro .wip-acct-label{font-size:.72rem}
.wip-acct-ticks{list-style:none;padding:0;margin:1.2rem 0}
.wip-acct-ticks li{padding:.35rem 0 .35rem 1.8rem;position:relative}
.wip-acct-ticks li::before{content:"";position:absolute;left:0;top:.55rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--wa-go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat}
.wip-acct-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--wa-line);margin:-.25rem 0 1.25rem}
.wip-acct-tabs a{padding:.6rem .8rem;text-decoration:none;color:var(--wa-slate);font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1px}
.wip-acct-tabs a.on{color:var(--wa-ink);border-color:var(--wa-amber)}

@media (max-width:860px){
  .wip-acct-grid,.wip-acct-auth{grid-template-columns:1fr}
  .wip-acct-auth{gap:1.5rem}
  .wip-acct-two{grid-template-columns:1fr}
  .wip-acct-head-btns{width:100%}
}
.wip-acct a.wip-acct-btn{color:var(--wa-ink)}
@media (max-width:860px){.wip-acct-auth .wip-acct-card{order:-1}}
