/* /assets/apps/workspace/css/feature-detect.css */

:root {
    --css-nesting: false;
    --css-has-selector: false;
    --css-container-queries: false;
    --css-anchors: false;
    --css-color-oklch: false;
    --css-color-mix: false;
    --css-color-relative: false;
}

@supports (selector(&)) {
    :root {
        --css-nesting: true;
    }
}

@supports selector(:has(*)) {
    :root {
        --css-has-selector: true;
    }
}

@supports (container-type: inline-size) {
    :root {
        --css-container-queries: true;
    }
}

@supports(anchor-name: --foo) {
    --css-anchors: true;
}

@supports (color: oklch(60% 0.15 50)) {
    :root {
        --css-color-oklch: true;
    }
}

@supports (color: color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))) {
    :root {
        --css-color-mix: true;
    }
}

@supports (color: oklch(from #ff0 l c h)) {
    :root {
        --css-color-relative: true;
    }
}


/* /assets/css/reset.css */

/* Some basic resets inspired by Kevin Powell's CodePen example. */
/* https://codepen.io/kevinpowell/pen/QWxBgZX */

/* Use border-box as default sizing. */
*,
*::before,
*::after
{
    box-sizing: border-box;
}

/* Remove default spacing and inherit font by default. */
* {
    margin: 0;
    padding: 0;
    font: inherit;
}

/* Set body element always to minimum 100 viewport height. */
body {
    min-height: 100vh;
}

/* Make all images, videos and iframes responsive and borderless by default. */
img, picture, svg, video, iframe
{
    border: none;
    display: block;
    max-width: 100%;
}

/* Headings. */
h1, h2, h3, h4, h5, h6
{
    margin-inline-start: 0;
    margin-inline-end: 0;
}

h1 {
    margin-block-start: .67em;
    margin-block-end: .67em;
}

h2 {
    margin-block-start: .83em;
    margin-block-end: .83em;
}

h3 {
    margin-block-start: 1em;
    margin-block-end: 1em;
}

h4 {
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
}

h5 {
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
}

h6 {
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
}


/* /assets/css/howspace.css */

:root {
    --howspace-border-radius-1: .25rem;
    --howspace-border-radius-2: .5rem;
    --howspace-border-radius-3: 1rem;
    --howspace-border-radius-10: 10rem;
    --howspace-logo-max-height: 32px;

    /* Colors from https://www.figma.com/file/v6wgqnVugi4gfow0ToOW3p/HowSystem?node-id=23%3A115 */
    --howspace-color-violet-130: hsl(257, 49%, 38%);
    --howspace-color-violet-110: hsl(257, 48%, 50%);
    --howspace-color-violet-100: hsl(257, 59%, 55%);
    --howspace-color-violet-85: hsl(258, 56%, 60%);
    --howspace-color-violet-50: hsl(258, 59%, 77%);
    --howspace-color-violet-20: hsl(258, 57%, 91%);
    --howspace-color-violet-10: hsl(254, 57%, 95%);
    --howspace-color-violet-5: hsl(257, 64%, 98%);

    --howspace-color-black-100: hsl(257, 5%, 9%);
    --howspace-color-black-75: hsl(240, 1%, 32%);
    --howspace-color-black-55: hsl(0, 0%, 48%);
    --howspace-color-black-25: hsl(0, 0%, 77%);
    --howspace-color-black-15: hsl(240, 1%, 86%);
    --howspace-color-black-5: hsl(240, 4%, 95%);

    --howspace-color-white: hsl(0, 0%, 100%);

    --howspace-color-error: hsl(0, 100%, 44%);
    --howspace-color-success: hsl(160, 86%, 26%);
    --howspace-color-alert: hsl(43, 100%, 54%);
    --howspace-color-notification: hsl(137, 70%, 45%);

    --howspace-color-palette-1: hsl(257, 59%, 55%);
    --howspace-color-palette-2: hsl(282, 59%, 55%);
    --howspace-color-palette-3: hsl(307, 59%, 55%);
    --howspace-color-palette-4: hsl(332, 59%, 55%);
    --howspace-color-palette-5: hsl(357, 59%, 55%);
    --howspace-color-palette-6: hsl(22, 59%, 55%);
    --howspace-color-palette-7: hsl(47, 59%, 55%);
    --howspace-color-palette-8: hsl(72, 59%, 55%);
    --howspace-color-palette-9: hsl(97, 59%, 55%);
    --howspace-color-palette-10: hsl(122, 59%, 55%);
    --howspace-color-palette-11: hsl(147, 59%, 55%);
    --howspace-color-palette-12: hsl(172, 59%, 55%);

    --howspace-color-widget-bg: var(--howspace-color-white);
    --howspace-color-widget-border: var(--howspace-color-black-25);
    --howspace-color-widget-text: var(--howspace-color-black-100);
    --howspace-color-widget-title-bg: var(--howspace-color-violet-100);
    --howspace-color-widget-title: var(--howspace-color-white);
    --howspace-color-page-bg: var(--howspace-color-black-5);
    --howspace-color-facilitated-path-navigator-bg: var(--howspace-color-white);

    --howspace-color-orange-100: hsl(14, 100%, 88%);
    --howspace-color-red-100: hsl(354, 86%, 86%);

    --howspace-color-link: var(--howspace-color-violet-100);
    --howspace-color-primary: var(--howspace-color-violet-100);

    --howspace-color-box-shadow: hsla(0, 0%, 0%, 0.15);
    --howspace-background-color: var(--howspace-color-black-5);
    --howspace-background: var(--howspace-background-color);

    --howspace-color-path-step-background: hsla(0, 0%, 100%, 0.3);
    --howspace-color-container-background: hsla(0, 0%, 100%, 0.8);
    --howspace-color-column-background: hsla(0, 0%, 100%, 0.6);

    --howspace-animations-enabled: true;
    --howspace-animation-25: 25ms;
    --howspace-animation-50: 50ms;
    --howspace-animation-100: 100ms;
    --howspace-animation-150: 150ms;
    --howspace-animation-200: 200ms;
    --howspace-animation-350: 350ms;
    --howspace-animation-500: 500ms;
    --howspace-animation-700: 700ms;
    --howspace-animation-3000: 3000ms;

    --howspace-box-shadow: 0 .25rem .75rem var(--howspace-color-box-shadow);
    --howspace-alpha: 1;

    --howspace-header-font-family: "GT Walsheim", sans-serif;
    --howspace-content-font-family: "GT Walsheim", sans-serif;
    --howspace-content-font-size: 1rem;
    --howspace-content-line-height: 1.4;
    --howspace-header-justify-content: start;
    --howspace-header-font-weight: 500;

    --howspace-color-navbar-background: var(--howspace-color-white);
    --howspace-color-navbar-background-hover: var(--howspace-color-violet-5);
    --howspace-color-navbar-text: var(--howspace-color-black-100);
    --howspace-navbar-default-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

    --howspace-sticky-notes-bg-color-1: hsl(51, 93%, 83%);
    --howspace-sticky-notes-bg-color-2: hsl(341, 81%, 79%);
    --howspace-sticky-notes-bg-color-3: hsl(333, 81%, 65%);
    --howspace-sticky-notes-bg-color-4: hsl(28, 93%, 67%);
    --howspace-sticky-notes-bg-color-5: hsl(68, 66%, 64%);
    --howspace-sticky-notes-bg-color-6: hsl(166, 29%, 69%);
    --howspace-sticky-notes-bg-color-7: hsl(15, 11%, 78%);
    --howspace-sticky-notes-bg-color-8: hsl(33, 87%, 83%);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --howspace-animations-enabled: false;
        --howspace-animation-25: 0ms;
        --howspace-animation-50: 0ms;
        --howspace-animation-100: 0ms;
        --howspace-animation-150: 0ms;
        --howspace-animation-200: 0ms;
        --howspace-animation-350: 0ms;
        --howspace-animation-500: 0ms;
        --howspace-animation-700: 0ms;
        --howspace-animation-3000: 0ms;
    }
}

html, body {
    color: var(--howspace-color-black-100);
    font-family: var(--howspace-content-font-family);
}

a {
    color: var(--howspace-color-link);
}

hr {
    border: 1px solid var(--howspace-color-black-25);
    border-width: 1px 0 0 0;
    margin: 1rem 0;
}

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

ul, ol {
    line-height: 1.7;
    padding-inline-start: 1rem;
}

pre {
    font-family: monospace;
}

:where(*[tabindex]:focus-visible, a[href]:focus-visible) {
    border-radius: var(--howspace-border-radius-2);
    outline: .125rem solid var(--howspace-color-primary);
    outline-offset: .125rem;
}

/* scale body font size for mobile */
@media (max-width: 767px) {
    html {
        font-size: .875rem;
    }

    #workspace-manager main#main,
    .page > .page-containers > .page-container,
    .page > .pinned-containers > .page-container,
    .page .page-path-navigator
    {
        padding-left: 0;
        padding-right: 0;
    }

    .page .page-path-navigator .page-path-navigator-content,
    .page .widget,
    .page .widget .widget-title,
    .page .widget[data-widget-mode="view"] > .howspace-video-player,
    .page .widget > .image-wrapper > .howspace-picture,
    #workspace-manager .card,
    #workspace-manager .card-title
    {
        border-radius: 0;
    }
}

@font-face {
    font-family: "GT Walsheim";
    font-weight: 400;
    src: url(/assets/fonts/GT-Walsheim-LC-Regular.woff);
}

@font-face {
    font-family: "GT Walsheim";
    font-weight: 500;
    src: url(/assets/fonts/GT-Walsheim-LC-Medium.woff);
}

@font-face {
    font-family: "GT Walsheim";
    font-weight: 700;
    src: url(/assets/fonts/GT-Walsheim-LC-Bold.woff);
}