/* De Bouwdoos — playful brick styling. Colours are classic brick colours; nothing hints at what is being built. */

:root {
    --red: #d01012;
    --blue: #0055bf;
    --yellow: #ffcf00;
    --green: #00852b;
    --orange: #fe8a18;
    --azure: #36aebf;
    --lime: #a5ca18;
    --magenta: #c870a0;
    --white: #f4f4f4;
    --dark: #1b2a34;
    --locked: #a0a5a9;

    --ink: #1b2a34;
    --paper: #f7f3e8;
    --baseplate: #e9e4d4;
    --radius: 8px;
    --shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
    font-family: "Fredoka", system-ui, sans-serif;
    color: var(--ink);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--paper);
    /* A faint baseplate: rows of studs in the background. */
    background-image: radial-gradient(circle at 12px 12px, var(--baseplate) 7px, transparent 8px);
    background-size: 24px 24px;
}

a { color: inherit; }

h1, h2 { font-weight: 700; letter-spacing: 0.01em; margin: 0 0 0.4em; }

/* ---------- top bar ---------- */

.topbar {
    background: var(--yellow);
    border-bottom: 6px solid #d9a900;
    position: relative;
}

.topbar__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
}

.logo__brick {
    width: 40px;
    height: 24px;
    background: var(--red);
    border-radius: 4px;
    position: relative;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);
}

.logo__brick::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 5px;
    right: 5px;
    height: 8px;
    background-image: radial-gradient(ellipse 6px 8px at 50% 100%, var(--red) 96%, transparent 100%);
    background-size: 15px 8px;
    background-repeat: space no-repeat;
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: 18px;
    font-weight: 500;
}

.topbar__nav a { text-decoration: none; }
.topbar__nav a:hover { text-decoration: underline; }

.inline-form { display: inline; margin: 0; }

.link-button {
    font: inherit;
    font-weight: 500;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}
.link-button:hover { text-decoration: underline; }

/* ---------- layout ---------- */

.page {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 16px 48px;
}

.hero { margin-bottom: 28px; max-width: 720px; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.hero p { font-size: 1.1rem; line-height: 1.5; margin: 0; }

.footer {
    text-align: center;
    padding: 20px 16px 28px;
    background: var(--dark);
    color: #fff;
    position: relative;
}
.footer p { margin: 0; opacity: 0.8; }

.empty { font-size: 1.1rem; }

/* ---------- bricks ---------- */

.brick {
    --c: var(--locked);
    --c-ink: #fff;
    position: relative;
    background: var(--c);
    color: var(--c-ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 -8px 0 rgba(0, 0, 0, 0.14), inset 0 2px 0 rgba(255, 255, 255, 0.25);
    margin-top: 14px; /* room for the studs */
}

/* Studs on top of every brick. */
.brick::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 14px;
    right: 14px;
    height: 13px;
    background-image: radial-gradient(ellipse 13px 13px at 50% 100%, var(--c) 96%, transparent 100%);
    background-size: 38px 13px;
    background-repeat: space no-repeat;
    filter: brightness(1.06);
}

.brick--red     { --c: var(--red); }
.brick--blue    { --c: var(--blue); }
.brick--yellow  { --c: var(--yellow); --c-ink: var(--ink); }
.brick--green   { --c: var(--green); }
.brick--orange  { --c: var(--orange); --c-ink: var(--ink); }
.brick--azure   { --c: var(--azure); --c-ink: var(--ink); }
.brick--lime    { --c: var(--lime); --c-ink: var(--ink); }
.brick--magenta { --c: var(--magenta); }
.brick--white   { --c: var(--white); --c-ink: var(--ink); }
.brick--dark    { --c: var(--dark); }
.brick--locked  { --c: var(--locked); --c-ink: #f2f2f2; }

/* The swatches and progress pieces use the same colour classes without being full bricks. */
[class*="brick--"]:not(.brick) { background: var(--c); }

.brick-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 30px 20px;
}

.brick-grid .brick {
    min-height: 170px;
    padding: 18px 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 120ms ease;
}

.brick-grid .brick:not(.brick--locked):hover { transform: translateY(-3px) rotate(-0.6deg); }

.brick__number {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
}

.brick__label { font-size: 1.15rem; font-weight: 600; }

.brick__hint { opacity: 0.85; margin-top: auto; }

.brick__actions {
    margin-top: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.brick--locked {
    background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, 0.07) 14px 28px);
}

/* ---------- progress ---------- */

.progress { margin-bottom: 30px; }

.progress__bricks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.progress__brick {
    width: 26px;
    height: 14px;
    border-radius: 3px;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.progress__label { margin: 10px 0 0; font-size: 1.05rem; }

/* ---------- buttons ---------- */

.button {
    --b: #fff;
    --b-ink: var(--ink);
    display: inline-block;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    background: var(--b);
    color: var(--b-ink);
    border: 0;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18);
    transition: transform 80ms ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(1px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.button:focus-visible, .link-button:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.button--light { --b: #fff; }
.button--ghost { --b: rgba(255, 255, 255, 0.22); --b-ink: currentColor; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }
.brick--yellow .button--ghost, .brick--white .button--ghost, .brick--lime .button--ghost,
.brick--orange .button--ghost, .brick--azure .button--ghost { box-shadow: inset 0 0 0 2px rgba(27, 42, 52, 0.45); }
.button--red   { --b: var(--red); --b-ink: #fff; }
.button--green { --b: var(--green); --b-ink: #fff; }
.button--dark  { --b: var(--dark); --b-ink: #fff; }
.button--small { padding: 5px 10px; font-size: 0.9rem; }

.htmx-request .button, .button.htmx-request { opacity: 0.6; cursor: progress; }

/* ---------- admin ---------- */

.release-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 22px;
    margin-bottom: 26px;
    font-size: 1.15rem;
}
.release-summary p { margin: 0; }

.release-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.release-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: var(--radius);
    padding: 10px 14px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

.release-row__swatch {
    width: 40px;
    height: 24px;
    border-radius: 4px;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18);
}

.release-row__name { display: flex; flex-direction: column; }
.release-row__name small { opacity: 0.7; }

.release-row__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.release-row__actions form { margin: 0; }

@media (max-width: 640px) {
    .release-row { grid-template-columns: 32px 1fr; }
    .release-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- viewer ---------- */

.viewer { display: flex; flex-direction: column; gap: 16px; }

.viewer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 18px;
}

.viewer__title { margin: 0; font-size: 1.5rem; flex: 1; }
.viewer__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.viewer__frame {
    width: 100%;
    height: calc(100vh - 260px);
    min-height: 480px;
    border: 0;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

/* ---------- messages ---------- */

.message {
    max-width: 520px;
    margin: 40px auto;
    padding: 28px 24px 30px;
    text-align: center;
}
.message h1 { font-size: 1.7rem; margin-top: 10px; }
.message p { margin: 0 0 18px; }

@media (prefers-reduced-motion: reduce) {
    .brick-grid .brick, .button { transition: none; }
}