/* Whitelist page additions on top of styles.css. */

.wl-hero { padding-bottom: 1.2em; }
.wl-hero .px { --px: 7px; margin: 0 auto .4em; }
@media (max-width: 640px) { .wl-hero .px { --px: 4px; } }
.wl-hero .statement { font-size: 1.3em; }
.wl-hero .shout { font-style: normal; }
body[data-status="open"] .wl-hero .shout { background: var(--acid-ink); color: var(--acid); box-shadow: 6px 6px 0 var(--hot); }
body[data-status="drawn"] .wl-hero .shout { background: #000; color: #9fe0ff; box-shadow: 6px 6px 0 #00d5ff; }

.wl-meter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
  gap: .6em;
  margin: 1.2em auto 0;
  max-width: 40em;
}
.wl-box {
  padding: .6em .4em .5em;
  background: var(--paper);
  border: 3px solid;
  border-color: var(--shade) var(--hi) var(--hi) var(--shade);
  text-align: center;
  line-height: 1.25;
}
.wl-box b { display: block; font-size: 1.5em; color: var(--ink); }
.wl-box span { display: block; font-size: .68em; letter-spacing: 1px; color: var(--dim); margin-top: .25em; }

.tasks { margin: 0; padding: 0; list-style: none; counter-reset: task; }
.tasks li {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: .8em .2em .8em 3em;
  position: relative;
  border-bottom: 1px dotted #c9b9a0;
  counter-increment: task;
}
.tasks li:last-child { border-bottom: 0; }
.tasks li::before {
  content: counter(task);
  position: absolute; left: .2em; top: .95em;
  width: 2em; height: 2em;
  font-weight: 700; font-size: .95em; line-height: 2em; text-align: center;
  color: #fff; background: var(--hot); border: 2px solid var(--ink);
}
.task-body { flex: 1 1 14em; min-width: 0; }
.task-body b { display: block; font-size: 1.02em; }
.task-body p { margin: .2em 0 0; font-size: .86em; color: var(--dim); }
.tasks .cta { flex: 0 0 auto; min-width: 9em; font-size: .82em; padding: .45em 1em; box-shadow: 4px 4px 0 #000; }
@media (max-width: 560px) {
  .tasks li { flex-wrap: wrap; }
  .tasks .cta { margin-left: auto; }
}

.cta.off {
  background: var(--face);
  color: var(--shade);
  border-color: var(--lite) var(--shade) var(--shade) var(--lite);
  box-shadow: none;
  cursor: not-allowed;
}
.cta.off:hover { background: var(--face); color: var(--shade); box-shadow: none; }

.wl-hash {
  margin: .4em 0 .8em;
  font-size: 1.6em;
  font-weight: 700;
  color: var(--hot);
  text-shadow: 2px 2px 0 var(--ink);
  letter-spacing: 1px;
}

/* ── in-site entry (v3) ──────────────────────────────────────── */

.mint-status { margin: .8em 0 0; font-size: .85em; }   /* whitelist.html does not load mint.css */
.mint-status.error { color: var(--red); font-weight: 700; }
.mint-status.success { color: #117743; font-weight: 700; }

.tasks li .state { margin-left: auto; padding: .1em .5em; font-size: .72em; font-weight: 700; color: #fff; background: var(--hot); border: 2px solid #000; white-space: nowrap; }
.tasks li.done .cta { background: #d8d8d8; color: #555; box-shadow: 3px 3px 0 #000; }
.entry-closed { margin-bottom: .9em; padding: .6em .8em; font-size: .88em; color: var(--alarm); background: #000; box-shadow: 4px 4px 0 var(--hot); }
.entry-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; padding-bottom: .6em; border-bottom: 1px dotted #b9a98c; }
.entry-bar b:first-child { font-size: 1.1em; }
.entry-bar .pts b { color: var(--hot); font-size: 1.3em; }
.entry-bar .age { font-size: .78em; color: var(--dim); }
.entry-bar .age.bad { color: var(--red); font-weight: 700; }
.entry-bar .tool { margin-left: auto; }
.steps { margin: .8em 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: .4em; }
.steps li { display: flex; justify-content: space-between; gap: .5em; padding: .35em .5em; font-size: .85em; background: #fff; border: 2px solid #000; }
.steps li.done { background: var(--acid); }
.steps li .state { font-weight: 700; color: var(--dim); }
.steps li.done .state { color: var(--acid-ink); }
.entry-form { display: grid; gap: .35em; margin-top: 1em; }
.entry-form label { margin-top: .5em; font-size: .82em; color: var(--dim); }
.entry-form input { width: 100%; padding: .45em .6em; font: inherit; background: #fff; border: 2px solid; border-color: var(--shade) var(--hi) var(--hi) var(--shade); }
.entry-form input:focus { outline: 3px solid var(--alarm); outline-offset: 1px; }
.entry-form .cta { margin-top: .8em; width: 100%; min-width: 0; }
.entry-form .cta[disabled] { opacity: .6; cursor: wait; }
.invite { margin-top: 1.2em; padding: .8em .9em; background: #000; color: #fff; box-shadow: 6px 6px 0 var(--acid); }
.invite b { color: var(--acid); }
.invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: .4em 0 .5em; }
.invite-row code { flex: 1 1 14em; min-width: 0; padding: .35em .5em; font-size: .85em; color: var(--alarm); background: #1a1a1a; word-break: break-all; }
.invite p { margin: 0; font-size: .82em; color: #ddd; }
.board { margin-top: 1.2em; padding-top: .8em; border-top: 1px dotted #b9a98c; }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6em; margin-bottom: .4em; }
.board .report th { width: auto; font-weight: 700; color: var(--ink); }
.board .report td { text-align: right; color: var(--hot); }

/* ── passes cut out of reality (v3.1) ────────────────────────── */

.passes { display: flex; flex-wrap: wrap; gap: .9em 1em; margin: .6em 0 .2em; padding: .4em .2em .6em; }
.pass {
  position: relative;
  display: flex; align-items: center; gap: .5em;
  width: 15.5em; max-width: 100%;
  padding: .55em 2.3em .5em .55em;
  font-size: .78em;
  color: var(--ink);
  background: var(--paper);
  filter: drop-shadow(4px 4px 0 #000);
  clip-path: polygon(1% 6%, 6% 0, 14% 3%, 23% 0, 31% 2%, 42% 0, 51% 3%, 60% 0, 70% 2%, 79% 0, 88% 3%, 96% 0, 100% 8%, 98% 20%, 100% 34%, 98% 48%, 100% 61%, 98% 76%, 100% 90%, 95% 100%, 85% 97%, 74% 100%, 63% 97%, 52% 100%, 40% 97%, 29% 100%, 18% 97%, 8% 100%, 2% 94%, 0 80%, 2% 64%, 0 48%, 2% 30%, 0 16%);
  transform: rotate(-1.6deg);
}
.pass:nth-child(2n) { transform: rotate(1.1deg); }
.pass:nth-child(3n) { transform: rotate(-.4deg); }
.pass:nth-child(5n) { transform: rotate(2deg); }
.pass img { flex: 0 0 auto; width: 3.4em; height: 3.4em; object-fit: cover; border: 2px solid #000; }
.pass-main { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.pass .admit { font-weight: 700; letter-spacing: 1px; font-size: .82em; }
.pass .serial { font-family: var(--mono); font-size: .8em; color: var(--dim); }
.pass .src { font-size: .8em; font-weight: 700; color: var(--hot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass .stub {
  position: absolute; right: 0; top: 0; bottom: 0; width: 1.9em;
  display: flex; align-items: center; justify-content: center;
  border-left: 2px dashed #000;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: .68em; font-weight: 700; letter-spacing: 2px;
  background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(0,0,0,.06) 4px 8px);
}
.pass .stamp {
  position: absolute; left: 4.4em; right: auto; top: auto; bottom: .3em; width: auto; height: auto;
  padding: 0 .3em; font-size: .7em; font-weight: 700; letter-spacing: 1px; line-height: 1.3;
  color: var(--red); border: 2px double var(--red); background: rgba(255,255,255,.85);
  transform: rotate(-9deg);   /* overrides the folder-tile .stamp from styles.css */
}
.pass.pending .stamp { color: #6f6f6f; border-color: #6f6f6f; }
.pass.pending { background: #f1ede0; }
.pass.empty { display: block; padding: .7em .8em; font-size: .82em; color: var(--dim); background: #f1ede0; transform: rotate(-1deg); }
body[data-lang="zh"] .pass .stub { letter-spacing: 3px; }

/* ── entry filed: master pass + tweet it (v3.4) ─────────────── */

.filed { margin-top: 1.2em; padding: .9em 1em 1em; background: #000; color: #fff; box-shadow: 6px 6px 0 var(--hot); }
.filed-head { font-weight: 700; letter-spacing: 1px; color: var(--acid); }
.filed-lead { margin: .4em 0 .7em; font-size: .85em; color: #ddd; }
.filed .cta-row { margin-top: .8em; }
.filed .tool { text-decoration: none; }
.filed .mint-status { margin-top: .6em; }
.filed .mint-status.success { color: var(--acid); }
.filed .filed-note { margin: .5em 0 0; color: #bbb; }
.filed.shared .cta { background: #d8d8d8; color: #555; }
.filed.skipped .filed-lead, .filed.skipped .pass.master, .filed.skipped #shareSkip, .filed.skipped .filed-note, .filed.skipped .filed-home { display: none; }
.pass.master {
  width: 100%; max-width: 30em; margin: .4em auto .3em;
  padding: .8em 2.6em .8em .8em; font-size: .92em;
  filter: drop-shadow(5px 5px 0 var(--acid));
  transform: rotate(-.8deg);
}
.pass.master img { width: 5.4em; height: 5.4em; }
.pass.master .holder { font-size: 1.25em; font-weight: 700; color: var(--hot); overflow: hidden; text-overflow: ellipsis; }
.pass.master .rows { display: grid; grid-template-columns: max-content 1fr; gap: .1em .9em; margin: .35em 0 0; font-size: .8em; }
.pass.master .rows dt { color: var(--dim); letter-spacing: 1px; }
.pass.master .rows dd { margin: 0; font-family: var(--mono); font-weight: 700; word-break: break-all; }
.pass.master .stamp { left: auto; right: 3em; bottom: .55em; font-size: .95em; }
@media (max-width: 480px) { .pass.master { padding-right: 2.4em; } .pass.master img { width: 4em; height: 4em; } }