/* Cassidy’s CSS tweaks for mastodon.blaede.family
  
  Inspired in part by TangerineUI:
  https://github.com/nileane/TangerineUI-for-Mastodon/

  …but much smaller in scope.
  by @cassidy@blaede.family
*/

:root {
  --version: "1.1.0";
  --color-accent: rgb(from highlight r g b / 1);
  --bg: white;

  --color-bg-primary: var(--bg);
  --color-bg-secondary: color-mix(in oklab, var(--color-bg-primary), var(--color-accent) 5%);
  --color-bg-brand-soft: color-mix(in oklab, var(--color-accent), var(--color-bg-primary) 33%);
  --color-bg-brand-softest: color-mix(in oklab, var(--color-accent), var(--color-bg-primary) 85%);
  --color-bg-brand-base: var(--color-accent);
  --color-bg-brand-base-hover: color-mix(in oklab, var(--color-bg-brand-base), black 20%);

  --color-border-primary: color-mix(in oklab, black, var(--color-bg-primary) 90%);
  --color-border-brand: color-mix(in oklab, var(--color-accent), var(--color-bg-primary) 50%);
  --color-border-brand-soft: color-mix(in oklab, var(--color-accent), var(--color-bg-primary) 75%);
  
  --color-text-brand: var(--color-accent);
  
  --logo: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%20216.414%20232.01%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%23000%22%20d%3D%22M%20107.86714%200%20C%2078.206142%200.242%2049.676743%203.4498573%2033.049743%2011.085857%20C%2033.049743%2011.085857%200.067294364%2025.846832%200.067294364%2076.176832%20C%200.067294364%2087.701832%20-0.15205204%20101.47292%200.21294796%20116.08592%20C%201.409948%20165.30592%209.2279453%20213.81518%2054.735945%20225.86018%20C%2075.717945%20231.41418%2093.729367%20232.58043%20108.23937%20231.78343%20C%20134.54937%20230.32443%20149.32987%20222.39686%20149.32987%20222.39686%20L%20148.45594%20203.30006%20C%20148.45594%20203.30006%20129.66286%20209.23422%20108.54686%20208.51122%20C%2087.625858%20207.79322%2065.532095%20206.24891%2062.148095%20180.56191%20C%2061.835095%20178.30591%2061.678767%20175.89415%2061.678767%20173.36015%20C%2061.678767%20173.36015%2082.212367%20178.3827%20108.23937%20179.5747%20C%20124.15437%20180.3047%20139.09072%20178.64865%20154.24972%20176.83965%20C%20183.31972%20173.36865%20208.61908%20155.449%20211.79908%20139.083%20C%20216.81208%20113.301%20216.41144%2076.176832%20216.41144%2076.176832%20C%20216.41144%2025.846832%20183.42899%2011.085857%20183.42899%2011.085857%20C%20166.80199%203.4498573%20138.25541%200.242%20108.59541%200%20L%20107.86714%200%20z%20M%2074.302079%2039.326472%20C%2086.657079%2039.326472%2095.999651%2044.069157%20102.18665%2053.568157%20L%20108.207%2063.650623%20L%20114.22735%2053.568157%20C%20120.41235%2044.070157%20129.75592%2039.326472%20142.11192%2039.326472%20C%20152.78892%2039.326472%20161.40353%2043.073145%20167.97353%2050.396145%20C%20174.34253%2057.718145%20177.50575%2067.622112%20177.50575%2080.077112%20L%20177.50575%20141.02505%20L%20153.35962%20141.02505%20L%20153.35962%2081.873507%20C%20153.35962%2069.404507%20148.12303%2063.068009%20137.62903%2063.068009%20C%20126.02703%2063.068009%20120.21533%2070.572744%20120.21533%2085.417744%20L%20120.21533%20117.80139%20L%2096.214854%20117.80139%20L%2096.214854%2085.417744%20C%2096.214854%2070.572744%2090.386973%2063.068009%2078.784973%2063.068009%20C%2068.290973%2063.068009%2063.054384%2069.404507%2063.054384%2081.873507%20L%2063.054384%20141.02505%20L%2038.908254%20141.02505%20L%2038.908254%2080.077112%20C%2038.908254%2067.622112%2042.070473%2057.719145%2048.440473%2050.396145%20C%2055.009473%2043.074145%2063.623079%2039.326472%2074.302079%2039.326472%20z%22%2F%3E%3C%2Fsvg%3E");
}

[data-color-scheme="dark"] {
  --bg: black;

  --color-bg-primary: color-mix(in oklab, var(--bg), var(--color-accent) 50%);
  --color-bg-secondary: color-mix(in oklab, var(--bg), var(--color-accent) 57%);
  --color-border-primary: color-mix(in oklab, black, var(--color-bg-primary) 5%);
  --color-text-brand: color-mix(in oklab, var(--color-accent), white 30%);
}

.app-body .columns-area__panels__pane--navigational {
    order: 1;
}

.app-body .columns-area__panels__main {
    order: 2;
}

.app-body .columns-area__panels__pane--compositional {
    order: 3;
}

.app-body .column-link.column-link--logo,
.app-body .ui__header__logo {
    display: inline-flex;
    flex-grow: unset;
    padding: 0;
    margin-inline-start: 10px;
    border: 0;
    width: 48px;
    height: 48px;
    background-image: none;
    background-color: var(--color-text-brand);
    mask-image: var(--logo);
    mask-size: 75%;
    mask-repeat: no-repeat;
    mask-position: center;
}
.app-body .column-link.column-link--logo svg,
.app-body .ui__header__logo svg {
    display: none;
}
.app-body .column-header__title .logo {
    opacity: 0;
    visibility: hidden;
}
.app-body .column-header__title:has(> .logo)::before {
    content: " ";
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    inset-inline-start: 8px;
    inset-block-start: 14px;
    background-image: none;
    background-color: var(--color-text-brand);
    mask-image: var(--logo);
    mask-repeat: no-repeat;
}

@media screen and (max-width: 1174px) {
  .columns-area__panels__pane--navigational .navigation-panel {
    border-inline-end: 1px solid var(--color-border-primary);
    border-inline-start: none;
  }
}