/* Le pagine PRIMA del login (tavola «Accesso»): index, pwlink, pwreset,
   privacy_accept, login_external, email_verify. L'impianto e' il partial
   templates/_pc_access.html: a sinistra il marchio, a destra il contenuto.
   Ha preso il posto di base.css (tolto: lo usavano solo queste pagine e map.html,
   che ora sta nello stesso impianto).
   I selettori partono da `html body.pc-access-body`: combine_common.css si
   carica DOPO questo foglio e le sue regole su html/body vincerebbero. */

html body.pc-access-body {
    margin: 0;
    padding: 0;
    background: var(--pc-surface);
    font-family: var(--pc-font);
    color: var(--pc-text);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.pc-access {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    min-height: 100vh;
    min-height: var(--app-vh, 100dvh);
}

/* ---- Il pannello del marchio ---- */
.pc-access-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 48px 56px;
    background: #F3F6FA;
}
.pc-access-logo { align-self: flex-start; height: 92px; width: auto; margin-left: -20px; }
/* Il logo di COMBINE (il login, e l'utente Personal dopo il login): il logo
   UFFICIALE con la scritta COMBINE® dentro l'immagine
   (brand/logo-combine-wordmark.png, 23/10/2026), alto quanto quello di Private
   Community. Il suo bordo trasparente (5% a sinistra) torna sul margine di
   sempre: l'anello comincia dove cominciava il logo di prima. Sotto,
   «Welcome» prende la misura che aveva «COMBINE®» (.pc-access-name). */
.pc-access-logo.pc-access-logo-combine { height: 92px; width: auto; margin-left: -16px; }
.pc-access-claim { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.pc-access-name { font: 600 40px/1.2 var(--pc-font); color: var(--pc-text-title); }
.pc-access-tag { font-size: 18px; line-height: 1.55; color: var(--pc-text-2); }
.pc-access-bars { display: flex; gap: 8px; }
.pc-access-bars i { width: 28px; height: 6px; border-radius: 3px; }
.pc-access-bars i:nth-child(1) { background: #C9252C; }
.pc-access-bars i:nth-child(2) { background: #E1433A; }
.pc-access-bars i:nth-child(3) { background: #F6BA24; }
.pc-access-bars i:nth-child(4) { background: #F7D800; }
.pc-access-bars i:nth-child(5) { background: #588CCB; }
.pc-access-bars i:nth-child(6) { background: #26508A; }

/* ---- Il contenuto ---- */
.pc-access-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px;
    background: var(--pc-surface);
}
.pc-access-box {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pc-access-h { margin: 0; font: 600 26px/1.25 var(--pc-font); color: var(--pc-text-title); }
.pc-access-p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pc-text-2); }
.pc-access-who { margin: 0; font: 600 18px/1.3 var(--pc-font); color: var(--pc-text-title); word-break: break-word; }

.pc-access-box form { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; }
.pc-access-label { margin-top: 8px; font: 600 13px var(--pc-font); color: var(--pc-text-title); }
.pc-access-label:first-child { margin-top: 0; }

.pc-access-box input[type="text"],
.pc-access-box input[type="email"],
.pc-access-box input[type="password"] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid var(--pc-border-field);
    border-radius: 10px;
    background: var(--pc-surface);
    color: var(--pc-text);
    font: 400 15px var(--pc-font);
}
.pc-access-box input:focus { outline: none; border-color: var(--pc-navy); box-shadow: var(--pc-focus-ring); }

.pc-access-box input[type="submit"],
.pc-access-box button[type="submit"] {
    width: 100%;
    height: 50px;
    margin-top: 12px;
    border: 0;
    border-radius: 10px;
    background: var(--pc-navy);
    color: #fff;
    font: 600 15px var(--pc-font);
    cursor: pointer;
}
.pc-access-box input[type="submit"]:hover,
.pc-access-box button[type="submit"]:hover { background: #1E406E; }

.pc-access-check { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pc-access-check input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--pc-navy); }
.pc-access-check label { font: 600 13px var(--pc-font); color: var(--pc-text-title); }

.pc-access-box > a,
.pc-access-box a.links {
    align-self: center;
    padding: 6px;
    color: var(--pc-navy);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.pc-access-box a { color: var(--pc-navy); font-weight: 600; }
.pc-access-box a:hover { text-decoration: underline; }

/* Avviso (login_external: «sei gia' dentro come…») */
.flashed-messages {
    padding: 12px 14px;
    background: #FEF5DE;
    border-radius: var(--pc-r-tile);
    color: #8F6400;
    font-size: 14px;
    line-height: 1.5;
}
.pc-access-box .combine-flashes,
.pc-access-box .flashes { margin: 0; padding: 0; list-style: none; }
.pc-access-box .message { display: flex; flex-direction: column; gap: 10px; }

/* ---- Telefono: il marchio diventa una testata ---- */
@media (max-width: 1000px) {
    .pc-access { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .pc-access-brand { padding: 16px 20px; gap: 0; flex-direction: row; align-items: center; }
    .pc-access-logo { height: 56px; margin-left: -10px; }
    /* Il login: la testata resta alta com'era, il cerchio nella stessa scatola
       da 56px e il suo bordo sinistro dove cominciava il logo di prima. */
    .pc-access-logo.pc-access-logo-combine { height: 56px; width: auto; margin-left: -10px; }
    .pc-access-claim, .pc-access-bars { display: none; }
    .pc-access-panel { align-items: flex-start; padding: 28px 20px 40px; }
    .pc-access-box input[type="text"],
    .pc-access-box input[type="email"],
    .pc-access-box input[type="password"] { font-size: 16px; }
}

/* EVO-5, seconda passata: il simbolo sopra il titolo (Verifica e-mail, tavola
   1g) e la persona con le iniziali (Accesso da link, tavola 1f). */
.pc-access-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--pc-navy-active);
    color: var(--pc-navy);
    font-size: 22px;
    --mi-size: 22px;
}
.pc-access-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
    padding: 10px 12px;
    border-radius: var(--pc-r-tile);
    background: var(--pc-page);
}
.pc-access-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #4F86C6;
    color: #fff;
    font: 700 14px var(--pc-font);
}
.pc-access-person-text { display: flex; flex-direction: column; min-width: 0; }
.pc-access-person .pc-access-who { margin: 0; }
.pc-access-person-sub { font-size: 12px; color: var(--pc-text-meta); }
.pc-access-icon.mi { line-height: 44px; text-align: center; }