/* alumni.wanglianzhou.com — the submission form.
   Rides on site.css: same tokens, same buttons, same card language. Only the
   pieces the public site has no equivalent for live here.

   The layout is built around one rule: whichever area you are in, everything
   you have to fill in should be on screen at once. Hence the two-column pane —
   pictures down the left, words down the right — and the tight vertical
   rhythm. Nobody scrolls up and down a form to check what they have already
   done. */

.al{max-width:1080px;margin:0 auto;padding:14px 0 8px}
/* a utility that must win over the layout rules below it */
.is-hidden{display:none !important}

/* ── the compact header bar ─────────────────────────────────────────────── */
.al__bar{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:0 0 14px}
.al__bar h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.al__bar > p{margin:0;font-size:12.5px;color:var(--ink-3)}
.al__bar--work{justify-content:space-between}

.al__warn{margin:0;padding:6px 11px;font-size:11.5px;line-height:1.5;
  color:var(--ink-2);background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--r)}

/* ── step 1: the three areas ────────────────────────────────────────────── */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pick{display:flex;flex-direction:column;gap:7px;text-align:left;font:inherit;cursor:pointer;
  padding:20px 18px 22px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow)}
.pick:hover{border-color:var(--accent);transform:translateY(-1px)}
.pick__i{font-size:24px;line-height:1}
.pick b{font-size:15px;color:var(--ink)}
.pick span:last-child{font-size:12px;line-height:1.55;color:var(--ink-3)}
@media (max-width:820px){.picks{grid-template-columns:minmax(0,1fr)}
  .pick{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;padding:14px}
  .pick b{flex:1 0 auto}.pick span:last-child{flex:1 1 100%}}

/* ── switching areas from inside one ────────────────────────────────────── */
.zones{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.zone{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:8px 15px;
  color:var(--ink-2);background:var(--surface);border:0;border-right:1px solid var(--line-2)}
.zone:last-child{border-right:0}
.zone:hover{color:var(--ink);background:var(--surface-2)}
.zone.is-on{color:var(--bg);background:var(--accent)}

/* ── the form pane ──────────────────────────────────────────────────────── */
.pane{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;padding:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pane__side{min-width:0}
.pane__main{min-width:0;display:flex;flex-direction:column}
@media (max-width:820px){.pane{grid-template-columns:minmax(0,1fr);gap:18px;padding:14px}
  /* On one column the portrait and its preview belong after the details:
     choosing a picture is the last thing you do, and a preview of an empty
     card is not worth the top of the screen. The photo areas keep the drop
     zone first, because there the picture is the point. */
  #form-person .pane__side{order:2}}

.note{margin:0 0 12px;font-size:12px;line-height:1.55;color:var(--ink-3)}

/* ── the drop zone ──────────────────────────────────────────────────────── */
.dz{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:92px;padding:14px 12px;text-align:center;
  background:var(--surface-2);border:1.5px dashed var(--line-2);border-radius:var(--r)}
.dz:hover{border-color:var(--accent)}
.dz.is-over{border-color:var(--accent);background:var(--accent-soft)}
.dz__in{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dz__t{font-size:13px;font-weight:600;color:var(--ink)}
.dz__s{font-size:11.5px;color:var(--ink-3)}
.dz__status{margin:7px 0 0;font-size:12px;color:var(--ink-2);min-height:16px}
.dz__status.is-ok{color:var(--accent);font-weight:600}

/* ── thumbnails, each removable on its own ──────────────────────────────── */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:9px}
.thumbs:not(:empty){margin-top:4px}
.thumbs--one{grid-template-columns:84px}
.thumb{position:relative;margin:0;min-width:0}
.thumb img{display:block;width:100%;aspect-ratio:1;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r);background:var(--ph-bg)}
.thumb figcaption{margin-top:3px;font-size:10px;color:var(--ink-3);text-align:center}
.thumb__x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;padding:0;
  display:grid;place-items:center;font:inherit;font-size:14px;line-height:1;cursor:pointer;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:50%}
.thumb__x:hover{color:#fff;background:#b3261e;border-color:#b3261e}

/* ── fields ─────────────────────────────────────────────────────────────── */
.al__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px}
.al__grid .field--wide{grid-column:1 / -1}
@media (max-width:520px){.al__grid{grid-template-columns:minmax(0,1fr)}}

.al .field{min-width:0}
.al .field__label{display:block;margin:0 0 4px;font-size:11.5px;font-weight:600;color:var(--ink)}
/* Sits on the label's own line so a field can explain itself without
   costing the form a row — this page has to fit without scrolling. */
.al .field__note{font-weight:400;color:var(--ink-3)}
.field__label--sep{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.al input[type=text],.al input[type=email],.al input[type=tel],
.al input[type=url],.al input[type=number]{
  width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:7px 10px;height:34px}
.al input:focus{border-color:var(--accent);outline:none}

.al__check{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;
  font-size:12px;line-height:1.5;color:var(--ink-2);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.al__check input{margin:1px 0 0;flex:0 0 auto;accent-color:var(--accent)}

/* The honeypot: off-screen rather than display:none, because a bot that
   respects display:none would skip it and the trap would never fire. It is
   aria-hidden and untabbable, so nobody using the form ever meets it. */
.al__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── the live preview of the alumni card ────────────────────────────────── */
.prev.people{display:block;padding:0}
.prev .person{background:var(--surface-2)}

/* ── sending ────────────────────────────────────────────────────────────── */
.al .err{margin:12px 0 0;font-size:12.5px;color:#b3261e}
html[data-theme="dark"] .al .err{color:#ff9d94}
.al .err:empty{display:none}

.prog{display:flex;align-items:center;gap:10px;margin:12px 0 0}
.prog__track{flex:1;height:6px;overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px}
.prog__bar{display:block;width:0;height:100%;background:var(--accent);transition:width .15s linear}
.prog__txt{min-width:92px;font-size:11.5px;color:var(--ink-2);text-align:right;white-space:nowrap}

.al .btn-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:auto;padding-top:16px}
.saved{margin-right:auto;font-size:11.5px;color:var(--accent)}
.btn--send{font-size:13.5px;font-weight:600;padding:9px 20px;
  color:var(--bg);background:var(--accent);border-color:var(--accent)}
.btn--send:hover{opacity:.88;color:var(--bg)}
.btn--send[disabled]{opacity:.55;cursor:default}

/* ── the thank-you panel that replaces the form ─────────────────────────── */
.al__done{padding:40px 16px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.al__done-t{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--accent)}
.al__done-b{margin:0;font-size:13px;color:var(--ink-2)}
.al__done .btn-row{justify-content:center}