/* The account pages. Builds on payment.css and conversation.css. */

/* Sign out sits in .bar__links with the rest, so it needs no push of its own;
   it just keeps the underline that marks it as the deliberate one. */
.bar__out{ border-bottom-color:var(--ink-70) !important; }

.hint{ margin-top:.4rem; font-size:.83rem; color:var(--ink-70); }

/* "Forgotten it?" belongs beside the password label, where somebody who
   cannot get in is already looking. */
.label-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-top:1rem; margin-bottom:.45rem;
}
.label-row label[for]{ margin:0 !important; }
.forgot{
  font-size:.82rem; color:var(--tan-deep);
  text-decoration:underline; text-underline-offset:2px;
}

.alt{ margin-top:1.25rem; font-size:.92rem; }
.alt a{ color:var(--tan-deep); }

.remember{
  display:flex; align-items:center; gap:.6rem;
  margin-top:1rem; font-size:.92rem; cursor:pointer;
}
.remember input{ inline-size:20px; block-size:20px; margin:0; accent-color:var(--tan-deep); }

.reply label[for]{ margin-top:1rem; }
.reply label[for]:first-of-type{ margin-top:0; }
.reply input[type="email"],
.reply input[type="text"],
.reply input[type="password"]{
  inline-size:100%; font:inherit; font-size:1rem;
  padding:.8rem 1rem;
  border:2px solid var(--ink); border-radius:4px;
  background:#fff; color:var(--ink);
}

/* The hub */
.cases{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.85rem; }

.case{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  border:2px solid var(--ink); border-radius:4px;
  background:var(--cream);
  padding:1rem 1.15rem;
}
.case:hover{ background:var(--sand); }

.case__link{
  display:grid; gap:.2rem;
  text-decoration:none; color:inherit;
  flex:1 1 16rem; min-inline-size:0;
}
.case__ref{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; color:var(--ink-70);
}
.case__topic{
  font-family:var(--display); font-weight:700; font-size:1.1rem;
  letter-spacing:-0.02em; line-height:1.15;
}
.case__sub{ font-size:.88rem; color:var(--ink-70); }

.case__side{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin-left:auto;
}

.case__state{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1.5px solid var(--ink); border-radius:999px;
  padding:.15rem .7rem;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--pale);
}
.case__state::before{
  content:""; inline-size:7px; block-size:7px;
  border-radius:50%; background:var(--pill, var(--tan));
}

/* Unread.
   The count is the thing that gets noticed, so it is a filled badge rather
   than another word in a row of words — somebody scanning four enquiries for
   the one that moved should not have to read any of them. The words stay
   beside it: a bare number on a page is a puzzle, and on a phone it is the
   words that make it obvious what the number counts. */
.case__new{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.78rem; font-weight:700; color:var(--tan-deep);
}
.case__count{
  display:inline-grid; place-items:center;
  min-inline-size:1.45rem; block-size:1.45rem;
  padding:0 .35rem;
  border-radius:999px;
  background:var(--warn); color:#fff;
  font-family:var(--mono); font-size:.74rem; font-weight:700;
  line-height:1;
}

/* And the row it sits in, so the list reads before anything in it does. */
.case--new{ background:var(--lilac); border-color:var(--tan-deep); }
.case--new:hover{ background:var(--sand); }
.case--new .case__topic{ color:var(--tan-deep); }

.case__pay{
  border:2px solid var(--ink); border-radius:999px;
  background:var(--tan); color:var(--ink);
  padding:.4rem 1rem;
  font-size:.88rem; font-weight:700; text-decoration:none;
  box-shadow:2px 2px 0 var(--ink);
}
.case__pay:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }

@media (prefers-reduced-motion:reduce){
  .case__pay:hover{ transform:none; }
}

@media (max-width:560px){
  .case__side{ margin-left:0; inline-size:100%; }
}

/* Tabs across the signed-in pages */
.tabs{
  display:flex; gap:.4rem;
  margin-bottom:2rem;
  border-bottom:2px solid var(--ink);
}
.tabs a{
  padding:.65rem 1.15rem;
  border:2px solid var(--ink); border-bottom:0;
  border-radius:6px 6px 0 0;
  margin-bottom:-2px;
  background:var(--pale); color:var(--ink);
  font-weight:700; font-size:.95rem; text-decoration:none;
}
.tabs a:hover{ background:var(--sand); }
.tabs a.is-on{ background:var(--cream); }

/* Each block of settings */
.panel{ margin-bottom:2.5rem; }
.panel > h2{
  font-family:var(--display); font-weight:800;
  font-size:1.35rem; letter-spacing:-0.025em;
  margin:0 0 .9rem;
}
.panel > .lede{ margin-bottom:1rem; }
.panel .reply{ margin-top:0; }
.panel .remember{ margin-top:.6rem; }
.panel .remember:first-of-type{ margin-top:0; }

/* Payments */
.pays{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.pay-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  border:2px solid var(--ink); border-radius:4px;
  background:var(--cream); padding:1rem 1.15rem;
}
.pay-row__what{ display:grid; gap:.2rem; flex:1 1 15rem; min-inline-size:0; }
.pay-row__topic{
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  letter-spacing:-0.02em; line-height:1.15;
}
.pay-row__amount{
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  letter-spacing:-0.03em;
}
.pay-row__act{ flex:1 1 100%; }
.pay-row__note{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-70);
}
.pay-row .refund{ margin-top:0; }

.data-act{ margin-top:1rem; }
.data-act .btn{
  inline-size:auto; margin-top:0;
  padding:.7rem 1.4rem; font-size:.95rem;
}