/* ============================================================
   Members area and site navigation.

   Loaded AFTER main.css and uses only its custom properties, so the
   signed-in pages inherit the same palette and type. Nothing here
   redefines a token. If a colour is needed that is not in :root of
   main.css, it belongs in main.css, not bolted on here.

   The nav lives in this file rather than main.css because it is new
   to every page at once, and keeping it separable makes it easy to
   see what the members work added.
   ============================================================ */

/* ---------------------------------------------------- nav */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav__in{ display:flex; align-items:center; gap:18px; min-height:62px; }
.nav__brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.nav__brand img{ display:block; border-radius:6px; }
.nav__links{ display:flex; align-items:center; gap:22px; margin-left:auto; }
.nav__links a{
  color:var(--ink-2); text-decoration:none; font-size:.94rem; white-space:nowrap;
}
.nav__links a:hover{ color:var(--ink); }
.nav__cta{ margin-left:4px; }
.nav__links .btn{ color:var(--paper); }
.nav__toggle{
  display:none; margin-left:auto; width:42px; height:42px; padding:9px;
  background:none; border:1px solid var(--rule-2); border-radius:9px; cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; }

@media (max-width:860px){
  .nav__toggle{ display:block; }
  .nav__links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--rule);
    padding:10px 20px 18px;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:13px 2px; border-bottom:1px solid var(--rule); font-size:1rem; }
  .nav__links a:last-child{ border-bottom:0; }
  .nav__links .btn{ margin-top:12px; text-align:center; }
}

/* ---------------------------------------------------- forms */
.form label{
  display:block; margin:16px 0 6px;
  font-size:.86rem; font-weight:600; color:var(--ink-2);
}
.form .opt{ font-weight:400; color:var(--ink-3); }
.form input[type=text],
.form input[type=email],
.form input[type=password],
.form textarea{
  width:100%; padding:12px 14px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule-2); border-radius:10px;
  font:inherit; font-size:1rem;
}
.form textarea{ resize:vertical; min-height:110px; }
.form input:focus, .form textarea:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;
}

/* ---------------------------------------------------- alerts */
.alert{
  margin:20px 0 0; padding:13px 16px; border-radius:11px;
  font-size:.94rem; line-height:1.5; border:1px solid transparent;
}
.alert--bad { background:var(--fail-wash); border-color:rgba(179,45,28,.25); color:var(--fail); }
.alert--good{ background:var(--pass-wash); border-color:rgba(18,115,74,.25); color:var(--pass); }

/* ---------------------------------------------------- account */
.acct-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.acct-wide{ grid-column:1 / -1; }
@media (max-width:760px){ .acct-grid{ grid-template-columns:1fr; } }

.acct-h{ font-size:1.05rem; margin:0 0 12px; }
.acct-big{ font-family:var(--display); font-size:1.5rem; font-weight:700; margin:0 0 6px; }

.acct-table{ width:100%; border-collapse:collapse; margin-top:10px; font-size:.92rem; }
.acct-table th, .acct-table td{
  text-align:left; padding:10px 8px; border-bottom:1px solid var(--rule);
}
.acct-table th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.acct-table tbody tr:last-child td{ border-bottom:0; }
/* A table is the wrong shape on a phone, so let it scroll rather than
   squash the columns into unreadable slivers. */
.acct-wide .acct-table, .card .acct-table{ display:block; overflow-x:auto; white-space:nowrap; }

.pill{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:.76rem; font-weight:600; text-transform:capitalize;
}
.pill--open       { background:var(--warn-wash); color:var(--warn); }
.pill--in_progress{ background:var(--accent-wash); color:var(--accent-ink); }
.pill--done       { background:var(--pass-wash); color:var(--pass); }

/* ---------------------------------------------------- pick a plan */
.pick__row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px; border:1px solid var(--rule); border-radius:12px;
  background:var(--surface); margin-bottom:10px;
}
.pick__row.is-picked{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.pick__name{ font-weight:600; margin:0 0 2px; }
@media (max-width:520px){
  .pick__row{ flex-direction:column; align-items:stretch; }
  .pick__row .btn{ width:100%; }
}

/* ---------------------------------------------------- invoice */
.inv{ background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:30px; }
.inv__top{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.inv__ref{ font-family:var(--mono,ui-monospace,Menlo,monospace); font-size:1.05rem; margin:8px 0 2px; }
.inv__from{ text-align:right; }
.inv__to{ margin-top:26px; padding-top:20px; border-top:1px solid var(--rule); }
.inv__lines{ margin-top:22px; }
.inv__actions{ margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:520px){ .inv__from{ text-align:left; } }

@media print{
  .nav, .site-foot, .inv__actions, .fab, .jump{ display:none !important; }
  .inv{ border:0; padding:0; }
  body{ background:#fff; }
}

/* ---------------------------------------------------- members footer */
.site-foot{ border-top:1px solid var(--rule); margin-top:60px; padding:26px 0; }
.site-foot a{ color:var(--ink-2); }