/* Sub-items, dependencies, chart and form views, files property, reminders (ext/databases2.js) */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* sub-items */
.d2-lead { display: inline-flex; align-items: center; flex: none; }
.d2-toggle, .d2-toggle-space { width: 20px; height: 20px; flex: none; }
.d2-toggle { border: 0; background: none; border-radius: 4px; cursor: pointer; color: var(--fg-muted); font-size: 12px; padding: 0; }
.d2-toggle:hover { background: var(--bg-active); color: var(--fg); }
.td-title { position: relative; }
.td-title .d2-lead { margin-right: 2px; }
.d2-add-sub { border: 0; background: var(--bg-elev); color: var(--fg-muted); border-radius: 4px; cursor: pointer; font-size: 12px; width: 22px; height: 22px;
  padding: 0; opacity: 0; flex: none; }
.td-title .d2-add-sub { position: absolute; right: 64px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 0 1px var(--border); }
.dblist-item .d2-add-sub { margin-left: auto; }
.tr:hover .d2-add-sub, .dblist-item:hover .d2-add-sub, .d2-add-sub:focus-visible { opacity: 1; }
.d2-add-sub:hover { background: var(--bg-active); color: var(--fg); }
.d2-context { opacity: .55; }
.d2-context:hover { opacity: .85; }
.tr.d2-new-sub { display: block; color: var(--fg-faint); font-size: 13px; padding: 4px 0; cursor: pointer; border-bottom: 1px solid var(--border); }
.tr.d2-new-sub:hover { background: var(--bg-hover); color: var(--fg-muted); }
.dblist-new.d2-new-sub { font-size: 13px; color: var(--fg-faint); }
.dblist-item { align-items: center; }

/* dependencies */
.d2-warn { color: var(--c-orange); font-size: 12px; cursor: help; }
.dbx-tl-item.d2-conflict { box-shadow: inset 0 0 0 1px var(--c-orange); }
.d2-arrows { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 1; }
.d2-arrow { fill: none; stroke: var(--fg-faint); stroke-width: 1.5; }
.d2-arrow.conflict { stroke: var(--c-orange); stroke-dasharray: 4 3; }
.d2-head { fill: var(--fg-faint); }
.d2-head-bad { fill: var(--c-orange); }

/* chart view */
.d2-chart { padding: 8px 0 16px; }
.d2-chart-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.d2-ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-muted); }
.d2-ctl .input { width: auto; padding: 3px 6px; font-size: 13px; }
.d2-figure { margin: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; }
.d2-svg { width: 100%; max-width: 760px; height: auto; flex: 1 1 480px; overflow: visible; }
.d2-svg.d2-donut { max-width: 340px; flex: 0 1 340px; }
.d2-grid { stroke: var(--border); stroke-width: 1; }
.d2-axis { stroke: var(--fg-faint); stroke-width: 1; }
.d2-tick, .d2-cat, .d2-axis-label { fill: var(--fg-muted); font-size: 12px; font-family: var(--font); }
.d2-axis-label { font-size: 12px; fill: var(--fg-faint); }
.d2-bar, .d2-slice, .d2-dot { outline: none; }
.d2-bar:hover, .d2-bar:focus, .d2-slice:hover, .d2-slice:focus { opacity: .8; }
.d2-bar:focus-visible, .d2-slice:focus-visible, .d2-dot:focus-visible { stroke: var(--accent); stroke-width: 2; }
.d2-slice { stroke: var(--bg); stroke-width: 2; }
.d2-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.d2-dot { stroke: var(--bg); stroke-width: 2; }
.d2-donut-total { fill: var(--fg); font-size: 28px; font-weight: 600; font-family: var(--font); }
.d2-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 140px; }
.d2-legend li { display: flex; align-items: center; gap: 6px; }
.d2-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.d2-chart-table { margin-top: 16px; }
.d2-table { border-collapse: collapse; font-size: 13px; min-width: 300px; }
.d2-table th, .d2-table td { border: 1px solid var(--border); padding: 4px 10px; text-align: left; }
.d2-table td { text-align: right; font-variant-numeric: tabular-nums; }
.d2-table thead th { background: var(--bg-hover); font-weight: 600; }

/* form view */
.d2-form { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; padding: 12px 0 24px; }
.d2-form-main { flex: 1 1 420px; max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.d2-form-head { display: flex; flex-direction: column; gap: 6px; }
.d2-form-title { font-size: 24px; font-weight: 700; border-color: transparent; padding-left: 0; }
.d2-form-desc { border-color: transparent; padding-left: 0; resize: vertical; }
.d2-form-title, .d2-form-desc, .d2-field-label, .d2-field-help { background: transparent; }
.d2-form-title:hover, .d2-form-desc:hover, .d2-field-label:hover, .d2-field-help:hover,
.d2-form-title:focus, .d2-form-desc:focus, .d2-field-label:focus, .d2-field-help:focus { border-color: var(--border); padding-left: 8px; }
.d2-form-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.d2-form-field { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-elev); }
.d2-field-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.d2-field-prop { font-size: 12px; color: var(--fg-muted); }
.d2-field-tools { display: inline-flex; align-items: center; gap: 2px; }
.d2-field-tools .check-row { font-size: 13px; margin-right: 6px; }
.d2-field-label { font-weight: 600; border-color: transparent; padding-left: 0; }
.d2-field-help { font-size: 13px; color: var(--fg-muted); border-color: transparent; padding-left: 0; }
.d2-preview { pointer-events: none; }
.d2-preview-box { border: 1px solid var(--border); border-radius: 6px; height: 32px; padding: 6px 10px; font-size: 13px; color: var(--fg-faint); }
.d2-preview-box.tall { height: 64px; }
.d2-preview-opt { margin-right: 12px; }
.d2-form-tail { display: flex; gap: 12px; flex-wrap: wrap; }
.d2-form-tail label { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg-muted); }
.d2-form-share { flex: 0 1 300px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 8px; }
.d2-form-share h3 { margin: 0; font-size: 15px; }
.d2-form-share > div { display: flex; flex-direction: column; gap: 8px; }
.d2-form-share .input { font-size: 12px; }

/* files property */
.d2-files { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.d2-file { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 2px; border-radius: 4px; background: var(--tag-default); color: var(--fg);
  text-decoration: none; font-size: 13px; max-width: 220px; overflow: hidden; white-space: nowrap; }
.d2-file img { width: 20px; height: 20px; object-fit: cover; border-radius: 3px; }
.d2-file:hover { background: var(--bg-active); }
.d2-files-pop { display: flex; flex-direction: column; gap: 8px; }
.d2-file-list .item { display: flex; align-items: center; gap: 6px; }
.d2-file-list .mi-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* reminders */
.d2-has-rem { display: inline-flex; align-items: center; gap: 4px; }
.d2-bell { font-size: 11px; opacity: .8; }
.d2-bell.sent { opacity: .35; }
.d2-remind { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 6px; }
.d2-remind .input { flex: 1; }

@media (max-width: 640px) {
  .d2-form-share { position: static; flex-basis: 100%; }
  .td-title .d2-add-sub { right: 4px; }
}