/* Styles for the HTML the plugin makes from Obsidian syntax. Set the
   --obsidian-* variables (on :root, say) to fit a site's colours; each has a
   light-theme fallback. */

mark {
   background: var(--obsidian-mark, #fef08a);
   color: inherit;
   border-radius: 0.2em;
   padding: 0 0.15em;
}

/* ==🔴text== and the other colours. Like Obsidian, a 30% tint of the colour;
   set --obsidian-highlight-<colour> to choose your own. */
mark[data-highlight="red"] { background: var(--obsidian-highlight-red, color-mix(in srgb, var(--obsidian-red, #dc2626) 30%, transparent)); }
mark[data-highlight="orange"] { background: var(--obsidian-highlight-orange, color-mix(in srgb, var(--obsidian-orange, #ea580c) 30%, transparent)); }
mark[data-highlight="yellow"] { background: var(--obsidian-highlight-yellow, color-mix(in srgb, var(--obsidian-yellow, #eab308) 30%, transparent)); }
mark[data-highlight="green"] { background: var(--obsidian-highlight-green, color-mix(in srgb, var(--obsidian-green, #16a34a) 30%, transparent)); }
mark[data-highlight="blue"] { background: var(--obsidian-highlight-blue, color-mix(in srgb, var(--obsidian-blue, #2563eb) 30%, transparent)); }
mark[data-highlight="purple"] { background: var(--obsidian-highlight-purple, color-mix(in srgb, var(--obsidian-purple, #9333ea) 30%, transparent)); }

.tag {
   font-size: 0.875em;
   color: var(--obsidian-accent, #3b82f6);
   background: color-mix(in srgb, var(--obsidian-accent, #3b82f6) 12%, transparent);
   border-radius: 999px;
   padding: 0.1em 0.55em;
}

.callout {
   --callout: var(--obsidian-accent, #3b82f6);
   border-left: 0.25rem solid var(--callout);
   background: color-mix(in srgb, var(--callout) 10%, transparent);
   border-radius: 0.375rem;
   margin: 1.6em 0;
   padding: 0.75em 1em;
}

.callout[data-callout="tip"],
.callout[data-callout="hint"],
.callout[data-callout="important"],
.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] { --callout: var(--obsidian-green, #16a34a); }
.callout[data-callout="question"],
.callout[data-callout="help"],
.callout[data-callout="faq"],
.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"] { --callout: var(--obsidian-orange, #ea580c); }
.callout[data-callout="failure"],
.callout[data-callout="fail"],
.callout[data-callout="missing"],
.callout[data-callout="danger"],
.callout[data-callout="error"],
.callout[data-callout="bug"] { --callout: var(--obsidian-red, #dc2626); }
.callout[data-callout="example"] { --callout: var(--obsidian-purple, #9333ea); }
.callout[data-callout="quote"],
.callout[data-callout="cite"] { --callout: var(--obsidian-muted, #6b7280); }

.callout-title {
   font-weight: 600;
   color: var(--callout);
}

summary.callout-title {
   cursor: pointer;
}

.callout-content > :first-child { margin-top: 0.5em; }
.callout-content > :last-child { margin-bottom: 0; }

.task-list-item {
   list-style: none;
}

.task-list-item input {
   margin: 0 0.4em 0 -1.4em;
   vertical-align: middle;
}

.math {
   overflow-x: auto;
}

.mermaid {
   --pele-bg: var(--obsidian-bg, #fff);
   --pele-fg: var(--obsidian-text, #111827);
   --pele-muted: var(--obsidian-muted, #6b7280);
   --pele-line: var(--obsidian-line, #374151);
   --pele-surface: var(--obsidian-surface, #e5e7eb);
   --pele-surface-alt: var(--obsidian-surface-alt, #f3f4f6);
   --pele-border: var(--obsidian-border, #d1d5db);
   --pele-accent: var(--obsidian-accent, #3b82f6);
   --pele-font: var(--obsidian-font, sans-serif);
   --pele-font-mono: var(--obsidian-font-mono, monospace);
   margin: 2em 0;
   overflow-x: auto;
   text-align: center;
}

.pdf-embed {
   width: 100%;
   height: 600px;
   border: 1px solid var(--obsidian-border, #d1d5db);
   border-radius: 0.375rem;
}

.youtube-embed {
   width: 100%;
   aspect-ratio: 16 / 9;
   border: 0;
   border-radius: 0.375rem;
}

.footnotes {
   font-size: 0.875em;
   color: var(--obsidian-muted, #6b7280);
}

.footnote-ref a,
.footnote-backref {
   text-decoration: none;
}

/* Bases (when the site has no bases/<view>.njk template) */

.base-view {
   margin: 1.6em 0;
}

.base-group-title {
   font-size: 1em;
   color: var(--obsidian-muted, #6b7280);
}

.base-table table {
   width: 100%;
   border-collapse: collapse;
}

.base-table th,
.base-table td {
   text-align: left;
   padding: 0.4em 0.6em;
   border-bottom: 1px solid var(--obsidian-border, #d1d5db);
}

.base-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(var(--base-card-size, 200px), 100%), 1fr));
   gap: 1rem;
}

.base-card,
a.base-card {
   display: flex;
   flex-direction: column;
   gap: 0.25em;
   border: 1px solid var(--obsidian-border, #d1d5db);
   border-radius: 0.5rem;
   padding: 0.75em;
   color: inherit;
   text-decoration: none;
}

a.base-card:hover {
   border-color: var(--obsidian-accent, #3b82f6);
}

/* imageAspectRatio is height / width, as in Obsidian (1 by default). */
.base-card img {
   width: 100%;
   aspect-ratio: var(--base-card-image-ratio, 1);
   object-fit: cover;
   border-radius: 0.375rem;
   margin: 0;
}

.base-card-title {
   font-weight: 600;
}

.base-card-property {
   font-size: 0.875em;
   color: var(--obsidian-muted, #6b7280);
}

.base-image-contain .base-card img {
   object-fit: contain;
}

.base-list-plain {
   list-style: none;
   padding-left: 0;
}

.base-list-property {
   padding-left: 1.25em;
   font-size: 0.875em;
   color: var(--obsidian-muted, #6b7280);
}

.base-table tfoot td {
   font-weight: 600;
   border-bottom: 0;
}

.base-summary-name {
   font-weight: 400;
   font-size: 0.75em;
   text-transform: uppercase;
   color: var(--obsidian-muted, #6b7280);
}

.base-kanban {
   display: flex;
   gap: 1rem;
   overflow-x: auto;
   padding-bottom: 0.5rem;
}

.base-kanban-column {
   flex: 0 0 var(--base-card-size, 220px);
   background: color-mix(in srgb, var(--obsidian-muted, #6b7280) 8%, transparent);
   border-radius: 0.5rem;
   padding: 0.5rem;
}

.base-kanban .base-kanban-title {
   font-size: 0.875em;
   margin: 0.25em 0.25em 0.75em;
}

.base-kanban-count {
   font-weight: 400;
   color: var(--obsidian-muted, #6b7280);
}

.base-kanban-cards {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.base-map-canvas {
   width: 100%;
   border-radius: 0.5rem;
   overflow: hidden;
}

/* The list of places is for when the map can't be drawn. */
.base-map.is-drawn .base-map-places {
   display: none;
}