/* Sample-paper viewer (samples page only). Sheets are real A4 at 96dpi (794×1123) and scaled as a whole. */

.viewer-sec { padding-top: 24px; }
.viewer { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.v-list { display: grid; gap: 10px; position: sticky; top: 90px; }
.v-item { display: grid; gap: 4px; text-decoration: none; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 16px; transition: border-color .15s, box-shadow .15s; }
.v-item b { color: var(--brand); font-size: .98rem; line-height: 1.35; }
.v-item small { color: var(--ink-2); font-size: .82rem; }
.v-item .chip { justify-self: start; }
.v-item:hover { border-color: var(--brand-2); }
.v-item.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.v-main { min-width: 0; }

/* red grader stamp on the first sheet */
.grade-stamp { position: absolute; top: 14px; inset-inline-end: 16px; width: 100px; height: 100px; border-radius: 50%; border: 4px solid #c0392b; color: #c0392b;
  display: grid; place-content: center; text-align: center; line-height: 1; transform: rotate(-14deg); font-family: var(--font); opacity: .9;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #c0392b; background: rgba(255, 255, 255, .6); }
.grade-stamp small { font: 700 13px/1 var(--font); letter-spacing: .1em; }
.grade-stamp b { font: 900 40px/1 var(--font-head); margin: 2px 0; }
.grade-stamp i { font: italic 700 13px/1 var(--font); direction: rtl; } /* .v-stage is ltr; without this the "!" lands on the right of מצוין */
.sheet[dir="ltr"] .grade-stamp { transform: rotate(10deg); }
.v-info h2 { font-size: 1.4rem; color: var(--brand); margin-bottom: .3em; }
.v-info p { color: var(--ink-2); margin-bottom: 10px; }
.hl-chips { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.hl-chips li { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: .82rem; padding: .25em .8em; border-radius: var(--radius-btn); }

.v-bar { display: flex; align-items: center; gap: 6px; background: var(--deep); color: #fff; padding: 8px 10px; border-radius: var(--radius) var(--radius) 0 0; }
.vt { width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vt:hover { background: rgba(255, 255, 255, .2); }
.vt .ic { width: 20px; height: 20px; }
.v-zoom { min-width: 56px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.v-page { margin-inline-start: auto; font-size: .88rem; opacity: .8; padding-inline: 6px; }

.v-stage { position: relative; height: min(78vh, 860px); overflow: auto; direction: ltr; background: #5d6470 radial-gradient(circle at 50% 0, #6f7682, #4a505a); border-radius: 0 0 var(--radius) var(--radius); touch-action: pan-x pan-y; cursor: grab; overscroll-behavior: contain; outline: none; }
.v-stage.drag { cursor: grabbing; user-select: none; }
.v-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.v-sizer { position: relative; }
.v-pages { position: absolute; top: 0; left: 0; width: 794px; transform-origin: 0 0; display: flex; flex-direction: column; gap: 24px; padding: 24px 0; }
.v-pages .sheet { position: relative; width: 794px; height: 1123px; background: #fff; color: #111; padding: 88px 84px 96px; font: 16px/1.95 "David Libre", "Times New Roman", serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); overflow: hidden; }
.v-pages .sheet.src { height: auto; min-height: 1123px; }
.v-pages .sheet[lang="en"] { font-family: "Times New Roman", Times, serif; line-height: 2; }
.v-pages .sheet::after { content: attr(data-n); position: absolute; bottom: 40px; inset-inline: 0; text-align: center; font-size: 13px; color: #555; }
.v-pages .sheet .wm { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.v-pages .sheet .wm span { transform: rotate(-32deg); font: 700 44px/1 var(--font); color: rgba(29, 53, 87, .07); white-space: nowrap; letter-spacing: .04em; }
.v-pages .sheet.last .fade { position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(rgba(255, 255, 255, 0), #fff 55%); }
/* End-of-excerpt card: frosted glass over the faded page, lock badge floating on its edge. */
.v-lock { position: absolute; inset: auto 70px 96px; display: grid; justify-items: center; gap: 10px; text-align: center; direction: rtl; font-family: var(--font);
  background: color-mix(in srgb, #fff 78%, transparent); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent); border-radius: var(--radius-lg); padding: 46px 30px 30px;
  box-shadow: 0 24px 60px rgba(16, 32, 56, .18), inset 0 1px 0 rgba(255, 255, 255, .9); }
.v-lock-ic { position: absolute; top: -30px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--brand), var(--brand-2)); color: var(--accent); box-shadow: 0 10px 24px var(--brand-a14), 0 0 0 6px #fff; }
.v-lock-ic .ic { width: 28px; height: 28px; }
.v-lock b { font: 800 26px/1.2 var(--font-head); color: var(--brand); }
.v-lock > span:not(.v-lock-ic) { color: var(--ink-2); font-size: 18px; }
.v-lock .btn { font-size: 18px; }
.v-hint { color: var(--ink-2); font-size: .85rem; text-align: center; margin-top: 10px; }
.v-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; }

.viewer.is-full { position: fixed; inset: 0; z-index: 80; width: 100%; background: var(--deep); padding: 0; display: block; }
.viewer.is-full .v-list, .viewer.is-full .v-info, .viewer.is-full .v-hint { display: none; }
.viewer.is-full .v-bar { border-radius: 0; }
.viewer.is-full .v-stage { height: calc(100vh - 56px); border-radius: 0; }

@media (max-width: 960px) {
  .viewer { grid-template-columns: 1fr; }
  .v-list { position: static; grid-auto-flow: column; grid-auto-columns: min(260px, 74vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .v-item { scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .v-stage { height: 70vh; }
  .vt { width: 36px; height: 36px; }
}