/* =====================================================================
   60 · PROJECT VIEWER  —  tabs on top, the sheet in the middle,
        title block and buttons at the bottom, thumbnail rail on the right
   Sizes: --bar, --vr, --rail-display, --vpad in 00-settings.css.
   Layout changes per device are at the bottom of this file:
     PHONE LANDSCAPE   bar becomes a column on the right
     PHONE PORTRAIT    bar has two rows, hint to rotate
   ===================================================================== */

.viewer { background: var(--black); --vink: #fff; --vbg: #000; }
.viewer.on-light { --vink: #000; }

/* Project tabs: a strip that scrolls sideways, the Close button stays beside it */
.viewer__top { position: absolute; top: 0; left: 0; right: 0; height: var(--top); z-index: 20; display: flex; align-items: center; gap: 10px; padding: 0 var(--gutter); color: var(--vink); background: var(--vbg); }
.viewer__tabs { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 0 18px 0 2px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.viewer__tabs::-webkit-scrollbar { display: none; }
.viewer__tabs .pill, .viewer__close { flex: 0 0 auto; font-size: var(--tabs-fs); border-color: var(--vink); color: var(--vink); scroll-snap-align: start; }
.viewer__tabs .pill.is-current { background: var(--vink); color: var(--vbg); }
@media (hover: hover) and (pointer: fine) { .viewer__tabs .pill:hover, .viewer__close:hover, .viewer__ctl .pill:hover { background: var(--vink); color: var(--vbg); } }

/* Stage holds every project; the active one shows */
.viewer__stage { position: absolute; inset: 0; touch-action: pan-y; }
.proj { position: absolute; inset: 0; visibility: hidden; }
.proj.is-active { visibility: visible; }

/* Thumbnail rail */
.viewer__rail { position: absolute; right: 20px; top: calc(var(--top) + 4px); bottom: var(--bar); width: calc(var(--vr) - 50px); z-index: 21; display: var(--rail-display); flex-direction: column; gap: 8px; overflow: auto; scrollbar-width: none; padding: 2px; }
.viewer__rail::-webkit-scrollbar { display: none; }
.viewer__rail button { flex: 0 0 auto; width: 100%; aspect-ratio: 16/9; background: #222; outline: 1px solid color-mix(in srgb, var(--vink) 30%, transparent); outline-offset: -1px; opacity: .6; transition: opacity var(--t-hover) ease, transform var(--t-hover) var(--ease-out); overflow: hidden; }
.viewer__rail button img { width: 100%; height: 100%; object-fit: cover; }
.viewer__rail button.is-current { opacity: 1; outline: 2px solid var(--vink); }
@media (hover: hover) and (pointer: fine) { .viewer__rail button:hover { opacity: 1; transform: translateX(-3px); } }

/* Sheet = one page of the portfolio, drawn as SVG (picture plus live text) */
.sheet { position: absolute; inset: 0; background: #000; color: #fff; visibility: hidden; opacity: 0; transform: translateY(28px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), visibility 0s linear 520ms; }
.sheet.is-active { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; z-index: 2; }
.sheet.is-leaving { visibility: visible; opacity: 0; transform: translateY(-14px); z-index: 1; transition: opacity 260ms ease, transform 300ms ease, visibility 0s linear 300ms; }
.pgbox { position: absolute; top: var(--top); bottom: var(--bar); left: var(--vpad); right: var(--vr); }
.pg { display: block; width: 100%; height: 100%; }
.js .sheet--page.is-active .pg { animation: pgin 700ms var(--ease-out) both; }
@keyframes pgin { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* Bottom bar */
.viewer__bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar); z-index: 21; background: var(--vbg); color: var(--vink); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 20px max(16px, env(safe-area-inset-bottom, 0px)) var(--frame); }
.vtb { display: grid; grid-template-columns: minmax(130px, 1.7fr) 64px minmax(100px, 1.4fr) 76px 100px; min-width: 0; flex: 0 1 760px; height: 44px; border: 1px solid color-mix(in srgb, var(--vink) 65%, transparent); font-family: var(--mono); }
.vtb__c { min-width: 0; padding: 5px 9px 4px; border-left: 1px solid color-mix(in srgb, var(--vink) 65%, transparent); display: flex; flex-direction: column; justify-content: space-between; }
.vtb__c:first-child { border-left: 0; }
.vtb .k { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; opacity: .72; line-height: 1; }
.vtb .v { font-size: 13px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.viewer__ctl { display: flex; gap: 8px; flex: 0 0 auto; }
.viewer__ctl .pill { border-color: var(--vink); color: var(--vink); }

/* Tap zones left and right of the sheet (mouse only, see below) */
.viewer__zone { position: absolute; top: var(--top); bottom: var(--bar); z-index: 15; }
.viewer__zone--next { right: 0; width: 22%; cursor: e-resize; }
.viewer__zone--prev { left: 0; width: 12%; cursor: w-resize; }
@media (hover: none), (max-width: 1100px) { .viewer__zone { display: none; } }

/* Info: the back of the sheet, with the title block and facts */
.info { position: absolute; top: calc(var(--top) + 4px); left: var(--vpad); right: var(--vr); bottom: var(--bar); z-index: 19; background: rgba(0,0,0,.94); color: #fff; display: flex; overflow: auto; padding: var(--gutter); visibility: hidden; opacity: 0; transition: opacity 280ms ease, visibility 0s linear 280ms; }
.info.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.info__guides { position: absolute; inset: 0; pointer-events: none; }
.info__guides svg { width: 100%; height: 100%; }
.info__guides line { stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 6 5; }
.info__box { position: relative; margin: auto; width: min(680px, 100%); font-family: var(--mono); }
.info__box .tb { width: 100%; font-size: 15px; }
.info__box .tb__v { font-size: 16px; white-space: normal; }
.info__box .tb__k { font-size: 11px; }
.info__facts { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-family: var(--text); font-size: 14px; }
.info__facts b { display: block; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 12px; color: var(--muted); }

/* ---------- TABLET PORTRAIT and PHONE PORTRAIT: bar in two rows ---------- */
@media (orientation: portrait) {
  .viewer__bar { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px; padding: 0 var(--gutter) max(12px, env(safe-area-inset-bottom, 0px)); }
  .vtb { flex: 0 0 auto; width: 100%; }
  .viewer__ctl { justify-content: flex-end; }
  .info__facts { grid-template-columns: 1fr; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .vtb { grid-template-columns: minmax(0, 1fr) 64px 76px; }
  .vtb__c--n, .vtb__c--y { display: none; }
  .info__box .tb { font-size: 13px; }
  .info__box .tb__v { font-size: 14px; }
  /* hint under the sheet: pages are 16:9, a phone held upright shows them small */
  .pgbox::after { content: "Rotate your phone for a larger view"; position: absolute; left: 0; right: 0; top: calc(50% + (100vw - 2 * var(--vpad)) * .28125 + 14px); text-align: center; font: 400 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--vink); opacity: .55; pointer-events: none; }
}

/* ---------- PHONE LANDSCAPE: the bar becomes a column on the right ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .viewer__bar { left: auto; top: var(--top); width: var(--vr); height: auto; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 max(8px, env(safe-area-inset-right, 0px)) 8px 8px; }
  .vtb { display: block; flex: 0 0 auto; width: auto; height: auto; border: 0; }
  .vtb__c { display: none; padding: 0; border: 0; }
  .vtb__c--b { display: block; }
  .vtb__c--b .k { display: none; }
  .vtb .v { font-size: 12px; text-align: center; }
  .viewer__ctl { flex-direction: column; width: 100%; }
  .viewer__ctl .pill { width: 100%; }
  .pgbox { bottom: 6px; }
  .info { bottom: 6px; }
  .info__facts { grid-template-columns: 1fr 1fr; }
}

/* Tablet and phone: the sheet text is small, so the tabs scroll sideways instead of wrapping */
@media (orientation: landscape) and (min-height: 501px) and (max-width: 1200px) {
  .vtb { flex-basis: 640px; }
}