/* The RevCube payment portal
   Charcoal on white, from The RevCube logo: one flat dark tone, heavy strokes, generous
   rounded corners. Colour is kept for meaning only: statuses and the two chart series.
   One signature shape: the perforated payment slip (dashboard and login). */
:root {
  --ink:#2b2b2b; --ink-2:#3a3a3a; --paper:#f2f2f0; --surface:#fff; --line:#dcdcda; --muted:#6b6b69;
  --primary:#2b2b2b; --primary-dark:#000; --series-1:#3d4fe0; --series-2:#0e9aa7;
  --ok:#197a45; --ok-bg:#dff3e7; --warn:#8a5a00; --warn-bg:#fdefc8; --bad:#b3261e; --bad-bg:#fbe6e4;
  --display:"Bahnschrift","DIN Alternate","Avenir Next Condensed","Segoe UI",system-ui,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --r:14px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.5 var(--body); color:var(--ink); background:var(--paper); }
a { color:var(--primary-dark); text-underline-offset:2px; }
a:hover { color:var(--primary); }
h1, h2, .stub-amount, .total, .facts dd { font-family:var(--display); letter-spacing:-.01em; }
h1 { font-size:2.1rem; line-height:1.1; margin:0 0 12px; font-weight:700; }
h2 { font-size:1.25rem; line-height:1.2; margin:0 0 12px; font-weight:600; }
p { margin:0 0 12px; }
.muted { color:var(--muted); }
.small { font-size:.86rem; }
.lede { color:var(--muted); max-width:62ch; margin-bottom:20px; }
:focus-visible { outline:3px solid var(--ink); outline-offset:2px; border-radius:6px; }
.side :focus-visible, .slip-main :focus-visible { outline-color:#fff; }

/* ---------- shell ---------- */
body.app { display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh; }
.side { background:var(--ink); color:#fff; display:flex; flex-direction:column; padding:22px 14px 16px; position:sticky; top:0; height:100vh; }
.brand { display:block; color:#b9b9b7; text-decoration:none; font-size:.86rem; padding:2px 10px 24px; }
.brand img { display:block; width:148px; height:auto; margin-bottom:8px; }
.brand:hover { color:#fff; }
.side nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.side nav a { color:#c9c9c7; text-decoration:none; padding:9px 12px; border-radius:8px; border-left:3px solid transparent; }
.side nav a:hover { color:#fff; background:rgba(255,255,255,.07); }
.side nav a.on { color:#fff; background:rgba(255,255,255,.1); border-left-color:#fff; font-weight:600; }
.who { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 8px 0; border-top:1px solid rgba(255,255,255,.14); font-size:.86rem; color:#b9b9b7; }
.who span { display:flex; flex-direction:column; min-width:0; }
.who strong { color:#fff; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; }
.who button { background:none; border:1px solid rgba(255,255,255,.3); color:#fff; padding:6px 10px; font-size:.86rem; font-weight:500; }
.who button:hover { background:rgba(255,255,255,.12); }
main { padding:32px 36px 72px; max-width:1180px; width:100%; }
main.narrow { max-width:720px; }
body.plain main { margin:0 auto; padding:28px 16px 64px; }

@media (max-width:860px) {
  body.app { display:block; }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px 12px; gap:6px 12px; }
  .brand { padding:0; } .brand img { width:112px; margin:0; } .brand span { display:none; }
  .side nav { flex-direction:row; flex:1 1 100%; order:3; overflow-x:auto; gap:4px; padding-bottom:2px; }
  .side nav a { white-space:nowrap; border-left:0; border-bottom:3px solid transparent; padding:7px 10px; }
  .side nav a.on { border-bottom-color:#fff; }
  .who { border:0; padding:0; margin-left:auto; }
  .who span { display:none; }
  main { padding:20px 16px 56px; }
  h1 { font-size:1.7rem; }
}

/* ---------- the slip ---------- */
.slip { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); border-radius:16px; position:relative; margin-bottom:22px; filter:drop-shadow(0 10px 22px rgba(0,0,0,.14)); }
.slip-main { background:var(--ink); color:#fff; padding:34px 36px; border-radius:16px 0 0 16px;
  background-image:linear-gradient(115deg,transparent 0 62%,rgba(255,255,255,.07) 62% 81%,rgba(255,255,255,.15) 81% 100%); }
.slip-main h1 { font-size:2.5rem; margin-bottom:8px; }
.slip-main p { color:#d0d0ce; max-width:38ch; margin-bottom:22px; }
.slip-stub { background:var(--surface); padding:34px 30px; border-radius:0 16px 16px 0; border-left:2px dashed var(--line); display:flex; flex-direction:column; justify-content:center; }
/* the two punched notches where the stub tears off */
.slip::before, .slip::after { content:""; position:absolute; left:60%; width:22px; height:22px; margin-left:-11px; border-radius:50%; background:var(--paper); z-index:1; }
.slip::before { top:-11px; } .slip::after { bottom:-11px; }
.stub-label { color:var(--muted); margin:0; }
.stub-amount { font-size:3rem; line-height:1.1; font-weight:700; margin:2px 0 6px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.stub-note { color:var(--muted); margin:0; font-size:.92rem; }
@media (max-width:700px) {
  .slip { grid-template-columns:1fr; }
  .slip-main { border-radius:16px 16px 0 0; padding:26px 22px; }
  .slip-main h1 { font-size:2rem; }
  .slip-stub { border-radius:0 0 16px 16px; border-left:0; border-top:2px dashed var(--line); padding:22px; }
  .slip::before, .slip::after { display:none; }
  .stub-amount { font-size:2.3rem; }
}
body.login { background:var(--ink); background-image:linear-gradient(115deg,transparent 0 58%,rgba(255,255,255,.05) 58% 79%,rgba(255,255,255,.1) 79% 100%); min-height:100vh; }
body.login main { max-width:860px; padding-top:14vh; }
.login-slip { filter:drop-shadow(0 18px 40px rgba(0,0,0,.4)); }
.login-slip .slip-main { background:#1c1c1c; background-image:none; display:flex; flex-direction:column; justify-content:center; }
.login-slip::before, .login-slip::after { background:var(--ink); }
.login-slip .slip-stub label:first-of-type { margin-top:0; }
.login-slip button { width:100%; margin-top:6px; }

.tally { list-style:none; display:flex; flex-wrap:wrap; gap:8px 28px; padding:0; margin:0 0 30px; color:var(--muted); }
.tally strong { color:var(--ink); font-family:var(--display); font-size:1.35rem; margin-right:4px; font-variant-numeric:tabular-nums; }
.tally .alert, .tally .alert strong { color:var(--bad); }
.section-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-bottom:12px; }
.section-head h1, .section-head h2 { margin:0; }

/* ---------- forms ---------- */
.card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; margin:0 0 18px; }
.card h2 { margin:26px 0 4px; padding-top:20px; border-top:1px solid var(--line); }
.card h2:first-of-type { }
label { display:block; margin:14px 0; font-weight:600; font-size:.93rem; }
label.check { font-weight:400; display:flex; gap:8px; align-items:flex-start; }
label.check.tight { margin:0; }
label.check input { margin-top:4px; accent-color:var(--ink); width:16px; height:16px; flex:none; }
label.compact { margin:0; display:flex; align-items:center; gap:8px; }
label.compact select { margin:0; width:auto; padding:7px 10px; }
input:not([type=checkbox]), select, textarea { display:block; width:100%; margin-top:5px; padding:11px 12px; font:inherit; color:inherit; background:#fff; border:1.5px solid #c6c6c4; border-radius:10px; }
input:not([type=checkbox]):focus, select:focus, textarea:focus { outline:3px solid rgba(43,43,43,.22); outline-offset:0; border-color:var(--ink); }
input::placeholder, textarea::placeholder { color:#8e8e8c; }
.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 14px; }
.filter { max-width:420px; margin:0 0 14px; }
button, .button { display:inline-block; padding:11px 20px; font:inherit; font-weight:600; color:#fff; background:var(--primary); border:0; border-radius:12px; cursor:pointer; text-decoration:none; transition:background .15s, transform .08s; }
button:hover, .button:hover { background:var(--primary-dark); color:#fff; }
button:active, .button:active { transform:translateY(1px); }
button.secondary, .button.secondary { background:#fff; color:var(--ink); border:1.5px solid var(--ink); }
button.secondary:hover { background:var(--paper); color:var(--ink); }
button:disabled { opacity:.55; cursor:not-allowed; }
button.done { background:var(--ok); }
.button.big { padding:15px 30px; font-size:1.1rem; background:#fff; color:var(--ink); }
.button.big:hover { background:#dededc; color:var(--ink); }
form.inline { display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; }
.js .js-hide { display:none; }
.notice, .error { padding:11px 14px; border-radius:8px; background:#e9e9e7; border-left:4px solid var(--ink); }
.error { background:var(--bad-bg); border-left-color:var(--bad); color:var(--bad); }
.copy { display:flex; gap:8px; }
.copy input { margin:0; font-family:ui-monospace,Consolas,Menlo,monospace; font-size:.85rem; }
dl { display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; margin:18px 0; }
dt { color:var(--muted); } dd { margin:0; overflow-wrap:anywhere; }
code { font-size:.85rem; overflow-wrap:anywhere; }
.rowlink { text-decoration:none; color:inherit; transition:border-color .15s; }
.rowlink:hover { border-color:var(--primary); color:inherit; }
.rowlink .muted { display:block; }
.chip { display:inline-block; padding:2px 10px; margin:2px 4px 2px 0; border-radius:6px; background:var(--paper); border:1px solid var(--line); font-size:.86rem; white-space:nowrap; }

/* ---------- tables ---------- */
.scroll { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:14px; }
.scroll.flat { border:0; border-radius:0; margin:0; }
table { width:100%; border-collapse:collapse; font-size:.93rem; }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
tbody tr:last-child td { border-bottom:0; }
th { color:var(--muted); font-weight:600; white-space:nowrap; background:#f8f8f7; }
tbody tr:hover td { background:#f8f8f7; }
tfoot td { font-weight:700; border-top:2px solid var(--ink); border-bottom:0; }
tr.quiet td { color:#a3a3a1; } tr.quiet strong { font-weight:400; }
.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.grid-table { margin:6px 0 18px; } .grid-table th { background:none; padding-left:0; } .grid-table td { padding-left:0; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:99px; font-size:.8rem; font-weight:600; background:#e6e6e4; color:var(--muted); vertical-align:middle; white-space:nowrap; font-family:var(--body); letter-spacing:0; }
.badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge.pending { background:var(--warn-bg); color:var(--warn); }
.badge.paid { background:var(--ok-bg); color:var(--ok); }
.badge.processing { background:var(--bad-bg); color:var(--bad); }

/* ---------- facts, timeline ---------- */
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0; margin:0 0 24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.facts div { padding:16px 20px; border-right:1px solid var(--line); margin-right:-1px; }
.facts dt { font-size:.9rem; }
.facts dd { font-size:1.7rem; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.facts dd.sub { font:400 .86rem/1.4 var(--body); color:var(--muted); letter-spacing:0; }
.timeline { list-style:none; margin:0 0 28px; padding:0; }
.timeline li { display:grid; grid-template-columns:120px 1fr; gap:0 20px; }
.timeline .when { color:var(--muted); text-align:right; padding-top:1px; font-variant-numeric:tabular-nums; }
.timeline .what { border-left:2px solid var(--line); padding:0 0 22px 22px; position:relative; }
.timeline .what::before { content:""; position:absolute; left:-7px; top:5px; width:12px; height:12px; border-radius:50%; background:#9a9a98; border:2px solid var(--paper); }
.timeline li:first-child .what::before { background:var(--ok); }
.timeline li:last-child .what { border-left-color:transparent; }
.timeline strong { font-family:var(--display); font-size:1.25rem; margin-right:8px; }
.timeline p { margin:2px 0 0; }
@media (max-width:560px) { .timeline li { grid-template-columns:1fr; } .timeline .when { text-align:left; padding-left:24px; } }

/* ---------- chart ---------- */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin-bottom:18px; }
.legend { list-style:none; display:flex; gap:18px; margin:0; padding:0; font-size:.9rem; color:var(--muted); }
.swatch { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.swatch.s-square, .bar.s-square { background:var(--series-1); fill:var(--series-1); }
.swatch.s-paypal, .bar.s-paypal { background:var(--series-2); fill:var(--series-2); }
.chart-wrap { position:relative; }
.chart { display:block; width:100%; height:auto; overflow:visible; }
.chart .grid { stroke:#ececea; stroke-width:1; }
.chart .axis { stroke:#c6c6c4; stroke-width:1; }
.chart text { font:12px var(--body); fill:var(--muted); }
.chart .tip { fill:var(--ink); font-weight:600; }
.chart .year { font-size:11px; }
.chart .hit { fill:transparent; }
.chart .col { outline:none; cursor:default; }
.chart .col:hover .hit, .chart .col:focus-visible .hit { fill:rgba(0,0,0,.05); }
.chart .col.dim .bar { opacity:.45; }
.chart .bar { transform-box:fill-box; transform-origin:50% 100%; animation:rise .7s cubic-bezier(.2,.8,.2,1) both; transition:opacity .15s; }
@keyframes rise { from { transform:scaleY(0); } }
.chart-tip { position:absolute; top:0; background:var(--ink); color:#fff; border-radius:8px; padding:9px 12px; font-size:.86rem; pointer-events:none; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.chart-tip p { margin:0; display:flex; align-items:center; gap:2px; color:#d0d0ce; }
.chart-tip strong { color:#fff; margin-left:auto; padding-left:14px; font-variant-numeric:tabular-nums; }
.chart-tip .tip-head { color:#fff; font-weight:600; margin-bottom:4px; }

/* ---------- invoice (customer page) ---------- */
.pay { padding:28px; border-top:6px solid var(--ink); box-shadow:0 12px 28px rgba(0,0,0,.08); position:relative; }
.logo { display:block; max-width:220px; max-height:80px; object-fit:contain; margin:4px 0 8px; }
.inv-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--line); }
.inv-head h1 { margin:0; } .inv-head h1.under-logo { font:600 1rem var(--body); color:var(--muted); letter-spacing:0; }
.inv-meta { display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; white-space:nowrap; color:var(--muted); }
.inv-meta strong { color:var(--ink); font-family:var(--display); font-size:1.5rem; line-height:1.1; }
.billto { margin:14px 0 0; } p.billto + p.billto { margin-top:2px; overflow-wrap:anywhere; }
.inv-lines { margin:20px 0 16px; } .inv-lines td { overflow-wrap:anywhere; } .inv-lines th { background:none; }
.inv-lines tbody tr:hover td { background:none; }
.inv-lines tfoot td { font-family:var(--display); font-size:1.4rem; }
.or { text-align:center; margin:16px 0 4px; }
#pay-btn { width:100%; margin-top:12px; padding:15px; font-size:1.08rem; }
#card-container { min-height:90px; }
.tick-mark { width:56px; height:56px; position:absolute; top:-31px; right:24px; }
.tick-mark circle { fill:var(--ok); stroke:#fff; stroke-width:3; }
.tick-mark path { fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:36; stroke-dashoffset:36; animation:draw .5s .25s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce) {
  .chart .bar, .tick-mark path { animation:none; stroke-dashoffset:0; }
  button, .button { transition:none; }
}
@media print {
  body { background:#fff; } .noprint, .side { display:none; }
  .pay { border:0; box-shadow:none; padding:0; } .tick-mark { display:none; }
}
.scroll td:first-child a { white-space:nowrap; }
.timeline, .facts + h2 { max-width:760px; }
@media (max-width:560px) {
  .facts { grid-template-columns:1fr 1fr; } .facts div { padding:14px 16px; } .facts dd { font-size:1.3rem; }
  .chart-wrap { overflow-x:auto; } .chart { min-width:620px; }
  .panel { padding:18px 16px; }
}

/* ---------- refunds, plans, saved cards ---------- */
.badge.refunded { background:#e6e6e4; color:#4a4a48; }
.badge.part { background:#e6e6e4; color:var(--ink); }
.badge.disputed, .badge.overdue { background:var(--bad-bg); color:var(--bad); }
.badge.flash { animation:flash 1.2s ease-out; }
@keyframes flash { from { box-shadow:0 0 0 6px rgba(43,43,43,.4); } to { box-shadow:0 0 0 0 rgba(43,43,43,0); } }
button.danger { background:var(--bad); } button.danger:hover { background:#8f1d17; }
button.small-btn { padding:6px 12px; font-size:.86rem; }
.card h2.plain { margin:0 0 6px; padding:0; border:0; }
.hint { margin:-8px 0 0; }
.history { list-style:none; padding:0; margin:0 0 24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.history li { display:grid; grid-template-columns:190px 1fr; gap:4px 16px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:.93rem; }
.history li:last-child { border-bottom:0; }
@media (max-width:560px) { .history li { grid-template-columns:1fr; } }
.inline-link { display:inline; } .inline-link button { background:none; color:var(--primary-dark); padding:0; font-weight:400; text-decoration:underline; text-underline-offset:2px; }
.inline-link button:hover { background:none; color:var(--primary); }
.plan { list-style:none; padding:0; margin:0; max-width:820px; }
.plan li { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; margin-bottom:12px; }
.plan-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }
.plan-head strong { font-family:var(--display); font-size:1.35rem; min-width:110px; font-variant-numeric:tabular-nums; }
.plan-head span:first-of-type { flex:1; min-width:200px; color:var(--muted); }
.plan .copy { margin-top:12px; }
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; align-items:start; margin-bottom:8px; }
.two .card { margin:0; }
h2 { margin-top:28px; } .section-head h2, .panel h2, .card h2 { margin-top:0; } .card h2:not(.plain) { margin-top:26px; }
.consent { font-size:.9rem; color:var(--muted); margin:12px 0 0; }
.installment { margin:14px 0 0; }
.refund-row td { font:400 1rem var(--body) !important; color:var(--muted); border-top:0 !important; padding-top:0; }
@media (prefers-reduced-motion: reduce) { .badge.flash { animation:none; } }

.login-slip .slip-main img { width:min(300px,100%); height:auto; margin-bottom:14px; }
.login-slip .slip-main p { margin:0; }
a { text-decoration-thickness:1.5px; }
.foot-links { margin:0 0 12px; }