@import url("./tokens.e0c1fb652ae0.css");

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light dark;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
    color: var(--color-on-surface);
    background: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button,
.button {
    appearance: none;
    border: 0;
    border-radius: var(--radius-pill);
    padding: var(--size-2) var(--size-5);
    font: inherit;
    font-weight: 500;
    background: var(--color-primary);
    color: var(--color-on-primary);
    cursor: pointer;
    transition: background var(--duration-1) var(--ease-1), box-shadow var(--duration-1) var(--ease-1);
    box-shadow: var(--shadow-1);
}

button:hover,
.button:hover {
    box-shadow: var(--shadow-2);
}

button.ghost,
.button.ghost {
    background: transparent;
    color: var(--color-primary);
    box-shadow: none;
}

/* Styled <select> that matches the input / contact-picker chrome.
   Opt-in via class so existing minimal-chrome selects (like the board
   font picker) aren't affected. The chevron is baked into the
   background as an SVG with a neutral stroke colour that reads on
   both light and dark surfaces. */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--size-2) center;
    color: var(--color-on-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-2);
    padding: var(--size-2) calc(var(--size-3) + 18px) var(--size-2) var(--size-3);
    font: inherit;
    cursor: pointer;
}

.form-select:hover {
    border-color: var(--color-on-surface-muted);
}

.form-select:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-container);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--size-3) var(--size-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-outline);
}

.topbar .brand {
    font-weight: 600;
    font-size: var(--font-size-3);
    letter-spacing: -0.01em;
    color: var(--color-on-surface);
    display: inline-flex;
    align-items: center;
}

.brand__logo {
    display: block;
    width: 56px;
    aspect-ratio: 945 / 473;
    -webkit-mask: url("../img/zoop.c83048d1aa28.svg") center / contain no-repeat;
            mask: url("../img/zoop.c83048d1aa28.svg") center / contain no-repeat;
    background-color: #6d28d9;
    background-image:
        radial-gradient(circle, #ff5fa8 0%, transparent 70%),
        radial-gradient(circle, #ffe14d 0%, transparent 70%),
        radial-gradient(circle, #6ab8ff 0%, transparent 70%),
        radial-gradient(circle, #5eead4 0%, transparent 70%),
        radial-gradient(circle, #c4a8ff 0%, transparent 75%);
    background-size: 200% 200%, 180% 180%, 220% 220%, 160% 160%, 240% 240%;
    background-repeat: no-repeat;
    background-blend-mode: screen;
    animation: brand-plasma 5s linear infinite;
}

@keyframes brand-plasma {
    0% {
        background-position:
            -60% 30%,
            130% 60%,
            40% -10%,
            -40% 70%,
            150% 20%;
    }
    50% {
        background-position:
            70% 50%,
            10% 20%,
            -30% 60%,
            90% 30%,
            30% 80%;
    }
    100% {
        background-position:
            160% 30%,
            -60% 60%,
            130% -10%,
            160% 70%,
            -60% 20%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand__logo { animation: none; }
}

.main {
    padding: var(--size-6) var(--size-5);
    max-width: 1280px;
    margin: 0 auto;
}

/* The asset-viewer page wants to use the whole window width minus
   the gutter — capping at 1280px would leave a huge empty margin on
   wide monitors. :has() lets us scope this without touching the
   shared base template. */
.main:has(.viewer) {
    max-width: none;
}

/* Embed mode: the page is rendered inside the asset-review shell iframe
   (?embed=1 → body.embedded). The shell supplies the chrome, so the
   framed page drops the global topbar and fills the frame edge-to-edge.
   This lives in base.css — not review-shell.css — because the iframe
   document loads base.css but not the shell's stylesheet. */
body.embedded .topbar { display: none; }
body.embedded .main {
    max-width: none;
    margin: 0;
    padding: var(--size-4) var(--size-5);
}

.card {
    background: var(--color-surface-1);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-2);
    padding: var(--size-5);
    box-shadow: var(--shadow-1);
}

.mode-badge {
    display: inline-block;
    padding: var(--size-1) var(--size-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-0);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mode-badge.internal {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.mode-badge.external {
    background: var(--color-surface-2);
    color: var(--color-on-surface-muted);
}

/* ------------------------------------------------------------------
   Modal — native <dialog>, centred card.
   ------------------------------------------------------------------ */

dialog.modal {
    padding: 0;
    border: 0;
    border-radius: var(--radius-3);
    background: var(--color-surface-1);
    color: var(--color-on-surface);
    box-shadow: var(--shadow-3);
    width: min(480px, calc(100vw - var(--size-5)));
    max-height: calc(100vh - var(--size-6));
}

dialog.modal::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.modal-form {
    display: grid;
    gap: 0;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--size-5) var(--size-5) var(--size-3);
}

.modal-header h2 {
    margin: 0;
    font-size: var(--font-size-4);
    font-weight: 500;
}

.modal-close {
    appearance: none;
    background: transparent;
    border: 0;
    padding: var(--size-1);
    cursor: pointer;
    color: var(--color-on-surface-muted);
    border-radius: var(--radius-pill);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--color-surface-2);
    color: var(--color-on-surface);
    box-shadow: none;
}

.modal-body {
    padding: var(--size-3) var(--size-5) var(--size-5);
}

.modal-field {
    display: grid;
    gap: var(--size-2);
}

.modal-field input[type="text"] {
    font: inherit;
    padding: var(--size-3) var(--size-4);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-2);
    background: var(--color-surface);
    color: var(--color-on-surface);
}

.modal-field input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-container);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-3);
    padding: var(--size-3) var(--size-5) var(--size-5);
}

/* ---------- folder picker (inside move-picker modal) ---------- */

.folder-picker {
    display: grid;
    gap: var(--size-2);
}

.folder-picker__search {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-2);
    background: var(--color-surface);
    color: var(--color-on-surface);
    font: inherit;
    padding: var(--size-2) var(--size-3);
}

.folder-picker__search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-container);
}

.folder-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-2);
}

.folder-picker__item {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-2) var(--size-3);
    cursor: pointer;
    border-bottom: 1px solid var(--color-surface-2);
    border-left: 3px solid transparent;
}

.folder-picker__item:last-child {
    border-bottom: none;
}

.folder-picker__item-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* Hover / keyboard-cursor: a soft tint that signals "you're hovering
   here" without claiming a commitment. */
.folder-picker__item:hover,
.folder-picker__item.is-active {
    background: var(--color-surface-2);
}

/* Selected: the row the user has actually picked. A solid accent
   stripe on the left, a tinted background, and a check icon on the
   right. Persists even when the cursor moves away. */
.folder-picker__item.is-selected {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    border-left-color: var(--color-primary);
}

.folder-picker__item-name {
    font-weight: 500;
    font-size: var(--font-size-1);
}

.folder-picker__item.is-selected .folder-picker__item-name {
    font-weight: 600;
}

.folder-picker__item-crumbs {
    font-size: var(--font-size-0);
    color: var(--color-on-surface-muted);
}

.folder-picker__item.is-selected .folder-picker__item-crumbs {
    color: var(--color-on-primary-container);
}

.folder-picker__item-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity 80ms ease-out;
}

.folder-picker__item.is-selected .folder-picker__item-check {
    opacity: 1;
}

.folder-picker__empty {
    padding: var(--size-3);
    color: var(--color-on-surface-muted);
    font-size: var(--font-size-1);
    text-align: center;
    border: 1px dashed var(--color-outline);
    border-radius: var(--radius-2);
}

/* ---------- flash messages (django.contrib.messages) ---------- */

.flash-stack {
    display: grid;
    gap: var(--size-2);
    margin: 0 0 var(--size-4);
}

.flash {
    padding: var(--size-2) var(--size-4);
    border-radius: var(--radius-2);
    background: var(--color-surface-1);
    border: 1px solid var(--color-outline);
    font-size: var(--font-size-1);
}

.flash-error {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
}

/* ---------- top-nav burger menu (About / Help / Sign out) ---------- */

.nav-menu {
    position: relative;
    display: inline-flex;
}

/* Override the global primary-button styling for the icon trigger. */
.nav-menu [data-nav-menu-trigger] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: var(--color-on-surface-muted);
    box-shadow: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.nav-menu [data-nav-menu-trigger]:hover {
    background: var(--color-surface-2);
    color: var(--color-on-surface);
    box-shadow: none;
}

.nav-menu [data-nav-menu-trigger] svg {
    width: 20px;
    height: 20px;
}

.nav-menu-popup {
    position: absolute;
    top: calc(100% + var(--size-1));
    right: 0;
    min-width: 180px;
    z-index: 1000;
    display: grid;
    gap: 1px;
    padding: var(--size-1);
    background: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
}

.nav-menu-popup[hidden] {
    display: none;
}

/* The sign-out POST form is just a layout passthrough for its button. */
.nav-menu-popup form {
    margin: 0;
    display: contents;
}

.nav-menu-popup [role="menuitem"] {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--size-2) var(--size-3);
    border: 0;
    border-radius: var(--radius-1);
    background: transparent;
    box-shadow: none;
    color: var(--color-on-surface);
    font: inherit;
    font-size: var(--font-size-1);
    text-decoration: none;
    cursor: pointer;
}

.nav-menu-popup [role="menuitem"]:hover,
.nav-menu-popup [role="menuitem"]:focus {
    background: var(--color-surface-2);
    color: var(--color-on-surface);
    box-shadow: none;
    outline: none;
}

/* ---------- notifications bell (navbar) ---------- */

.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: var(--color-on-surface-muted);
    box-shadow: none;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
}

.notif-bell:hover {
    background: var(--color-surface-2);
    color: var(--color-on-surface);
}

.notif-bell svg {
    width: 20px;
    height: 20px;
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-accent, #1A73E8);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

.notif-badge[hidden] {
    display: none;
}

/* ---------- notifications list ---------- */

.notif-item-unread {
    background: var(--color-surface-2);
}

/* ---------- static content pages (About / Help) ---------- */

.content-page {
    max-width: 720px;
    margin: 0 auto;
}

.content-page > h1 {
    font-size: var(--font-size-5, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 var(--size-5);
}

.content-page__version {
    margin: var(--size-6) 0 0;
    padding-top: var(--size-4);
    border-top: 1px solid var(--color-on-surface-muted);
    color: var(--color-on-surface-muted);
    font-size: var(--font-size-2, 0.85rem);
}

.prose {
    color: var(--color-on-surface);
    line-height: 1.65;
}

.prose h2 {
    font-size: var(--font-size-4, 1.35rem);
    font-weight: 600;
    margin: var(--size-6) 0 var(--size-3);
}

.prose h3 {
    font-size: var(--font-size-3, 1.15rem);
    font-weight: 600;
    margin: var(--size-5) 0 var(--size-2);
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre {
    margin: 0 0 var(--size-4);
}

.prose ul,
.prose ol {
    padding-left: var(--size-5);
}

.prose li {
    margin: var(--size-1) 0;
}

.prose a {
    color: var(--color-primary);
    text-decoration: underline;
}

.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--color-surface-2);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-1);
}

.prose pre {
    background: var(--color-surface-2);
    padding: var(--size-4);
    border-radius: var(--radius-2);
    overflow: auto;
}

.prose pre code {
    background: transparent;
    padding: 0;
}

.prose blockquote {
    padding-left: var(--size-4);
    border-left: 3px solid var(--color-outline);
    color: var(--color-on-surface-muted);
}