/* «Prova Albera» (prova.html): suggerimenti, quota ed esempi; il resto è lo stile dell'app e delle demo. */
.trial-page .trial-seed { position: relative; }
.trial-suggestions {
  position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 20;
  margin: 0; padding: .25rem 0; list-style: none;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 24px rgb(30 28 23 / .08);
}
.trial-suggestions li { padding: .55rem .9rem; cursor: pointer; line-height: 1.35; }
.trial-suggestions li span { display: block; font-size: .85rem; color: var(--ink-mute); }
.trial-suggestions li[aria-selected="true"], .trial-suggestions li:hover { background: var(--paper); }
.trial-suggestions .trial-none { cursor: default; color: var(--ink-mute); font-size: .9rem; }
.trial-page .trial-left { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; margin: 1rem 0 0; max-width: 30rem; }
.trial-examples ul { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .1rem; }
.trial-examples button {
  font: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line);
  width: 100%; text-align: left; padding: .65rem 0; cursor: pointer;
}
.trial-examples button:hover { border-bottom-color: var(--ink-faint); }
.trial-examples small { display: block; font-size: .82rem; color: var(--ink-mute); margin-top: .15rem; }
.trial-page .foot .action > span small { display: block; }
/* Le funzioni dell'account: in vista, in grigio; il clic mostra un avviso discreto (#trial-hint). */
.trial-page [data-register], .trial-page .note-toggle, .trial-page [data-vote], .trial-page [data-book-vote], .trial-page button[data-book] { opacity: .45; cursor: not-allowed; }
.trial-page [data-register]:hover, .trial-page .note-toggle:hover { color: inherit; }
.trial-hint {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 30; margin: 0;
  max-width: min(30rem, calc(100% - 32px)); padding: .7rem 1.1rem; font-size: .9rem; line-height: 1.45;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 6px 18px rgb(30 28 23 / .1);
}
.trial-hint a { color: inherit; }
/* Che cosa si fa con un account, sotto la prova. */
.trial-more { max-width: 68rem; margin: 4rem auto 6rem; padding: 3rem 24px 0 110px; border-top: 1px solid var(--line); }
.trial-more h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 400; line-height: 1.15; margin: 0 0 1rem; }
.trial-more-intro { max-width: 38rem; font-size: 1.1rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 2.5rem; }
.trial-more-list { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 2rem 2.5rem; }
.trial-more-list .icon { width: 1.4rem; height: 1.4rem; color: var(--ink-soft); }
.trial-more-list h3 { font-size: 1.15rem; font-weight: 400; margin: .5rem 0 .4rem; }
.trial-more-list p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.trial-more-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem 1.5rem; }
.trial-more-actions a { color: var(--ink); text-underline-offset: 4px; }
.trial-more-actions small { color: var(--ink-mute); }
.trial-more-cta { border: 1px solid var(--ink); background: var(--ink); color: var(--paper) !important; border-radius: 30px; padding: .6rem 1.3rem; text-decoration: none; }
@media (max-width: 760px) { .trial-more { padding: 2.5rem 16px 0; margin-bottom: 7rem; } }

.trial-activity { max-width: 68rem; margin: 4rem auto; padding: 3rem 24px 0 110px; border-top: 1px solid var(--line); }
.trial-activity h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 400; margin: 0 0 1rem; line-height: 1.15; }
.trial-activity > p { color: var(--ink-soft); line-height: 1.55; }
.trial-activity-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; }
.trial-activity-controls button, .trial-activity select { font: inherit; color: var(--ink); background: transparent; padding: .6rem .8rem; border: 1px solid var(--line); cursor: pointer; }
.trial-activity-controls button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.trial-activity-controls label { font-size: .85rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.trial-activity select { max-width: 100%; }
.trial-activity table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.trial-activity th { font-weight: 400; font-size: .82rem; color: var(--ink-mute); text-align: left; }
.trial-activity th:first-child { width: 55%; }
.trial-activity th:last-child { width: 15%; }
.trial-activity th, .trial-activity td { padding: .85rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.trial-activity th:first-child, .trial-activity td:first-child { padding-left: 0; }
.trial-activity th:last-child, .trial-activity td:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.trial-activity td { font-size: .9rem; }
.trial-activity td button { font: inherit; font-size: 1.05rem; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.trial-activity td small { display: block; color: var(--ink-mute); margin-top: .3rem; line-height: 1.4; }
.trial-activity .trial-activity-note { font-size: .82rem; max-width: 45rem; margin-top: 1.25rem; }
@media (max-width: 760px) { .trial-activity { padding: 2.5rem 16px 0; } }

.trial-more-list .trial-preview-link { display: inline-block; margin-top: .8rem; padding: .3rem 0; color: var(--ink); font-size: .9rem; text-underline-offset: 4px; }
.trial-preview-link:hover { text-decoration-thickness: 2px; }
.trial-preview { width: min(1240px, calc(100% - 40px)); max-width: none; max-height: 92vh; max-height: 92dvh; padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); overflow: auto; }
.trial-preview::backdrop { background: rgb(28 27 22 / .65); }
.trial-preview-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.trial-preview-head h2 { font-size: 1.3rem; font-weight: 400; margin: 0; }
.trial-preview-head button { flex-shrink: 0; padding: .6rem .8rem; min-height: 44px; border: 1px solid var(--line); border-radius: 2rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.trial-preview figure { margin: 0; }
.trial-preview picture, .trial-preview img { display: block; }
.trial-preview img { width: 100%; height: auto; }
.trial-preview figcaption { padding: 1rem 1.25rem 1.5rem; border-top: 1px solid var(--line); line-height: 1.5; }
.trial-preview figcaption p { margin: 0 0 .5rem; }
.trial-preview figcaption small { color: var(--ink-soft); font-size: .85rem; }
.trial-preview figcaption a { color: inherit; text-underline-offset: 3px; }
html.trial-preview-open { overflow: hidden; }
@media (max-width: 760px) {
  .trial-preview { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .trial-preview-head { padding: .6rem .8rem; }
  .trial-preview-head h2 { font-size: 1.1rem; }
}