/* Kiosk styles. Palette tokens are at the top (:root). */
/* Sizing: 1rem = 40px on a 2160×3840 portrait screen; scales with whichever side is tighter */
html { font-size: min(calc(100vw / 54), calc(100vh / 96)); }

:root {
  /* Official kiosk palette (Digital - RGB) */
  --midnight: #000033;   /* Midnight Digital - buttons, header */
  --sapphire: #000066;   /* Sapphire Digital - lighter button hue, pressed state */
  /*--outback: #ff6964;    */
  --outback: unset;      /* orange borders switched off; things that must stay visible fall back to Sky (see var(--outback, …)) */
  --sky-digital: #4dbfff;
  --tropical: #00e6e6;
  --rainforest: #bef096;
  --brand-gradient: linear-gradient(90deg, #4dbfff 0%, #00e6e6 40%, #bef096 72%, #ff6964 100%);

  --navy: var(--midnight);
  --navy-2: var(--sapphire);
  --blue: var(--midnight);
  --blue-bright: var(--sapphire);
  --sky: #eaf6ff;        /* pale tint of Sky Digital */
  --surface: #f3f8fc;
  --card: #ffffff;
  --line: #d7e1ec;
  --ink: #13202e;
  --muted: #5a6b7e;
  --radius: 1.2rem;
  --shadow: 0 0.2rem 1.2rem rgba(0, 0, 51, 0.08), 0 0.05rem 0.2rem rgba(0, 0, 51, 0.06);
  --border: 0.15rem solid var(--outback);
  --carousel-h: 17rem;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
body { background: var(--surface); color: var(--ink); font-family: "Segoe UI", "Public Sans", system-ui, -apple-system, Roboto, Arial, sans-serif; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.idle-cursor, body.idle-cursor * { cursor: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ================= Header (navy, from the design) ================= */
.header {
  flex-shrink: 0; height: 7rem; display: flex; align-items: center; gap: 2rem; padding: 0 2.4rem;
  color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--midnight) 0%, var(--midnight) 45%, var(--sapphire) 100%);
}
.header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.35rem; background: var(--brand-gradient); }
.header .rings { position: absolute; right: -4rem; top: -9rem; width: 26rem; height: 26rem; opacity: 0.1; stroke-width: 0.6; }
.wordmark { display: flex; align-items: center; gap: 1rem; position: relative; }
.crest { width: 4.4rem; height: 4.4rem; border-radius: 0.6rem; display: grid; place-items: center; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); font-weight: 800; font-size: 1.4rem; overflow: hidden; }
.crest img { width: 100%; height: 100%; object-fit: contain; }
.wordmark .name { font-size: 1.7rem; font-weight: 700; line-height: 1.05; letter-spacing: 0.01em; }
.wordmark .name span { display: block; font-weight: 400; }
.divider { width: 2px; height: 3.8rem; background: rgba(255,255,255,0.35); position: relative; }
.tagline { font-size: 1.45rem; font-weight: 800; line-height: 1.1; letter-spacing: 0.03em; position: relative; }
.tagline span { display: block; font-weight: 500; font-size: 1.1rem; letter-spacing: 0.05em; opacity: 0.9; }

/* ================= Tabs (segmented, blue) ================= */
.tabs-wrap { flex-shrink: 0; padding: 1.4rem 2rem 0; }
.tabs { display: grid; grid-template-columns: repeat(var(--tab-count, 4), minmax(0, 1fr)); gap: 0.6rem; padding: 0.6rem; background: var(--card); border-radius: 1.4rem; box-shadow: var(--shadow); border: var(--border); }
.tab {
  height: 5.6rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  font-size: 1.55rem; font-weight: 700; color: var(--navy); position: relative;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease;
}
.tab svg { width: 2.2rem; height: 2.2rem; flex-shrink: 0; }
.tab span { text-align: center; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tab:active { transform: scale(0.97); }
.tab.active { color: #fff; background: linear-gradient(180deg, var(--sapphire), var(--midnight)); box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 51, 0.35); }

/* ================= Content ================= */
#content { flex: 1; min-height: 0; position: relative; margin: 1.4rem 2rem 2rem; }
.pane { position: absolute; inset: 0; display: none; }
.pane.active { display: block; animation: paneIn 0.22s ease-out; }
@keyframes paneIn { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }

.map-card { height: 100%; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: var(--border); }
.map-card { position: relative; }
.map-card iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-toast { position: absolute; left: 50%; bottom: 2.4rem; transform: translate(-50%, 1rem); padding: 1.1rem 2.2rem; border-radius: 3rem;
  background: var(--midnight); color: #fff; font-size: 1.4rem; font-weight: 600; box-shadow: 0 0.6rem 2rem rgba(0, 0, 51, 0.4); border: var(--border);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; }
.map-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= PDF viewer (based on the supplied viewer) ================= */
.viewer { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) var(--carousel-h); gap: 1.4rem; }
.v-panel, .c-panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: var(--border); min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }

.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding: 1rem 1.4rem 1rem 2rem; border-bottom: 1px solid var(--line); }
.panel-bar.small { padding: 0.8rem 2rem; }
.doc-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.page-indicator { font-size: 1.7rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-name { font-size: 1.2rem; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.section-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.page-count { font-size: 1.1rem; color: var(--muted); }

.bar-actions { display: flex; align-items: center; gap: 0.8rem; }
.zoom-controls { display: flex; align-items: center; gap: 0.2rem; padding: 0.3rem; background: var(--sky); border-radius: 1rem; }
.zoom-label { min-width: 5.6rem; text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.bar-actions button { height: 4.4rem; min-width: 4.4rem; padding: 0 1.1rem; border-radius: 0.8rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: 1.25rem; font-weight: 700; color: var(--navy); transition: background 0.12s, transform 0.08s; }
.bar-actions button svg { width: 2rem; height: 2rem; }
.bar-actions button:active { transform: scale(0.94); background: var(--blue-bright); color: #fff; }
.bar-actions button:disabled { opacity: 0.3; pointer-events: none; }

.v-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: 1.2rem; min-height: 0; }
.stage { position: relative; height: 100%; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 0.9rem; touch-action: none;
  background: radial-gradient(ellipse at center, #f5f9fd 0%, #dde7f2 100%); }
.page-canvas { display: block; background: #fff; box-shadow: 0 0.6rem 2.4rem rgba(0, 0, 51, 0.25); transform-origin: center center; will-change: transform; }
.page-canvas.slide-next { animation: slideNext 0.28s ease-out; }
.page-canvas.slide-prev { animation: slidePrev 0.28s ease-out; }
@keyframes slideNext { from { opacity: 0; translate: 6% 0; } to { opacity: 1; translate: 0 0; } }
@keyframes slidePrev { from { opacity: 0; translate: -6% 0; } to { opacity: 1; translate: 0 0; } }
.v-msg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; color: var(--muted); background: #eef3f9; text-align: center; padding: 2rem; }
.v-msg[hidden] { display: none; }
.v-msg-title { font-size: 1.6rem; font-weight: 700; color: var(--midnight); }
.v-retry { margin: 1.6rem auto 1.2rem; height: 4.4rem; padding: 0 2.4rem; border-radius: 0.8rem; color: #fff; font-size: 1.3rem; font-weight: 700;
  background: linear-gradient(180deg, var(--sapphire), var(--midnight)); display: block; }
.v-msg-detail { font-size: 1rem; color: var(--muted); word-break: break-all; max-width: 40rem; }

.nav-arrow { width: 5.6rem; height: 5.6rem; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(180deg, var(--sapphire), var(--midnight)); box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 51, 0.35); transition: transform 0.1s, opacity 0.15s; }
.nav-arrow svg { width: 2.8rem; height: 2.8rem; stroke-width: 2.8; }
.nav-arrow:active { transform: scale(0.9); }
.nav-arrow:disabled { opacity: 0.25; box-shadow: none; pointer-events: none; }

.carousel { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); }
.carousel::-webkit-scrollbar { display: none; }
.carousel.dragging { cursor: grabbing; scroll-snap-type: none; }
.track { display: flex; align-items: center; gap: 1.8rem; width: max-content; height: 100%; }
.thumb { --ar: 0.707; position: relative; flex: none; height: calc(var(--carousel-h) - 7.4rem); aspect-ratio: var(--ar); background: var(--sky);
  border: 0.25rem solid transparent; border-radius: 0.6rem; overflow: hidden; scroll-snap-align: center; transform-origin: center center;
  box-shadow: 0 0.2rem 0.8rem rgba(9, 45, 90, 0.15); transition: border-color 0.2s, box-shadow 0.2s; will-change: transform, opacity; }
.thumb canvas { display: block; width: 100%; height: 100%; background: #fff; opacity: 0; transition: opacity 0.25s; }
.thumb.loaded canvas { opacity: 1; }
.thumb .num { position: absolute; left: 50%; bottom: 0.4rem; transform: translateX(-50%); min-width: 2.4rem; padding: 0.1rem 0.7rem; font-size: 1rem; font-weight: 700; text-align: center; color: #fff; background: rgba(0, 0, 51, 0.6); border-radius: 1rem; }
.thumb.current { border-color: var(--outback); 
        /*box-shadow: 0 0 0 0.25rem rgba(255, 105, 100, 0.25), 0 0.6rem 1.6rem rgba(0, 0, 51, 0.3); */
}
.thumb.current .num { background: var(--midnight); box-shadow: 0 0 0 0.15rem var(--outback); }


/* ================= Directory tab ================= */
.dir { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 1.2rem; }
.dir-card { background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.dir-search { flex-shrink: 0; padding: 1.2rem 1.2rem 0.8rem; border-bottom: 1px solid var(--line); }
.dir-search-row { display: flex; gap: 0.6rem; }
.dir-input-wrap { position: relative; flex: 1; }
.dir-input-wrap svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; color: var(--muted); pointer-events: none; }
.dir-input { width: 100%; height: 4.6rem; padding: 0 1rem 0 3.6rem; font: inherit; font-size: 1.35rem; color: var(--ink); background: var(--sky);
  border: 0.15rem solid transparent; border-radius: 0.9rem; -webkit-user-select: text; user-select: text; }
.dir-input::placeholder { color: var(--muted); }
.dir-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.dir-input:focus { outline: none; border-color: var(--midnight); background: #fff; box-shadow: 0 0 0 0.25rem rgba(255, 105, 100, 0.35); }
.dir-clear { height: 4.6rem; padding: 0 1.4rem; border-radius: 0.9rem; font-size: 1.15rem; font-weight: 700; color: var(--midnight); background: var(--sky); }
.dir-clear[hidden] { display: none; }
.dir-count { margin-top: 0.7rem; font-size: 1.05rem; color: var(--muted); }
.dir-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0.6rem; scrollbar-width: auto; scrollbar-color: rgba(0, 0, 51, 0.35) transparent; }
.dir-list::-webkit-scrollbar { width: 1rem; }
.dir-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 51, 0.3); border-radius: 1rem; border: 0.25rem solid #fff; }
.dir-list li[hidden] { display: none; }
.dir-item { width: 100%; min-height: 5.2rem; display: flex; align-items: center; gap: 1rem; text-align: left; padding: 0.9rem 1.1rem 0.9rem 1.3rem; border-radius: 0.8rem;
  border-left: 0.4rem solid transparent; transition: background 0.12s; }
.dir-item:active { background: var(--sky); }
.dir-item .di-text { flex: 1; min-width: 0; }
.dir-item .di-title { display: block; font-size: 1.3rem; font-weight: 700; color: var(--midnight); line-height: 1.25; }
.dir-item .di-sub { display: block; margin-top: 0.2rem; font-size: 1rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-item .di-n { flex-shrink: 0; font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.dir-item[aria-current="true"] { background: var(--midnight); border-left-color: var(--outback); }
.dir-item[aria-current="true"] .di-title, .dir-item[aria-current="true"] .di-sub, .dir-item[aria-current="true"] .di-n { color: #fff; }
.dir-item[aria-current="true"] mark { background: var(--rainforest); color: var(--midnight); }
.dir-empty { padding: 3rem 2rem; text-align: center; color: var(--muted); font-size: 1.25rem; }
.dir-empty[hidden] { display: none; }

.dir-detail { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2.2rem 2.6rem 2.6rem; scrollbar-color: rgba(0, 0, 51, 0.35) transparent; }
.dir-detail::-webkit-scrollbar { width: 1rem; }
.dir-detail::-webkit-scrollbar-thumb { background: rgba(0, 0, 51, 0.3); border-radius: 1rem; border: 0.25rem solid #fff; }
.dir-detail-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dir-more { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border-radius: 2rem;
  background: var(--midnight); color: #fff; font-size: 1.05rem; font-weight: 700; box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 51, 0.3); border: var(--border); transition: opacity 0.2s; }
.dir-more svg { width: 1.4rem; height: 1.4rem; }
.dir-more[hidden] { display: flex; opacity: 0; pointer-events: none; }
.dd-sub { display: inline-block;  margin: 0.9rem 0 0;  padding: 0.35rem 0.9rem; border-radius: 2rem; background: var(--sky); color: var(--midnight); font-size: 1.05rem; font-weight: 700; }
.dd-title { margin: 0; font-size: 2.6rem; line-height: 1.15; color: var(--midnight); }
.dd-status { display: flex; gap: 0.8rem; align-items: baseline; margin: 1.2rem 0 0; padding: 0.9rem 1.2rem; border-radius: 0.8rem; background: #fff4f3; border-left: 0.4rem solid var(--outback); font-size: 1.2rem; color: var(--ink); }
.dd-status b { color: var(--midnight); }
.dd-desc { margin: 1.4rem 0 0; font-size: 1.25rem; line-height: 1.6; color: var(--ink); max-width: 75ch; }
.dd-location-h { margin: 2rem 0 1rem; font-size: 1.45rem; color: var(--midnight); }
.dd-location { display: flex; align-items: center; padding: 1.2rem 1.3rem; border-radius: 0.9rem; border: 1px solid var(--line); background: var(--surface); }
.dd-location .c-line { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 1.15rem; color: var(--ink); word-break: break-word; }
.dd-location .c-line svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--sapphire); }
.dd-contacts-h { margin: 2rem 0 1rem; font-size: 1.45rem; color: var(--midnight); }
.dd-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.contact { display: flex; gap: 1.2rem; align-items: center; padding: 1.2rem 1.3rem; border-radius: 0.9rem; border: 1px solid var(--line); background: var(--surface); }
.contact .c-text { flex: 1; min-width: 0; }
.contact .c-name { font-size: 1.3rem; font-weight: 700; color: var(--midnight); }
.contact .c-role { font-size: 1rem; color: var(--muted); margin-top: 0.1rem; }
.contact .c-line { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; font-size: 1.15rem; color: var(--ink); word-break: break-word; }
.contact .c-line svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--sapphire); }
mark { background: var(--rainforest); color: inherit; border-radius: 0.2rem; padding: 0 0.1rem; }

/* on-screen keyboard (OS keyboard is suppressed with inputmode="none") */
.osk { position: absolute; left: calc(36% + 1.2rem); right: 0; bottom: 0; z-index: 5; padding: 1rem; background: var(--midnight); border-radius: var(--radius);
  box-shadow: 0 -0.6rem 2.4rem rgba(0, 0, 51, 0.35); border: var(--border); display: none; }
.osk.open { display: block; }
.osk-row { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.5rem; }
.osk-row:first-child { margin-top: 0; }
.osk button { flex: 0 1 5.4rem; height: 4.4rem; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.5rem; font-weight: 700; }
.osk button:active { background: var(--outback, var(--sky-digital)); color: var(--midnight); }
.osk button.wide { flex-basis: 22rem; }
.osk button.mid { flex-basis: 9rem; font-size: 1.2rem; }
.osk button.done { background: #fff; color: var(--midnight); }

.dir *:focus-visible, .tab:focus-visible, .osk button:focus-visible { outline: 0.25rem solid var(--outback, var(--sky-digital)); outline-offset: 0.15rem; box-shadow: 0 0 0 0.45rem var(--midnight); }
@media (orientation: portrait) {
  .dir { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 42%) minmax(0, 1fr); }
  .osk { left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pane.active, .page-canvas.slide-next, .page-canvas.slide-prev { animation: none; } }



/* ================= Info tab (banner, icon, text, QR) — e.g. "Current projects" ================= */
.info { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
/*.info { border: 0.2rem solid var(--outback, var(--sky-digital)); }*/
.info-qr { align-self: center; text-align: center; }
.info-qr > div, .info-qr > img {
  background: #fff;
  border: 0.2rem solid var(--midnight);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.info-qr-cap { text-align: center; }
.info-banner { flex: 0 0 26%; min-height: 10rem; background-color: var(--midnight); background-size: cover; background-position: center;
  background-image: repeating-linear-gradient(-35deg, rgba(255, 255, 255, 0.05) 0 1.4rem, rgba(255, 255, 255, 0) 1.4rem 4.2rem), linear-gradient(135deg, #1c1a4d, var(--midnight) 70%); }
.info-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4.5rem 5.5rem; display: flex; flex-direction: column; align-items: center; gap: 3rem;}
.info-icon { height: 4rem; width: auto; display: block; }
.info-text { margin: 0; max-width: 34ch; font-size: 2.2rem; line-height: 1.45; color: var(--ink); white-space: pre-line;}
.info-qr { width: 19rem; }
.info-qr img, .info-qr svg { display: block; width: 100%; height: auto; stroke: none; }
.info-qr-cap { margin: 1rem 0 0; font-size: 1.2rem; font-weight: 700; color: var(--midnight); }
@media (orientation: landscape) {
  .info { flex-direction: row; }
  .info-banner { flex: 0 0 34%; min-height: 0; }
  .info-body { justify-content: center; padding: 3rem 4.5rem; gap: 2.2rem; }
  .info-text { font-size: 1.9rem; }
  .info-qr { width: 15rem; }
}

/* ================= Gallery tab (images 2:3, shared QR code) ================= */
.g-shade[hidden] { display: none; }
.g-info[hidden] { display: none; }
.gallery { height: 100%; display: flex; flex-direction: column; gap: 1.2rem; }
.g-head { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: 0 0.4rem; }
.g-title { display: flex; align-items: center; gap: 0.8rem; margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--midnight); letter-spacing: 0.04em; text-transform: uppercase; }
.g-title:empty { display: none; }          /* no title set in config.js → only the counter shows */
.g-title::before { content: ""; flex-shrink: 0; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--outback, var(--sky-digital)); }
.g-count { flex-shrink: 0; background: #fff; border: var(--border); border-radius: 2rem; padding: 0.35rem 1.2rem; font-weight: 800; font-size: 1.3rem; color: var(--midnight); font-variant-numeric: tabular-nums; }
/* Same look as the PDF viewer: white panel, light blue-grey area behind the image, navy round arrows in the margins */
.g-stage { flex: 1; min-height: 0; position: relative; container-type: size; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--radius); border: var(--border); background: var(--card); box-shadow: var(--shadow); touch-action: pan-y; }
/* !important overrides the blurred-photo background the script sets, so this area matches the PDF viewer */
.g-backdrop { position: absolute; top: 1.2rem; bottom: 1.2rem; left: 8rem; right: 8rem; border-radius: 0.9rem; transform: none; filter: none;
  background: radial-gradient(ellipse at center, #f5f9fd 0%, #dde7f2 100%) !important; }
.g-frame { position: relative; width: min(100cqw - 18rem, (100cqh - 4.8rem) * 2 / 3); aspect-ratio: 2 / 3; overflow: hidden; background: #c9c3e6; container-type: inline-size;
  box-shadow: 0 0.6rem 2.4rem rgba(0, 0, 51, 0.25); }
/* everything inside the image scales with the image width (cqw), matching the design's proportions */
.g-frame.fade { animation: gFade 0.3s ease-out; }
@keyframes gFade { from { opacity: 0.2; } to { opacity: 1; } }
.g-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; text-align: center; padding: 6cqw;
  background: linear-gradient(180deg, #cdc6ea 0%, #b89ad9 55%, #8a7fb8 100%); color: var(--midnight); }
.g-ph svg { width: 10cqw; height: 10cqw; }
.g-ph b { font-size: 5cqw; letter-spacing: 0.06em; }
.g-ph span { font-size: 2.7cqw; }
.g-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(to top, rgba(0, 0, 51, 0.95) 0%, rgba(0, 0, 51, 0.7) 42%, rgba(0, 0, 51, 0) 100%); pointer-events: none; }
.g-info { position: absolute; left: 4.5cqw; right: 4.5cqw; bottom: 4.5cqw; display: flex; align-items: flex-end; gap: 4cqw; color: #fff; }
.g-text { flex: 1; min-width: 0; }
.g-num { display: inline-block; margin-bottom: 1.8cqw; padding: 0.5cqw 2.2cqw; border-radius: 3cqw; background: var(--sky-digital); color: var(--midnight); font-weight: 800; font-size: 2.7cqw; font-variant-numeric: tabular-nums; }
.g-cap { margin: 0; font-size: 3.7cqw; line-height: 1.35; font-weight: 500; white-space: pre-line; text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.4); }
.g-qr { flex-shrink: 0; width: 24cqw; text-align: center; }
.g-qr .q { background: #fff; border-radius: 2cqw; padding: 1.8cqw; }
.g-qr .q svg { width: 100%; height: auto; stroke: none; }
.g-qr span { display: block; margin-top: 1.4cqw; font-size: 2.3cqw; font-weight: 700; line-height: 1.2; }
.g-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 5.6rem; height: 5.6rem; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--sapphire), var(--midnight)); box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 51, 0.35); transition: transform 0.1s; }
.g-arrow svg { width: 2.8rem; height: 2.8rem; stroke-width: 2.8; }
.g-arrow:active { transform: translateY(-50%) scale(0.9); }
.g-prev { left: 1.2rem; }
.g-next { right: 1.2rem; }
.g-thumbs { flex-shrink: 0; display: flex; justify-content: safe center; gap: 1.2rem; overflow-x: auto; padding: 1.2rem 1.4rem;
  background: var(--card); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.g-thumb { position: relative; flex: 0 1 6rem; min-width: 3.4rem; aspect-ratio: 2 / 3; border-radius: 0.6rem; overflow: hidden; border: 0.25rem solid transparent;
  background: linear-gradient(180deg, #cdc6ea, #b89ad9); box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 51, 0.15); }
.g-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-thumb b { position: absolute; left: 50%; bottom: 0.35rem; transform: translateX(-50%); padding: 0 0.5rem; border-radius: 0.8rem; font-size: 0.9rem; background: rgba(0, 0, 51, 0.6); color: #fff; font-variant-numeric: tabular-nums; }
.g-thumb[aria-current="true"] { border-color: var(--midnight); box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 51, 0.3); }
.g-thumb[aria-current="true"] b { background: var(--midnight); }


/* Gallery on landscape screens: thumbnails in two columns beside the image, so the image can be taller */
@media (orientation: landscape) {
  .gallery { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 1.2rem; row-gap: 1rem; }
  .g-head { grid-column: 1 / -1; }
  .g-thumbs { display: grid; grid-template-columns: repeat(2, 5rem); align-content: center; gap: 0.8rem; overflow-y: auto; overflow-x: hidden; padding: 1rem; }
  .g-thumb { width: auto; }
}

/* ================= Portrait: stack tab icon above the name (fits long document names) ================= */
@media (orientation: portrait) {
  .tab { flex-direction: column; gap: 0.45rem; height: auto; min-height: 7rem; padding: 0.7rem 0.5rem; font-size: 1.3rem; }
  .tab svg { width: 2.4rem; height: 2.4rem; }
  .tab span { -webkit-line-clamp: 3; overflow-wrap: anywhere; }
}

/* ================= Very tall screens (narrower than 1:2, e.g. 710 × 1835 mm) =================
   Everything you touch moves to the lower part of the screen so it stays within reach,
   including from a wheelchair: tabs at the bottom, PDF controls under the page,
   directory search and list under the details. */
@media (orientation: portrait) and (max-aspect-ratio: 1/2) {
  .tabs-wrap { order: 3; padding: 0 2rem 2rem; }
  #content { order: 2; margin: 1.4rem 2rem 1.4rem; }
  :root { --carousel-h: 19rem; }

  /* PDF: page on top using the full width, arrows + zoom bar underneath */
  .v-panel { grid-template-rows: minmax(0, 1fr) auto; }
  .v-panel .panel-bar { order: 2; border-bottom: 0; border-top: 1px solid var(--line); }
  .v-body { order: 1; position: relative; grid-template-columns: minmax(0, 1fr); }
  .v-body .nav-arrow { position: absolute; bottom: 2rem; z-index: 2; }
  .v-body .btn-prev { left: 2rem; }
  .v-body .btn-next { right: 2rem; }

  /* Directory: details on top for reading, search + list at the bottom */
  .dir { grid-template-rows: minmax(0, 1fr) minmax(0, 46%); }
  .dir > .dir-card:first-child { order: 2; }
  .dir > .dir-card:nth-child(2) { order: 1; }
  .osk { bottom: calc(46% + 1.2rem); }

  /* Gallery: image uses the full width, arrows sit just under it (within reach, like the PDF tab) */
  .g-stage { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-content: center; place-items: initial; row-gap: 1.6rem; padding: 2.4rem; }
  .g-backdrop { left: 1.2rem; right: 1.2rem; }
  .g-frame { grid-column: 1 / -1; justify-self: center; width: min(100cqw, (100cqh - 7.2rem) * 2 / 3); }
  .g-arrow { position: static; transform: none; }
  .g-arrow:active { transform: scale(0.9); }
  .g-prev { justify-self: start; }
  .g-next { justify-self: end; }
}

/* ================= Landscape (laptop / testing) ================= */
@media (orientation: landscape) {
  html { font-size: min(calc(100vw / 96), calc(100vh / 54)); }
  :root { --carousel-h: 10.5rem; }
  .header { height: 5rem; }
  .crest { width: 3.6rem; height: 3.6rem; }
  .tab { height: 3.8rem; }
  .tabs { padding: 0.4rem; }
  .panel-bar { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .panel-bar.small { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .bar-actions button { height: 3.6rem; min-width: 3.6rem; }
  .v-body { padding: 0.8rem; }
  .thumb { height: calc(var(--carousel-h) - 5.6rem); }
  .tabs-wrap { padding-top: 1rem; }
  #content { margin: 1rem 2rem 1.4rem; }
  .viewer { gap: 1rem; }
}