/* Dev mode (js/dev.js): every text and link, laid out to proofread. XP's own
   idiom: a toolbar, an Explorer-style contents pane, a white reading column,
   the blue task pane (XP's folder sidebar) for what needs attention, and a
   status bar. */

.dv {
  display: flex;
  flex-direction: column;
  height: 100%;
  font: 11px Tahoma, sans-serif;
  background: #ece9d8;
  color: #000;
}
.dv button, .dv input { font: 11px Tahoma, sans-serif; }

.dv-bar { display: flex; gap: 6px; align-items: center; padding: 4px 6px; border-bottom: 1px solid #aca899; }
.dv-bar label { margin-left: 8px; }
.dv-status { margin-left: auto; color: #7a4b00; }

.dv-panes { flex: 1; display: flex; min-height: 0; }

/* contents: Explorer's folder pane */
.dv-toc {
  width: 210px;
  flex: none;
  overflow: auto;
  background: #fff;
  border-right: 1px solid #aca899;
  padding: 4px 0 12px;
}
.dv-toc-group { font-weight: bold; padding: 8px 8px 2px; }
.dv-toc-group span, .dv-box h4 span { font-weight: normal; color: #555; }
.dv-toc-sub { color: #555; padding: 6px 8px 1px 14px; }
.dv-toc-item { display: block; padding: 1px 8px 1px 22px; color: #000; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-toc-item:hover { background: #316ac5; color: #fff; }
.dv-toc-item.dv-reviewed::before, .dv-toc-item.dv-signed-off::before { content: "✓"; margin-left: -12px; width: 12px; display: inline-block; color: #2a7a2a; }
.dv-toc-item.dv-comprehensive::before { content: "◐"; margin-left: -12px; width: 12px; display: inline-block; color: #215dc6; }
.dv-toc-item.dv-partial::before { content: "○"; margin-left: -12px; width: 12px; display: inline-block; color: #a66a00; }
.dv-toc-item.dv-changed::before { content: "•"; margin-left: -12px; width: 12px; display: inline-block; color: #c05; }

/* the texts, one after another */
.dv-doc { flex: 1; overflow: auto; background: #fff; padding: 12px 28px 60px; }
.dv-doc > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.dv-wait { color: #555; margin-top: 40px; }
.dv-group {
  font: bold 15px Tahoma, sans-serif;
  color: #fff;
  background: linear-gradient(90deg, #0a246a, #a6caf0);
  padding: 3px 8px;
  margin-top: 28px;
}
.dv-sub { font: bold 12px Tahoma, sans-serif; color: #0a246a; border-bottom: 1px solid #d0d0bf; margin: 20px auto 4px; padding-bottom: 2px; }

.dv-item { border-top: 1px dashed #b5b5a5; padding: 10px 0 14px; }
.dv-item[hidden] { display: none; }
.dv-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-bottom: 6px; }
.dv-title { font: bold 12px Tahoma, sans-serif; color: #0000ee; }
span.dv-title { color: #000; }
.dv-where { color: #777; font-size: 10px; }
.dv-state { color: #c05; font-weight: bold; }
.dv-reviewed .dv-title, .dv-signed-off .dv-title { color: #2a7a2a; }
.dv-comprehensive .dv-title { color: #215dc6; }
.dv-partial .dv-title { color: #a66a00; }
.dv-status-select { font: 11px Tahoma, sans-serif; }
.dv-guess { color: #a66a00; font-size: 10px; margin-left: 2px; cursor: help; }

.dv-text { font: 14px/1.5 "Times New Roman", serif; outline: none; }
.dv-text:focus { background: #fffef4; box-shadow: 0 0 0 3px #fffef4, 0 0 0 4px #e8d98a; }
.dv-text .rz h1 { font-size: 18px; }

/* each link numbered, and listed under its text */
/* also on the page's article: rhizome-page.css makes .dv-text a container,
   and its style containment scopes counters to what's inside */
.dv-local .dv-text, .dv-local .dv-text > .rz { counter-reset: dvl; }
.dv-local .dv-text :is(a[data-to], a[data-link], a[href^="#"])::after {
  counter-increment: dvl;
  content: counter(dvl);
  font: 9px Tahoma, sans-serif;
  vertical-align: super;
  color: #316ac5;
  margin-left: 1px;
}
.dv-links { margin: 8px 0 0; padding-left: 22px; color: #333; font-size: 11px; line-height: 1.45; }
.dv-links li::marker { color: #316ac5; font-size: 9px; }
.dv-faces { color: #666; }
.dv-bad, .dv-dead { color: #c00; }
.dv-plain { margin: 6px 0 0; color: #333; line-height: 1.45; }
.dv-label { color: #555; font-weight: bold; }
.dv-local [data-by="claude"] { outline: 1px dashed #c05; outline-offset: 2px; }

/* what needs attention: XP's task pane */
.dv-side {
  width: 230px;
  flex: none;
  overflow: auto;
  padding: 10px;
  background: linear-gradient(#7ba2e7, #6375d6);
}
.dv-box { background: #d6dff7; border-radius: 3px 3px 0 0; margin-bottom: 12px; overflow: hidden; }
.dv-box h4 {
  margin: 0;
  padding: 5px 8px;
  font: bold 11px Tahoma, sans-serif;
  color: #215dc6;
  background: linear-gradient(90deg, #fff, #c6d3f7);
}
.dv-box ul { margin: 0; padding: 6px 8px 8px 22px; }
.dv-box li { margin: 2px 0; }
.dv-box li span { color: #555; }
.dv-box li span.dv-guess { color: #a66a00; }
.dv-box a { color: #215dc6; }
.dv-note { margin: 6px 8px 0; color: #444; }
.dv-meter { margin: 6px 8px 8px; height: 10px; background: #fff; border: 1px solid #7f9db9; }
.dv-meter i { display: block; height: 100%; background: linear-gradient(#aceaa1, #3cb73a); }

.dv-foot { padding: 3px 8px; border-top: 1px solid #aca899; color: #000; }

/* notes: right-click anything in the text */
.dv-notebox ul { list-style: none; padding: 6px 8px 8px; }
.dv-notebox li { display: flex; gap: 5px; align-items: flex-start; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #aebde6; }
.dv-notebox li > div { flex: 1; min-width: 0; }
.dv-notebox li input { margin: 2px 0 0; }
.dv-notebox q { display: block; margin: 2px 0; color: #444; font-style: italic; quotes: "“" "”"; }
.dv-n-text { color: #000; outline: none; white-space: pre-wrap; }
.dv-n-text:focus { background: #fff; }
.dv-done { opacity: .55; }
.dv-done .dv-n-text { text-decoration: line-through; }
.dv-notebox button[data-act="note-del"] { border: 0; background: none; color: #555; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.dv-draft:not(:empty) { padding: 6px 8px; border-bottom: 1px solid #aebde6; }
.dv-draft textarea { width: 100%; box-sizing: border-box; margin: 4px 0; font: 11px Tahoma, sans-serif; }
.dv-draft-btns { display: flex; gap: 4px; }
.dv-ref { color: #333; }

/* A shop item's comments and flags, under its description. */
.dv-comments blockquote { margin: 8px 0 0 24px; font: 13px/1.45 "Times New Roman", serif; color: #333; }
.dv-comments p { margin: 0; }
.dv-comments cite { display: block; color: #777; font-size: 11px; font-style: normal; }
.dv-flags { margin-top: 8px; font-size: 11px; }