/* Page-annotation panel for the replay viewer. Its values come from
   /assets/tokens.css, which viewer.html links first. */

#anno-panel {
  flex: 0 0 340px;
  min-width: 0;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--rule);
  font-family: var(--sans);
  color: var(--ink);
  font-size: var(--t-sm);
}
#anno-panel[hidden] {
  display: none;
}

.anno-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--panel);
}
.anno-count {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0 0.45rem;
}
.anno-close {
  margin-left: auto;
  border: none;
  background: none;
  font-size: var(--t-lg);
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.anno-tools {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) 0;
}
.anno-tools button {
  font: inherit;
  font-size: var(--t-sm);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--accent-dk);
  cursor: pointer;
  text-align: left;
}
.anno-tools button[disabled] {
  color: var(--muted);
  opacity: 0.6;
  border-color: var(--rule);
  cursor: default;
}
.anno-tools button:hover:not([disabled]) {
  background: var(--accent-wash);
}

.anno-list {
  list-style: none;
  margin: 0;
  padding: var(--s-2) var(--s-4) var(--s-5);
}
.anno-empty,
.anno-hint {
  color: var(--muted);
  font-size: var(--t-sm);
}
.anno-empty {
  padding: var(--s-3) 0;
}
.anno-hint {
  padding: var(--s-3) var(--s-4) 0;
}
.anno-hint p {
  overflow-wrap: anywhere;
}
.anno-quote {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--mark);
  max-height: 8rem;
  overflow-y: auto;
  white-space: pre-wrap;
}

.anno-item {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--page);
  padding: var(--s-3) var(--s-4) var(--s-4);
  margin-top: var(--s-3);
}
.anno-item.has-region {
  cursor: pointer;
}
/* The note whose passage is emphasised in the page. */
.anno-item.focused {
  border-color: var(--mark);
  box-shadow: inset 3px 0 0 var(--mark);
}
.anno-item.has-region:hover {
  border-color: var(--rule);
}
.anno-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--t-xs);
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.anno-author {
  font-weight: var(--w-bold);
  color: var(--muted);
}
.anno-body {
  font-family: var(--serif);
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.anno-body > :first-child {
  margin-top: 0;
}
.anno-body > :last-child {
  margin-bottom: 0;
}
/* Markdown-rendered note body in the narrow (340px) panel: keep headings,
   lists and code from ballooning or over-indenting. */
.anno-body p {
  margin: 0.5rem 0;
}
.anno-body h1,
.anno-body h2,
.anno-body h3,
.anno-body h4,
.anno-body h5,
.anno-body h6 {
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  margin: 0.7rem 0 0.3rem;
  line-height: 1.3;
}
.anno-body ul,
.anno-body ol {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
}
.anno-body a {
  color: var(--accent-dk);
}
.anno-body hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0.7rem 0;
}
.anno-body blockquote {
  margin: 0.5rem 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}
.anno-body code {
  background: var(--panel-2);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.85em;
}
.anno-body pre {
  background: var(--panel-2);
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  overflow-x: auto;
}
/* A code block's <code> shouldn't double the background/padding. */
.anno-body pre code {
  background: none;
  padding: 0;
}
/* While a note is being edited, its form has the only buttons that apply. */
.anno-item:has(.anno-composer) .anno-actions {
  display: none;
}
.anno-actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.anno-actions button {
  font: inherit;
  font-size: var(--t-xs);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}
.anno-actions button.danger:hover {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-wash);
}

/* A new note's form sits in the panel itself, so it takes the panel's inset;
   an edited note's form sits inside its card, which already has one. */
#anno-composer-host:not(:empty) {
  padding: 0 var(--s-4) var(--s-4);
}
#anno-composer-host .anno-hint {
  padding-left: 0;
  padding-right: 0;
}
.anno-composer {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.anno-composer textarea {
  font: inherit;
  font-size: var(--t-sm);
  width: 100%;
  padding: var(--s-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  resize: vertical;
}
.anno-public-note {
  margin: 0.35rem 0 0;
  font-size: var(--t-xs);
  color: var(--muted);
}
.anno-composer-row {
  display: flex;
  gap: 0.4rem;
}
.anno-composer button {
  font: inherit;
  font-size: var(--t-xs);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--accent-dk);
  cursor: pointer;
}
.anno-composer button.primary {
  background: var(--accent);
  color: var(--page);
  border-color: var(--accent);
}
.anno-composer button.primary:hover {
  background: var(--accent-dk);
}

/* Banner toggle button (lives in #banner). */
#anno-toggle {
  font: inherit;
  font-size: var(--t-xs);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--page);
  color: var(--accent-dk);
  cursor: pointer;
  white-space: nowrap;
}
#anno-toggle:hover {
  background: var(--accent-wash);
}

@media (max-width: 720px) {
  #anno-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 85%;
    max-width: 340px;
    z-index: 2;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.12);
  }
}