/* OnSight — the merchant portal.

   Tap-Pay's palette: ink, crimson, and a lot of restraint. Numbers are
   tabular-lined everywhere they are money, because a column of figures that
   does not align is a column nobody trusts. */

:root {
  --ink:#101820; --ink2:#2A3542; --steel:#5C6871; --mute:#8A949B;
  --hair:#DADEE0; --paper:#F6F7F8; --band:#EDEFF0; --white:#fff;
  --crimson:#BB2031; --crimson-dark:#9C1A29;
  --green:#1C7A56; --green-bg:#E3F3EC;
  --amber:#8A6100; --amber-bg:#FFF6E5;
  --red-bg:#FDECEE; --red:#8A1622;
  --rail:224px;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
h1 { font-size:22px; margin:0; letter-spacing:-.01em; }
h2 { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
     margin:0 0 10px; font-weight:700; }
h3 { font-size:16px; margin:0; }
p { margin:0 0 10px; }
hr { border:0; border-top:1px solid var(--hair); margin:8px 0; }

.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; }
.num, td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.muted { color:var(--mute); }
.sub { font-size:11.5px; color:var(--mute); font-weight:400; margin-top:2px; }
.mid { text-align:center; }
.loading { padding:40px; color:var(--mute); }

/* ---- Buttons ------------------------------------------------------------- */
button {
  font:13px inherit; font-weight:600; padding:8px 16px; border:0; border-radius:6px;
  background:var(--crimson); color:var(--btn-fg, #fff); cursor:pointer; white-space:nowrap;
}
button:hover { background:var(--crimson-dark); }
button.ghost { background:var(--white); color:var(--ink2); border:1px solid var(--hair); }
button.ghost:hover { background:var(--band); }
button.link { background:none; color:var(--crimson); padding:0; font-size:12px; }
button.link:hover { background:none; text-decoration:underline; }

/* Voiding an invoice or reversing a payment cannot be undone, so those
   controls should not look like the ones that can. Ghost + danger reads as a
   quiet warning; solid danger is the confirm inside the dialog. */
button.danger { background:var(--danger, #a4262c); color:#fff; }
button.danger:hover { background:var(--danger-dark, #8a1f24); }
button.ghost.danger { background:var(--white); color:var(--danger, #a4262c);
                      border:1px solid var(--danger, #a4262c); }
button.ghost.danger:hover { background:#fdf3f4; }
button[disabled].danger:hover { background:var(--danger, #a4262c); }
button.block { width:100%; }
button.icon {
  background:none; color:var(--mute); font-size:18px; line-height:1; padding:2px 8px; font-weight:400;
}
button.icon:hover { background:var(--band); color:var(--ink); }
button.chipbtn { background:var(--band); color:var(--ink2); font-size:11.5px; padding:5px 11px; font-weight:500; }

/* ---- Sign in -------------------------------------------------------------- */
.signin { min-height:100vh; display:grid; place-items:center; padding:24px; }
.signin__card { background:#fff; border:1px solid var(--hair); border-radius:10px;
                padding:28px; width:100%; max-width:380px; }
.signin__brand { display:flex; align-items:center; gap:9px; margin-bottom:22px; }
.signin__brand img { height:38px; display:block; }
.signin__demo { margin-top:20px; padding-top:16px; border-top:1px solid var(--hair); }
.signin__chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.formerr { background:var(--red-bg); color:var(--red); padding:9px 12px; border-radius:6px;
           font-size:12.5px; margin-bottom:12px; }
.formerr:empty { display:none; }
.pill { background:var(--crimson); color:#fff; padding:3px 8px; border-radius:99px;
        font-size:9px; letter-spacing:.1em; font-weight:700; }

/* ---- Frame ---------------------------------------------------------------- */
#root { min-height:100vh; }
.rail { position:fixed; inset:0 auto 0 0; width:var(--rail); background:var(--ink);
        color:#fff; display:flex; flex-direction:column; padding:18px 0; }
.rail__brand { display:flex; align-items:center; gap:8px; padding:0 20px 20px;
               text-decoration:none; }
.rail__brand img { height:28px; display:block; }
.rail__nav { display:flex; flex-direction:column; gap:2px; padding:0 12px; }
.navitem { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:6px;
           color:#9BA5AD; text-decoration:none; font-size:13.5px; font-weight:500; }
.navitem:hover { background:#1B2530; color:#fff; }
.navitem.is-on { background:var(--crimson); color:#fff; }
.navitem__icon { width:16px; text-align:center; opacity:.85; }

/* The unread count. Red even when the row is selected — it sits on a darker
   pill so it stays legible on the crimson active row. */
.navbadge { margin-left:auto; min-width:19px; height:19px; padding:0 5px;
            border-radius:999px; background:#E03131; color:#fff;
            font-size:11px; font-weight:700; line-height:19px; text-align:center; }
.navitem.is-on .navbadge { background:#7f1d1d; }
.rail__foot { margin-top:auto; padding:16px 20px 0; }
.rail__who { margin-bottom:10px; }
.rail__who b { display:block; font-size:13px; }
.rail__who span { font-size:11px; color:#8A949B; text-transform:capitalize; }

.main { margin-left:var(--rail); min-height:100vh; display:flex; flex-direction:column; }

/* The acting banner: an ISO or platform user working inside a downstream
   org. Amber, full-width, impossible to miss — whose books you are in must
   never be ambiguous. */
.actbar { background:#8a5a00; color:#fff; padding:9px 26px; font-size:13px;
          display:flex; align-items:center; gap:14px; }
.actbar b { color:#fff; }
.actbar__exit { margin-left:auto; background:transparent; color:#fff;
                border:1px solid rgba(255,255,255,.55); border-radius:7px;
                padding:5px 12px; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.actbar__exit:hover { background:rgba(255,255,255,.14); }

.topbar { background:#fff; border-bottom:1px solid var(--hair); padding:12px 26px;
          display:flex; align-items:center; gap:14px; }
.topbar__org { display:flex; align-items:center; gap:10px; }
.topbar__org b { font-size:15px; }
.orgswitch { margin-left:auto; max-width:280px; }
.view { padding:26px; flex:1; }

.page__head { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.page__actions { margin-left:auto; display:flex; gap:8px; }
.back { display:inline-block; font-size:12px; color:var(--mute); text-decoration:none; margin-bottom:14px; }
.back:hover { color:var(--ink); }
section { margin-top:26px; }

/* ---- Cards, tiles --------------------------------------------------------- */
.card { background:#fff; border:1px solid var(--hair); border-radius:9px; padding:18px; }
.card__head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.card__head h2 { margin:0; }
.card__head button { margin-left:auto; }
.cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; }
.cols2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:14px; }

.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
.tile { background:#fff; border:1px solid var(--hair); border-radius:9px; padding:14px 16px; }
.tile__label { display:block; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
               color:var(--mute); font-weight:700; }
.tile__value { display:block; font-size:22px; margin-top:3px; font-variant-numeric:tabular-nums; }
.tile__sub { font-size:11.5px; color:var(--mute); }
.tile--bad .tile__value { color:var(--crimson); }
.tile--good .tile__value { color:var(--green); }

/* ---- Tables ---------------------------------------------------------------- */
.tablewrap { overflow-x:auto; border:1px solid var(--hair); border-radius:8px; background:#fff; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
     color:#fff; background:var(--ink); padding:9px 12px; font-weight:700; white-space:nowrap; }
td { padding:10px 12px; border-top:1px solid var(--hair); vertical-align:top; }
tbody tr:nth-child(even) { background:var(--paper); }
tr.clickable { cursor:pointer; }
tr.clickable:hover { background:var(--band); }
tfoot td { border-top:1px solid var(--hair); }
tfoot tr.is-strong td { border-top:2px solid var(--ink); font-size:14px; }
table.lines td { vertical-align:middle; }
table.lines input[type=text], table.lines input[type=number] { padding:6px 8px; font-size:13px; }
table.lines td:first-child input + input { margin-top:4px; font-size:12px; color:var(--steel); }

.toolbar { margin-bottom:12px; max-width:420px; }
.tabs { display:flex; gap:4px; margin-bottom:14px; flex-wrap:wrap; }
.tab { padding:6px 13px; border-radius:99px; font-size:12.5px; text-decoration:none;
       color:var(--steel); background:#fff; border:1px solid var(--hair); font-weight:500; }
.tab.is-on { background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---- Badges, chips --------------------------------------------------------- */
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em;
         text-transform:uppercase; padding:3px 9px; border-radius:99px;
         background:var(--band); color:var(--ink2); white-space:nowrap; }
.badge--paid, .badge--accepted { background:var(--green-bg); color:var(--green); }
.badge--partial, .badge--viewed { background:var(--amber-bg); color:var(--amber); }
.badge--draft { background:var(--band); color:var(--mute); }
.badge--overdue, .badge--void, .badge--declined, .badge--expired { background:var(--red-bg); color:var(--red); }
.chip { display:inline-block; font-size:11px; padding:2px 9px; border-radius:99px;
        background:var(--band); color:var(--ink2); font-weight:600; white-space:nowrap; }
.chip--surcharge { background:#FBE6E9; color:var(--crimson); }
.chip--dual_pricing { background:#E6EEF6; color:#1F4E79; }

/* ---- Detail --------------------------------------------------------------- */
.summary { display:flex; gap:18px; flex-wrap:wrap; background:#fff; border:1px solid var(--hair);
           border-radius:9px; padding:18px; margin-bottom:18px; }
.summary__main { flex:1; min-width:260px; }
.summary__row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.summary__row h2 { font-size:18px; text-transform:none; letter-spacing:0; color:var(--ink); margin:0; }
.summary__due { text-align:right; min-width:200px; padding-left:18px; border-left:1px solid var(--hair); }
.summary__due span { display:block; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
                     color:var(--mute); font-weight:700; }
.summary__due b { font-size:24px; font-variant-numeric:tabular-nums; }

dl.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; font-size:13px; }
dl.kv dt { color:var(--mute); font-size:12px; }
dl.kv dd { margin:0; }
dl.kv--inline { grid-template-columns:repeat(auto-fit, minmax(90px, max-content) 1fr); }

ul.list { list-style:none; margin:0; padding:0; }
ul.list li { padding:9px 0; border-top:1px solid var(--hair); }
ul.list li:first-child { border-top:0; }
ul.list li.clickable:hover { background:var(--paper); }
ul.timeline { list-style:none; margin:0; padding:0; font-size:12.5px; }
ul.timeline li { padding:6px 0; border-top:1px solid var(--hair); text-transform:capitalize; }

.note { background:var(--paper); border-left:3px solid var(--hair); padding:10px 14px;
        border-radius:0 6px 6px 0; font-size:13px; margin-top:16px; }
.note--private { border-left-color:var(--amber); background:var(--amber-bg); }
.notice { background:var(--band); border-radius:7px; padding:11px 14px; font-size:12.5px;
          color:var(--ink2); margin-top:16px; }
.notice--warn { background:var(--amber-bg); color:var(--amber); }
.linkbox { font-family:ui-monospace, Menlo, monospace; font-size:12px; background:var(--band);
           padding:10px 12px; border-radius:6px; word-break:break-all; margin:10px 0; }

/* ---- Forms ----------------------------------------------------------------- */
.form { display:flex; flex-direction:column; gap:12px; }
.field { display:flex; flex-direction:column; gap:4px; }
label { font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); font-weight:700; }
input, select, textarea {
  font:14px inherit; padding:8px 10px; border:1px solid var(--hair); border-radius:6px;
  background:#fff; color:var(--ink); width:100%;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--crimson); outline-offset:-1px; }
input[disabled], select[disabled] { background:var(--paper); color:var(--mute); }
textarea { resize:vertical; }
.hint { font-size:11.5px; color:var(--mute); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.checks { display:flex; gap:16px; flex-wrap:wrap; }
.check { display:flex; align-items:center; gap:7px; text-transform:none; letter-spacing:0;
         font-size:13px; color:var(--ink); font-weight:400; }
.check input { width:auto; }

/* ---- Editor ----------------------------------------------------------------- */
.editorwrap { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
.editor { display:flex; flex-direction:column; gap:14px; min-width:0; }
.side { position:sticky; top:20px; }
@media (max-width:1100px) { .editorwrap { grid-template-columns:1fr; } }
.progline { margin-top:12px; font-size:12.5px; color:var(--steel);
            display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.totals { font-size:13px; }
.totals__head { display:grid; grid-template-columns:1fr auto auto; gap:14px;
                font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
                color:var(--mute); font-weight:700; margin-bottom:6px; }
.totals__head span:not(:first-child) { min-width:84px; text-align:right; }
.totals__row { display:grid; grid-template-columns:1fr auto auto; gap:14px; padding:4px 0; }
.totals__row span:not(:first-child) { min-width:84px; }
.totals__row.is-strong { font-weight:700; font-size:15px; }
.totals__note { margin-top:10px; font-size:11.5px; color:var(--crimson);
                background:#FBE6E9; padding:8px 10px; border-radius:6px; }
.progbox { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.preview { background:var(--paper); border-radius:7px; padding:12px 14px; font-size:13px; }
.preview__row { display:flex; justify-content:space-between; gap:14px; padding:3px 0; }
.preview__row.is-strong { font-weight:700; border-top:1px solid var(--hair); margin-top:5px;
                          padding-top:8px; font-size:15px; }
.preview__note { font-size:11.5px; color:var(--mute); margin-top:8px; }

.empty { background:#fff; border:1px solid var(--hair); border-radius:9px; padding:40px;
         text-align:center; color:var(--mute); }
.empty p { margin:0 0 6px; }
.empty p:last-of-type { margin-bottom:0; }
.empty button { margin-top:16px; }

/* A load that failed reads differently from a list that is simply empty. The
   first line is plain, the second is the gateway's or Postgres's own words —
   small, because it is for whoever is debugging, not for the person waiting. */
.empty--err { border-color:#e8c9cb; background:#fffafa; }
.empty--err > p:first-child { color:var(--ink); font-weight:600; }
.empty--err .muted { font-size:12px; word-break:break-word; }

/* ---- Modal, toast ------------------------------------------------------------ */
.modal { position:fixed; inset:0; background:rgba(16,24,32,.5); display:grid;
         place-items:center; padding:22px; z-index:60; }
.modal__panel { background:#fff; border-radius:10px; width:100%; max-width:480px;
                max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.modal__panel--wide { max-width:760px; }
.modal__head { display:flex; align-items:center; padding:16px 18px; border-bottom:1px solid var(--hair); }
.modal__head button { margin-left:auto; }
.modal__body { padding:18px; overflow-y:auto; }
.modal__foot { display:flex; justify-content:flex-end; gap:8px; padding:14px 18px;
               border-top:1px solid var(--hair); background:var(--paper); }

.toasts { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column;
          gap:8px; z-index:80; }
.toast { background:var(--ink); color:#fff; padding:11px 16px; border-radius:7px;
         font-size:13px; box-shadow:0 6px 20px rgba(16,24,32,.22); transition:opacity .3s, transform .3s; }
.toast--err { background:var(--crimson); }
.toast.is-out { opacity:0; transform:translateY(6px); }

/* ---- Narrow ------------------------------------------------------------------- */

/* The line-item editor stacks into cards. Crews invoice on site, and a
   six-column table below ~700px is a horizontal scroll with the amount —
   the number they are checking — off the edge of the screen. */
@media (max-width:700px) {
  .tablewrap--lines { overflow:visible; border:0; background:none; border-radius:0; }
  table.lines, table.lines tbody { display:block; }
  table.lines thead { display:none; }
  table.lines tr {
    display:grid; gap:10px; padding:14px; margin-bottom:10px;
    grid-template-columns:1fr 1fr 64px;
    grid-template-areas:"desc desc del" "qty rate tax" "amount amount amount";
    background:#fff; border:1px solid var(--hair); border-radius:8px;
  }
  table.lines tbody tr:nth-child(even) { background:#fff; }
  table.lines td { border:0; padding:0; }
  td.c-desc { grid-area:desc; }
  td.c-qty { grid-area:qty; }
  td.c-rate { grid-area:rate; }
  td.c-tax { grid-area:tax; text-align:left; align-self:end; }
  td.c-del { grid-area:del; justify-self:end; }
  td.c-amount { grid-area:amount; display:grid; grid-template-columns:auto 1fr;
                align-items:baseline; border-top:1px solid var(--hair); padding-top:9px; }
  td.c-amount > * { grid-column:2; }
  td.c-qty::before, td.c-rate::before, td.c-tax::before, td.c-amount::before {
    display:block; content:''; font-size:9.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--mute); font-weight:700; margin-bottom:3px;
  }
  td.c-qty::before { content:'Qty'; }
  td.c-rate::before { content:'Rate'; }
  td.c-tax::before { content:'Taxable'; }
  td.c-amount::before { content:'Amount'; margin-bottom:0; }
  td.c-tax input[type=checkbox] { width:22px; height:22px; }
}

/* Fingers, not cursors. 44px is the floor for anything tapped, and inputs
   hold 16px type because below that iOS Safari zooms the page on focus and
   leaves the crew stranded mid-form. */
@media (pointer:coarse) {
  button { min-height:44px; padding:10px 18px; }
  button.icon { min-height:44px; min-width:44px; padding:2px 10px; }
  button.link { min-height:44px; padding:10px 8px; font-size:13px;
                display:inline-flex; align-items:center; }
  button.chipbtn { min-height:36px; }
  input, select, textarea { min-height:44px; font-size:16px; }
  table.lines input[type=text], table.lines input[type=number] { font-size:16px; }
  .navitem { padding:12px 14px; }
  .tab { padding:10px 15px; }
  .checklist__item input[type=checkbox] { width:20px; height:20px; }
  .rowline__act { padding-top:0; }
}

@media (max-width:860px) {
  .rail { position:static; width:auto; flex-direction:row; align-items:center;
          padding:10px 14px; gap:12px; overflow-x:auto; }
  .rail__brand { padding:0; }
  .rail__nav { flex-direction:row; padding:0; }
  .rail__foot { margin:0 0 0 auto; padding:0; display:flex; align-items:center; gap:10px; }
  .rail__who { display:none; }
  .main { margin-left:0; }
  .view { padding:16px; }
  .row2, .row3 { grid-template-columns:1fr; }
  .summary__due { border-left:0; padding-left:0; text-align:left; }
}

/* ============================================================================
   Customer-facing surfaces — the portal and the pay link.

   Branded as the BUSINESS, not as OnSight: the customer has a relationship
   with their landscaper, not with us. Centred, roomy, and readable on a phone,
   because that is where a pay link gets opened.
   ========================================================================= */

body.portal { background:var(--band); }

.ptop { background:#fff; border-bottom:1px solid var(--hair); padding:16px 22px;
        display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ptabs { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
.ptabs .tab { flex:none; }

/* iOS-flavoured portal chrome: pill tabs, grouped inset cards, hairline
   separators, a chevron that promises a detail screen. Scoped to the portal —
   the merchant console keeps its own look. */
body.portal { background:#F2F3F6; }
body.portal .ptabs { gap:6px; padding:10px 22px 14px; border-bottom:0; }
body.portal .ptabs .tab { border:0; background:#E7E9EC; color:#4A5560; font-size:13.5px;
                          font-weight:600; padding:9px 18px; border-radius:99px; }
body.portal .ptabs .tab.is-on { background:var(--ink); color:#fff; }
body.portal .badge { border-radius:99px; padding:3px 10px; }
body.portal .pcard, body.portal .phero { border-radius:18px; border-color:rgba(16,24,32,.06); }

.psection { margin-bottom:24px; }
.psection__title { font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
                   color:var(--mute); font-weight:700; margin:0 6px 8px; }
.pcardlist { background:#fff; border:1px solid rgba(16,24,32,.06); border-radius:16px;
             box-shadow:0 1px 3px rgba(16,24,32,.05); overflow:hidden; }
.pcardlist + .pcardlist { margin-top:10px; }
.irows { list-style:none; margin:0; padding:0; }
.irow { display:flex; align-items:center; gap:14px; padding:14px 16px 14px 18px;
        cursor:pointer; }
.irow + .irow { border-top:1px solid #F1F2F4; }
.irow:hover { background:#F8F9FA; }
.irow--static { cursor:default; }
.irow--static:hover { background:transparent; }
.irow__main { flex:1; min-width:0; }
.irow__main b { font-size:15px; display:block; }
.irow__sub { display:block; font-size:12.5px; color:var(--mute); margin-top:1px;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.irow__end { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none; }
.irow__amt { font-size:15px; font-variant-numeric:tabular-nums; }
.irow__chev { color:#C6CAD0; font-size:22px; line-height:1; font-weight:400; flex:none; }
.pempty { padding:20px; color:var(--mute); font-size:13.5px; }
.pcols3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;
          margin-bottom:24px; align-items:start; }
@media (max-width:920px) { .pcols3 { grid-template-columns:1fr; } }
.pcols3 .psection { margin-bottom:0; }
.pcolscroll { max-height:540px; overflow-y:auto; }
.irow--divider { list-style:none; padding:10px 18px 6px; font-size:10.5px; letter-spacing:.07em;
                 text-transform:uppercase; color:var(--mute); font-weight:700;
                 border-top:1px solid #F1F2F4; background:#FAFBFC; }
body.portal .pview { max-width:1120px; }
.pmore { margin-top:8px; }
.pmore summary { list-style:none; cursor:pointer; display:inline-block; background:#E7E9EC;
                 color:#4A5560; font-size:12.5px; font-weight:600; padding:8px 16px;
                 border-radius:99px; user-select:none; }
.pmore summary::-webkit-details-marker { display:none; }
.pmore summary:hover { background:#DFE2E6; }
.pmore[open] summary { margin-bottom:8px; }
.pwallet { padding:18px 20px; }
.ptop__brand b { display:block; font-size:17px; }
.ptop__logo { display:block; max-height:34px; max-width:180px; margin-bottom:4px; }
.pay__logo { display:block; max-height:44px; max-width:200px; margin-bottom:8px; }
.ptop__brand span { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.ptop__who { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; }

.ptabs { background:#fff; border-bottom:1px solid var(--hair); padding:0 22px 12px;
         display:flex; gap:6px; }
.pview { max-width:880px; margin:0 auto; padding:22px; }

.psummary { background:#fff; border:1px solid var(--hair); border-radius:10px;
            padding:20px; margin-bottom:18px; display:flex; gap:20px; flex-wrap:wrap; }
.psummary__main { flex:1; min-width:220px; }
.psummary__main > span { display:block; font-size:10px; letter-spacing:.09em;
                         text-transform:uppercase; color:var(--mute); font-weight:700; }
.psummary__main > b { display:block; font-size:30px; font-variant-numeric:tabular-nums;
                      line-height:1.2; margin-top:2px; }
.psummary__note { flex-basis:100%; font-size:12px; color:var(--steel);
                  border-top:1px solid var(--hair); padding-top:12px; }
.psummary__pay { min-width:270px; }

.payopt { display:flex; justify-content:space-between; gap:14px; padding:7px 0;
          font-size:13px; border-bottom:1px solid var(--hair); }
.payopt:last-of-type { border-bottom:0; }
.payopt b { font-variant-numeric:tabular-nums; }
.payopt.is-strong { font-weight:700; }
.psummary__pay button { margin-top:12px; }

/* Portal v2 — the dashboard home and its cards. Roomy, readable on a phone,
   accented in the business's own colour via the vars applyAccent() sets. */
.phero { background:#fff; border:1px solid var(--hair); border-radius:14px;
         padding:26px 28px; margin-bottom:14px; display:flex; align-items:center;
         gap:20px; flex-wrap:wrap; box-shadow:0 1px 3px rgba(16,24,32,.05); }
.phero__main { flex:1; min-width:200px; }
.phero__label { display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
                color:var(--mute); font-weight:700; }
.phero__value { display:block; font-size:38px; line-height:1.15; margin-top:4px;
                font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.phero__sub { display:block; font-size:13px; color:var(--steel); margin-top:4px; }
.phero--good .phero__value { color:var(--green); font-size:30px; }
.phero__cta { font-size:15px; padding:13px 26px; border-radius:8px; }
.pnudge { cursor:pointer; border-left:3px solid var(--crimson); }
.pnudge:hover { background:var(--paper); }
.pnudge--quiet { cursor:default; border-left:3px solid var(--crimson); margin-top:14px; }
.pnudge--quiet:hover { background:#fff; }
.pgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
         gap:14px; }
.pgrid--two { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.pcard { background:#fff; border:1px solid var(--hair); border-radius:12px;
         padding:18px 20px; box-shadow:0 1px 3px rgba(16,24,32,.04); }
.pnext b { display:block; font-size:17px; }
.pnext span { font-size:13px; color:var(--steel); }
.pmini { list-style:none; margin:0; padding:0; }
.pmini li { display:flex; justify-content:space-between; gap:12px; padding:6px 0;
            font-size:13px; border-top:1px solid var(--paper); }
.pmini li:first-child { border-top:0; }
.pmini b { font-variant-numeric:tabular-nums; }
.plink { display:inline-block; margin-top:10px; font-size:12.5px; color:var(--crimson);
         text-decoration:none; font-weight:600; }
.plink:hover { text-decoration:underline; }
.pwallet { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.pwallet__icon { font-size:26px; line-height:1; padding-top:2px; }
.pwallet__main { flex:1; min-width:220px; }
.pwallet__main p { margin:4px 0 0; font-size:12.5px; }
.pwallet__actions { display:flex; gap:8px; flex-wrap:wrap; }

.pdocs { list-style:none; margin:0; padding:0; }
.pdoc { background:#fff; border:1px solid var(--hair); border-radius:9px; padding:15px 18px;
        margin-bottom:9px; display:flex; align-items:center; gap:16px; cursor:pointer; }
.pdoc:hover { border-color:var(--steel); }
.pdoc__main { flex:1; min-width:0; }
.pdoc__main b { font-size:15px; }
.pdoc__money { text-align:right; font-variant-numeric:tabular-nums; }
.pdoc__money b { font-size:16px; }
.pdoc__status { min-width:84px; text-align:right; }
.plist { list-style:none; margin:0; padding:0; }
.plist li { background:#fff; border:1px solid var(--hair); border-radius:9px; padding:12px 16px;
            margin-bottom:8px; display:flex; align-items:center; gap:14px; }
.pactions { margin-top:18px; }

/* ---- Pay link ------------------------------------------------------------- */
.paywrap { min-height:100vh; display:flex; justify-content:center;
           align-items:flex-start; padding:26px 16px 60px; }
.paycard { background:#fff; border:1px solid var(--hair); border-radius:12px;
           padding:26px; width:100%; max-width:660px; }
.paycard h1 { font-size:20px; margin-bottom:8px; }
.pay__head { display:flex; gap:16px; align-items:flex-start;
             padding-bottom:18px; border-bottom:1px solid var(--hair); }
.pay__biz b { font-size:18px; }
.pay__no { margin-left:auto; text-align:right; }
.pay__no span { display:block; font-size:10px; letter-spacing:.09em;
                text-transform:uppercase; color:var(--mute); font-weight:700; }
.pay__no b { font-size:20px; }
.pay__due { padding:20px 0; }
.pay__due > span { display:block; font-size:10px; letter-spacing:.09em;
                   text-transform:uppercase; color:var(--mute); font-weight:700; }
.pay__due > b { display:block; font-size:34px; font-variant-numeric:tabular-nums; line-height:1.15; }
.pay__opts { background:var(--paper); border-radius:8px; padding:12px 16px; margin-bottom:18px; }
.pay__to { padding:14px 0; }
.pay__to > span { display:block; font-size:10px; letter-spacing:.09em;
                  text-transform:uppercase; color:var(--mute); font-weight:700; }
.pay__foot { margin-top:20px; padding-top:16px; border-top:1px solid var(--hair);
             font-size:11.5px; color:var(--mute); text-align:center; }
.paycard button.block + button.block { margin-top:8px; }

@media (max-width:640px) {
  .pdoc { flex-wrap:wrap; }
  .pdoc__status { min-width:0; }
  .pview { padding:14px; }
  .paycard { padding:18px; }
  .pay__due > b { font-size:28px; }
}

/* ---- Job checklist ----------------------------------------------------------
   A required step reads differently from a suggested one, because one of them
   stops the job being closed and the other does not. */
.checklist { list-style:none; margin:0; padding:0; border:1px solid var(--hair);
             border-radius:9px; background:#fff; overflow:hidden; }
.checklist__item { display:flex; align-items:flex-start; gap:11px;
                   padding:11px 14px; border-bottom:1px solid var(--hair); }
.checklist__item:last-child { border-bottom:0; }
.checklist__item input[type=checkbox] { margin-top:2px; width:16px; height:16px; flex:none; }
.checklist__label { flex:1; font-size:13px; }
.checklist__item.is-done .checklist__label { color:var(--mute); text-decoration:line-through; }
.checklist__item.is-done .req { text-decoration:none; }
.req { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
       color:var(--danger, #a4262c); margin-left:6px; }
.fieldset { display:flex; flex-direction:column; gap:10px; }
.fieldset h3 { font-size:13px; margin:4px 0 0; }

/* ---- Contact rows with a portal control ------------------------------------ */
.rowline { display:flex; align-items:flex-start; gap:12px; }
.rowline__main { flex:1; min-width:0; cursor:pointer; }
.rowline__act { display:flex; gap:10px; flex-shrink:0; padding-top:2px; }
.invite__out { margin-top:4px; }
.invite__out h2 { margin-bottom:6px; }
.invite__out .linkbox { margin:0 0 8px; }

/* ---- Reports -----------------------------------------------------------------
   The bars are drawn with CSS heights from figures the database aggregated —
   the client never adds money. Ink, not accent: this is the merchant's own
   console, and a chart is reading matter, not a call to action. */
.chart { display:flex; align-items:flex-end; gap:10px; height:150px; margin-top:10px; }
.chart__col { flex:1; min-width:0; height:100%; display:flex; flex-direction:column;
              justify-content:flex-end; align-items:center; gap:4px; }
.chart__bar { width:100%; max-width:64px; background:var(--ink); border-radius:4px 4px 0 0; }
.chart__val { font-size:10.5px; color:var(--steel); font-variant-numeric:tabular-nums;
              white-space:nowrap; }
.chart__lab { font-size:10px; color:var(--mute); }
table.report td { padding:8px 6px; }
table.report td:first-child { padding-left:0; }
table.report td:last-child { padding-right:0; }
table.report tbody tr:nth-child(even) { background:transparent; }
.reportrange { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.reportrange input { max-width:170px; }
.reportspan { margin:-6px 0 12px; font-size:12px; }

/* ---- Transactions (Reports) --------------------------------------------------
   The sub-tab bar sits under the page title; the filter bar reads left to
   right the way the gateway portal's does. Dropdowns are <details> — no
   focus-trap machinery, and Escape/blur behaviour comes free. */
.subtabs { margin-bottom:16px; border-bottom:1px solid var(--hair); padding-bottom:12px; }
.txbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.txbar__spacer { flex:1; }
.txsearch { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.txsearch input[type=search] { max-width:260px; }
.txsearch select { width:auto; }
.txgroup { width:auto; }
.txtotals { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--steel);
            padding:9px 12px; background:#fff; border:1px solid var(--hair);
            border-radius:8px; margin-bottom:10px; }
.txtotals b { color:var(--ink); font-variant-numeric:tabular-nums; }
.txtotals--bad b { color:var(--crimson); }
.dd { position:relative; }
.dd summary { list-style:none; cursor:pointer; display:inline-block;
              background:#fff; color:var(--ink2); border:1px solid var(--hair);
              border-radius:6px; padding:7px 14px; font-size:12.5px; font-weight:600;
              white-space:nowrap; user-select:none; }
.dd summary::-webkit-details-marker { display:none; }
.dd[open] summary { background:var(--band); }
.dd__pop { position:absolute; top:calc(100% + 4px); left:0; z-index:40;
           background:#fff; border:1px solid var(--hair); border-radius:8px;
           box-shadow:0 8px 26px rgba(16,24,32,.14); padding:6px;
           min-width:190px; max-height:300px; overflow-y:auto; }
.dd--right .dd__pop { left:auto; right:0; }
.dd__item { display:flex; align-items:center; gap:9px; padding:7px 10px; font-size:13px;
            border-radius:6px; cursor:pointer; text-transform:none; letter-spacing:0;
            color:var(--ink); font-weight:400; }
.dd__item:hover { background:var(--paper); }
.dd__item input { width:auto; }
.dd__act { display:block; width:100%; text-align:left; background:none; color:var(--ink);
           font-weight:500; font-size:13px; padding:8px 10px; border-radius:6px; }
.dd__act:hover { background:var(--paper); }
tr.is-open td { background:var(--band); }
tr.txdetail > td { padding:0; background:var(--paper); }
tr.txdetail:nth-child(even) { background:transparent; }
.txdetail__wrap { padding:14px; }
.txdetail__wrap .card { box-shadow:none; }
.txactions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.txactions .hint { margin-left:4px; }
.txpager { display:flex; gap:8px; align-items:center; justify-content:flex-end;
           margin-top:12px; }
.txpager .muted { margin-right:auto; font-size:12.5px; }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { background:#1B2530; }
.termmethods { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 10px; }
.schedline { display:grid; grid-template-columns:1fr 76px 100px auto 36px; gap:8px;
             align-items:center; }
.schedline + .schedline { margin-top:8px; }
.schedline__tax { white-space:nowrap; }
@media (max-width:700px) {
  .schedline { grid-template-columns:1fr 64px 84px; }
  .schedline__tax, .schedline .icon { grid-column:auto; }
}

/* ---- Calendar ----------------------------------------------------------------
   Jobs and events share the grid; the coloured left edge is the job type (or
   the event's own colour), because a route sheet is read by colour first. */
.calbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.calbar__title { font-size:16px; margin:0; }
.calwrap { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:14px; align-items:start; }
@media (max-width:1000px) { .calwrap { grid-template-columns:1fr; } }
.caltray__item { display:flex; align-items:center; gap:10px; }
.caltray__main { flex:1; min-width:0; }
.caltray__item.is-placing { background:var(--amber-bg); margin:0 -8px; padding:9px 8px; border-radius:6px; }
.calplacing { margin-bottom:12px; }

.calchip { display:flex; align-items:baseline; gap:5px; font-size:11.5px; padding:2px 6px 2px 7px;
           background:#fff; border:1px solid var(--hair); border-left:3px solid var(--steel);
           border-radius:4px; cursor:pointer; overflow:hidden; white-space:nowrap; }
.calchip:hover { background:var(--band); }
.calchip__time { color:var(--mute); font-size:10px; flex:none; }
.calchip__label { overflow:hidden; text-overflow:ellipsis; }
.calchip--event { background:var(--paper); }
.calchip--done .calchip__label { text-decoration:line-through; color:var(--mute); }

.calmonth { background:#fff; border:1px solid var(--hair); border-radius:9px; overflow:hidden; }
.calmonth__head { display:grid; grid-template-columns:repeat(7,1fr); background:var(--ink); }
.calmonth__head span { padding:7px 8px; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
                       color:#fff; font-weight:700; }
.calmonth__grid { display:grid; grid-template-columns:repeat(7,1fr); }
.calcell { min-height:96px; border-top:1px solid var(--hair); border-left:1px solid var(--hair);
           padding:4px 5px; display:flex; flex-direction:column; gap:3px; cursor:pointer; min-width:0; }
.calcell:nth-child(7n+1) { border-left:0; }
.calcell:hover { background:var(--paper); }
.calcell--out { background:var(--paper); }
.calcell--out .calcell__num { color:var(--mute); }
.calcell--today .calcell__num { background:var(--crimson); color:var(--btn-fg,#fff);
                                border-radius:99px; }
.calcell__num { font-size:11.5px; font-weight:600; width:22px; height:22px; display:flex;
                align-items:center; justify-content:center; flex:none; }
.calcell__more { align-self:flex-start; font-size:10.5px; }

.calweek { display:grid; grid-template-columns:repeat(7,1fr); gap:0; background:#fff;
           border:1px solid var(--hair); border-radius:9px; overflow:hidden; }
.calweek__col { border-left:1px solid var(--hair); min-width:0; min-height:340px;
                display:flex; flex-direction:column; }
.calweek__col:first-child { border-left:0; }
.calweek__col--today .calweek__day { background:var(--crimson); color:#fff; }
.calweek__col--today .calweek__day b { color:inherit; }
.calweek__day { background:var(--ink); color:#fff; padding:6px 8px; cursor:pointer;
                display:flex; gap:6px; align-items:baseline; }
.calweek__day b { font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.calweek__day span { font-size:13px; }
.calweek__items { flex:1; padding:6px; display:flex; flex-direction:column; gap:4px; cursor:pointer; }
.calweek__empty { color:var(--hair); text-align:center; padding-top:14px; }
@media (max-width:860px) {
  .calweek { grid-template-columns:1fr; }
  .calweek__col { border-left:0; border-top:1px solid var(--hair); min-height:0; }
  .calweek__col:first-child { border-top:0; }
  .calweek__empty { display:none; }
}

.calday { background:#fff; border:1px solid var(--hair); border-radius:9px; overflow:hidden; }
.calday__allday { padding:8px; border-bottom:1px solid var(--hair); display:flex; gap:6px;
                  flex-wrap:wrap; background:var(--paper); }
.calday__row { display:flex; border-top:1px solid var(--hair); min-height:44px; cursor:pointer; }
.calday__row:first-child { border-top:0; }
.calday__row:hover { background:var(--paper); }
.calday__hour { width:64px; flex:none; padding:6px 10px; font-size:10.5px; color:var(--mute);
                text-align:right; border-right:1px solid var(--hair); }
.calday__items { flex:1; padding:5px 8px; display:flex; flex-direction:column; gap:4px; min-width:0; }

.calcustom { min-width:230px; padding:10px; }
.dd__label { display:block; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
             color:var(--mute); font-weight:700; margin:10px 2px 6px; }
.dd__label:first-child { margin-top:2px; }
.calcustom .btnrow button { font-size:11.5px; padding:6px 12px; }
.calcustom input[type=color] { width:34px; height:26px; padding:1px; }

/* ---- Branding (Settings) -----------------------------------------------------
   The logo preview sits on the band, not on white: most logos are dark marks
   on transparency, and white-on-white is how a broken upload hides. */
.logobox { background:var(--band); border:1px solid var(--hair); border-radius:8px;
           padding:18px; display:flex; align-items:center; justify-content:center;
           min-height:96px; margin-bottom:12px; }
.logobox img { max-height:64px; max-width:100%; display:block; }
.btnrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.swatches { display:flex; gap:8px; flex-wrap:wrap; }
.swatch { width:34px; height:34px; border-radius:8px; padding:0; border:2px solid var(--hair); }
.swatch.is-on { border-color:var(--ink); outline:2px solid var(--ink); outline-offset:1px; }
.swatch:hover { border-color:var(--steel); background:inherit; }
input[type=color] { padding:2px; height:38px; width:64px; cursor:pointer; }
.accentprev { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.accentprev__btn { display:inline-block; padding:10px 18px; border-radius:6px;
                   font-size:13px; font-weight:600; }
.featrow { display:flex; align-items:flex-start; gap:12px; }
.featrow input[type=checkbox] { width:18px; height:18px; margin-top:3px; flex:none; }
.featrow__main b { font-size:14px; }

/* ---- Boarding warnings -------------------------------------------------------
   validateProgram() speaks in three registers and the screen should too: a
   refusal blocks the button, a warning does not, and an obligation is neither. */
.warnbox { display:flex; flex-direction:column; gap:6px; }
.warnbox:empty { display:none; }
.warnbox__err  { background:var(--red-bg);   color:var(--red);    padding:8px 11px; border-radius:6px; font-size:12.5px; }
.warnbox__warn { background:var(--amber-bg); color:var(--amber);  padding:8px 11px; border-radius:6px; font-size:12.5px; }
.warnbox__info { background:var(--band);     color:var(--ink2);   padding:8px 11px; border-radius:6px; font-size:12.5px; }
button[disabled] { opacity:.5; cursor:not-allowed; }
button[disabled]:hover { background:var(--crimson); }