/* The entity panel and the lightbox. The notes page and the admin page share them. */
dialog#detail {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: 400px; max-width: 100vw; height: 100%; max-height: none;
  border: 0; border-left: .5px solid var(--border); border-radius: 24px 0 0 24px; background: var(--panel); color: var(--text); box-shadow: var(--sh-side);
}
dialog#detail::backdrop, dialog#lightbox::backdrop { background: rgba(0, 0, 0, .4); }
dialog#lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.detail-inner { display: flex; flex-direction: column; height: 100%; }
.detail-head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 8px; }
.detail-head h2 { flex: 1; margin: 0; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.detail-close { flex: none; width: 44px; height: 44px; border-radius: 22px; border: .5px solid var(--glass-b); background: var(--glass); box-shadow: var(--sh-glass); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.detail-close:hover { border-color: var(--acc-text); color: var(--acc-text); }
.detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 24px; }
.detail-type { font-size: 12px; color: var(--acc-text); font-weight: 600; }
.detail-badge { display: inline-block; margin-top: 6px; padding: 1px 8px; border: .5px solid var(--glass-b); border-radius: 10px; color: var(--muted); font-size: 11px; }
.detail-description { margin-top: 8px; color: var(--text2); font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.detail-world { margin-top: 8px; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.detail-osm-links { margin-top: 4px; display: flex; gap: 12px; font-size: 12.5px; }
.detail-osm-links a { color: var(--accent, inherit); }
.detail-osm-credit { margin-top: 2px; color: var(--muted); font-size: 11px; }
.detail-reminder-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.detail-reminder-line .detail-input { flex: 1 1 140px; width: auto; margin-top: 0; }
.detail-reminder-line .detail-field-note { flex: 1 0 100%; margin-bottom: 0; }
.detail-reminder-remove { flex: 0 0 auto; cursor: pointer; }
.detail-fields .detail-button { margin-top: 10px; }
.detail-reminder { margin-top: 8px; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.detail-section { margin: 20px 0 6px; font-size: 13px; font-weight: 700; color: var(--text2); }
/* A relation of the entity: subject, label, object. It wraps on a narrow screen. */
.detail-relation { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--text2); overflow-wrap: anywhere; }
.detail-relation-self { font-weight: 600; color: var(--text); }
.detail-relation-link { padding: 0; border: 0; background: none; font: inherit; color: var(--acc-text); text-align: left; cursor: pointer; }
.detail-relation-link:hover { text-decoration: underline; }
.detail-relation-tag { color: var(--muted); font-size: 12px; }
.detail-row { display: flex; align-items: flex-start; gap: 4px; border-radius: 10px; }
.detail-row:hover { background: var(--selected); }
.detail-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 0; background: none; text-align: left; cursor: pointer; }
.detail-date { font-size: 11.5px; color: var(--muted); }
.detail-preview { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.detail-extra { flex: none; display: flex; align-items: center; padding-top: 8px; }
.detail-score { font-size: 11.5px; color: var(--acc-text); }
/* The details of a task or an event. The admin page has fewer tokens, so each one has a fallback. */
.detail-field { margin-top: 12px; }
.detail-field.saving { opacity: .6; pointer-events: none; }
.detail-field-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.detail-field-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.detail-tag { font-size: 10.5px; padding: 1px 7px; border-radius: 10px; background: var(--chip, var(--selected)); color: var(--acc-text); }
.detail-source { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--acc-text); cursor: pointer; text-decoration: underline; }
.detail-field-text { color: var(--text2); font-size: 14px; overflow-wrap: anywhere; }
.detail-field-note { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.detail-input { display: block; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 36px; padding: 6px 10px; margin-top: 4px; font: inherit; font-size: 14px; color: var(--text); background: var(--panel); border: .5px solid var(--border); border-radius: 12px; }
.detail-input:first-of-type { margin-top: 0; }
.detail-input:focus { outline: 0; border-color: var(--acc, var(--acc-text)); box-shadow: 0 0 0 3px var(--halo, transparent); }
.detail-switch { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.detail-chips:empty { display: none; }
.detail-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 12px; border-radius: 14px; border: .5px solid transparent; background: var(--chip, var(--selected)); color: var(--text2); font: inherit; font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
button.detail-chip { cursor: pointer; }
.detail-chip.on { background: var(--acc, var(--acc-text)); border-color: var(--acc, var(--acc-text)); color: var(--on-acc, #fff); }
.detail-chip.entity { padding-right: 4px; }
.detail-chip-x { width: 22px; height: 22px; border: 0; border-radius: 11px; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.detail-chip-x:hover { color: var(--acc-text); }
.detail-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.detail-items:empty { display: none; }
.detail-item { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; border-radius: 12px; background: var(--chip, var(--selected)); color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; }
.detail-item input { margin: 0; accent-color: var(--acc, var(--acc-text)); }
.detail-item-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.detail-item.done .detail-item-name { text-decoration: line-through; color: var(--muted); }
.detail-lists { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.detail-lists.saving { opacity: 0.6; }
.detail-lists .detail-field-head { margin-top: 6px; }
.detail-item .detail-relation-link { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-chip.unresolved { border: 1px dashed var(--muted); }
.detail-chip-q { width: 22px; height: 22px; border: 0; border-radius: 11px; background: var(--halo, transparent); color: var(--acc-text); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; }
/* The "Which one?" pane: one row for each candidate, with its chance. */
.which-row { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px 12px; border: .5px solid var(--border); border-radius: 16px; background: var(--panel); color: var(--text); font: inherit; text-align: left; }
button.which-row { cursor: pointer; }
button.which-row:hover { background: var(--selected); }
.which-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.which-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.which-meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.which-pct { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--acc-text); }
.detail-results { display: flex; flex-direction: column; margin-top: 4px; }
.detail-result { text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.detail-result:hover { background: var(--selected); }
.detail-result.create { color: var(--acc-text); }
dialog#lightbox { position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; background: transparent; cursor: zoom-out; }
dialog#lightbox[open] { display: flex; align-items: center; justify-content: center; }
dialog#lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: 8px; }
.lightbox-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 20px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.detail-images { display: flex; gap: 8px; max-width: 100%; margin: 0 0 12px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.detail-image { flex: none; height: 120px; padding: 0; border: 0; border-radius: 12px; background: var(--chip, var(--selected)); overflow: hidden; cursor: zoom-in; scroll-snap-align: start; }
.detail-image img { display: block; height: 120px; width: auto; max-width: none; object-fit: cover; }
dialog.image-viewer { position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; background: rgba(0, 0, 0, .92); color: #fff; touch-action: pan-y; }
dialog.image-viewer::backdrop { background: rgba(0, 0, 0, .92); }
dialog.image-viewer[open] { display: flex; align-items: center; justify-content: center; }
dialog.image-viewer img { max-width: 100vw; max-height: 100vh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.image-viewer-button { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.image-viewer-button[hidden] { display: none; }
.image-viewer-button.close { top: 14px; right: 14px; }
.image-viewer-button.prev { left: 12px; top: 50%; transform: translateY(-50%); }
.image-viewer-button.next { right: 12px; top: 50%; transform: translateY(-50%); }
.image-viewer-credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .7)); font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.image-viewer-credit a { color: #fff; }
@media (max-width: 900px) {
  dialog#detail {
    inset: auto 0 0 0; width: 100%; height: auto; max-height: 80vh; border-left: 0; border-top: .5px solid var(--border);
    border-radius: 40px 40px 0 0; box-shadow: var(--sh-sheet);
  }
  .detail-inner { height: auto; max-height: 80vh; }
}
/* The collections of the Ongoing tab. */
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.detail-button { height: 28px; padding: 0 12px; font-size: 12px; }
/* .pill sets display, which wins over the hidden attribute: a hidden button (the Cancel of an unlink that is not asked yet) must not show. */
.detail-button[hidden] { display: none; }
.detail-found { margin-top: 8px; }
/* The switch "New" | "Link to existing" of the pane "New entity". */
.detail-modes { display: flex; gap: 6px; margin-bottom: 12px; }
.detail-modes .detail-button { flex: 1; min-width: 0; height: 32px; }
.detail-modes .detail-button[aria-pressed="true"] { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--acc-text); }
.detail-check-row { display: block; margin-top: 8px; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.detail-result-type { color: var(--placeholder); font-size: 12px; }
textarea.detail-input { resize: vertical; }
.detail-candidate { cursor: pointer; align-items: center; padding-right: 10px; }
.detail-check { flex: none; margin-left: 10px; }
.detail-bar { flex: none; width: 36px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.detail-bar-fill { display: block; height: 100%; background: var(--acc-text); }
/* The pane of a note: a thing with its "Unlink from this note" button under the name, and a Recall item with its "×". */
.detail-thing { flex-wrap: wrap; }
.detail-thing .detail-open { flex: 1 1 100%; padding-bottom: 2px; }
.detail-thing .detail-extra { flex: 1 1 100%; gap: 8px; padding: 0 10px 8px; }
.detail-danger { color: var(--error, var(--acc-text)); border-color: var(--error, var(--acc-text)); }
.recall-item { display: flex; align-items: center; gap: 4px; }
.recall-item .which-row { flex: 1; width: auto; min-width: 0; }
/* The personal fields of an entity, and the pane "New entity". */
.detail-personal-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
.detail-personal-row .detail-field-text { flex: 1 1 120px; min-width: 0; }
.detail-personal-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.detail-personal-form .detail-input { flex: 1 1 120px; width: auto; min-width: 0; margin-top: 0; }
.detail-error { margin-top: 8px; font-size: 12.5px; color: var(--error, var(--acc-text)); overflow-wrap: anywhere; }
.detail-error:empty { display: none; }
.detail-preview-fields { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.detail-preview-fields .detail-field-note { flex: 1 0 100%; }
.detail-preview-fields .detail-field-label { font-weight: 400; }
.detail-button:disabled { opacity: .5; cursor: default; }
/* The pane of a topic: a timeline with a dot for each note on one vertical line. */
.topic-timeline { position: relative; display: flex; flex-direction: column; padding: 4px 0 4px 18px; }
.topic-timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1.5px; background: var(--border); }
.topic-day { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--text2); }
.topic-day:first-child { margin-top: 4px; }
.topic-row { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.topic-row:hover { background: var(--selected); }
.topic-dot { position: absolute; left: -18px; top: 14px; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; background: var(--panel); border: 2px solid var(--acc); }
.topic-time { flex: none; min-width: 3.2em; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.topic-text { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.topic-more { margin: 10px 0 0 18px; padding: 7px 14px; border: .5px solid var(--border); border-radius: 14px; background: var(--chip); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.topic-more[hidden] { display: none; }
.detail-head h2 svg { vertical-align: -3px; color: var(--acc-text); }