/* Area iscritti "I miei corsi" e lettore. Si appoggia ai token e ai componenti di styles.css (caricato prima). */

/* ---------- Intestazione ---------- */
.area-header { background: var(--ivory-50); }
.area-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.area-header form { margin: 0; }
.area-header .btn--ghost { background: transparent; } /* un <button>: senza, resta il grigio del browser */

/* ---------- Pagine dell'area ---------- */
.area { padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); }
.area--narrow { width: min(560px, 100%); }
.area h1 { font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.4rem); }
.area__lead { font-size: var(--text-lead); color: var(--ink-soft); margin-bottom: 2rem; }
.area__note, .area__back { font-size: var(--text-sm); color: var(--ink-soft); }
.area__note { margin-top: 1.5rem; }
.area__note + .area__note { margin-top: .75rem; }
.area__back a, .area__note a, .area__empty a { color: var(--coral-700); font-weight: 500; }
.area__empty { padding: 2rem 1.5rem; border-radius: var(--radius); background: var(--sand-200); }

.area-login { padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--radius); background: var(--white); }
.area-login__forgot { margin: 1rem 0 0; text-align: center; }

/* Il codice di Paul: si usa una volta, per scegliere la password */
.area-code { margin-top: 1.5rem; padding: clamp(1.25rem, 3.5vw, 1.75rem); border-radius: var(--radius); background: var(--sand-200); }
.area-code h2 { font-size: 1.5rem; margin-bottom: .3em; }
.area-code p { font-size: var(--text-sm); color: var(--ink-soft); }
.area-code .field { margin-bottom: 0; }
.area-code__row { display: flex; gap: .75rem; align-items: flex-end; }
.area-code__row input { flex: 1; min-width: 0; font-variant-numeric: lining-nums; letter-spacing: .08em; text-transform: uppercase; }
.area-code__row input::placeholder { text-transform: none; letter-spacing: .08em; }
.area-code .btn--ghost { background: transparent; }
.field__hint { margin: .4rem 0 0; font-size: var(--text-sm); color: var(--ink-soft); }

/* ---------- Elenco dei corsi ---------- */
.course-list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; max-width: 760px; }
.course { padding: clamp(1.5rem, 3.5vw, 2.25rem); border-radius: var(--radius); background: var(--sand-200); }
.course h2 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); margin-bottom: .25rem; }
.course__access { font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: 1.25rem; }
.course__empty { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.course__books { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.book-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap;
  min-height: 3.25rem; padding: .85rem 1.25rem; border-radius: 14px;
  background: var(--ivory-50); text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .16s var(--ease-out);
}
.book-link:active { transform: scale(.98); }
.book-link__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.book-link__meta { display: inline-flex; align-items: baseline; gap: 1rem; }
.book-link__pages { font-size: var(--text-sm); color: var(--ink-soft); }
.book-link__go { font-size: .9375rem; font-weight: 600; color: var(--coral-700); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .book-link:hover { background: var(--plum-700); color: var(--ivory-50); }
  .book-link:hover .book-link__pages { color: var(--sand-300); }
  .book-link:hover .book-link__go { color: var(--ivory-50); }
}

/* ---------- Lettore ---------- */
.area--reader { padding-top: clamp(1rem, 3vw, 2rem); }
.reader-head { width: min(900px, 100%); margin-bottom: 1.5rem; }
.reader-head h1 { margin-bottom: .2em; }
.reader-head__course { margin-bottom: .75rem; color: var(--ink-soft); }
.reader-head__note { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }

.back-link {
  display: inline-flex; align-items: center; gap: .5em; min-height: 2.75rem; margin-bottom: .75rem;
  color: var(--coral-700); font-size: .9375rem; font-weight: 500; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) { .back-link:hover { text-decoration: underline; } }

.reader-status {
  width: min(900px, calc(100% - 2.5rem)); margin: 0 auto 1rem; padding: .85rem 1.1rem;
  border-radius: 14px; background: var(--sand-200); font-size: var(--text-sm);
}

.reader-resume {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
  width: min(900px, calc(100% - 2.5rem)); margin: 0 auto 1rem; padding: .6rem .6rem .6rem 1.1rem;
  border-radius: 14px; background: var(--sand-200); font-size: var(--text-sm);
}
.reader-resume[hidden] { display: none; }
.reader-resume .btn { background: transparent; }

/* Pagine a tutta larghezza fino a 900px, ingrandibili dalla barra; resta anche lo zoom con le dita. */
.reader {
  --zoom: 1;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding-inline: .5rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.reader.is-zoomed { align-items: flex-start; } /* centrate, la parte a sinistra non si raggiungerebbe */
.reader__page {
  flex-shrink: 0;
  width: calc(100% * var(--zoom)); max-width: calc(900px * var(--zoom)); height: auto;
  aspect-ratio: auto var(--page-ratio, 1 / 1.414); /* tiene il posto finché la pagina non arriva */
  background: var(--white);
  -webkit-user-drag: none;
}
@media (min-width: 720px) { .reader { padding-inline: 1.25rem; } }

/* Barra in basso, a portata di pollice: pagina corrente e ingrandimento. */
.reader-bar {
  position: sticky; bottom: max(.75rem, env(safe-area-inset-bottom)); z-index: 5;
  display: flex; align-items: center; gap: 1rem;
  width: max-content; max-width: calc(100% - 1.5rem); margin: 1.25rem auto 0; padding: .35rem .4rem .35rem 1.1rem;
  border-radius: 999px; background: var(--plum-900); color: var(--ivory-50);
  box-shadow: 0 6px 24px rgba(46, 24, 56, .22);
  font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.reader-bar[hidden] { display: none; }
.reader-bar__page { margin: 0; white-space: nowrap; }
.reader-bar__zoom { display: flex; align-items: center; gap: .15rem; }
.reader-bar__level { min-width: 3.25em; text-align: center; color: var(--sand-300); }
.reader-bar__btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 50%; background: rgba(251, 248, 241, .1); color: inherit;
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .16s var(--ease-out), transform .12s var(--ease-out);
}
.reader-bar__btn:active { transform: scale(.94); }
.reader-bar__btn:disabled { opacity: .35; cursor: default; transform: none; }
.reader-bar__btn:focus-visible { outline: 2px solid var(--sand-300); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .reader-bar__btn:not(:disabled):hover { background: rgba(251, 248, 241, .2); }
}

@media (prefers-reduced-motion: reduce) {
  .book-link { transition: none; }
  .book-link:active { transform: none; }
  .reader-bar__btn { transition: none; }
  .reader-bar__btn:active { transform: none; }
}

@media print {
  .reader, .reader *, .reader-bar, .reader-resume { display: none }
  body::after { content: "Il materiale del corso si consulta solo online." }
}

/* ---------- Pagine di errore ---------- */
.area__errors { margin: -1rem 0 2rem; padding-left: 1.25rem; }
.area__errors li + li { margin-top: .35rem; }