/* bookbask — application status page.

   A public page, so it inherits the marketplace system from bookbask.css and
   adds only what one card needs. Deliberately small: an applicant sees this
   once or twice, worried, and it should read like a short letter. */

body {
  margin: 0;
  background: var(--bb-page);
  color: var(--bb-ink);
  font: var(--bb-w-regular) 13.5px/1.6 var(--bb-font);
  -webkit-font-smoothing: antialiased;
}

/* Admin preview chrome. Not part of the applicant's page. */
.st-preview {
  background: var(--bb-primary);
  color: var(--bb-on-navy-ink);
  padding: 11px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.st-preview[hidden] { display: none; }
.st-preview__back {
  color: var(--bb-on-navy-ink);
  text-decoration: none;
  font: var(--bb-w-semibold) 11.5px/1.3 var(--bb-font);
}
.st-preview__states { display: flex; gap: 6px; flex-wrap: wrap; }
.st-preview__chip {
  border-radius: var(--bb-r-chip);
  padding: 4px 12px;
  font: var(--bb-w-semibold) 11px/1.4 var(--bb-font);
  text-decoration: none;
  color: rgba(251, 247, 240, .72);
  background: rgba(251, 247, 240, .12);
}
.st-preview__chip.is-on { background: var(--bb-page); color: var(--bb-primary); }

.st {
  display: flex;
  justify-content: center;
  padding: 54px 22px 72px;
}
.st-card {
  width: 100%;
  max-width: 520px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-feature);
  padding: 34px 36px 29px;
}

.st-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.st-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.st-brand img { width: 22px; height: 22px; object-fit: contain; }
.st-brand__word {
  font: var(--bb-w-bold) 15.5px/1.1 var(--bb-font-logo);
  letter-spacing: 1.3px;
  color: var(--bb-primary);
}

.st-ref { display: block; margin: 0 0 8px; }

.st-h {
  font: var(--bb-w-semibold) 23.5px/1.25 var(--bb-font);
  letter-spacing: -.7px;
  margin: 0 0 10px;
}
.st-h--rust { color: var(--bb-urgency); }
.st-h--jade { color: var(--bb-trust-ink); }
.st-body { margin: 0 0 24px; }

/* Four steps. A word alone does not tell somebody how far through they are. */
.st-steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.st-steps[hidden] { display: none; }
.st-step {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
  position: relative;
}
.st-step__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--bb-surface);
  border: 2px solid var(--bb-hairline);
}
.st-step.is-done .st-step__dot { background: var(--bb-trust); border-color: var(--bb-trust); }
.st-step.is-now .st-step__dot {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 4px rgba(18, 58, 99, .12);
}
.st-step__t { font: var(--bb-w-medium) 12px/1.45 var(--bb-font); color: var(--bb-ink-soft); }
.st-step.is-done .st-step__t { color: var(--bb-ink); }
.st-step.is-now .st-step__t { color: var(--bb-primary); font-weight: var(--bb-w-semibold); }

.st-panel {
  border-radius: var(--bb-r-card);
  padding: 18px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.st-panel[hidden] { display: none; }
.st-panel--need { background: var(--bb-tint-rust); }
.st-panel--good { background: var(--bb-tint-jade); }
.st-panel__h { font: var(--bb-w-semibold) 12.5px/1.4 var(--bb-font); margin: 0; }
.st-panel--need .st-panel__h { color: var(--bb-urgency); }
.st-panel--good .st-panel__h { color: var(--bb-trust-ink); }
/* The panel head and this line share a colour and sit 1px apart in size, so
   weight is the only thing separating them. Against .bb-meta's 500 the head's
   600 left just 100 units — too close to read as a heading. Taken to regular
   rather than pushing the head to 700: this is a sentence of body copy, and
   700 stays reserved for the wordmark. */
.st-panel__b { margin: 0 0 4px; font-weight: var(--bb-w-regular); }
.st-panel--need .st-panel__b { color: var(--bb-urgency); }
.st-panel--good .st-panel__b { color: var(--bb-trust-ink); }

.st-foot {
  padding-top: 20px;
  border-top: 1px solid var(--bb-hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.st-foot p { margin: 0; }
.st-privacy { opacity: .8; }

@media (max-width: 520px) {
  .st { padding: 27px 16px 45px; }
  .st-card { padding: 25px 22px 22px; }
  .st-h { font-size: 20px; }
}