/* --- Reset and normalisation --- */

/* Better focus-visible for keyboard accessibility */
*:focus-visible {
	outline-color: currentColor;
	outline-style: solid;
	outline-offset: .125rem;
	outline-width: .125rem;
}

/* Box-sizing reset for easier layouts */
*,
::before,
::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box; /* Define base box-sizing */
	-moz-tab-size: 4; /* Default tab size and line-height */
	tab-size: 4;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%; /* Prevent some devices from zooming in automatically, for ex. when rotating them */
}

/* Make sure the body fills up the screen, reset default page margins */
body {
	min-height: 100vh;
	margin: 0;
  padding: 0;
}

/* Basic defaults for titles */
h1,
h2,
h3,
h4 {
	font-weight: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Ensure that embedded content doesn't overflow its container  */
audio,
iframe,
img,
picture,
svg,
video {
	max-width: 100%;
}

/* Make images easier to deal with */
img,
picture {
	height: auto;
	max-width: 100%;
	vertical-align: top;
}

/* Reset hr styling */
hr {
	height: 0;
	border: 0.075rem solid currentColor;
	color: inherit;
}

/* Remove list style from menus */
menu {
	list-style: none;
	padding-inline-start: 0;
}

/* Keep list markers inside the list block */
ul,
ol {
	list-style: inside;
}

/* Monospace items defaults */
code,
kbd,
samp,
pre {
	font-family: monospace;
	font-size: 1em;
}

/* Normalise small font size */
small {
	font-size: 80%;
}

/* Prevent 'sub' and 'sup' from affecting line height */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* better table styling */
table {
	border-collapse: collapse; /* Remove space between cells in tables */
	text-indent: 0; /* Remove unwanted spacing */
	border-color: inherit;
}

/* Add default styling to interactive elements */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: 1.5rem;
	margin: 0;
}

button,
select {
	text-transform: none;
}

/* Allows styling in some iOS / Safari */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/* Make textareas easier to use */
textarea {
	resize: vertical;
}

textarea:not([rows]) {
	min-height: 6rem;
}

/* Remove red halo on some Firefox */
:-moz-ui-invalid {
	box-shadow: none;
}

legend {
	padding: 0;
}

progress {
	vertical-align: baseline;
}

/* Correct the cursor style of increment and decrement buttons in Safari */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
}

/* Removes some default padding and buttons */
::-webkit-search-decoration,
::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Add the correct display in Chrome and Safari */
summary {
	display: list-item;
}

/* Reset some margins */
figure {
	margin-inline: 0;
}

/* Make forms easier to work with */
form {
  display: block;
}

/* Prevent children from stretching fieldsets */
fieldset {
	min-width: 0;
	margin: 0;
}

/* Form defaults */
input,
label,
select,
textarea {
  display: block;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-block;
}

input:last-child,
select:last-child,
textarea:last-child {
  margin-bottom: 0;
}

audio,
video,
input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
select,
meter,
progress,
textarea {
  width: 100%;
  max-width: 100%;
}

/* Anchors should have extra scroll margin */
:target {
  scroll-margin-block: 2em;
}

/* --- Base styles --- */

/* Variables */

:root {

	/* Font-families */
	--font-body: "Radio Canada Web",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Helvetica,
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol";

	--font-title: "Radio Canada Web",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Helvetica,
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol";

	/* Colours */
	--color-white: #fffdf6;
	--color-shadow: #23038d;
	--color-dark: #06024f;
	--color-black: #0a022d;
	--color-highlight: #EC80FF;

	/* Sizes */
	--max-width-large: 58rem;
	--max-width: 42rem;

	/* White spaces */
	--space-tiny: 0.25rem;
	--space-small: 0.5rem;
	--space-medium: 1rem;
	--space-large: 2rem;

	/* Misc values */
	--border-radius: 0.25rem;
	--border-round: 3rem;
}

/* Global */

body {
	position: relative;
  font-family: var(--font-body);
	background: var(--color-dark);
  color: var(--color-white);
  overflow-x: hidden;
}

menu {
	display: flex;
	flex-direction: row;
	gap: var(--space-medium);
}

video {
  background-color: var(--color-black);
}

hr {
  position: relative;
  max-width: var(--max-width);
  height: 1.5rem;
  margin: var(--space-medium) auto;
  border: none;
  background: url('/hr.svg') center center no-repeat;
  background-size: contain;
}

hr::before,
hr::after {
  content: " ";
  display: inline-block;
  position: absolute;
  width: 50%;
  top: 0.75rem;
  border-top: 2px solid currentColor;
}

hr::before {
  left: -1.5rem;
}

hr::after {
  right: -1.5rem;
}

/* Tables */

table {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  overflow-x: auto;
  white-space: nowrap;
  border: 2px solid var(--color-black);
  border-radius: var(--border-radius);
  border-spacing: 0;
}

caption {
  text-align: left;
  background: var(--color-white);
}

caption,
td,
th,
tr {
  padding: var(--space-small) var(--space-medium);
}

thead {
  margin: 0;
  padding: 0;
}

/* Links, inputs, forms */

fieldset,
input,
select,
textarea {
  border: 2px solid var(--color-shadow);
  border-radius: var(--border-radius);
}

input,
select,
textarea {
  background: var(--color-white);
}

input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
select,
textarea {
  padding: var(--space-small) var(--space-medium);
}

label {
  margin-block-end: var(--space-tiny);
}

input[type="submit"],
button,
.button,
a {
  cursor: pointer;
	color: currentColor;
  transition: color 0.1s, background-color 0.1s, border-color 0.1s;
}

input[type="submit"],
button,
.button {
  position: relative;
  padding: calc(var(--space-small) - 0.1rem) var(--space-medium);
  font-family: var(--font-body);
  text-decoration: none;
	background: transparent;
  border: 0.1rem solid;
  border-radius: var(--border-round);
}

.button {
  display: inline-block;
}

button:hover,
button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
.button:hover,
.button:focus-visible {
  color: var(--color-white);
  background: var(--color-black);
  border-color: var(--color-black);
  outline-color: var(--color-black);
}

/* --- Typography --- */

@font-face {
  font-family: "Geist Web";
  src: url('/site/templates/styles/fonts/subset-Geist-Regular.woff2') format("woff2"),
       url('/site/templates/styles/fonts/subset-Geist-Regular.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Web";
  src: url('/site/templates/styles/fonts/subset-Geist-Bold.woff2') format("woff2"),
       url('/site/templates/styles/fonts/subset-Geist-Bold.woff') format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Set fluid base font size */
html {
	--mult: clamp(0px, calc((100vw - 360px) / (1280 - 360)), 1px);
	font-size: clamp(1rem, calc(1rem + 8 * var(--mult)), 20px);
}

/* Baseline grid, disable when not checking vertical rhythm */
/*
body::before {content: " ";position: absolute;top:0;bottom:0;left:0;right:0;background:linear-gradient(to bottom, rgba( 32,160,255,.35 ) 1px, transparent 1px);background-size:100% 0.5rem;z-index:1;pointer-events: none;}
*/

body {
  font-family: "Geist Web", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
menu,
figcaption,
address,
legend,
pre {
	--baselines: 1.5;
	--beneath: 0.5;
	--baseline-shift: calc(calc(calc(var(--baselines) * 1rem) - 1cap) / 2);
	--baseline-push: calc(calc(var(--beneath) * 1rem) - var(--baseline-shift));
  
	line-height: calc(var(--baselines) * 1rem);
	padding-top: var(--baseline-shift);
	padding-bottom: var(--baseline-push);
  margin-block: 0;
}

h1 {
	--baselines: 2.5;
  --beneath: 1;
  margin-block-start: 0.5rem;
  font-size: 2rem;
  font-weight: bold;
  font-variant-ligatures: discretionary-ligatures; 
  text-wrap: balance;
  letter-spacing: -0.02em;
  color: var(--color-highlight);
}

@media all and (max-width: 24rem) {
  h1 {
    --baselines: 2;
  	font-size: 1.5rem;
  }
}

h2 {
  --baselines: 1.5;
  font-size: 1.4rem;
  font-weight: bold;
}

a {
  color: currentColor;
}

a:hover,
a:focus-visible {
  color: currentColor;
}

a > code {
  text-decoration: underline;
  transition: color 0.1s, background-color 0.1s;
}

pre {
  white-space: pre-wrap;
}

pre > code {
  display: block;
  padding: 0.25rem 0.5rem;
}

b {
  font-weight: bold;
}

mark,
code,
kbd,
samp {
  padding: 0 0.2rem;
  border-radius: var(--border-radius);
  color: inherit;
}

mark {
  background-color: var(--color-highlight);
}

kbd,
code,
samp {
  background-color: var(--color-white);
  color: var(--color-black);
}

cite {
  font-style: italic;
}

dl {
	display: grid;
  align-items: start;
	grid-template-columns: max-content 1fr;
  column-gap: 0.5rem;
  row-gap: 0;
}

dt::after {
  content: ":";
}

dd {
  grid-column-start: 2;
  padding-left: 0.5rem;
  margin-left: 0;
  border-left: 0.1rem solid var(--color-shadow);
}

dt {
  text-align: right;
  font-weight: bold;
  color: var(--color-black);
}

dd + dt,
dd + dt + dd {
  margin-top: 0.5rem;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-inline: 0;
  margin: 0;
}

ul {
  padding-left: 1rem;
}

li {
  list-style-position: inside;
}

li::marker {
	line-height: 0;
}

ul > li {
  list-style: none;
}

li > ul {
  padding-left: 1rem;
}

li > ul,
li > ol {
  padding-block-start: 0.5rem;
  padding-block-end: 0;
}

.flow > * + * {
  margin-top: 1rem;
}

:lang(en-GB) > * {
  quotes: '‘' '’' '“' '”'; /* ‘British “style”’ */
} 

:lang(fr) > * {
  quotes: '«\00202F' '\00202F»' '“' '”'; /* « French “style” » */
}

q::before {
  content: open-quote
}

q::after  {
  content: close-quote
}

blockquote,
.blockquote-source {
  padding-left: 1rem;
  margin: auto;
  border-left: 0.25rem solid var(--color-shadow);
}

blockquote + .blockquote-source {
  margin-top: 0;
}

blockquote,
figcaption {
  font-style: italic;
}

figure {
  padding: 0.4rem 0;
  margin: 0;
  border-top: 0.1rem solid var(--color-shadow);
  border-bottom: 0.1rem solid var(--color-shadow);
}

nav {
  margin: 1rem 0;
}

nav ul {
  flex-direction: row;
  gap: 1rem;
  padding: 0;
}

nav li::before {
  content: none;
}

td {
  font-variant-numeric: tabular-nums lining-nums slashed-zero;    
}

.uppercase {
	text-transform: uppercase;
	font-variant: small-caps;
}

/* --- Base styles --- */

/* Base wrapper */

.base-header {
  padding-block: var(--space-small);
	padding-inline: var(--space-medium);
  background: var(--color-black);
  background-image:
    url('/site/templates/styles/images/supernova-header.jpg');
  background-position: center;
  background-size: cover;
  color: var(--color-white);
}

.base-header > a {
  display: inline-block;
  padding-block: var(--space-tiny);
}

.base-logo {
  width: 10rem;
}

.home-welcome {
	padding-inline: var(--space-medium);
}

.base-footer {
  position: fixed;
  bottom: 0;
  right: 0;
  padding-block: var(--space-medium);
  padding-inline: var(--space-medium);
  text-align: center;
  background: var(--color-black);
  z-index: 1;
  border-top-left-radius: 1.5rem;
}

.top-link {
  padding: var(--space-tiny) var(--space-medium);
  text-decoration: none;
  border: 2px solid;
  border-radius: 3rem;
}

/* Menu */

menu {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  padding-block-start: var(--space-small);
  padding-block-end: 3.5rem;
  padding-inline: var(--space-medium);
  background: var(--color-shadow);
  overflow-y: auto;
  z-index: 10;
}

.menu-toggle {
  margin-top: var(--space-small);
}

.menu-toggle .menu-toggle-close {
  display: none;
}

.toggle svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-inline-end: var(--space-tiny);
  vertical-align: sub;
}

.toggle-checkbox:checked + .menu-toggle + menu {
  display: flex;
}

.toggle-checkbox:checked + .menu-toggle {
  position: fixed;
  bottom: var(--space-small);
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
}

.toggle-checkbox:checked + .menu-toggle .menu-toggle-close {
  display: inline;
}

.toggle-checkbox:checked + .menu-toggle .menu-toggle-open {
  display: none;
}

menu fieldset {
  padding: 0;
  border: 0;
}

menu legend {
  width: 100%;
  font-weight: bold;
  text-align: right;
}

.checkboxes {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: var(--space-tiny);
  padding-block-start: var(--space-tiny);
}

@media all and (min-width: 62rem) {
  .toggle-checkbox + .menu-toggle {
    display: none;
  }

  menu {
    display: flex;
    position: initial;
    height: auto;
    padding-block-start: 0;
    padding-block-end: var(--space-small);
    margin-block-start: var(--space-medium);
    border-radius: var(--border-radius);
    transform: translateX(0);
  }

  menu legend {
    text-align: left;
  }

  .checkboxes {
    flex-direction: row;
    align-items: start;
  }
}

.toggle-checkbox {
  position: absolute;
  overflow: hidden;
  height: 1px;
  width: 1px;
  margin: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
  border: none;
}

.toggle-checkbox:focus-visible {
  outline: none;
}


.toggle-checkbox:focus-visible + .toggle {
  outline-color: var(--color-highlight);
	outline-style: solid;
	outline-offset: .125rem;
	outline-width: .125rem;
}

.toggle {
  text-wrap: nowrap;
  padding-block: var(--space-tiny);
  padding-inline-start: var(--space-small);
  padding-inline-end: var(--space-medium);
  border: 2px solid;
  border-color: var(--color-white);
  border-radius: 3rem;
  cursor: pointer;
}

.toggle::before {
  content: " ";
  display: inline-block;
  height: 1.2rem;
  width: 1.2rem;
  margin-inline-end: var(--space-tiny);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" /></svg>');
  background-size: contain;
  vertical-align: sub;
}

.menu-toggle::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-9" /><path d="M14 17H5" /><circle cx="17" cy="17" r="3" /><circle cx="7" cy="7" r="3" /></svg>');
}

.toggle-checkbox:checked + .toggle {
  border-color: var(--color-highlight);
  background: var(--color-highlight);
  color: var(--color-black);
}

.toggle-checkbox:checked + .toggle:not(.menu-toggle)::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%231D007B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.801 10A10 10 0 1 1 17 3.335" /><path d="m9 11 3 3L22 4" /></svg>');
}

.toggle-checkbox:checked + .menu-toggle {
  border-color: var(--color-highlight);
  background: var(--color-shadow);
  color: var(--color-white);
}

.works {
  display: grid;
  grid-template-columns: minmax(auto, var(--max-width-large));
  gap: var(--space-medium);
  justify-content: center;
	padding-inline: 0;
  padding-block-start: 0;
  padding-block-end: 6rem;
  margin-block-start: 1rem;
  background: var(--color-white);
}

.card {
  max-width: var(--max-width-large);
  padding-block-start: 1rem;
  color: var(--color-shadow);
  background-color: var(--color-white);
}

.card:not(.hidden) ~ .card {
  border-top: 2px solid;
}

.card header,
.card-meta,
.card-summary,
.card-looking,
.empty {
  padding-inline: var(--space-medium);
}

.card-top {
  padding-block-end: var(--space-small);
  color: var(--color-black);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.card-title {
  --beneath: 0;
  padding-block-start: 0;
}

.card-creator {
  padding: 0;
}

.card-classification {
  display: grid;
  grid-template-columns: minmax(14rem, max-content);
  align-content: start;
  justify-content: end;
}

.card-medium,
.card-rating {
  display: flex;
  align-items: center;
  padding-block: 0;
  padding-inline-start: 0.5rem;
  background: var(--color-highlight);
  font-weight: bold;
}

.card-medium {
  padding-block-start: 0.25rem;
}

.card-rating {
  padding-block-end: 0.25rem;
}

.card-medium::before,
.card-rating::before {
  content: " ";
  display: inline-block;
  height: 1.2rem;
  width: 1.2rem;
  margin-inline-end: 0.25rem;
  background-position: center;
  background-size: contain;
}

.card-medium-1::before {
  background-image: url('/site/templates/styles/images/writing.svg');
}

.card-medium-2::before {
  background-image: url('/site/templates/styles/images/animation.svg');
}

.card-medium-3::before {
  background-image: url('/site/templates/styles/images/fangame.svg');
}

.card-medium-4::before {
  background-image: url('/site/templates/styles/images/visual.svg');
}

.card-medium-5::before {
  background-image: url('/site/templates/styles/images/comic.svg');
}

.card-rating-1::before {
  background-image: url('/site/templates/styles/images/general.svg');
}

.card-rating-2::before {
  background-image: url('/site/templates/styles/images/teen.svg');
}

.card-rating-3::before {
  background-image: url('/site/templates/styles/images/mature.svg');
}

.card-meta {
  padding-block: var(--space-medium);
}

.card-meta > * {
  padding-inline: var(--space-medium);
  background-color: var(--color-shadow);
  color: var(--color-white);
}

.card-warnings {
  font-weight: bold;
}

.card-warnings svg {
  stroke: var(--color-highlight);
  margin-inline-end: 0.25rem;
  vertical-align: sub;
}

.card-relationships {
  --beneath: 1;
}

.card header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

details[open] {
  margin-block-end: var(--space-small);
}

summary {
	display: inline-flex;
  align-items: center;
  padding: var(--space-tiny) var(--space-medium);
  margin-block-end: 0.5rem;
  border: 2px solid;
  border-radius: 3rem;
  cursor: pointer;
}

summary::before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 1rem;
  width: 1rem;
  margin-inline-end: var(--space-tiny);
  background: url('/site/templates/styles/images/chevron-down.svg') center;
  background-size: contain;
}

details[open] summary {
  background-color: var(--color-highlight);
  border-color: var(--color-highlight);
  color: var(--color-black);
}

details[open] summary::before {
  background-image: url('/site/templates/styles/images/chevron-up.svg');
}

.card h3 {
  font-size: 1.2rem;
  font-weight: bold;
}

.priorities {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.priority {
  display: flex;
  padding-block: var(--space-tiny);
  align-items: center;
  justify-content: space-between;
  grid-column: 1;
}

.priority + .priority {
  border-top: 2px solid rgba(29, 0, 123, 0.3);
}

.priority-bar,
.priority-bar::after {
  position: relative;
  height: 1.2rem;
  background-repeat: repeat-x;
  background-size: 1.2rem;
  background-position-x: 0;
  background-position-y: 0;
}

.priority-bar {
  width: 6rem;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle stroke="%231d007b" stroke-width="6" fill="none" cx="50" cy="50" r="40" /></svg>');
  margin-inline-start: 0.5rem;
}

.priority-bar::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle stroke="none" stroke-width="6" fill="%23EC80FF" cx="50" cy="50" r="38" /></svg>');
}

.priority-1::after {
  width: 1.2rem;
}

.priority-2::after {
  width: 2.4rem;
}

.priority-3::after {
  width: 3.6rem;
}

.priority-4::after {
  width: 4.8rem;
}

.priority-5::after {
  width: 6rem;
}

.hidden {
  display: none;
}

.empty {
  font-size: 1.2rem;
  text-align: center;
  color: var(--color-shadow);
}

.empty img {
  width: 10rem;
}


@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--color-black);
  }
  .works,
  .card {
    background: var(--color-dark);
  }
  .card-top,
  .card-summary,
  .card-looking,
  .empty {
    color: var(--color-white);
  }
  .priority + .priority {
    border-color: rgba(255, 255, 255, 0.3);
  }
  .priority-bar {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle stroke="%23FFF" stroke-width="6" fill="none" cx="50" cy="50" r="40" /></svg>');
  }
  .card:not(.hidden) ~ .card {
    border-color: var(--color-white);
  }
  details summary::before {
    background-image: url('/site/templates/styles/images/chevron-down-white.svg');
  }
}

.dark-theme body {
  background: var(--color-black);
}
.dark-theme .works,
.dark-theme .card {
  background: var(--color-dark);
}
.dark-theme .card-top,
.dark-theme .card-summary,
.dark-theme .card-looking,
.dark-theme .empty {
  color: var(--color-white);
}

.dark-theme .priority + .priority {
  border-color: rgba(255, 255, 255, 0.3);
}
.dark-theme .priority-bar {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle stroke="%23FFF" stroke-width="6" fill="none" cx="50" cy="50" r="40" /></svg>');
}
.dark-theme .card:not(.hidden) ~ .card {
  border-color: var(--color-white);
}
.dark-theme details summary::before {
  background-image: url('/site/templates/styles/images/chevron-down-white.svg');
}