/* portal.css — portal-only pieces built from the main site's design tokens.
   Nothing here invents a colour: everything uses --color-*, --radius-* and
   --shadow-* from assets/css/styles.css so the portal reads as the same site. */

:root {
  /* The site uses this inline with a fallback; name it once here. */
  --color-danger: #c0392b;
  --color-wash: rgba(26, 43, 75, .04);
}

/* --- Step rail: the same pill row the members page uses for its sections --- */

.portal-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
}

.portal-step {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5em 1.1em;
  font-size: .875rem;
  font-weight: 600;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-muted-light);
  white-space: nowrap;
}

.portal-step-num { font-variant-numeric: tabular-nums; }

.portal-step--done {
  color: var(--color-primary);
  border-color: rgba(26, 43, 75, .22);
}

.portal-step--current {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* --- Cards --- */

.portal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.portal-card h2 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--color-primary);
}

.portal-card h2 + .portal-hint { margin-top: .4rem; }
.portal-card h3 { font-size: .9375rem; color: var(--color-primary); margin: 1.5rem 0 .6rem; }

/* --- Form fields --- */

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  margin-top: 1.25rem;
}

.portal-field { display: flex; flex-direction: column; gap: .4rem; }

.portal-field label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.portal-field input,
.portal-field select,
.portal-sled-table input,
.portal-sled-table select {
  padding: .65rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color .18s, box-shadow .18s;
}

.portal-field input:focus,
.portal-field select:focus,
.portal-sled-table input:focus,
.portal-sled-table select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 43, 75, .1);
}

.portal-req { color: var(--color-accent); }
.portal-hint { margin: 0; font-size: .8125rem; color: var(--color-muted); max-width: 62ch; }

.portal-check {
  display: flex;
  gap: .6rem;
  align-items: center;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--color-text);
}

.portal-check input { margin: 0; flex: none; accent-color: var(--color-primary); width: 1rem; height: 1rem; }

.portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-top: 1.75rem;
}

/* --- Notices: the site's own note panel, wash background with an accent edge --- */

.portal-note {
  padding: .875rem 1rem;
  background: var(--color-wash);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
  font-size: .8125rem;
  color: var(--color-muted);
  margin: 0 0 1.5rem;
}

.portal-note strong { color: var(--color-text); }

.portal-alert {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.125rem 1.25rem;
  margin-bottom: 1.75rem;
}

.portal-alert--warn { border-left-color: var(--color-accent); }

.portal-alert-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-danger);
  margin: 0;
}

.portal-alert--warn .portal-alert-title { color: var(--color-accent); }

.portal-alert-title::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.portal-alert ul { margin: .7rem 0 0; padding-left: 1.15rem; font-size: .875rem; color: var(--color-text); }
.portal-alert li { margin: .3rem 0; }
.portal-alert p { margin: .7rem 0 0; font-size: .875rem; color: var(--color-text); }

/* --- Organization picker --- */

/* A scroll box, so the page stays short however many organizations are listed.
   Search filters inside it. */
.portal-org-list {
  display: grid;
  align-content: start;
  gap: .5rem;
  margin-top: 1.25rem;
  max-height: min(28rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  scrollbar-gutter: stable;
}
.portal-org-count { margin-top: .5rem; font-size: .8125rem; color: var(--color-muted); }

.portal-org {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .12s;
}

.portal-org:hover {
  border-color: rgba(26, 43, 75, .3);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.portal-org strong { display: block; color: var(--color-primary); }
.portal-org-meta { font-size: .8125rem; color: var(--color-muted); }

.portal-org-go {
  color: var(--color-accent);
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* --- Tables --- */

.portal-table-wrap { overflow-x: auto; margin-top: 1.25rem; }

.portal-sled-table { width: 100%; border-collapse: collapse; font-size: .875rem; }

.portal-sled-table th {
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: .5rem .5rem .5rem 0;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.portal-sled-table td { padding: .4rem .5rem .4rem 0; vertical-align: middle; }
.portal-sled-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--color-border); }
.portal-sled-table input, .portal-sled-table select { width: 100%; padding: .5rem .6rem; }
.portal-sled-table tr.portal-sled-blank input { background: var(--color-bg); }

/* --- Money: mirrors the fee tables on the members page --- */

.portal-fee-group + .portal-fee-group { margin-top: 1.75rem; }

.portal-fee-table { width: 100%; border-collapse: collapse; font-size: .9rem; }

.portal-fee-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-primary);
  padding: .5rem .75rem .5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.portal-fee-table td { padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--color-border); }
.portal-fee-table .amount { text-align: right; padding-right: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal-fee-table tbody tr:last-child td { border-bottom: none; }

.portal-fee-subtotal td { color: var(--color-muted); font-size: .8125rem; }
.portal-fee-subtotal .amount { color: var(--color-text); font-size: .9rem; }

.portal-fee-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--color-primary);
}

.portal-fee-total-label { font-weight: 700; color: var(--color-primary); }

.portal-fee-total-amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.portal-danger { color: var(--color-danger); font-weight: 600; }

/* --- Signature pad --- */

.portal-sign-wrap {
  position: relative;
  margin-top: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  overflow: hidden;
}

.portal-sign-pad {
  display: block;
  width: 100%;
  height: 190px;
  touch-action: none;
  cursor: crosshair;
}

.portal-sign-baseline {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 48px;
  border-bottom: 1px solid var(--color-muted-light);
  pointer-events: none;
}

.portal-sign-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}

/* --- Document lists --- */

.portal-doc-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; font-size: .9375rem; }
.portal-doc-list li { padding-left: 1.1rem; position: relative; color: var(--color-text); }
.portal-doc-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

.portal-doc-list--links li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem .9rem 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.portal-doc-list--links li::before { left: .9rem; top: 1.45em; }
.portal-doc-list--links strong { display: block; color: var(--color-primary); }

/* --- Paying by check --- */

.portal-pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.portal-pay-block {
  padding: 1.1rem 1.25rem;
  background: var(--color-wash);
  border-radius: var(--radius-md);
}

.portal-pay-title {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.portal-pay-amount { margin: .25rem 0 .75rem; font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.portal-pay-dl { margin: 0; display: grid; gap: .5rem; font-size: .875rem; }
.portal-pay-dl dt { font-size: .75rem; color: var(--color-muted); }
.portal-pay-dl dd { margin: .1rem 0 0; color: var(--color-text); }

.portal-next { margin: 1rem 0 0; padding-left: 1.25rem; display: grid; gap: .75rem; font-size: .9375rem; }

@media print {
  .site-header, .site-footer, .portal-steps, .portal-actions { display: none !important; }
  .portal-card { box-shadow: none; break-inside: avoid; }
}

/* --- Shared with admin: status badges, two-column layout, definition lists --- */

.admin-badge {
  display: inline-block;
  padding: .2em .75em;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(26, 43, 75, .08);
  color: var(--color-primary);
  white-space: nowrap;
}

.admin-badge--paid { background: rgba(232, 103, 26, .12); color: var(--color-accent-dark); }
.admin-badge--rejected { background: rgba(192, 57, 43, .1); color: var(--color-danger); }
.admin-badge--published { background: var(--color-primary); color: #fff; }
.admin-badge--draft, .admin-badge--awaiting_payment { background: var(--color-bg); color: var(--color-muted); }

/* --- Two-column layout and definition lists --- */

.admin-columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: start;
}

.admin-columns--even { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

@media (max-width: 900px) {
  .admin-columns { grid-template-columns: 1fr; }
}

.admin-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; margin: 1.25rem 0 0; }
.admin-dl dt { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.admin-dl dd { margin: .25rem 0 0; color: var(--color-text); overflow-wrap: anywhere; }


.admin-badge--approved { background: rgba(26, 43, 75, .12); color: var(--color-primary); }

/* --- Member account --- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.account-narrow { max-width: 460px; }
.account-switch { margin-top: 1rem; }

.account-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.account-cta h2 + .portal-hint { margin-top: .35rem; }

.account-renewal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.account-renewal-head h2 + .portal-hint { margin-top: .3rem; }

.account-timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  counter-reset: none;
}

.account-timeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
  font-size: .75rem;
  color: var(--color-muted-light);
}

/* The connecting rail, drawn from each step to the next. */
.account-timeline-step::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
}
.account-timeline-step:last-child::after { display: none; }
.account-timeline-step.is-done::after { background: var(--color-primary); }

.account-timeline-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
}

.account-timeline-step.is-done { color: var(--color-primary); font-weight: 600; }
.account-timeline-step.is-done .account-timeline-dot { background: var(--color-primary); border-color: var(--color-primary); }
.account-timeline-step.is-problem { color: var(--color-danger); }
.account-timeline-step.is-problem .account-timeline-dot { background: var(--color-danger); border-color: var(--color-danger); }

@media (max-width: 640px) {
  .account-timeline { grid-template-columns: repeat(3, 1fr); row-gap: 1rem; }
  .account-timeline-step:nth-child(3n)::after { display: none; }
}

.account-status-detail { margin: 1.25rem 0 0; font-size: .9375rem; color: var(--color-text); }

.account-renewal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.account-total { display: block; font-size: 1.375rem; font-weight: 700; color: var(--color-primary); }

.account-pdfs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.account-pdfs .portal-pay-title { width: 100%; }

/* --- Admin: copyable reset link --- */

.admin-copy { display: flex; gap: .5rem; margin: 1rem 0; }
.admin-copy input {
  flex: 1;
  min-width: 0;
  padding: .55rem .7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: .8125rem;
  background: var(--color-bg);
}

.account-confirm { margin-bottom: 1.5rem; }

/* --- Admin: how a submission was paid. Received payments are green; online
       (Stripe) is filled, a mailed check is outlined; unpaid is grey. --- */

.pay-tag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .25em .7em;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.pay-tag svg { flex-shrink: 0; }
.pay-tag--online  { background: #1f7a4d; color: #fff; }
.pay-tag--mailed  { background: #eaf6ef; color: #17613c; border-color: #1f7a4d; }
.pay-tag--pending { background: var(--color-bg); color: var(--color-muted); border-color: var(--color-border); border-style: dashed; }

/* --- Signing: the forms shown above the signature box --- */

.portal-form-preview-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.portal-form-frame {
  display: block; width: 100%; height: min(80vh, 900px); margin-top: 1rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg);
}
.portal-form-fallback { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.25rem; }
.portal-form-fallback p { margin: 0; color: var(--color-muted); font-size: .9rem; }
@media (max-width: 600px) {
  .portal-form-frame { height: 70vh; }
}

/* Steps link to their page during a renewal. */
.portal-steps li { display: flex; }
a.portal-step--link { text-decoration: none; transition: border-color .15s, background .15s; }
a.portal-step--link:hover, a.portal-step--link:focus-visible { border-color: var(--color-primary); background: rgba(26, 43, 75, .04); color: var(--color-primary); }
a.portal-step--todo { color: var(--color-muted); }
.portal-step--blocked { cursor: not-allowed; opacity: .75; }

/* --- A field that needs fixing, with its message under it --- */
.portal-field--error input, .portal-field--error textarea, .portal-field--error select { border-color: var(--color-danger, #c0392b) !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.portal-field-error { margin: .4rem 0 0; font-size: .8125rem; font-weight: 600; color: var(--color-danger, #c0392b); }