/* Reusable TweenArt page furniture: surface, card, fields, buttons, nav.
   Nothing here is landing-specific, and nothing applies until an element opts
   in by class, so pages that still want the stock Bulma look are untouched.

   Typical use:
     <section class="tw-surface tw-surface--dotted"> ... </section>
     <div class="tw-card"> ... </div>

   One-card pages (login, set password, ...) get the whole shell from
   auth_base.html instead of restating it.
*/

:root {
    --tw-font: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --tw-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace;

    /* Channel triples so tints derive from one value instead of re-encoding
       the colour as rgba(). Orange is exactly the Bulma primary and sage the
       --main-dark-sea-green, both set in style.css; blue is the lockup's. */
    --tw-orange-rgb: 244 119 52;
    --tw-blue-rgb: 59 111 224;
    --tw-sage-rgb: 166 194 180;
    --tw-ink-rgb: 22 22 15;

    --tw-orange: rgb(var(--tw-orange-rgb));
    --tw-blue: rgb(var(--tw-blue-rgb));
    --tw-sage: rgb(var(--tw-sage-rgb));
    --tw-ink: rgb(var(--tw-ink-rgb));

    /* Discord brand, so the nav button and any CTA share one value. */
    --tw-discord: #5865f2;
    --tw-discord-dark: #4b57e8;

    --tw-paper: #fbfbfa;
    --tw-line: #e9e9e6;
    --tw-mut: #86867f;
    --tw-body: #3a3a36;  /* body copy, a step lighter than --tw-ink */

    /* Surface wash, split out so a page can re-tint one stop without
       restating the whole stack. */
    --tw-wash-warm: rgb(var(--tw-orange-rgb) / 0.13);
    --tw-wash-cool: rgb(var(--tw-sage-rgb) / 0.28);
    --tw-wash: radial-gradient(ellipse at 8% 4%, var(--tw-wash-warm), transparent 52%),
               radial-gradient(ellipse at 92% 88%, var(--tw-wash-cool), transparent 55%),
               linear-gradient(170deg, #FFFDFB 0%, #FBFBFA 55%, #F7FAF8 100%);
    --tw-dot: rgb(var(--tw-ink-rgb) / 0.11);
    --tw-dot-size: 22px;

    /* Taller than Bulma's control height; the icon box has to track it. */
    --tw-field-h: 46px;
    --tw-card-w: 430px;  /* one-card pages and the landing's register card */
}

/* ------------------------------------------------------------- surface --- */

.tw-surface {
    position: relative;
    background-color: var(--tw-paper);
    background-image: var(--tw-wash);
}

.tw-surface--dotted {
    background-image: radial-gradient(var(--tw-dot) 1px, transparent 1px), var(--tw-wash);
    background-size: var(--tw-dot-size) var(--tw-dot-size), auto, auto, auto;
}

/* ------------------------------------------------------------ backdrop --- */
/* The blown-up runner and onion-skinned Ts of _backdrop.html. Placed in
   percentages, so one set of rules serves the tall landing page and a
   single-card page alike. Fixed cost: three inline SVGs and one image. */

.tw-surface .bg-ghosts {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.tw-surface .bg-ghosts .gt,
.tw-surface .bg-ghosts .gr {
    position: absolute;
    display: block;
    height: auto;
}

.tw-surface .bg-ghosts .is-hidden-defs { position: absolute; visibility: hidden; }

.tw-surface .gr    { left: -6%;  bottom: 4%; width: 620px; opacity: 0.16; transform: rotate(-4deg); }
/* Taller drawing than the runner: pulled in so the raised arm stays in frame. */
.tw-surface .gr--art { left: 2%; bottom: 7%; width: 470px; transform: rotate(-3deg); }
.tw-surface .gt--1 { right: 1%;  top: 3%;  color: var(--tw-orange); opacity: 0.10; transform: rotate(7deg); }
.tw-surface .gt--2 { left: -3%;  top: 44%; color: var(--tw-blue);   opacity: 0.09; transform: rotate(-9deg); }
.tw-surface .gt--3 { right: 28%; top: 76%; color: var(--tw-sage);   opacity: 0.08; transform: rotate(4deg); }

/* ---------------------------------------------------------------- page --- */
/* Body type for a themed page, plus the stacking that keeps content and
   footer above the backdrop. */

.tw-page {
    position: relative;
    font-family: var(--tw-font);
    color: var(--tw-ink);
    -webkit-font-smoothing: antialiased;
}

.tw-page .hero-body {
    position: relative;
    z-index: 1;
    padding: 56px 1.5rem 72px;
}

.tw-page .footer { position: relative; z-index: 1; }

/* Centred single-card column, positioned so it stacks above the backdrop that
   shares the hero body. */
.tw-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--tw-card-w);
    margin: 0 auto;
}

/* ---------------------------------------------------------------- card --- */

.tw-card {
    font-family: var(--tw-font);
    color: var(--tw-ink);
    -webkit-font-smoothing: antialiased;
    background: #fff;
    border: 1px solid var(--tw-line);
    border-radius: 16px;
    padding: 24px 24px 22px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 30px 60px -42px rgba(20, 20, 18, 0.5);
}

.tw-card__title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: var(--tw-ink);
}

.tw-card__sub {
    font-family: var(--tw-font-mono);
    font-size: 13.5px;
    color: var(--tw-mut);
    margin: 0 0 18px;
}

.tw-card__foot {
    margin-top: 14px;
    font-size: 13px;
    color: var(--tw-mut);
    text-align: center;
}

.tw-card__foot a { color: var(--tw-blue); font-weight: 600; }

/* Stacked footer lines read as one block, not two paragraphs. */
.tw-card__foot + .tw-card__foot { margin-top: 6px; }

/* Tinted round-square icon above a card's title, for pages that report an
   outcome rather than ask for input. */
.tw-card__ico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--tw-orange-rgb) / 0.12);
    color: var(--tw-orange);
    font-size: 16px;
    margin-bottom: 14px;
}

.tw-card__text {
    font-size: 14.5px;
    line-height: 1.58;
    color: #55554e;
    margin: 0;
}

.tw-card__text a { color: var(--tw-blue); font-weight: 600; }

/* -------------------------------------------------------------- fields --- */
/* Matches the `input` class Django's widgets already emit. */

.tw-card .field { margin-bottom: 13px; }

.tw-card input.input {
    height: var(--tw-field-h);
    border-radius: 10px;
    border-color: #e3e3de;
    font-family: var(--tw-font);
    font-size: 15px;
    box-shadow: none;
}

.tw-card input.input:focus {
    border-color: var(--tw-orange);
    box-shadow: 0 0 0 3px rgb(var(--tw-orange-rgb) / 0.18);
}

/* Retint the field icon through Bulma's own tokens rather than out-weighting
   its rules: it paints the icon with these in all three states, and its focus
   colour is the link blue, which fights the orange ring. */
.tw-card .control {
    --bulma-input-icon-color: #c2c2bb;
    --bulma-input-icon-hover-color: #c2c2bb;
    --bulma-input-icon-focus-color: var(--tw-orange);
}

/* Bulma sizes the icon box from --bulma-input-height (its own control height),
   so against a taller field the icon sits above centre. */
.tw-card .control.has-icons-left .icon,
.tw-card .control.has-icons-right .icon { height: var(--tw-field-h); }

.tw-card .help.is-danger { font-family: var(--tw-font); font-size: 12.5px; }

.tw-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: #52524c;
    margin: 6px 0 16px;
    cursor: pointer;
    user-select: none;
}

.tw-terms input {
    margin-top: 2px;
    accent-color: var(--tw-orange);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.tw-terms a { color: var(--tw-blue); font-weight: 600; }

/* ------------------------------------------------------------- buttons --- */
/* Layered on Bulma's `button is-primary is-fullwidth`, which already supplies
   the fill, the white text and the disabled treatment. */

.tw-submit {
    height: 48px;
    border-radius: 11px;
    font-family: var(--tw-font);
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 10px 24px -10px var(--tw-orange);
    transition: transform 0.12s, box-shadow 0.2s;
}

.tw-submit[disabled] { box-shadow: none; }

.tw-submit:not([disabled]):hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 16px 30px -10px var(--tw-orange);
}

/* ----------------------------------------------------------------- nav --- */
/* Restyles the shared nav_bar.html in place; it keeps its Bulma classes. */

.tw-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(251, 251, 250, 0.82);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.tw-nav .navbar {
    background: transparent;
    padding: 10px 0;
    min-height: auto;
}

.tw-nav .tag {
    font-family: var(--tw-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tw-mut);
    background: #f0f0ec;
    border: 1px solid var(--tw-line);
    border-radius: 7px;
}

.tw-nav .button {
    font-family: var(--tw-font);
    font-weight: 600;
    font-size: 14.5px;
    border-radius: 9px;
    border: 1px solid transparent;
    height: auto;
    padding: 9px 16px;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.tw-nav .button.is-primary {
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 10px 24px -10px var(--tw-orange);
}

.tw-nav .button.is-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 16px 30px -10px var(--tw-orange);
}

.tw-nav .button.is-light {
    background: #fff;
    border-color: var(--tw-line);
    color: var(--tw-ink);
}

/* --------------------------------------------------------- discord btn --- */
/* Layered on Bulma's `button`. Both the nav and the landing CTA wear it, so
   the brand colour and the hover live in one place. Page-specific sizing
   (nav padding, CTA padding) stays with the page. */

.tw-btn-discord {
    background: var(--tw-discord);
    color: #fff;
    border: 1px solid transparent;
    font-family: var(--tw-font);
    font-weight: 600;
    border-radius: 9px;
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 10px 24px -10px var(--tw-discord);
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.15s ease;
}

.tw-btn-discord:hover {
    background: var(--tw-discord-dark);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 16px 30px -10px var(--tw-discord);
}

/* ----------------------------------------------------------- responsive --- */

@media screen and (max-width: 1023px) {
    /* Nothing left for the ghosts to sit beside once the layout is one column. */
    .tw-surface .bg-ghosts { display: none; }
    .tw-page .hero-body { padding: 36px 1.25rem 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .tw-submit,
    .tw-btn-discord,
    .tw-nav .button { transition: none; }
    .tw-submit:not(:disabled):hover,
    .tw-btn-discord:hover,
    .tw-nav .button.is-primary:hover { transform: none; }
}