/* The contributor layer. Loaded only on its own pages, plus the one rule at the
   foot that puts a correction link on every record page.

   Everything borrows site.css's tokens rather than defining colours, so the
   theme switch keeps working and there is one palette rather than two. */

/* ── the licence ─────────────────────────────────────────────────────────── */

.grant{max-width:66ch; margin:0 0 calc(var(--u)*6)}
.grant section{padding:calc(var(--u)*3) 0; border-top:1px solid var(--hair)}
.grant section:first-child{border-top:0; padding-top:0}
.grant h2{font-size:22px; line-height:1.25; margin:0 0 calc(var(--u)*1.5);
  max-width:30ch}
.grant p{margin:0 0 calc(var(--u)*1.5)}
.grant p:last-child{margin-bottom:0}
.grant cite{font-style:italic}

.caveat{max-width:66ch; background:var(--sunk); padding:calc(var(--u)*3);
  margin:0 0 calc(var(--u)*4)}
.caveat h2{font-size:var(--t-small); text-transform:none; margin:0 0 calc(var(--u)*1.5)}
.caveat p{margin:0 0 calc(var(--u)*1.5); font-size:var(--t-small)}
.caveat p:last-child{margin-bottom:0}

.aside{color:var(--grey); font-size:var(--t-small); max-width:66ch}
.done{max-width:66ch; padding:calc(var(--u)*2) 0; border-top:2px solid var(--ink)}

.accept{display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--u)*2);
  max-width:66ch; padding-top:calc(var(--u)*2); border-top:2px solid var(--ink)}
.accept span{color:var(--grey); font-size:var(--t-cap)}

/* ── buttons. one shape, three weights ───────────────────────────────────── */

.btn,.propose button,.rule button,.say button,.accept button{
  font:inherit; font-size:var(--t-small); background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); padding:9px 20px; cursor:pointer;
  text-decoration:none; display:inline-block;
  transition:background .16s ease, color .16s ease}
.btn:hover,.propose button:hover,.accept button:hover{
  background:var(--paper); color:var(--ink)}
button.quiet,a.quiet{background:none; color:var(--grey); border:1px solid var(--hair);
  font:inherit; font-size:var(--t-cap); padding:5px 12px; cursor:pointer;
  text-decoration:none}
button.quiet:hover,a.quiet:hover{color:var(--ink); border-color:var(--ink)}
button.no{background:none; color:var(--alert); border-color:var(--alert)}
button.no:hover{background:var(--alert); color:var(--paper)}
button[disabled]{opacity:.4; cursor:not-allowed}
button[disabled]:hover{background:var(--ink); color:var(--paper)}

/* ── notes, flags ────────────────────────────────────────────────────────── */

.flag{border-left:3px solid var(--alert); background:var(--sunk);
  padding:calc(var(--u)*2) calc(var(--u)*2.5); margin:0 0 calc(var(--u)*3);
  max-width:66ch}
.note{border-left:3px solid var(--hair); background:var(--sunk);
  padding:calc(var(--u)*2) calc(var(--u)*2.5); margin:0 0 calc(var(--u)*3);
  max-width:66ch; font-size:var(--t-small)}
.flag p,.note p{margin:0 0 var(--u)}
.flag p:last-child,.note p:last-child{margin-bottom:0}
.flag ul,.note ul{margin:var(--u) 0 0; padding-left:calc(var(--u)*2.5)}

/* ── the tally strip ─────────────────────────────────────────────────────── */

.tally{display:flex; flex-wrap:wrap; gap:calc(var(--u)*5);
  padding:calc(var(--u)*2.5) 0; border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair); margin:0 0 calc(var(--u)*3)}
.tally div{display:flex; flex-direction:column}
.tally b{font-size:30px; line-height:1; font-weight:600; letter-spacing:-.01em}
.tally span{font-size:var(--t-cap); color:var(--grey); margin-top:4px}

.ladder{max-width:60ch; color:var(--grey); font-size:var(--t-small);
  margin:0 0 calc(var(--u)*4)}

/* ── contribution rows ───────────────────────────────────────────────────── */

.crows{list-style:none; margin:0 0 calc(var(--u)*4); padding:0}
.crow{padding:calc(var(--u)*1.75) 0; border-bottom:1px solid var(--hair)}
.crow-h{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--u);
  font-size:var(--t-small)}
.crow-t{font-weight:600; text-decoration:none}
.crow-t:hover{text-decoration:underline}
.crow-f{color:var(--grey)}
.crow-w,.crow-d{color:var(--mute); font-size:var(--t-cap); margin-left:auto}
.crow-w{margin-left:0}
.crow-w a{color:var(--grey)}
.crow-v,.crow-note{margin:5px 0 0; font-size:var(--t-small); color:var(--grey);
  max-width:80ch}
.crow-v s{color:var(--mute)}
.crow-flags,.crow-c{margin:4px 0 0; font-size:var(--t-cap); color:var(--mute)}
.crow-flags{color:var(--alert)}

/* state marks. filled where a thing is done, hollow where it is waiting. */
.st{font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 8px; border:1px solid var(--hair); color:var(--grey);
  white-space:nowrap}
.st-landed{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.st-approved,.st-applied{border-color:var(--link); color:var(--link)}
.st-rejected{border-color:var(--alert); color:var(--alert)}
.st-pending{border-color:var(--ink); color:var(--ink)}

.qh{font-size:var(--t-small); color:var(--grey); margin:0 0 calc(var(--u)*3)}
.qh.empty{color:var(--link)}

/* ── the form ────────────────────────────────────────────────────────────── */

.propose,.rule,.say{max-width:62ch; margin:0 0 calc(var(--u)*4)}
.f{display:block; margin:0 0 calc(var(--u)*3)}
.fl{display:block; font-size:var(--t-cap); color:var(--grey);
  margin:0 0 calc(var(--u)*.75)}
.fl b{color:var(--ink); font-weight:600}
.fh{display:block; font-size:var(--t-cap); color:var(--mute);
  margin-top:calc(var(--u)*.75); max-width:56ch}
.f input[type=text],.f textarea,.f select{
  width:100%; font:inherit; font-size:var(--t-body); background:var(--paper);
  color:var(--ink); border:1px solid var(--hair); padding:9px 11px}
.f input[type=text]:focus,.f textarea:focus,.f select:focus{
  outline:none; border-color:var(--ink)}
.f textarea{resize:vertical; line-height:1.5}

.standing{margin:0 0 calc(var(--u)*3)}
.standing .cur{margin:0; padding:9px 11px; background:var(--sunk);
  border-left:3px solid var(--hair); font-size:var(--t-body)}
.standing .cur.absent{color:var(--mute); font-style:italic}

.actions{display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--u)*1.5);
  margin:0 0 calc(var(--u)*2)}

/* What happens to this the moment it is sent. Sits directly above the button,
   because a disclosure a page below the button is not a disclosure. */
.disclose{margin:0 0 calc(var(--u)*2); padding:calc(var(--u)*1.5) 0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  font-size:var(--t-small); color:var(--grey); max-width:60ch}
.disclose b{color:var(--ink)}

/* ── the diff. two stacked bands, not a table ────────────────────────────── */

.diff{max-width:74ch; margin:0 0 calc(var(--u)*4)}
.diff > div{display:grid; grid-template-columns:9em 1fr; gap:calc(var(--u)*2);
  padding:calc(var(--u)*1.75) 0; border-top:1px solid var(--hair)}
.diff .now{border-top:1px solid var(--ink)}
.diff .k{font-size:var(--t-cap); color:var(--grey); padding-top:3px}
.diff .v{font-size:18px; line-height:1.4; word-break:break-word}
.diff .was .v{color:var(--mute); text-decoration:line-through;
  text-decoration-thickness:1px}

.meta{display:flex; flex-wrap:wrap; gap:calc(var(--u)*2);
  font-size:var(--t-cap); color:var(--grey); margin:0 0 calc(var(--u)*3);
  padding-bottom:calc(var(--u)*2); border-bottom:1px solid var(--hair)}

.src,.verdict{max-width:66ch; margin:0 0 calc(var(--u)*3)}
.src p,.verdict p{margin:0; word-break:break-word}
.verdict{border-left:3px solid var(--alert); padding-left:calc(var(--u)*2)}
.report{margin:0 0 calc(var(--u)*4); padding:calc(var(--u)*2) calc(var(--u)*3);
  background:var(--sunk); border-left:3px solid var(--ink); max-width:66ch;
  font-size:18px; line-height:1.5}

/* ── discussion ──────────────────────────────────────────────────────────── */

.talk{list-style:none; margin:0 0 calc(var(--u)*3); padding:0; max-width:66ch}
.talk > li{padding:calc(var(--u)*2) 0; border-top:1px solid var(--hair)}
.talk .who{font-size:var(--t-cap); color:var(--grey);
  display:flex; gap:var(--u); align-items:baseline}
.talk .who a{font-weight:600; color:var(--ink); text-decoration:none}
.talk p{margin:var(--u) 0 0}
.talk .gone{color:var(--mute); font-style:italic; font-size:var(--t-small)}
.talk .empty{color:var(--mute); border-top:1px solid var(--hair)}
.tools{margin-top:var(--u)}
.inline{display:inline-flex; gap:var(--u); align-items:center}
.inline input[type=text]{font:inherit; font-size:var(--t-cap);
  border:1px solid var(--hair); background:var(--paper); color:var(--ink);
  padding:4px 8px; width:18ch}

/* ── odds ────────────────────────────────────────────────────────────────── */

.gaps{list-style:none; margin:0 0 calc(var(--u)*4); padding:0; max-width:70ch}
.gaps li{padding:calc(var(--u)*1.25) 0; border-bottom:1px solid var(--hair);
  display:flex; gap:var(--u); flex-wrap:wrap; align-items:baseline;
  font-size:var(--t-small)}
.gaps a{font-weight:600; text-decoration:none}
.gaps a:hover{text-decoration:underline}
.gaps span{color:var(--grey)}

.tabs{display:flex; flex-wrap:wrap; gap:var(--u); margin:0 0 calc(var(--u)*3)}
.tab{font-size:var(--t-cap); color:var(--grey); text-decoration:none;
  border:1px solid var(--hair); padding:5px 12px}
.tab.on{border-color:var(--ink); color:var(--ink)}
.tab:hover{color:var(--ink)}

/* ── the correction link that lives on every record page ─────────────────── */

.fixit{margin:calc(var(--u)*4) 0 0; padding-top:calc(var(--u)*2);
  border-top:1px solid var(--hair); font-size:var(--t-small); color:var(--grey)}
.fixit a{color:var(--link)}

@media (max-width:640px){
  .diff > div{grid-template-columns:1fr; gap:4px}
  .tally{gap:calc(var(--u)*3)}
  .tally b{font-size:24px}
  .crow-w,.crow-d{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .btn,.propose button,.rule button,.say button,.accept button{transition:none}
}