/* Fonts */

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("/assets/fonts/AtkinsonHyperlegibleNext-VariableFont_wght.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("/assets/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* App */

:root, [data-theme="light"] {
    /* Global */
    font-size: 16px;
    font-family: "Atkinson Hyperlegible Next", sans-serif;
    font-weight: normal;
    line-height: 1.5;

    --color-primary-muted: #005f80;
    --color-primary: #006889;
    --color-primary-highlight: #007192;

    --color-secondary-muted: #474892;
    --color-secondary: #4f509c;
    --color-secondary-highlight: #5759a6;

    --color-danger-muted: #883136;
    --color-danger: #92393e;
    --color-danger-highlight: #9c4246;

    --color-warning-muted: #7b4300;
    --color-warning: #844c00;
    --color-warning-highlight: #8e5400;

    --color-success-muted: #1b6323;
    --color-success: #256c2c;
    --color-success-highlight: #2f7434;

    --color-status-text: white;

    --border-radius: 0.5rem;
    --border: 1px solid var(--color-border);

    --transition-duration: 0.1s;
    --transition-timing-function: ease-in-out;

    --sidebar-width: calc(min(16rem, 100%) + env(safe-area-inset-left));
    --topbar-height: calc(3.5rem + env(safe-area-inset-top));

    /* Light Theme Colors */
    --color-bg-muted-light: #ebebeb;
    --color-bg-light: #f5f5f5;
    --color-bg-highlight-light: #ffffff;

    --color-text-muted-light: #44484d;
    --color-text-light: #13161a;
    --color-text-highlight-light: #000000;

    --color-text-accent-muted-light: var(--color-primary-muted);
    --color-text-accent-light: var(--color-primary);
    --color-text-accent-highlight-light: var(--color-primary-highlight);

    --color-border-light: #b9bec4;
    --color-border-highlight-light: #7c8186;

    --color-text-primary-light: var(--color-primary);
    --color-text-secondary-light: var(--color-secondary);
    --color-text-danger-light: var(--color-danger);
    --color-text-warning-light: var(--color-warning);
    --color-text-success-light: var(--color-success);

    /* Dark Theme Colors */
    --color-bg-muted-dark: #020306;
    --color-bg-dark: #13161a;
    --color-bg-highlight-dark: #2a2e33;

    --color-text-muted-dark: #dedede;
    --color-text-dark: #eeeeee;
    --color-text-highlight-dark: #ffffff;

    --color-text-accent-muted-dark: #009cbe;
    --color-text-accent-dark: #0ea6c8;
    --color-text-accent-highlight-dark: #25afd2;

    --color-border-dark: #2a2e33;
    --color-border-highlight-dark: #44484d;

    --color-text-primary-dark: #0093c1;
    --color-text-secondary-dark: #8283c0;
    --color-text-danger-dark: #c76f74;
    --color-text-warning-dark: #c67200;
    --color-text-success-dark: #359a3f;

    /* Light Theme */
    color-scheme: light;

    --color-bg-muted: var(--color-bg-muted-light);
    --color-bg: var(--color-bg-light);
    --color-bg-highlight: var(--color-bg-highlight-light);

    --color-text-muted: var(--color-text-muted-light);
    --color-text: var(--color-text-light);
    --color-text-highlight: var(--color-text-highlight-light);

    --color-text-accent-muted: var(--color-text-accent-muted-light);
    --color-text-accent: var(--color-text-accent-light);
    --color-text-accent-highlight: var(--color-text-accent-highlight-light);

    --color-border: var(--color-border-light);
    --color-border-highlight: var(--color-border-highlight-light);

    --color-text-primary: var(--color-text-primary-light);
    --color-text-secondary: var(--color-text-secondary-light);
    --color-text-danger: var(--color-text-danger-light);
    --color-text-warning: var(--color-text-warning-light);
    --color-text-success: var(--color-text-success-light);
}

[data-theme="dark"] {
    /* Dark Theme */
    color-scheme: dark;

    --color-bg-muted: var(--color-bg-muted-dark);
    --color-bg: var(--color-bg-dark);
    --color-bg-highlight: var(--color-bg-highlight-dark);

    --color-text-muted: var(--color-text-muted-dark);
    --color-text: var(--color-text-dark);
    --color-text-highlight: var(--color-text-highlight-dark);

    --color-text-accent-muted: var(--color-text-accent-muted-dark);
    --color-text-accent: var(--color-text-accent-dark);
    --color-text-accent-highlight: var(--color-text-accent-highlight-dark);

    --color-border: var(--color-border-dark);
    --color-border-highlight: var(--color-border-highlight-dark);

    --color-text-primary: var(--color-text-primary-dark);
    --color-text-secondary: var(--color-text-secondary-dark);
    --color-text-danger: var(--color-text-danger-dark);
    --color-text-warning: var(--color-text-warning-dark);
    --color-text-success: var(--color-text-success-dark);
}

[data-theme="dark"] .light-only {
    display: none;
}

[data-theme="light"] .dark-only, :root:not([data-theme]) .dark-only {
    display: none;
}

/* Layout */

html {
    background-color: var(--color-bg-muted);
    color: var(--color-text);
    word-break: break-word;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overscroll-behavior: none;
}

#grid-layout {
    position: fixed;
    inset: 0;
    display: grid;
    gap: 1px;
    background-color: var(--color-border);
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-areas: "main-logo topbar"
                         "sidebar content";
}

#toggle-sidebar-button, #open-menu-button {
    margin-inline-end: auto;
}

#close-menu-button {
    margin-inline-start: auto;
}

#grid-layout .main-logo {
    grid-area: main-logo;
    padding-top: env(safe-area-inset-top);
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: 1rem;
    background-color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#grid-layout .main-logo a {
    text-decoration: none;
    color: inherit;
}

#grid-layout .main-logo strong {
    font-size: 2rem;
    line-height: 1;
}

#grid-layout .sidebar {
    grid-area: sidebar;
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-right: 1rem;
    padding-block: 1rem;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow: auto;
}

#grid-layout footer {
    margin-block-start: auto;
    text-align: center;
}

#grid-layout .topbar {
    grid-area: topbar;
    padding-left: 0.5rem;
    padding-top: env(safe-area-inset-top);
    padding-right: calc(0.5rem + env(safe-area-inset-right));
    background-color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

#grid-layout .content {
    grid-area: content;
    background-color: var(--color-bg-muted);
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    overflow: auto;
}

#grid-layout .content main {
    max-width: 75rem;
    margin-inline: auto;
}

#grid-layout .content main > :first-child {
    margin-block-start: 0;
}

#grid-layout .content main > :last-child {
    margin-block-end: 0;
}

@media (min-width: 901px) {
    /* Desktop */

    #grid-layout.sidebar-closed-large {
        grid-template-areas: "main-logo topbar"
                             "content content";
    }

    #grid-layout.sidebar-closed-large .sidebar {
        display: none;
    }

    #open-menu-button, #close-menu-button {
        display: none;
    }
}

@media (max-width: 900px) {
    /* Mobile */

    #grid-layout {
        grid-template-areas: "topbar topbar"
                             "content content";
    }

    #grid-layout .sidebar, #grid-layout .main-logo {
        display: none;
    }

    #toggle-sidebar-button {
        display: none;
    }

    #grid-layout.sidebar-open-small {
        grid-template-areas: "main-logo main-logo"
                             "sidebar sidebar";
    }

    #grid-layout.sidebar-open-small .sidebar, #grid-layout.sidebar-open-small .main-logo {
        display: flex;
    }

    #grid-layout.sidebar-open-small .topbar, #grid-layout.sidebar-open-small .content {
        display: none;
    }
}

@media (max-width: 260px) {
    #grid-layout .main-logo h1 svg {
        display: none;
    }
}

/* Nav Menu */

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar nav section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar nav section h2 {
    margin: 0;
}

.sidebar nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar nav li {
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    transition-property: background-color, border-color, color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}

.sidebar nav li:hover, .sidebar nav li[aria-current="page"] {
    background-color: var(--color-bg-highlight);
    border-color: var(--color-border);
    color: var(--color-text-highlight);
}

.sidebar nav li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    color: inherit;
} 

/* Common Elements */

h1 {
    margin-block-start: 0;
    margin-block-end: 0.75rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-highlight);
}

a {
    color: var(--color-text-accent);
    text-underline-offset: 0.125em;
}

a:hover {
    color: var(--color-text-accent-highlight);
}

a:active {
    color: var(--color-text-accent-muted);
}

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1rem 0;
}

pre {
    white-space: pre-wrap;
}

pre, code, kbd, samp {
    font-family: "Atkinson Hyperlegible Mono", monospace;
    letter-spacing: normal;
}

progress {
    appearance: none;
    width: 100%;
    height: 1.5rem;
    box-sizing: border-box;
    background-color: var(--color-bg);
    border: var(--border);
    border-radius: var(--border-radius);
}

progress::-webkit-progress-bar {
    background-color: transparent;
}

progress::-webkit-progress-value {
    background-color: var(--color-primary);
    border-radius: var(--border-radius);
    transition: inline-size 0.5s ease-in-out;
}

progress::-moz-progress-bar {
    background-color: var(--color-primary);
    border-start-end-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
}

/* Tool cards */

.tool-card-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    grid-template-rows: auto;
    gap: 1rem;
}

.tool-card, .tool-card > a {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
}

.tool-card > a {
    text-decoration: none;
    color: inherit;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    transition-property: border-color, color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}

.tool-card > a > * {
    margin: 0;
}

.tool-card > a:hover {
    border-color: var(--color-border-highlight);
    color: var(--color-text-highlight);
}

.tool-card .icon {
    width: 2rem;
    height: 2rem;
}

/* Icons */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Forms and Inputs */

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    transition: border-color var(--transition-duration) var(--transition-timing-function);
    max-width: 100%;
    box-sizing: border-box;
}

input:hover, input:active, select:hover, select:active, textarea:hover, textarea:active {
    border-color: var(--color-border-highlight);
}

input.invalid, select.invalid, textarea.invalid, .invalid input, .invalid select, .invalid textarea {
    border-color: var(--color-danger);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: solid 2px var(--color-primary);
    border-color: transparent;
}

input[type="checkbox"], input[type="radio"] {
    width: 0.75em;
    height: 0.75em;
    padding: 0;
    accent-color: var(--color-primary);
}

input[type="range"] {
    padding: 0;
    accent-color: var(--color-primary);
}

input[type="text"], select, button, .button {
    min-height: 2.5rem;
    box-sizing: border-box;
}

textarea {
    resize: none;
}

input:disabled, select:disabled, textarea:disabled {
    opacity: 0.7;
    pointer-events: none;
    filter: grayscale(1);
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.5rem;
    text-align: start;

    max-width: 100%;
    box-sizing: border-box;
    min-inline-size: unset;
}

fieldset label input[type="checkbox"], fieldset label input[type="radio"] {
    margin-inline-start: 0.5rem;
}

fieldset > legend {
    width: 100%;
}

fieldset > input, fieldset > select, fieldset > label {
    flex: 1 1 auto;
    width: 6rem;
}

.validation-message {
    display: none;
    color: var(--color-text-danger);
    font-size: 0.875rem;
    letter-spacing: 1px;
}

.invalid .validation-message {
    display: block;
}

/* Buttons */

a.button, a.button:hover, a.button:active {
    text-decoration: none;
}

button, .button {
    --button-color-text: var(--color-text);
    --button-color-text-hover: var(--color-text-highlight);
    --button-color-text-active: var(--color-text-muted);

    --button-color-bg: var(--color-bg);
    --button-color-bg-hover: var(--color-bg);
    --button-color-bg-active: var(--color-bg);

    --button-color-border: var(--color-border);
    --button-color-border-hover: var(--color-border-highlight);
    --button-color-border-active: var(--color-border);

    background-color: var(--button-color-bg);
    color: var(--button-color-text);
    border: 1px solid var(--button-color-border);

    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    border-radius: var(--border-radius);
    text-align: center;
    transition-property: color, background-color, border-color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
    padding: 0.5rem 1rem;
    cursor: pointer;
    box-sizing: border-box;
    touch-action: manipulation;
}

button:hover, .button:hover {
    color: var(--button-color-text-hover);
    background-color: var(--button-color-bg-hover);
    border-color: var(--button-color-border-hover);
}

button:active, .button:active {
    border-color: var(--button-color-border-active);
    background-color: var(--button-color-bg-active);    
    color: var(--button-color-text-active);
}

button.icon-only-button, .button.icon-only-button {
    --button-color-text: var(--color-text);
    --button-color-text-hover: var(--color-text-highlight);
    --button-color-text-active: var(--color-text-muted);

    --button-color-bg: transparent;
    --button-color-bg-hover: transparent;
    --button-color-bg-active: transparent;

    --button-color-border: transparent;
    --button-color-border-hover: transparent;
    --button-color-border-active: transparent;

    padding: 0.5rem;
    font-size: 1.25rem;
    line-height: normal;
}

button:disabled, .button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

button.primary, .button.primary {
    --button-color-text: var(--color-status-text);
    --button-color-text-hover: var(--color-status-text);
    --button-color-text-active: var(--color-status-text);

    --button-color-bg: var(--color-primary);
    --button-color-bg-hover: var(--color-primary-highlight);
    --button-color-bg-active: var(--color-primary-muted);

    --button-color-border: var(--color-primary);
    --button-color-border-hover: var(--color-primary-highlight);
    --button-color-border-active: var(--color-primary-muted);
}

button.secondary, .button.secondary {
    --button-color-text: var(--color-status-text);
    --button-color-text-hover: var(--color-status-text);
    --button-color-text-active: var(--color-status-text);

    --button-color-bg: var(--color-secondary);
    --button-color-bg-hover: var(--color-secondary-highlight);
    --button-color-bg-active: var(--color-secondary-muted);

    --button-color-border: var(--color-secondary);
    --button-color-border-hover: var(--color-secondary-highlight);
    --button-color-border-active: var(--color-secondary-muted);
}

button.danger, .button.danger {
    --button-color-text: var(--color-status-text);
    --button-color-text-hover: var(--color-status-text);
    --button-color-text-active: var(--color-status-text);

    --button-color-bg: var(--color-danger);
    --button-color-bg-hover: var(--color-danger-highlight);
    --button-color-bg-active: var(--color-danger-muted);

    --button-color-border: var(--color-danger);
    --button-color-border-hover: var(--color-danger-highlight);
    --button-color-border-active: var(--color-danger-muted);
}

button.warning, .button.warning {
    --button-color-text: var(--color-status-text);
    --button-color-text-hover: var(--color-status-text);
    --button-color-text-active: var(--color-status-text);

    --button-color-bg: var(--color-warning);
    --button-color-bg-hover: var(--color-warning-highlight);
    --button-color-bg-active: var(--color-warning-muted);

    --button-color-border: var(--color-warning);
    --button-color-border-hover: var(--color-warning-highlight);
    --button-color-border-active: var(--color-warning-muted);
}

button.success, .button.success {
    --button-color-text: var(--color-status-text);
    --button-color-text-hover: var(--color-status-text);
    --button-color-text-active: var(--color-status-text);

    --button-color-bg: var(--color-success);
    --button-color-bg-hover: var(--color-success-highlight);
    --button-color-bg-active: var(--color-success-muted);

    --button-color-border: var(--color-success);
    --button-color-border-hover: var(--color-success-highlight);
    --button-color-border-active: var(--color-success-muted);
}

.toggle-button input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.toggle-button:has(input[type="checkbox"]:checked) .default-content {
    display: none !important;
}

.toggle-button:has(input[type="checkbox"]:checked) .alternate-content {
    display: block !important;
}

/* Alerts */

.alert {
    --alert-text: var(--color-text);
    --alert-bg: var(--color-bg);
    --alert-border: var(--color-border);

    color: var(--alert-text);
    background-color: var(--alert-bg);
    border: 1px solid var(--alert-border);

    border-radius: var(--border-radius);
    padding: 1rem;
    margin-block-end: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.alert > * {
    margin: 0;
}

.alert.danger {
    --alert-text: var(--color-status-text);
    --alert-bg: var(--color-danger);
    --alert-border: var(--color-danger);
}

.alert.warning {
    --alert-text: var(--color-status-text);
    --alert-bg: var(--color-warning);
    --alert-border: var(--color-warning);
}

.alert.success {
    --alert-text: var(--color-status-text);
    --alert-bg: var(--color-success);
    --alert-border: var(--color-success);
}

/* Text */

.text-large {
    font-size: 1.25rem;
}

.text-subtle {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    letter-spacing: 1px;
}

.text-center {
    text-align: center;
}

.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-danger {
    color: var(--color-text-danger);
}

.text-warning {
    color: var(--color-text-warning);
}

.text-success {
    color: var(--color-text-success);
}

.text-accent {
    color: var(--color-text-accent);
}

/* Utilities */

.flex-row, .flex-row-small {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block: 1rem;
}

.flex-row > * {
    flex: 1 1 12rem;
}

.flex-row-small > * {
    flex: 1 1 8rem;
}

.flex-row-start {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
    margin-block: 1rem;
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.flex-column-small {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.card, .card-small {
    display: block;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: center;
}

.card > *, .card-small > * {
    margin: 0;
}

.card-small {
    padding: 0.5rem;
}

.space-before {
    margin-block-start: 1rem;
}

.space-after {
    margin-block-end: 1rem;
}

.space-before-large {
    margin-block-start: 2rem;
}

.space-after-large {
    margin-block-end: 2rem;
}

.remove-margin-from-children > * {
    margin: 0;
}

.alternate-content, .alternate-content-inline-block {
    display: none !important;
}

.show-alternate-content .alternate-content {
    display: block !important;
}

.show-alternate-content .alternate-content-inline-block {
    display: inline-block !important;
}

.show-alternate-content .default-content {
    display: none !important;
}

/* Syntax Highlighted Code Blocks */

code[class*="language-"],
pre[class*="language-"] {
    color: var(--color-text);
    background: none;
    font-family: "Atkinson Hyperlegible Mono", monospace;
}

pre[class*="language-"] {
    padding: 1rem;
    background: var(--color-bg);
    border-radius: var(--border-radius);
}

.token.punctuation,
.token.operator {
    color: var(--color-text);
}

.token.tag,
.token.namespace,
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.property,
.token.builtin,
.token.entity,
.token.url {
    color: var(--color-text-primary);
}

.token.attr-name,
.token.function-name,
.token.boolean,
.token.number,
.token.function,
.token.class-name,
.token.constant,
.token.symbol {
    color: var(--color-text-secondary);
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
    color: var(--color-text-warning);
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--color-text-success);
}