/* Shared components: the top bar, nav links, buttons, form parts, merchant logos and the footer.
   Page layouts live in css/pages/. */

/* ---------- top bar: wordmark left, actions right (the landing turns it into a split grid) ---------- */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--navh);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter) 0 0;
  background:var(--paper);border-bottom:1px solid transparent;
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.topbar.scrolled{
  background:var(--bar);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);
  border-bottom-color:var(--hair);
}
.wordmark{display:block;width:max-content;margin-left:var(--gutter);line-height:0;}
.wordmark svg{height:16px;width:auto;display:block;fill:var(--ink);}
.navcta{display:flex;align-items:center;gap:8px;}
/* the Account menu, beside Log out on the dashboards */
.account{position:relative;}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:220px;padding:8px 0;background:var(--white);border:1px solid var(--ink);}
.acct-menu[hidden]{display:none;}
.acct-who{padding:8px 16px 10px;margin:0 0 6px;border-bottom:1px solid var(--hair);font-size:var(--t-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-ui);color:var(--stone);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-menu a{display:block;padding:8px 16px;font-size:var(--t-body);line-height:1.3;color:var(--ink);}
.acct-menu a:hover,.acct-menu a:focus-visible{background:var(--chip);outline:none;}
/* on one of its pages (Settings, Members...), Account and that item light up like the nav links */
.acct-menu a[aria-current="page"]{background:var(--chip);}
#acct-btn.is-active{background:var(--chip);}
#acct-btn.is-active:hover,#acct-btn[aria-expanded="true"]{background:var(--ink);color:var(--paper);}

/* nav links, centred on the page; the current one sits on a chip */
.navlinks{display:flex;align-items:center;gap:4px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.navlinks a{
  position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  font-size:var(--t-ui);line-height:1;letter-spacing:var(--tr-ui);color:var(--ink);white-space:nowrap;
  transition:background-color .2s var(--ease);
}
.navlinks a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.navlinks a:hover::after{transform:scaleX(1);}
.navlinks a.is-active{background:var(--chip);}
.navlinks a.is-active::after{display:none;}
.navlinks .n{color:var(--stone);font-variant-numeric:tabular-nums;}   /* a count beside a link */
.navsep{width:1px;height:14px;margin:0 6px;background:var(--hair);}       /* between a page's sections and the other pages */
.navlinks a.is-here::after{transform:scaleX(1);}                            /* the page you're on, underlined */
.navlinks .n:empty{display:none;}

/* ---------- buttons: filled or outline, 32px, or 44px with .lg ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 14px;
  font-family:var(--ui);font-size:var(--t-ui);line-height:1;letter-spacing:var(--tr-ui);
  border:1px solid var(--ink);border-radius:0;white-space:nowrap;cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn.filled{background:var(--ink);color:var(--paper);}
.btn.filled:hover{background:var(--ink-hover);border-color:var(--ink-hover);}
.btn.outline{background:transparent;color:var(--ink);}
.btn.outline:hover{background:var(--ink);color:var(--paper);}
.btn.lg{height:44px;padding:0 18px;}

/* ---------- forms and small text ---------- */
.field{display:grid;gap:8px;margin-top:32px;}
.field label,.sect{font-size:var(--t-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-ui);color:var(--ink-2);}
.sect{margin-top:28px;}
.input{
  width:100%;height:48px;padding:0 14px;border:1px solid var(--field);border-radius:0;background:transparent;
  font-size:16px;line-height:1;color:var(--ink);   /* 16px so iOS doesn't zoom on focus */
  transition:border-color .2s var(--ease);-webkit-appearance:none;appearance:none;
}
.input::placeholder{color:var(--stone);}
/* dropdowns: the small ones sit beside 32px buttons and share their border; select.input keeps the field look */
.file select,.tm-ctl select,select.input{-webkit-appearance:none;appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141210' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/16px 16px;cursor:pointer;}
.file select,.tm-ctl select{height:32px;padding:0 30px 0 12px;border:1px solid var(--ink);border-radius:0;font-size:var(--t-ui);letter-spacing:var(--tr-ui);color:var(--ink);}
.file select:focus-visible,.tm-ctl select:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.input:focus{outline:none;border-color:var(--ink);}
.input[aria-invalid="true"]{border-color:var(--ink);}
.err{margin-top:10px;font-size:var(--t-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-ui);color:var(--ink);}
.err:empty,.note:empty{display:none;}
.note{margin-top:10px;font-size:var(--t-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-ui);color:var(--ink-2);}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px;}
.aside{margin-top:24px;font-size:var(--t-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-ui);color:var(--ink-2);}
.aside a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
/* a checkbox with its sentence: agree to terms, confirm a report, confirm a delete */
.confirm{display:flex;align-items:flex-start;gap:12px;margin-top:24px;cursor:pointer;max-width:44ch;}
.confirm a{text-decoration:underline;text-underline-offset:3px;}
.confirm input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);cursor:pointer;}
.fine{margin-top:24px;font-size:var(--t-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-ui);color:var(--stone);max-width:44ch;}

/* ---------- merchant logos: each brand's app icon (img/merchants), a question mark when unknown ---------- */
.logo{flex:none;display:block;width:32px;height:32px;border-radius:8px;object-fit:cover;}
.logo-none{display:grid;place-items:center;border:1px solid var(--field);background:var(--white);color:var(--stone);
  font-size:var(--t-ui);line-height:1;}

/* ---------- a payment's own view and its receipts (js/lib/payments.js), on both dashboards ---------- */
.pay-facts{margin:0;border-top:1px solid var(--ink);}
.pay-facts div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair);}
.pay-facts dt{font-size:var(--t-ui);line-height:var(--lh-body);letter-spacing:var(--tr-ui);color:var(--stone);}
.pay-facts dd{margin:0;}
.pay-facts dd a{text-decoration:underline;text-underline-offset:3px;}
.pay-mark{margin-top:18px;}                                                 /* the vendor's logo above its name */
.pay-mark .logo{width:56px;height:56px;border-radius:14px;}
.pay-mark .logo-none{font-size:var(--t-large);}
.pay-mark + .shead{margin-top:14px;}
.pay-amt{font-family:var(--display);font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);}
.drop{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:20px;border:1px dashed var(--field);transition:border-color .2s var(--ease), background-color .2s var(--ease);}
.drop.is-over{border-color:var(--ink);background:var(--chip);}
.drop input:focus-visible + label{outline:1px solid var(--ink);outline-offset:3px;}
.drop-hint{font-size:var(--t-ui);letter-spacing:var(--tr-ui);color:var(--stone);}
.files{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--hair);}
.file{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--hair);}
.file .thumb{display:grid;place-items:center;width:40px;height:40px;overflow:hidden;border:1px solid var(--hair);background:var(--white);color:var(--stone);}
.file .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.file .thumb .ico{width:18px;height:18px;}
.file .fname{min-width:0;}
.file .nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file .sub{display:block;font-size:var(--t-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-ui);color:var(--stone);}
.file select{max-width:220px;}
.files-none{margin:0 0 16px;font-size:var(--t-ui);letter-spacing:var(--tr-ui);color:var(--stone);}
.back{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}   /* back to the list a view came from */
/* a payment row opens its view */
.txn.is-link{cursor:pointer;}
.txn.is-link a.nm{color:inherit;}
.txn.is-link:hover a.nm{text-decoration:underline;text-underline-offset:3px;}

/* ---------- the account and its team (js/lib/team.js), for business and accountant accounts ---------- */
.who-row{display:flex;align-items:center;gap:14px;min-width:0;}
.tm-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}

.tm-add{margin-top:24px;}
.tm-add .sect{margin-top:0;}
.tm-fields{display:grid;grid-template-columns:1fr 1fr 150px;gap:8px;margin-top:10px;}
.tm-fields select.input{padding-right:40px;background-position:right 14px center;}
.acct-name{max-width:480px;margin-top:16px;}
.roles .set{display:grid;grid-template-columns:minmax(120px, 200px) 1fr;gap:24px;align-items:baseline;justify-content:stretch;}
.roles .sub{margin-top:0;}
.acct-name .actions{margin-top:14px;}

/* ---------- footer: markup in js/footer.js. No rules or lines, by request ---------- */
.foot-grid{
  display:grid;column-gap:24px;padding:72px var(--gutter) 96px;
  /* the second column starts on the text line, like the landing's alerts section */
  grid-template-columns:calc(var(--split) * (100% + 2 * var(--gutter)) - var(--gutter) + var(--tx) - 24px) 1fr 1fr 1fr 1fr;
}
.foot-h{font-size:var(--t-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-ui);color:var(--ink);font-weight:400;margin:0;}
.foot-h .idx{color:var(--stone);margin-right:16px;font-variant-numeric:tabular-nums;}
.foot-icon{display:block;width:72px;height:72px;}
.foot-links{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;}
.foot-links a{font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-2);}
.foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.foot-bar{display:grid;grid-template-columns:calc(var(--split) * 100%) 1fr;padding:24px 0 40px;
  font-size:var(--t-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-ui);color:var(--stone);}
.foot-bar span:first-child{padding-left:var(--gutter);color:var(--ink);}
.foot-bar span:last-child{padding:0 var(--gutter) 0 36px;}

/* narrow tablet: the centred nav links pull in so they clear the buttons */
@media (min-width:768px) and (max-width:899px){
  .navlinks a{padding:0 4px;}
  .navlinks a::after{left:4px;right:4px;}
  .navsep{margin:0 2px;}
}
/* tablet */
@media (min-width:768px) and (max-width:1023px){
  .foot-grid{grid-template-columns:repeat(3,1fr);row-gap:28px;}
  .foot-bar span:last-child{padding-left:24px;}
}
/* phone */
@media (max-width:767px){
  .wordmark svg{height:15px;}
  .actions .btn.lg{flex:1 1 auto;}
  .foot-grid{grid-template-columns:1fr;row-gap:28px;padding:48px var(--gutter) 56px;}
  .foot-bar{display:flex;justify-content:space-between;gap:20px;padding:20px var(--gutter) 28px;}
  .foot-bar span:first-child,.foot-bar span:last-child{padding:0;}
  .foot-bar span:last-child{text-align:right;}
  .pay-facts div{grid-template-columns:1fr;gap:2px;}
  .tm-fields{grid-template-columns:1fr;}
  .roles .set{grid-template-columns:1fr;gap:4px;}
  .team .set{flex-wrap:wrap;}
  .file{grid-template-columns:40px 1fr;}
  .file > :nth-child(n+3){grid-column:2;justify-self:start;}
}