/* Propela interview portal.
   Palette is taken verbatim from shared/propela_brand.py, which was sourced
   from propela.tech - charcoal ground, champagne accent - so the portal and
   the candidate-facing PDFs cannot drift apart. */

:root {
  --charcoal:  #0E0E10;
  --champagne: #C0B395;
  --ink:       #1F2937;
  --grey:      #4A5468;
  --light-grey:#E8ECEF;
  --sand:      #F7F4EE;
  --rule:      #D6DBE0;
  --accent:    #8B7E5E;   /* champagne, darkened for legibility on white */
  --muted:     #8A8275;
  --ok:        #2F6F4F;
  --warn:      #8A5A2B;
  --bad:       #8C2F2F;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- sign-in */
/* Charcoal ground, white card, white wordmark above it - the shape of
   portal.propela.tech. */
body.signin {
  background: var(--charcoal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.signin-shell { width: 100%; max-width: 27rem; }

.signin-logo {
  display: block;
  width: 10.5rem;
  height: auto;
  margin: 0 auto 2rem;
}

.card {
  background: #fff;
  border-radius: 14px;
  padding: 2.5rem 2.25rem 2.25rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.card h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.85rem;
  letter-spacing: .01em;
  margin: 0 0 .4rem;
  color: var(--charcoal);
}

.card .lede {
  margin: 0 0 1.75rem;
  color: var(--grey);
  font-size: .94rem;
  line-height: 1.55;
}

.rule-accent {
  width: 2.75rem;
  height: 3px;
  background: var(--champagne);
  border: 0;
  margin: 0 0 1.4rem;
}

label {
  display: block;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
  font-weight: 600;
}

/* Only a label that directly follows a field, so the first label in a form
   keeps its spacing from whatever introduces it. */
input + label, select + label, textarea + label { margin-top: 1.15rem; }

/* Written as an exclusion rather than a list of accepted types. The list form
   silently skipped input[type="password"], which rendered the sign-in field as
   a raw browser default next to a styled email field - and would have done the
   same to the next type anyone added. Buttons and boxes opt out; everything
   that takes typed text is styled by default. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea, select {
  width: 100%;
  padding: .8rem .9rem;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px rgba(192, 179, 149, .28);
}

textarea { min-height: 6.5rem; resize: vertical; line-height: 1.55; }

.btn {
  display: inline-block;
  width: 100%;
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  background: var(--charcoal);
  border: 1px solid var(--charcoal);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn:hover { background: #26262b; }

.btn-inline { width: auto; margin-top: 0; padding: .55rem 1.1rem; font-size: .88rem; }

.btn-ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--rule);
}
.btn-ghost:hover { background: var(--sand); color: var(--charcoal); }

.signin-footer {
  margin-top: 2.25rem;
  text-align: center;
  font-size: .78rem;
  color: rgba(255, 255, 255, .42);
  letter-spacing: .03em;
}
.signin-footer a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.signin-footer a:hover { color: var(--champagne); }

/* ------------------------------------------------------------------ chrome */
.topbar {
  background: var(--charcoal);
  padding: .95rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.topbar img { height: 1.55rem; width: auto; }
.topbar .spacer { flex: 1; }
.topbar .who { color: rgba(255,255,255,.62); font-size: .84rem; }
.topbar a { color: rgba(255,255,255,.72); font-size: .84rem; text-decoration: none; }
.topbar a:hover { color: var(--champagne); }
.topbar form { display: inline; }
.topbar button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.72); font: inherit; font-size: .84rem;
}
.topbar button:hover { color: var(--champagne); }

.wrap { max-width: 58rem; margin: 0 auto; padding: 2.25rem 1.5rem 4rem; }
.wrap.wide { max-width: 72rem; }

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.55rem;
  color: var(--charcoal);
  margin: 0 0 .35rem;
}
h3 {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2rem 0 .85rem;
  font-weight: 600;
}
.sub { color: var(--grey); margin: 0 0 1.75rem; font-size: .94rem; }

.panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.1rem;
}
.panel.tight { padding: 1.1rem 1.3rem; }

.meta { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.1rem 0 0; }
.meta div { min-width: 7rem; }
.meta dt {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: .3rem;
}
.meta dd { margin: 0; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  color: var(--grey);
  background: var(--sand);
}
.pill.live   { border-color: #BFD8C6; background: #EEF6F0; color: var(--ok); }
.pill.due    { border-color: #E4D2BA; background: #FAF3E9; color: var(--warn); }
.pill.closed { border-color: var(--rule); background: var(--light-grey); color: var(--grey); }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  text-align: left;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  padding: 0 .85rem .6rem 0;
  border-bottom: 1px solid var(--rule);
}
td { padding: .8rem .85rem .8rem 0; border-bottom: 1px solid var(--light-grey); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; }

.qa { border-left: 2px solid var(--champagne); padding: .1rem 0 .1rem 1.1rem; margin-bottom: 1.5rem; }
.qa .q { margin: 0 0 .35rem; line-height: 1.55; }
.qa .qnum { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: .3rem; }
.qa .stamp { font-size: .76rem; color: var(--muted); margin: 0 0 .7rem; }
.qa .a { background: var(--sand); border-radius: 8px; padding: .85rem 1rem; line-height: 1.55; margin: 0; }
.qa .pending { color: var(--warn); font-size: .86rem; font-style: italic; }

/* ------------------------------------------------- ingest checks / write-up */
/* The row under a submission saying what we found when we opened the archive.
   It hangs off the row above it rather than standing alone, so it reads as
   detail about that upload and not as a second submission. */
.checkrow td { border-bottom: 1px solid var(--light-grey); padding-top: 0; }
.checks { list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .86rem; }
.checks li { padding: .18rem 0; color: var(--grey); }
.checks .mark { display: inline-block; width: 1.15rem; font-weight: 700; }
.checks li.ok .mark { color: var(--ok); }
.checks li.no      { color: var(--bad); }
.checks li.no .mark { color: var(--bad); }
.checks .hint { display: inline; margin: 0; font-size: .82rem; }

.meta.compact { gap: 1.4rem 2.2rem; margin: 0; }
.meta.compact dd { font-size: .88rem; }

/* Plain text, deliberately. The write-up is a file an outsider uploaded, so it
   is escaped by Jinja and shown in a <pre> - never parsed as markdown, which
   would be a script tag away from running in a reviewer's session. */
.writeup {
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--sand);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin: 0;
  max-height: 34rem;
  overflow-y: auto;
}

.flash {
  border-radius: 8px;
  padding: .85rem 1.1rem;
  margin-bottom: 1.4rem;
  font-size: .92rem;
  border: 1px solid;
}
.flash.ok  { background: #EEF6F0; border-color: #BFD8C6; color: var(--ok); }
.flash.bad { background: #FBF0F0; border-color: #E5C6C6; color: var(--bad); }

.empty { color: var(--muted); font-style: italic; padding: .6rem 0; }
.mono { font-family: var(--mono); font-size: .86rem; }
.hint { font-size: .82rem; color: var(--muted); margin-top: .5rem; line-height: 1.5; }

.footer {
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  padding: 2rem 1rem 3rem;
  letter-spacing: .03em;
}
.footer a { color: var(--accent); text-decoration: none; }

.row { display: flex; gap: 1.1rem; align-items: flex-start; }
.row > * { flex: 1; }
.actions { display: flex; gap: .7rem; align-items: center; margin-top: 1.1rem; flex-wrap: wrap; }

/* Sign-in failure. One appearance for every cause - see login.html. */
.form-error {
  margin: 0 0 1.25rem;
  padding: .7rem .85rem;
  border-left: 3px solid #b4463c;
  background: #fdf3f2;
  color: #8f322a;
  font-size: .89rem;
  line-height: 1.45;
  border-radius: 2px;
}

/* ------------------------------------------------------------------- admin */
/* A granted role, with its revoke control tucked inside. The nested form is
   what makes the little x a real POST rather than a link - a GET that revokes
   a privilege would be actionable by any prefetch or crawler that saw it. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .3rem .2rem .6rem;
  margin: 0 .35rem .35rem 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--sand);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--grey);
}
.chip form { display: inline; margin: 0; }
.chip button {
  background: none; border: 0; padding: 0 .2rem; cursor: pointer;
  color: var(--muted); font: inherit; font-size: .95rem; line-height: 1;
}
.chip button:hover { color: var(--bad); }

/* A form that sits in a table cell or beside a chip list: the fields stop
   filling the width they would take in a panel. */
.inline-form {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.inline-form input, .inline-form select, .inline-form textarea {
  width: auto;
  min-width: 9rem;
  padding: .5rem .6rem;
  font-size: .88rem;
}
.inline-form .btn { margin-top: 0; }

/* The one label that is not a field caption above a field. */
label.check {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: .92rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0;
}
label.check input { width: auto; }

h4.minor {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 1.5rem 0 .4rem;
}

/* A file input keeps the browser's own button - restyling that is a fight
   with every browser separately - but sits in the same box as its neighbours. */
input[type="file"] { padding: .6rem .7rem; font-size: .88rem; }