/* Hallmark · design-system: DESIGN_rec-jetop.md (siti-torino) · theme: custom JEToP · genre: atmospheric / Operate · designed-as-app */
/* Sistema grafico condiviso di rec.jetop.com: modulo di candidatura, banchetti, statistiche e colloqui.
   La pagina pubblica (/) non lo usa. Colori e font solo tramite i token qui sotto. */

@font-face {
    font-family: 'Red Hat Display';
    src: url('/fonts/RedHatDisplay-var.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Red Hat Mono';
    src: url('/fonts/RedHatMono-var.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap
}

:root {
    color-scheme: dark;

    /* superfici: indaco notte, piu' chiare salendo */
    --color-paper: oklch(17.5% 0.05 283);
    --color-paper-2: oklch(21.5% 0.058 284);
    --color-paper-3: oklch(26% 0.066 285);
    --color-paper-4: oklch(30% 0.07 286);
    --color-ground: oklch(25.5% 0.102 279);
    --color-scrim: oklch(10% 0.04 283 / .72);
    --color-shadow: oklch(8% 0.03 283 / .55);

    /* filetti e bordi */
    --color-rule: oklch(32% 0.055 286);
    --color-rule-2: oklch(52% 0.06 288);

    /* testo */
    --color-ink: oklch(95% 0.012 290);
    --color-ink-2: oklch(83% 0.028 292);
    --color-muted: oklch(72% 0.035 293);

    /* iris */
    --color-accent: oklch(74% 0.115 298);
    --color-accent-brand: oklch(63% 0.11 300);
    --color-accent-fill: oklch(51.2% 0.175 289);
    --color-accent-fill-hover: oklch(56% 0.17 291);
    --color-accent-ink: oklch(98% 0.008 290);
    --color-accent-wash: oklch(26.5% 0.085 290);
    --color-accent-wash-2: oklch(31% 0.1 291);
    --color-accent-rule: oklch(45% 0.12 292);
    --color-focus: oklch(80% 0.12 298);

    /* stati */
    --color-ok: oklch(79% 0.13 155);
    --color-ok-wash: oklch(25% 0.05 160);
    --color-ok-rule: oklch(48% 0.09 158);
    --color-warn: oklch(82% 0.12 80);
    --color-warn-wash: oklch(26% 0.045 80);
    --color-warn-rule: oklch(52% 0.08 78);
    --color-err: oklch(73% 0.14 22);
    --color-err-ink: oklch(84% 0.08 22);
    --color-err-wash: oklch(25% 0.06 22);
    --color-err-rule: oklch(50% 0.11 22);

    /* font */
    --font-body: 'Red Hat Display', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Red Hat Display', ui-sans-serif, system-ui, sans-serif;
    --font-data: 'Red Hat Mono', ui-monospace, monospace;
    --font-hand: 'Schoolbell', cursive;

    /* scala 1.25 da 16px */
    --text-xs: .8rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-md: 1.25rem;
    --text-lg: 1.5625rem;
    --text-xl: 1.9531rem;
    --text-2xl: 2.4414rem;
    --text-title: clamp(1.75rem, 3vw + 1rem, 2.75rem);

    /* spazi (4pt) */
    --space-3xs: .125rem;
    --space-2xs: .25rem;
    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* forme */
    --radius-pill: 999px;
    --radius-input: 10px;
    --radius-module: 14px;
    --radius-small: 6px;

    /* movimento */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-micro: 120ms;
    --dur-short: 220ms;
    --dur-long: 420ms;

    /* livelli */
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;

    /* nomi storici delle pagine, puntano ai token */
    --bg: var(--color-paper);
    --panel: var(--color-paper-2);
    --panel-2: var(--color-paper-3);
    --panel-3: var(--color-paper-4);
    --text: var(--color-ink);
    --muted: var(--color-muted);
    --iris: var(--color-accent);
    --iris-strong: var(--color-accent-fill);
    --iris-soft: var(--color-accent-wash);
    --iris-line: var(--color-accent-rule);
    --line: var(--color-rule);
    --line-strong: var(--color-rule-2);
    --ok: var(--color-ok);
    --ok-soft: var(--color-ok-wash);
    --warn: var(--color-warn);
    --warn-soft: var(--color-warn-wash);
    --err: var(--color-err);
    --full: var(--color-accent-wash-2);
    --radius: var(--radius-module);
    --ring: 0 0 0 3px var(--color-accent-wash-2);
}

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

html {
    overflow-x: clip;
    scrollbar-color: var(--color-paper-4) var(--color-paper);
    -webkit-text-size-adjust: 100%
}

body {
    overflow-x: clip;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit
}

a {
    color: var(--color-accent);
    text-underline-offset: .2em;
    text-decoration-thickness: 1px
}

::selection {
    background: var(--color-accent-fill);
    color: var(--color-accent-ink)
}

input,
textarea {
    caret-color: var(--color-accent)
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px
}

/* niente riquadro azzurro al tocco su Android: il riscontro lo danno gli stati :active */
* {
    -webkit-tap-highlight-color: transparent
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-style: normal;
    text-wrap: balance;
    overflow-wrap: anywhere;
    min-width: 0
}

p {
    text-wrap: pretty
}

.mono,
.data {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums
}

.hidden {
    display: none !important
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

/* menu a tendina: stessa freccia (Phosphor caret-down) e stessi colori ovunque */
select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23B49BEA'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 14px;
    padding-right: 2.5rem;
    cursor: pointer
}

select:disabled {
    opacity: .55;
    cursor: not-allowed
}

select option,
select optgroup {
    background-color: var(--color-paper-2);
    color: var(--color-ink)
}

input[type=checkbox],
input[type=radio] {
    accent-color: var(--color-accent-fill)
}

/* icone Phosphor (MIT), riempite con il colore del testo */
.ic {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: currentColor;
    pointer-events: none
}

/* ---------- pulsanti: pillola, una sola voce in tutto il sito ---------- */
.btn,
button.primary,
button.ghost,
button.danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 40px;
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--color-accent-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out)
}

button.ghost {
    background: transparent;
    color: var(--color-accent)
}

.btn.primary,
button.primary {
    background: var(--color-accent-fill);
    border-color: var(--color-accent-fill);
    color: var(--color-accent-ink)
}

.btn.danger,
button.danger {
    background: var(--color-err-wash);
    border-color: var(--color-err-rule);
    color: var(--color-err-ink)
}

@media (hover: hover) {

    .btn:hover,
    button.ghost:hover {
        background: var(--color-accent-wash);
        border-color: var(--color-accent)
    }

    .btn.primary:hover,
    button.primary:hover {
        background: var(--color-accent-fill-hover);
        border-color: var(--color-accent-fill-hover)
    }

    .btn.danger:hover,
    button.danger:hover {
        background: var(--color-err-wash);
        border-color: var(--color-err)
    }
}

.btn:active,
.icon-btn:active,
button.primary:active,
button.ghost:active,
button.danger:active {
    transform: translateY(1px)
}

.btn:disabled,
button.primary:disabled,
button.ghost:disabled,
button.danger:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-rule-2);
    background: var(--color-paper-3);
    color: var(--color-ink);
    cursor: pointer;
    transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out)
}

@media (hover: hover) {
    .icon-btn:hover {
        border-color: var(--color-accent);
        color: var(--color-accent)
    }
}

/* ---------- intestazione degli strumenti ---------- */
.app-head {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) clamp(var(--space-md), 4vw, var(--space-xl));
    background: var(--color-paper-2);
    border-bottom: 1px solid var(--color-rule)
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-ink);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap
}

.app-brand img {
    height: 26px;
    width: auto
}

.app-brand .app-name {
    font-size: var(--text-base)
}

.app-brand .app-name span {
    color: var(--color-muted);
    font-weight: 600
}

/* selettore tra gli strumenti: la pagina attiva e' piena */
.app-switch {
    justify-self: center;
    display: inline-flex;
    gap: var(--space-3xs);
    padding: var(--space-3xs);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-pill);
    background: var(--color-paper)
}

.app-switch a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 34px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-pill);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out)
}

.app-switch a[aria-current="page"] {
    background: var(--color-accent-fill);
    color: var(--color-accent-ink)
}

@media (hover: hover) {
    .app-switch a:not([aria-current="page"]):hover {
        background: var(--color-paper-3);
        color: var(--color-ink)
    }
}

.app-status {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-muted);
    font-size: var(--text-xs);
    white-space: nowrap
}

.app-status .data {
    font-size: var(--text-xs)
}

.btn-ghost {
    min-height: 36px;
    padding: 0 var(--space-sm);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-ink-2);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out)
}

@media (hover: hover) {
    .btn-ghost:hover {
        color: var(--color-ink);
        border-color: var(--color-accent)
    }
}

/* stato dell'aggiornamento: pallino con significato reale (ok, carica, errore) */
.dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--color-ok)
}

.dot.load {
    background: var(--color-accent)
}

.dot.err {
    background: var(--color-err)
}

/* ---------- accesso (Google + codice via email, assets/google-login.js) ---------- */
.login {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-lg) var(--space-md)
}

.login-box {
    width: min(420px, 100%);
    padding: var(--space-xl) var(--space-lg);
    background: var(--color-paper-2);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-module)
}

.login-brand {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    font-weight: 800
}

.login-brand img {
    height: 30px
}

.login-box h1 {
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: var(--space-2xs)
}

.login-box p {
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg)
}

.login-box input {
    width: 100%;
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--color-paper-3);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-input);
    color: var(--color-ink);
    font-size: 16px
}

.login-box input:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px
}

.login-box button.primary {
    width: 100%;
    min-height: 44px
}

.login-status {
    min-height: 1.5em;
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-err)
}

.otp-link,
.login-box button.otp-link {
    background: none;
    border: 0;
    padding: var(--space-xs) 0;
    margin-top: var(--space-md);
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .2em
}

.otp-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-top: var(--space-sm);
    text-align: left
}

.otp-step .otp-link {
    margin-top: var(--space-2xs);
    align-self: center
}

.otp[hidden],
.otp-step[hidden] {
    display: none
}

.otp-hint {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: var(--space-xs)
}

/* ---------- piede ---------- */
.foot {
    margin-top: var(--space-2xl);
    color: var(--color-muted);
    font-size: var(--text-xs);
    text-align: center
}

/* ---------- telefono e touch ---------- */
@media (max-width: 760px) {

    /* su telefono l'intestazione ha due righe: scorre via con la pagina invece di restare fissa */
    .app-head {
        position: static;
        grid-template-columns: auto auto;
        grid-template-areas: "brand status" "switch switch";
        row-gap: var(--space-sm);
        padding: var(--space-xs) var(--space-md) var(--space-sm)
    }

    .app-brand {
        grid-area: brand
    }

    .app-status {
        grid-area: status
    }

    .app-switch {
        grid-area: switch;
        justify-self: stretch;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr)
    }

    .app-switch a {
        justify-content: center;
        padding: 0 var(--space-xs)
    }

    .app-status #updated {
        display: none
    }
}

@media (max-width: 400px) {
    .app-switch .ic {
        display: none
    }
}

@media (max-width: 760px),
(pointer: coarse) {

    .btn,
    button.primary,
    button.ghost,
    button.danger,
    .btn-ghost,
    .app-switch a {
        min-height: 44px
    }

    .icon-btn {
        width: 44px;
        height: 44px
    }

    .app-brand {
        min-height: 44px
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 150ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
        scroll-behavior: auto !important
    }
}