/* The handbook: document list, reading, editing, history, proposals and decisions. */
.staff .hb-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.staff .hb-search .field { min-width: 240px; }
.staff .hb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.staff a.hb-item { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.staff a.hb-item:hover { border-color: var(--oak); }
.staff .hb-flag { color: var(--hold); font-weight: 600; }
.staff .hb-used { margin: 0; padding: 8px 12px; border-left: 3px solid var(--flag); background: var(--card); border-radius: var(--r); }

.staff .hb-body { font-size: 15px; line-height: 1.6; max-width: 72ch; }
.staff .hb-body h1, .staff .hb-body h2, .staff .hb-body h3 { font-family: var(--display); line-height: 1.2; margin: 1.2em 0 .4em; }
.staff .hb-body h1 { font-size: 22px; } .staff .hb-body h2 { font-size: 19px; } .staff .hb-body h3 { font-size: 16px; }
.staff .hb-body > :first-child, .staff .hb-body > div > :first-child { margin-top: 0; }
.staff .hb-body table { border-collapse: collapse; font-size: 13.5px; }
.staff .hb-body td, .staff .hb-body th { border: 1px solid var(--line); padding: 5px 8px; vertical-align: top; text-align: left; }

.staff .hb-meta { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.staff .hb-form lexxy-editor { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); min-height: 320px; }
.staff .hb-reason { border-color: var(--flag); }

.staff .hb-diff { overflow: hidden; }
.staff .hb-diff-head, .staff .hb-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.staff .hb-diff-head span { padding: 8px 12px; border-bottom: 1.5px solid var(--ink); }
.staff .hb-cell { padding: 6px 12px; font-size: 14px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.staff .hb-cell + .hb-cell { border-left: 1px solid var(--line); }
.staff .hb-cell > :first-child { margin-top: 0; } .staff .hb-cell > :last-child { margin-bottom: 0; }
.staff .hb-row { border-bottom: 1px solid var(--line); }
.staff .hb-same .hb-row, .staff .hb-row.hb-same { color: var(--muted); }
.staff .hb-same summary { padding: 6px 12px; cursor: pointer; color: var(--oak); font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--line); }
.staff .hb-removed .hb-cell:first-child, .staff .hb-changed .hb-cell:first-child { background: var(--flag-wash); }
.staff .hb-added .hb-cell:last-child, .staff .hb-changed .hb-cell:last-child { background: var(--ok-wash); }
.staff .hb-diff del, .staff del { background: #F8C6D8; text-decoration: line-through; }
.staff .hb-diff ins, .staff ins { background: #BFE0C8; text-decoration: none; }
.staff .hb-restore { margin-top: 14px; max-width: 520px; }

@media (max-width: 700px) {
  .staff .hb-meta { grid-template-columns: 1fr; }
  .staff .hb-diff-head, .staff .hb-row { grid-template-columns: 1fr; }
  .staff .hb-cell + .hb-cell { border-left: 0; border-top: 1px dashed var(--line); }
}

/* Proposals: suggested changes waiting for Nate. */
.staff .hb-stale { margin-bottom: 14px; }
.staff .hb-stale ul { margin: 6px 0 0; padding-left: 18px; }
.staff .hb-sources { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.staff .hb-sources .xs { margin-left: 4px; }
.staff .h3.hb-section { margin: 20px 0 8px; }
.staff .hb-comments { max-width: 720px; display: grid; gap: 8px; }
.staff .hb-comment p { margin: 4px 0 0; }
.staff .hb-comment-form { margin-top: 4px; }

/* Decisions: one proposed change with every part. */
.staff .dc-part .row { align-items: center; }
.staff .dc-diff { margin-top: 8px; }
.staff .dc-new { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--ok); }
.staff .dc-moves ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.staff .hb-decisions { margin-bottom: 14px; }

/* Questions for Nate. */
.staff .qs-answer p { margin: 4px 0; }
.staff .dc-add select, .staff .dc-add textarea { width: 100%; }
.staff .hb-validity-row { display: grid; grid-template-columns: auto 90px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.staff .hb-validity-row .eyebrow { margin: 0; }
@media (max-width: 700px) { .staff .hb-validity-row { grid-template-columns: 1fr; } }
.staff .hb-archive { margin-top: 10px; }