/* Custom semantic elements */

brand {
    xdisplay: block;
    font-size: 1.25rem;
    font-weight: 600;
}
brand>a{text-decoration:none;}
brand>a>span{
    font-size: 0.5em;
    color: black;
    white-space: nowrap;
}
brand>a{
    display: flex;
    align-items: center;
    gap: 1rem;
}
brand>a>logo{
    display: block;
    flex-shrink: 0;
    width: 280px;
    height: 40px;
    background-image: url('/Assets/img/memorize.live.logo.wide.png');
    mix-blend-mode: multiply;
}

menu {
  xmax-height: 2.2em; /* todo: block wrapping - might cause problems*/
  list-style: none;           /* Remove bullets */
  margin: 0;                  /* Remove margins */
  padding: 0;                 /* Remove padding */
  display: flex;              /* or however you want to layout menu items */
}

menu>a{
    margin-left:1em;
    text-decoration:none;
    color:black;
}
menu>a:hover{
    text-decoration:underline;
}

container {
    display: block;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
}

toolbar {
    display: block;
    padding: 1rem 0;
}

notifications, breadcrumbs, columns {
    display: block;
}

:root {
  --btn-cta-color: #B53A3C; /* #A16348; */   /*color of edge of page in bible*/
  --btn-cta-hover: #3AB53C;  /*#A16348;*/ /* #B3826C; */   
}


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* Full viewport height */
}

body::before { /* site background image */
  background-image: url('/Assets/img/memorize_bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* Optional: keeps image fixed while scrolling */
    
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Optional: reinforces stationary effect */
  z-index: -1; /* Keeps it behind content */

  filter: blur(8px);     /* adjust blur strength */
  transform: scale(1.05);/* avoids seeing sharp edges after blur */
  background-color: rgba(255, 255, 255, 0.2); /* faint white wash */
  background-blend-mode: screen;              /* lightens highlights */
}

body>header{
  background-color: rgba(255, 255, 255, 0.6); /*  white wash */
  background-blend-mode: screen;              /* lightens highlights */
  padding:4px;
}

body>footer{
  background-color: rgba(255, 255, 255, 0.6); 
  background-blend-mode: screen;              
}

main {
  flex: 1;  /* Takes all available space */
}

footer {
  padding: 1rem 0;
}

footer container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

footer p {
  margin-bottom: 0;
}

header.hero{
    background-color: rgba(255, 255, 255, 0.6);
    border-radius:12px;
    padding:1em;
    margin-bottom:1em;
    display: flex;
    align-items: flex-start;
    gap: 2em;
}

header.hero>.picture {
  background-image: url('/Assets/img/hero.jpg');
  background-size: cover;
  background-position: center;
    width: 300px;
    height: 300px;
    flex-shrink: 0;
}

section{
    background-color: rgba(255, 255, 255, 0.6);
    border-radius:12px;
    padding:1em;
}

:is(button,[role=button]),
[role=button] {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--btn-cta-color);  /* orange */
  color: white;
  text-decoration: none;
  border-radius: 0.5rem;
  font-size: 1.125rem;  /* large equivalent */
}

:is(button,[role=button]):hover,
[role=button]:hover {
  background-color: var(--btn-cta-hover);
}


body>header a.cta {padding: 0.25rem 0.5rem; white-space: nowrap;}

.grid{
  display: grid; /* Pico already does this, but it's fine to repeat */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-auto-rows: 1fr; /* make all items in the grid the same height */
}
div.grid>article.box{
    border:1px solid white;
    background:rgba(255,255,255,0.3);
}

a.is-info{
    border:1px solid black;
    background-color:transparent;
    color:black;
}

div.card{
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    margin-top: 1em;
    padding:1em;
}

div.grid>div.box{
    background-color: transparent;
    border: 1px solid white;
    margin: 1em;
    padding: 1em;
    border-radius: 12px;
}

section>article , section>article>article{
    background-color:transparent;
    
    border: 1px solid white;
    border-radius: 12px;
}
div.tag{
    background-color:white;
    border-radius:4px;
    display: inline-block;
    font-weight:bold;
    padding:2px;
    margin:4px;
}
article.box, article.card{
    background-color:transparent;
    border:1px solid white;
    border-radius:12px;
}
/* Modified 2026-08-16 AI: was article>div>div.is-narrow. The Bulma column strip
   removed the intermediate <div class="columns is-vcentered"> wrapper, so the
   three-deep descendant chain no longer matched. Re-pointed to the class itself. */
article .is-narrow{
    float: left;
    font-size: 2em;
    font-weight: bold;
    margin-right: 18px;
}

/* Responsive Flexbox Menu Styles */

/* Desktop (> 768px): Menu items flow horizontally */
@media (min-width: 769px) {
    header nav {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    header nav > menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 0.5rem 1em;
        margin-left: auto;
    }

    header nav > menu > a {
        margin-left: 0;
    }

    /* Modified 2026-08-18 AI: nav items that render as [role=button] pills
       (per-tier menus.json entries or a user's own menu overrides both use
       the same item schema, and either can set role/class) inherit the same
       padding as page-level CTA buttons -- generous enough that a tier with
       more than ~5 items (admin: 7) wraps onto several rows with nothing
       spacing them apart, since the old rule relied on margin-left alone.
       `gap` above now handles spacing in both axes; this tightens the pills
       themselves so more fit per row before wrapping happens at all. */
    header nav > menu > a[role="button"],
    header nav > menu > a.button {
        padding: 0.4rem 0.85rem;
        font-size: 0.95rem;
    }
}

/* Mobile (≤ 768px): Menu items stack vertically below logo */
@media (max-width: 768px) {
    header nav {
        display: flex;
        flex-direction: column;
    }

    brand>a {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    brand>a>logo {
        width: 100%;
        max-width: 320px;
        height: 40px;
    }

    brand>a>span {
        display: none;
    }

    header nav > menu {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 1rem;
        gap: 0.5rem;
    }

    header nav > menu > a {
        width: calc(50% - 2rem);
        box-sizing: border-box;
        padding: 0.75rem 0.5rem;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 4px;
        text-align: center;
        border-bottom: none;
    }

    header nav > menu > a:hover {
        background-color: var(--pico-primary);
        color: white;
        text-decoration: none;
        padding-left: 0.5rem;
    }

    /* Hero section: stack vertically on mobile */
    header.hero {
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }

    header.hero>.picture {
        width: 100%;
        max-width: 300px;
        height: 300px;
    }

    /* Footer: stack vertically on mobile */
    footer container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
}

/* Hide delete buttons on study cards to make entire card clickable */
.delete-study-btn {
    display: none !important;
}

/* Single study page: keep action items (Edit/Send Now/Restart/Delete) side-by-side */
.study-action-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    padding-bottom:0; margin-bottom:0;
}
.card-footer-item{margin:0; padding:0;}

.form-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Modified 2026-08-15 AI: Bulma is-grouped-centered maps here. */
.form-actions.is-centered {
    justify-content: center;
}

.form-actions button,
.form-actions :is(button,[role=button]),
.form-actions [role=button] {
    width: auto;
}

.study-action-items > a.card-footer-item,
.study-action-items > .card-footer-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.study-action-items > .card-footer-item form {
    width: 100%;
}

.study-action-items > .card-footer-item form button {
    width: 100%;
    white-space: nowrap;
}

@media (max-width: 768px) {
    footer.study-action-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    footer.study-action-items {
        grid-template-columns: 1fr;
    }
}

/* Profile Tabs - Horizontal Button Layout */
.profile-tabs-list {
    display: flex !important;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
    background: none;
}

.profile-tabs-list li {
    list-style: none;
    background: none;
    padding: 0;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.profile-tabs-list li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-tabs-list li a span {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.profile-tabs-list li a .icon {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

/* Active Tab - Dark Button Styling */
.profile-tabs-list li.is-active a {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    border-color: #2c3e50;
    box-shadow: 0 4px 8px rgba(44, 62, 80, 0.3);
    transform: translateY(-1px);
}

.profile-tabs-list li.is-active a:hover {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(44, 62, 80, 0.4);
}

/* Inactive Tabs - Light Button Styling */
.profile-tabs-list li:not(.is-active) a {
    background: rgba(255, 255, 255, 0.8);
    color: #555;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.profile-tabs-list li:not(.is-active) a:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Mobile Responsive - Stack to 2 columns on small screens */
@media (max-width: 768px) {
    .profile-tabs-list {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .profile-tabs-list li {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: calc(50% - 0.375rem);
    }
    
    .profile-tabs-list li a {
        font-size: 0.8rem;
        padding: 0.6rem 0.4rem;
        min-height: 3.5rem;
    }
}

/* Very small screens - single column */
@media (max-width: 480px) {
    .profile-tabs-list li {
        flex: 1 1 100%;
        min-width: 100%;
    }
    
    .profile-tabs-list li a {
        font-size: 0.9rem;
        padding: 0.8rem 0.5rem;
        min-height: 3rem;
    }
}

.is-hidden {
    display: none !important;
}

.is-visible {
    display: block;
}

.spinner-hidden {
    display: none;
}

.results-box,
.results-box-large {
    margin-top: 0.5rem;
    padding: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    background-color: var(--bg-color, #fff);
}

.results-box-large {
    max-height: 300px;
}

input[type="radio"]:not(:checked) ~ span,
input[type="radio"]:not(:checked) ~ span span {
    color: black;
}

.field-header{display:flex; align-items:center; justify-content:space-between; gap:1em;}
.field-header label{margin-bottom:0;}
a.smallbtn{font-size:1em; background-color:transparent;}

#topic-results, #collection-list {border: 1px solid black; border-radius:8px;}

/* Focused UI profile: Focused Times tab - make "Edit Focused Times" match other profile buttons */
.profile-tabs + .tab-content #tab-focused-times.is-active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Modified 2026-08-17 AI: six rules removed with the Bulma level wrappers.
   They existed to undo the nesting rather than to style anything: `.level` was
   given display:contents so its children became flex items of the tab pane, then
   order 0/1/2 lifted the "Edit Focused Times" button out of its position in the
   markup and dropped it below the table. The button now simply comes after the
   table in view.php, so the DOM says what the ordering said and the rules have
   nothing left to do. The width/justify-content pairs went the same way -- they
   were stretching a level-right row to full width so its single item could be
   left-aligned inside it, which is only a problem when there is a row.
   What remains is the button's appearance, which was never about layout, plus
   align-self in place of the old justify-content: in a column flex container a
   child stretches to full width by default, and this button should not. */
.profile-tabs + .tab-content #tab-focused-times [role=button] {
    display: inline-block;
    width: fit-content;
    align-self: flex-start;
    background-color: transparent;
    border: 1px solid black;
    color: black;
}

.profile-tabs + .tab-content #tab-focused-times [role=button]:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: black;
    color: black;
}

/* FORCE relative positioning on all verse picker containers */
div.reference-field{position: relative;}

@media (max-width: 768px) {
    footer.card-footer.is-large-buttons {
        flex-direction: column;
    }
    
    footer.card-footer.is-large-buttons > a.card-footer-item,
    footer.card-footer.is-large-buttons > .card-footer-item {
        width: 100%;
    }
}

/* Schedule actions for single view */
.schedule-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.schedule-actions button,
.schedule-actions :is(button,[role=button]) {
    width: auto;
    display: inline-block;
}

.schedule-actions button[type="submit"],
.schedule-actions form,
.schedule-actions :is(button,[role=button]).is-danger {
    width: auto;
    display: inline-block;
}

/* Notification actions */
.notification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.notification-actions a,
.notification-actions button,
.notification-actions form {
    width: auto;
    display: inline-block;
}

/* Single view action buttons (Fire, Delete, etc.) */
.card-footer-item form button,
.card-footer-item :is(button,[role=button]) {
    width: auto;
    display: inline-block;
}


/* ===================================================================
   BULMA SWEEP PHASE 1 -- component + modifier vocabulary
   Added 2026-08-15. See Docs/current/ui/BULMA_SWEEP_PHASE0.md.

   WHY THIS EXISTS
   The templates speak a Bulma vocabulary that nothing defines any more.
   Bulma is off the wire; Pico 2 defines ZERO of these class names
   (verified against the served stylesheet, all 18 checked return 0).
   So `<div class="notification is-danger">` renders as plain body text
   under this theme -- a validation error indistinguishable from page
   copy. This block is the missing half.

   WHY IT HOOKS PICO VARIABLES RATHER THAN HARDCODING COLOURS
   Every colour below resolves through a --pico-* custom property that
   Pico already redefines under [data-theme=dark] and
   prefers-color-scheme: dark. So when the ml2 light/dark unification
   lands and the data-theme="light" pin comes out of
   Partials/theme/ml2/header.php, this vocabulary follows the scheme
   with no further edits. Hardcoding a palette here would be building
   the thing that work then has to convert.

   SCOPE: ml2-theme.css only, by Jeremiah's call 2026-08-15. The other
   three themes carry the same .tag bug and are backlogged for phase 11.

   NO TEMPLATE WAS EDITED IN THIS PHASE.
   =================================================================== */

/* --- shared modifier palette -------------------------------------- */
/* Bulma's is-* semantics mapped onto Pico's existing semantic colours.
   is-info and is-primary intentionally resolve to the same accent:
   Bulma distinguished them, ml2's templates do not use the distinction
   meaningfully, and inventing a second accent would be inventing design
   rather than restoring it. */
:root {
    --ml2-danger:  var(--pico-form-element-invalid-border-color);
    --ml2-success: var(--pico-form-element-valid-border-color);
    --ml2-warning: var(--pico-mark-background-color);
    --ml2-info:    var(--pico-primary);
    --ml2-primary: var(--pico-primary);
    --ml2-muted:   var(--pico-muted-border-color);
}

/* --- callout ------------------------------------------------------- */
/* The page-level callout. Bulma had TWO components doing this job -- .notification
   and .message -- and both were unstyled. They are now one: the .message call sites
   were rewritten as .notification and that class is gone, rather than being kept
   alive as an alias. Two names for one idea is a maintenance cost with no benefit. */
.notification {
    display: block;
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    margin-bottom: var(--pico-block-spacing-vertical);
    border: var(--pico-border-width) solid var(--ml2-muted);
    border-left-width: 0.25rem;
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-card-sectioning-background-color);
    color: var(--pico-color);
}

.notification.is-danger { border-left-color: var(--ml2-danger); }
.notification.is-success { border-left-color: var(--ml2-success); }
.notification.is-warning { border-left-color: var(--ml2-warning); }
.notification.is-info { border-left-color: var(--ml2-info); }
.notification.is-primary { border-left-color: var(--ml2-primary); }

/* .notification carries page-level messaging, so it should not inherit
   the tight margins of whatever it sits inside. */
.notification > :last-child { margin-bottom: 0; }

/* --- tag ----------------------------------------------------------- */
/* BUG FIX, not just an addition. Line 208 of this file defines div.tag,
   and all 31 uses in App/Presentation are <span class="tag">. A div
   selector cannot match a span, so every tag has been unstyled in every
   theme. div.tag is left in place above -- it is harmless and removing
   it belongs to the leftover phase -- and this rule is what actually
   reaches the markup. */
.tag {
    display: inline-block;
    padding: 0.15em 0.6em;
    border: var(--pico-border-width) solid var(--ml2-muted);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-card-sectioning-background-color);
    color: var(--pico-color);
    font-size: 0.8em;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: baseline;
}

.tag.is-danger  { border-color: var(--ml2-danger);  color: var(--ml2-danger); }
.tag.is-success { border-color: var(--ml2-success); color: var(--ml2-success); }
.tag.is-warning { border-color: var(--ml2-warning); }
.tag.is-info,
.tag.is-primary { border-color: var(--ml2-info);    color: var(--ml2-info); }
.tag.is-light   { color: var(--pico-muted-color); }

/* --- form help text ------------------------------------------------ */
/* <p class="help"> under form fields. 9 uses. Three of them also carry
   is-hidden and are revealed by JavaScript on validation failure -- see
   the bucket C warning in the phase 0 audit. Do not touch .is-hidden. */
.help {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0;
    font-size: 0.8em;
    color: var(--pico-muted-color);
}

.help.is-danger  { color: var(--ml2-danger); }
.help.is-success { color: var(--ml2-success); }

/* --- standalone text modifiers ------------------------------------- */
/* has-text-* on <p>/<span> outside any component. Kept minimal: only
   the two that actually appear in the templates. */
.has-text-danger  { color: var(--ml2-danger); }
.has-text-success { color: var(--ml2-success); }

/* ===================================================================
   BULMA SWEEP PHASE 3c -- spacing scale
   Added 2026-08-15. See Docs/future/todo.md, "PHASE 3c".

   111 spacing classes are used across App/Presentation and Public/Pages
   and NOTHING defined them: not any theme, not Pico. They have been
   inert markup, which is the likeliest explanation for layout that
   reads as deliberate in the source and looks slightly off in the
   browser.

   Only the 15 classes actually in use are defined. Adding more "for
   completeness" would be inventing vocabulary nobody asked for.

   Steps follow Bulma's scale (0, .25, .5, .75, 1, 1.5, 3rem) expressed
   as multiples of --pico-spacing, which is 1rem and equals Bulma's
   step 4. Anchoring to Pico's property rather than hardcoding rem means
   the scale moves with the theme instead of drifting from it.

   TO REVERT: delete this block. The classes go back to being inert and
   nothing else depends on them.
   =================================================================== */

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: calc(var(--pico-spacing) * 0.25); }
.mb-2 { margin-bottom: calc(var(--pico-spacing) * 0.5); }
.mb-3 { margin-bottom: calc(var(--pico-spacing) * 0.75); }
.mb-4 { margin-bottom: var(--pico-spacing); }
.mb-5 { margin-bottom: calc(var(--pico-spacing) * 1.5); }
.mb-6 { margin-bottom: calc(var(--pico-spacing) * 3); }

.mt-1 { margin-top: calc(var(--pico-spacing) * 0.25); }
.mt-2 { margin-top: calc(var(--pico-spacing) * 0.5); }
.mt-3 { margin-top: calc(var(--pico-spacing) * 0.75); }
.mt-4 { margin-top: var(--pico-spacing); }
.mt-5 { margin-top: calc(var(--pico-spacing) * 1.5); }
.mt-6 { margin-top: calc(var(--pico-spacing) * 3); }

.mr-3 { margin-right: calc(var(--pico-spacing) * 0.75); }

.my-5 {
    margin-top: calc(var(--pico-spacing) * 1.5);
    margin-bottom: calc(var(--pico-spacing) * 1.5);
}

/* Modified 2026-08-16 AI: Bulma sweep phase 3c. has-text-centered carried real
   intent and had no definition anywhere. is-fullwidth was defined here too, then
   removed: it was redundant on the 16 tables that used it (Pico already sets table
   width:100%) and its one remaining call site was changed instead, leaving a rule
   that served nothing. */
.has-text-centered { text-align: center; }

/* Modified 2026-08-16 AI: Bulma sweep. Pico ships .striped and .overflow-auto, so the
   table vocabulary was renamed onto Pico's rather than redefined. Pico has no hover
   equivalent, so .hoverable is defined here -- named without the is- prefix to sit
   beside .striped rather than straddling two vocabularies. */
.hoverable tbody tr:hover td,
.hoverable tbody tr:hover th {
    background-color: var(--pico-card-sectioning-background-color);
}

/* Modified 2026-08-16 AI: Bulma sweep. Button size modifiers, which had 76 uses
   between them and no definition anywhere. Sized against Pico's own form-element
   spacing so they track the theme rather than hardcoding padding. .form-actions
   .is-small carries Bulma's "are-small", which meant the whole group is small. */
:is(button,[role=button]).is-small,
.form-actions.is-small :is(button,[role=button]) {
    padding: calc(var(--pico-form-element-spacing-vertical) * 0.55)
             calc(var(--pico-form-element-spacing-horizontal) * 0.55);
    font-size: 0.85em;
}

:is(button,[role=button]).is-large {
    padding: calc(var(--pico-form-element-spacing-vertical) * 1.35)
             calc(var(--pico-form-element-spacing-horizontal) * 1.35);
    font-size: 1.15em;
}


/* ===================================================================
   DARK THEME (auto) -- prefers-color-scheme
   Added 2026-09-12. This file (copied from ml2's ml2-theme.css) never
   pinned data-theme itself and its Bulma-compatibility vocabulary above
   already rides Pico's own --pico-* variables (see that block's own
   "BULMA SWEEP PHASE 1" comment), so it was already dark-adaptive.
   What wasn't: the hand-authored background-image washes and a few
   hardcoded black/white values below, added here as overrides now that
   Partials/theme/ml/header.php no longer pins data-theme="light".
   See agents/architect/working/dlpr_app-ml2-gap-audit-2026-09-12.md.
   =================================================================== */
@media (prefers-color-scheme: dark) {
    brand>a>span, menu>a {
        color: var(--pico-color, #e0e0e0);
    }

    body::before {
        background-color: rgba(0, 0, 0, 0.35);
        background-blend-mode: multiply;
    }

    body>header,
    body>footer,
    header.hero,
    section {
        background-color: rgba(0, 0, 0, 0.55);
    }

    div.grid>article.box,
    div.grid>div.box,
    section>article,
    section>article>article,
    article.box,
    article.card {
        border-color: #555;
    }

    div.grid>article.box {
        background: rgba(0, 0, 0, 0.3);
    }

    a.is-info {
        border-color: #999;
        color: var(--pico-color, #e0e0e0);
    }

    div.card {
        background-color: rgba(0, 0, 0, 0.4);
    }

    div.tag {
        background-color: #2a2a2a;
        color: var(--pico-color, #e0e0e0);
    }

    header nav > menu > a:hover {
        background-color: var(--pico-primary);
        color: #fff;
    }

    .profile-tabs-list li:not(.is-active) a {
        background: rgba(0, 0, 0, 0.5);
        color: #ccc;
        border-color: rgba(255, 255, 255, 0.2);
    }

    .profile-tabs-list li:not(.is-active) a:hover {
        background: rgba(0, 0, 0, 0.7);
        color: #eee;
        border-color: rgba(255, 255, 255, 0.35);
    }

    input[type="radio"]:not(:checked) ~ span,
    input[type="radio"]:not(:checked) ~ span span {
        color: var(--pico-color, #e0e0e0);
    }

    #topic-results, #collection-list {
        border-color: #777;
    }

    .profile-tabs + .tab-content #tab-focused-times [role=button] {
        border-color: #999;
        color: var(--pico-color, #e0e0e0);
    }

    .profile-tabs + .tab-content #tab-focused-times [role=button]:hover {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: #ccc;
        color: var(--pico-color, #e0e0e0);
    }
}