/* annotations — clip note rail, timeline pins and capture popover (plan 19).
   New file; app.css, annotate.css and clips.css are reused, never modified. */

.clipnote { margin-top: 1.25rem; border-top: 1px solid var(--border, #e2e5ea); padding-top: .75rem; }
.clipnote-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.clipnote-head h2 { margin: 0; font-size: 1rem; }
.clipnote-count { font-weight: 400; color: var(--muted, #6b7280); }
.clipnote-hint { margin: .35rem 0 .5rem; font-size: .82rem; }
.clipnote kbd {
  border: 1px solid var(--border, #d5d9e0); border-bottom-width: 2px; border-radius: 4px;
  padding: 0 .3em; font-size: .85em; background: var(--surface-2, #f5f6f8);
}

/* ---------------------------------------------------------------- the rail */

.clipnote-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
                 max-height: 30rem; overflow-y: auto; }
.clipnote-item {
  border: 1px solid var(--border, #e2e5ea); border-left: 3px solid transparent;
  border-radius: 6px; padding: .5rem .6rem; background: var(--surface, #fff);
}
.clipnote-item.is-open { border-left-color: var(--accent, #2563eb); background: var(--surface-2, #f8fafc); }
.clipnote-item-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.clipnote-time {
  font-variant-numeric: tabular-nums; font-weight: 600; cursor: pointer;
  border: 0; background: none; padding: 0; color: var(--accent, #2563eb);
  min-height: 44px; min-width: 44px; text-align: left;
}
.clipnote-step { font-size: .78rem; margin-top: .15rem; }
.clipnote-body { margin: .3rem 0 .2rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.clipnote-foot { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .78rem; }
.clipnote-openlink { margin-left: auto; }
.clipnote-thumb {
  display: block; width: 100%; max-width: 100%; height: auto; margin: .35rem 0;
  border-radius: 4px; border: 1px solid var(--border, #e2e5ea);
}
.clipnote-module {
  border: 1px solid var(--border, #d5d9e0); border-radius: 999px;
  padding: 0 .45em; font-size: .72rem;
}
.clipnote-empty { padding: .4rem 0; font-size: .85rem; }

/* ---------------------------------------------------------------- pills */

.clipnote-pill {
  border-radius: 999px; padding: .05em .5em; font-size: .72rem; text-transform: lowercase;
  border: 1px solid transparent;
}
.clipnote-pill.clipnote-open        { background: #fef3c7; color: #92400e; }  /* amber */
.clipnote-pill.clipnote-acknowledged{ background: #fef3c7; color: #92400e; }
.clipnote-pill.clipnote-in_progress { background: #dbeafe; color: #1e40af; }  /* blue  */
.clipnote-pill.clipnote-resolved    { background: #dcfce7; color: #166534; }  /* green */
.clipnote-pill.clipnote-wont_fix    { background: #e5e7eb; color: #374151; }  /* grey  */
.clipnote-pill.clipnote-flag        { background: #f3e8ff; color: #6b21a8; cursor: help; }

/* ---------------------------------------------------------------- pins */

.clipnote-pins { position: relative; height: 14px; margin-top: -2px; }
.clipnote-pin {
  position: absolute; top: 0; width: 10px; height: 14px; padding: 0;
  transform: translateX(-50%); cursor: pointer; border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .25);
}
.clipnote-pin.is-open { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }

/* ---------------------------------------------------------------- popover */

.clipnote-popover {
  border: 1px solid var(--border, #d5d9e0); border-radius: 8px; padding: .6rem;
  margin: .5rem 0; background: var(--surface, #fff);
  box-shadow: 0 6px 24px rgba(15, 23, 42, .12);
}
.clipnote-context { font-size: .78rem; margin-bottom: .35rem; }
.clipnote-input { width: 100%; box-sizing: border-box; font: inherit; padding: .4rem; }
.clipnote-selects { display: flex; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }
.clipnote-selects label { display: flex; flex-direction: column; font-size: .75rem; gap: .15rem; }
.clipnote-actions { display: flex; gap: .4rem; justify-content: flex-end; margin-top: .5rem; }
.clipnote-actions .btn { min-height: 44px; }
.clipnote-error { color: #b91c1c; font-size: .8rem; margin: .35rem 0 0; }

@media (max-width: 640px) {
  .clipnote-rail { max-height: none; }
  .clipnote-popover { margin-left: 0; margin-right: 0; }
}