/* ============================================================
   strlt — flat ops-surface theme for Dynacat
   ------------------------------------------------------------
   Design contract (see mockup: strlt-theme-mockup/index.html):
     · No cards, no boxes, no shadows. Content sits on the page
       background; structure comes from hairline dividers,
       alignment and typographic hierarchy.
     · Red #E81A13 carries meaning: active page, arrows,
       progress/activity, down-status, selection, focus.
     · Inter for UI text, JetBrains Mono (built in) for
       telemetry. 14px base, quiet colors, 120ms hover motion.
   ------------------------------------------------------------
   Load order note: Dynacat includes this file AFTER bundle.css
   and after the generated theme <style>, so equal-specificity
   rules here win. Widgets that ship their own inline <style>
   (torrenting, latest-media, playing) are overridden via the
   higher-specificity `.widget-type-*` hooks from widget-base.

   DEPLOYMENT: this file must live in the assets volume (the
   same directory as mc-monitor.html) and be referenced as
   /assets/custom.css — Dynacat only serves files under /assets/.
   Assets are cached for 2h; restart the container and
   hard-refresh (Ctrl+F5) after changing this file.
   ============================================================ */


/* ------------------------------------------------------------
   1. Typography — Inter for UI, self-hosted from the assets
      volume. Drop InterVariable.woff2 into /assets/fonts/
      (or swap the src for a CDN URL). If the file is missing,
      the system-ui fallback applies silently.
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/InterVariable.woff2') format('woff2');
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 450;
    font-size: 1.4rem;               /* 14px — Dynacat root is 10px */
    line-height: 1.45;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Numeric data never jitters */
.dns-stats-totals,
.monitor-site,
.widget-type-torrenting,
.playing-time-row {
    font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------
   2. Spacing scale — more air between sections/columns now
      that boxes are gone.
   ------------------------------------------------------------ */
:root {
    --widget-gap: 34px;
    --border-radius: 4px;
}


/* ------------------------------------------------------------
   3. Remove ALL widget chrome — this is the core of the look.
      `.widget-content-frame` also styles the header/nav bar
      and theme editor, both of which we want flat too.
   ------------------------------------------------------------ */
.widget-content:not(.widget-content-frameless),
.widget-content-frame {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.widget-content:not(.widget-content-frameless) {
    padding: 0;
}


/* ------------------------------------------------------------
   4. Widget headers — sentence case, 14px/600, no uppercase.
      Dynacat marks titles up with `.uppercase`; kill it here.
   ------------------------------------------------------------ */
.widget-header {
    padding: 0;
    margin-bottom: 1.4rem;
    font-size: var(--font-size-h4);
}

.widget-header .widget-title-wrapper.uppercase,
.widget-header h2.uppercase {
    text-transform: none;
    font-size: var(--font-size-h4);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-highlight);
}

.widget-title-icon {
    width: 1.7rem;
    height: 1.7rem;
    opacity: 0.8;
}


/* ------------------------------------------------------------
   5. Top navigation — taller full-width hairline bar, bigger
      wordmark, red underline for the current page only.

      Logo note: the strlt wordmark PNGs carry large transparent
      padding around the glyphs, so a plain <img> renders tiny.
      object-fit: cover crops the empty band away — the wordmark
      sits in the vertical center of the square source image.
   ------------------------------------------------------------ */
.header-container {
    margin-top: 0;
    border-bottom: 1px solid var(--color-separator);
    --header-height: 64px;
}

.header {
    gap: 2.4rem;
}

/* The header bar itself is a .widget-content-frame — already
   flattened by rule (3); just fix its padding */
.header.padding-inline-widget {
    padding-inline: 0;
}

.logo {
    border-right: none;
    padding-right: 0;
    font-size: 1.8rem;
}

.logo img {
    height: 2.3rem;
    width: 5.75rem;                /* 2.5:1 crop window */
    max-height: none;
    object-fit: cover;             /* crops transparent padding */
    object-position: center;
}

.logo svg {
    max-height: 2.3rem;
}

.nav {
    gap: 0.6rem;
}

.nav-item {
    font-size: 1.4rem;
    font-weight: 450;
    padding-inline: 0.9rem;
    border-bottom: 1px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
}

.nav-item:not(.nav-item-current) {
    color: var(--color-text-base);
}

.nav-item:not(.nav-item-current):hover {
    border-bottom-color: transparent;
    color: var(--color-text-highlight);
}

/* Active page — brand red underline, the strongest red
   element in the chrome */
.nav-item.nav-item-current {
    border-bottom: 2px solid #e81a13;
    color: var(--color-text-highlight);
    font-weight: 500;
}

.nav-item-icon {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.8;
}


/* ------------------------------------------------------------
   6. Lists & rows — hover wash instead of boxes
   ------------------------------------------------------------ */
.monitor-site,
.widget-type-bookmarks li {
    padding: 0.5rem 0.6rem;
    margin-inline: -0.6rem;
    border-radius: 4px;
    transition: background 120ms ease;
}

.monitor-site:hover,
.widget-type-bookmarks li:hover {
    background: hsla(0, 0%, 100%, 0.04);
}

/* Service icons — large enough to read as marks, not glyphs */
.monitor-site-icon {
    width: 2.8rem;
    opacity: 0.8;
    filter: grayscale(0.25);
    transition: opacity 120ms ease, filter 120ms ease;
}

.monitor-site:hover .monitor-site-icon {
    opacity: 1;
    filter: grayscale(0);
}

/* Status glyphs: smaller, calmer. Down-state keeps full red. */
.monitor-site-status-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.monitor-site-status-icon svg[fill="var(--color-positive)"] {
    opacity: 0.55;
}


/* ------------------------------------------------------------
   7. Bookmarks — strip icon chips, arrows reveal red on hover.
      Group titles ("Management") are real sub-headers, not
      muted labels: full highlight color, same size as body.
   ------------------------------------------------------------ */
.bookmarks-icon-container {
    background: none;
    padding: 0;
    margin-block: 0;
    opacity: 1;
}

.bookmarks-icon {
    width: 2.2rem;
    height: 2.2rem;
    opacity: 0.75;
    filter: grayscale(0.2);
}

.bookmarks-group-title {
    color: var(--color-text-highlight);
    font-size: var(--font-size-h4);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}

.bookmarks-link {
    font-weight: 500;
    letter-spacing: -0.01em;
}

.bookmarks-link:not(.bookmarks-link-no-arrow)::after {
    color: #e81a13;
    opacity: 0;
    transition: opacity 120ms ease;
}

.bookmarks-link:hover::after {
    opacity: 1;
}


/* ------------------------------------------------------------
   8. Expand toggles ("Show more") — the stock glyph renders as
      tofu under Inter, so swap in a real chevron and flatten
      the button into a hairline-divided row.
   ------------------------------------------------------------ */
.expand-toggle-button {
    background: transparent;
    text-transform: none;
    font-size: var(--font-size-h5);
    font-weight: 500;
    color: var(--color-text-subdue);
    border-top: 1px solid var(--color-separator);
    padding: 1rem 0 0.2rem;
    transition: color 120ms ease;
}

.expand-toggle-button:hover {
    color: var(--color-text-highlight);
}

.expand-toggle-button-icon {
    top: 0;
}

.expand-toggle-button-icon::before {
    content: '\203A' / "";         /* › — present in every font */
    font-size: 1.1rem;
    transform: rotate(90deg);      /* points down when collapsed */
}

.expand-toggle-button.container-expanded .expand-toggle-button-icon::before {
    transform: rotate(-90deg);     /* points up when expanded */
}

/* latest-media's inline <style> gives the button a solid
   background — out-specify it via the widget-type hook */
.widget-type-latest-media .cards-grid.collapsible-container + .expand-toggle-button,
.widget-type-latest-media .expand-toggle-button {
    background: transparent;
}

.cards-grid.collapsible-container + .expand-toggle-button {
    background: transparent;
    text-align: center;
    margin-top: 1.2rem;
}


/* ------------------------------------------------------------
   9. Inline-styled Dynacat widgets — these templates embed
      their own <style> blocks which load AFTER this file, so
      we must out-specify them with .widget-type-* hooks.
   ------------------------------------------------------------ */

/* Torrenting: thinner track, hairline item padding,
   red fill — progress is activity, activity is brand red */
.widget-type-torrenting .torrenting-item {
    padding: 0.9rem 0;
}

.widget-type-torrenting .torrenting-bar {
    height: 3px;
    border-radius: 2px;
}

.widget-type-torrenting .torrenting-fill {
    border-radius: 2px;
    background: #e81a13;
}

.widget-type-torrenting .torrenting-name {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.widget-type-torrenting .torrenting-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

/* Now Playing: red progress, calmer thumbnail, mono times */
.widget-type-playing .playing-thumbnail {
    border-radius: 4px;
}

.widget-type-playing .playing-progress-fill {
    background: #e81a13;
}

/* Session indicator: static brand-red dot, no pulse */
.widget-type-playing .playing-indicator {
    width: 6px;
    height: 6px;
}

.widget-type-playing .playing-indicator.playing {
    animation: none;
    background: #e81a13;
}

.widget-type-playing .playing-time-row {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.1rem;
    color: var(--color-text-subdue);
}

.widget-type-playing .playing-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Latest media: square-ish corners, keep the built-in
   brightness hover (it reads as functional, not decorative) */
.widget-type-latest-media .latest-media-card {
    border-radius: 4px;
}


/* ------------------------------------------------------------
   10. Page-level details
   ------------------------------------------------------------ */

/* No entrance choreography — the page is just there */
.page.content-ready > .page-content {
    animation: none;
}

::selection {
    background: rgba(232, 26, 19, 0.3);
    color: var(--color-text-highlight);
}

/* Hairline scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--bghs), calc(var(--bgl) + 12%));
    border-radius: 4px;
}

/* Focus ring stays red — accessibility is semantic too */
*:focus-visible {
    outline: 1px solid #e81a13;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Theme picker dot: subdued until hovered (config sets
   disable-picker: true anyway — this is belt & braces) */
.current-theme-preview {
    opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}


/* ------------------------------------------------------------
   11. Mobile navigation — top sticky bar, wrapped two-row nav
       Replaces Dynacat's stock bottom drawer (clunky with
       auto-hiding browser toolbars, and a bordered box that
       breaks the flat theme). Everything here is scoped to
       Dynacat's own ≤1190px breakpoint — desktop is untouched.

       What changes on mobile:
         · Header stays visible and sticks to the top; the nav
           wraps onto two rows below the wordmark — all pages
           always visible, no horizontal scroll, no scroll
           position to lose on page change.
         · Bottom drawer + pill column-switcher are removed;
           page columns stack into a single scroll, main column
           first, left column (Minecraft) last.
         · Same theme language: hairline divider, red underline
           on the active page, no boxes.
   ------------------------------------------------------------ */
@media (max-width: 1190px) {

    /* Re-show the header as a sticky top bar. padding-top lifts
       the wordmark off the top edge of the display window */
    .header-container {
        display: block;
        position: sticky;
        top: 0;
        z-index: 12;
        --header-height: 52px;   /* wordmark row height */
        padding-top: 0.7rem;
        background-color: var(--color-background);
    }

    /* Translucent + blurred once backdrop-filter is available */
    @supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
        .header-container {
            background-color: hsl(var(--bghs), var(--bgl), 0.82);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
    }

    /* Let the header grow to two rows: wordmark on top,
       nav wraps onto its own full-width row below */
    .header {
        height: auto;
        gap: 0;
        flex-wrap: wrap;
        align-items: flex-start;     /* don't stretch the nav vertically */
    }

    .logo {
        line-height: var(--header-height);
    }

    .nav {
        flex-basis: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;           /* kills the horizontal scroll container */
        flex-wrap: wrap;
        align-content: flex-start;   /* wrapped lines must not stretch */
        align-items: flex-start;
        row-gap: 0;
        column-gap: 0.2rem;
        padding: 0.2rem 0 0.6rem;
        border-top: 1px solid var(--color-separator);
    }

    /* site.css sizes items for a single-row bar: height: 100%
       plus line-height: var(--header-height). Leftover 100%
       height is what made the red underline detach and float —
       reset both so the border hugs the text again. */
    .nav .nav-item {
        height: auto;
        white-space: nowrap;
        line-height: 1.45;
        font-size: 1.38rem;
        padding: 0.9rem 0.85rem 0.8rem;
    }

    /* Kill the bottom drawer, its offset spacer, and the big
       reachability title (redundant next to the sticky bar) */
    .mobile-navigation,
    .mobile-navigation-offset,
    .mobile-reachability-header {
        display: none;
    }

    /* Stack all page columns into one scrollable flow instead
       of the pill-switched single-column view. The full-width
       column is the main interaction zone — pull it to the top;
       the first (left) column drops to the very bottom — on Home
       that's the Minecraft status widget, the most passive one. */
    .page-columns {
        flex-direction: column;
    }

    .page-columns > .page-column {
        display: block;
        width: 100%;
        animation: none;
    }

    .page-columns > .page-column-full {
        order: -1;
    }

    .page-columns > .page-column:first-child {
        order: 1;
    }

    /* "Show more" bar no longer needs to clear the bottom nav
       (-1px matches Dynacat's base rule: hides a 1px Chrome gap) */
    .expand-toggle-button.container-expanded {
        bottom: -1px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}


/* ------------------------------------------------------------
   12. Light mode — DISABLED, kept for future use.
       Automatic, follows the device theme. To enable: remove the
       "LIGHT MODE DISABLED" wrapper comment around the @media
       block below.

       How it works: Dynacat derives every color from a handful of
       seed vars (--bgh/--bgs/--bgl, --cm/--tsm, primary/positive/
       negative) and flips all derived lightness values around 100%
       when --scheme is set to "100% -" (its built-in light-scheme
       trick, normally gated behind light: true). custom.css loads
       after the generated theme <style>, so re-seeding the vars
       inside prefers-color-scheme gives a full light theme with
       no config or JS changes.

       Still to do before enabling: give mc-monitor.html its own
       light styles (it's a separate document and stays dark), and
       eyeball the palette — it was tuned by formula, not by eye.
   ------------------------------------------------------------ */

/* LIGHT MODE DISABLED — remove this line and the closer at the
   bottom of the block to re-enable. Inner comments use [brackets]
   because CSS comments cannot nest.

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --scheme: 100% -;               [flip every derived color]

        [Palette — light mirror of the dark seeds in dynacat.yml:
         warm-neutral black becomes warm-neutral off-white]
        --bgh: 240;
        --bgs: 6%;
        --bgl: 96%;
        --color-primary: hsl(240, 11%, 20%);
        --color-positive: hsl(152, 60%, 30%);
        --color-negative: hsl(2, 72%, 44%);
    }

    [Hover wash: white-on-dark becomes black-on-light]
    .monitor-site:hover,
    .widget-type-bookmarks li:hover {
        background: hsla(0, 0%, 0%, 0.05);
    }

    [Hairline scrollbar: darker than the page, not lighter]
    ::-webkit-scrollbar-thumb {
        background: hsl(var(--bghs), calc(var(--bgl) - 14%));
    }

    ::selection {
        background: rgba(232, 26, 19, 0.22);
    }

    [The strlt wordmark PNG has light glyphs for dark mode.
     invert + hue-rotate(180deg) flips lightness while keeping
     hue, so the cream glyphs go dark and the red stays red.
     If you add a purpose-built strlt-dark.png asset, swap the
     filter for content: url(...) in Chromium or a mask.]
    .logo img,
    .logo svg {
        filter: invert(0.92) hue-rotate(180deg);
    }
}

LIGHT MODE DISABLED — closer. */