/* Osmo Vault shell. No inline styles anywhere (CSP style-src 'self'). Prefix v- to stay clear of gallery.js. */
:root {
  --v-bg: #04060d;
  --v-fg: #e8e3d8;
  --v-dim: #8f8c86;
  --v-line: rgba(232, 227, 216, .14);
  --v-warm: #d9b26f;
  --v-warm-soft: rgba(217, 178, 111, .18);
  --v-danger: #d98b7a;
  --v-panel: rgba(8, 11, 20, .72);
  --v-font: ui-sans-serif, -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
  --v-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
}
html, body { height: 100%; }
body.v-body {
  margin: 0; background: var(--v-bg); color: var(--v-fg);
  font: 15px/1.55 var(--v-font); -webkit-font-smoothing: antialiased; overflow: hidden;
}
body.v-viewing { overflow: hidden; }
a.v-link { color: var(--v-dim); text-decoration: none; border-bottom: 1px solid var(--v-line); }
a.v-link:hover { color: var(--v-fg); border-color: var(--v-fg); }

.v-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* Door UI */
.v-door {
  position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 16px calc(7vh + env(safe-area-inset-bottom, 0px)); text-align: center; pointer-events: none;
}
.v-door > * { pointer-events: auto; }
.v-door[hidden] { display: none; }
.v-title {
  margin: 0 0 4px; font: 400 clamp(26px, 4vw, 38px)/1.1 var(--v-serif); letter-spacing: .06em; color: var(--v-fg);
  text-shadow: 0 0 24px rgba(217, 178, 111, .25);
}
.v-dot { color: var(--v-warm); }
.v-sub { margin: 0 0 26px; color: var(--v-dim); font-size: 14px; letter-spacing: .02em; max-width: 34em; }
.v-btn {
  appearance: none; cursor: pointer; font: inherit; color: var(--v-fg);
  background: var(--v-panel); border: 1px solid var(--v-line); border-radius: 999px; padding: 10px 18px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, background .2s, transform .15s;
}
.v-btn:hover { border-color: rgba(217, 178, 111, .55); background: rgba(217, 178, 111, .08); }
.v-btn:active { transform: translateY(1px); }
.v-btn:focus-visible { outline: 2px solid var(--v-warm); outline-offset: 2px; }
.v-btn[disabled] { opacity: .55; cursor: default; }
.v-btn-primary { padding: 13px 26px; font-size: 16px; letter-spacing: .01em; box-shadow: 0 0 0 1px rgba(217, 178, 111, .12), 0 12px 40px rgba(0, 0, 0, .5); }
.v-btn-small { padding: 6px 12px; font-size: 13px; }
.v-status { min-height: 1.6em; margin: 14px 0 0; color: var(--v-dim); font-size: 13.5px; max-width: 40em; }
.v-status.v-error { color: var(--v-danger); }
.v-status.v-ok { color: var(--v-warm); }
.v-foot { margin: 26px 0 0; font-size: 12.5px; color: var(--v-dim); }
.v-enrolled { margin-left: 10px; opacity: .8; }
.v-enrolled:empty { display: none; }

/* Unlocked: bar + gallery */
.v-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: linear-gradient(to bottom, rgba(4, 6, 13, .85), rgba(4, 6, 13, 0));
  pointer-events: none;
}
.v-bar[hidden] { display: none; }
.v-bar > * { pointer-events: auto; }
.v-bar-title { font: 400 17px/1 var(--v-serif); letter-spacing: .06em; }
.v-bar-count { color: var(--v-dim); font-size: 12.5px; flex: 1; }
.v-gallery { position: fixed; inset: 0; z-index: 3; }
.v-gallery[hidden] { display: none; }

/* Fallback list, used only if gallery.js is missing */
.v-list { position: absolute; inset: 0; overflow: auto; padding: 72px 16px 40px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-content: start; max-width: 1200px; margin: 0 auto; }
.v-card { background: var(--v-panel); border: 1px solid var(--v-line); border-radius: 12px; overflow: hidden; cursor: pointer; text-align: left; color: inherit; font: inherit; padding: 0; }
.v-card:hover { border-color: rgba(217, 178, 111, .5); }
.v-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.v-card .v-card-t { padding: 12px 14px 0; font: 400 18px/1.2 var(--v-serif); }
.v-card .v-card-m { padding: 4px 14px 0; color: var(--v-dim); font-size: 12.5px; }
.v-card p { margin: 6px 14px 14px; color: #bdb8ad; font-size: 13.5px; }

/* Viewer overlay: the piece runs in a sandboxed frame, inside a frame round the whole screen (viewer.js: it grows
   from the piece's own frame; its rails are set there, --vr-side/top/bottom). The piece fills the well; the bottom
   rail carries its name and the Close button. */
.v-viewer { position: fixed; inset: 0; z-index: 10; }
.v-viewer[hidden] { display: none; }
.v-viewer.is-preparing, .v-viewer.is-zooming { pointer-events: none; }
.v-viewer.is-preparing .v-viewer-box { opacity: 0.002; }
.v-viewer-back { position: absolute; inset: 0; background: #000; }
.v-viewer-box {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden;
  --vr-side: 16px; --vr-top: 16px; --vr-bottom: 60px; --vf-base: #3a2416; --vf-tex: none;
  background:
    linear-gradient(to bottom, rgba(255, 236, 205, 0.16), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.28) 100%),
    var(--vf-tex) center / 900px auto, var(--vf-base);
  background-blend-mode: normal, multiply, normal;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 222, 0.14), inset 2px 2px 3px rgba(255, 240, 215, 0.2), inset -2px -3px 5px rgba(0, 0, 0, 0.55);
}
.v-viewer-wrap {
  position: absolute; left: var(--vr-side); right: var(--vr-side); top: var(--vr-top); bottom: var(--vr-bottom); overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 236, 200, 0.1);
}
/* the frame's shade over the piece's edges (the depth of the frame), as the room draws it; it takes no pointer */
.v-viewer-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 6px 10px -6px rgba(0, 0, 0, 0.7), inset -6px 0 10px -6px rgba(0, 0, 0, 0.6); }
.v-viewer-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; background: #000; transform-origin: 0 0; will-change: transform; }   /* (scaled through the zoom on its own layer: never re-rasterised, round two) */
.v-viewer-rail {
  position: absolute; left: var(--vr-side); right: var(--vr-side); bottom: 0; height: var(--vr-bottom);
  display: flex; align-items: center; justify-content: center; gap: 14px; opacity: var(--vr-t, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box;
}
.v-viewer-text {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%); max-width: calc(50% - 64px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 246, 228, 0.82);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.v-viewer-text b { font: 400 15px/1 var(--v-serif); letter-spacing: .03em; }
.v-viewer-text span { color: rgba(255, 240, 215, 0.6); margin-left: 8px; }
/* Close sits on the bottom rail, in the middle: a small plate on the frame */
.v-viewer .v-viewer-close {
  min-height: 36px; padding: 10px 18px; border-radius: 999px; color: #1f1a14 !important; border: 1px solid rgba(40, 28, 12, 0.5) !important;
  background: linear-gradient(to bottom, #f1e3c0, #cdb582) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.v-viewer .v-viewer-close:hover { background: linear-gradient(to bottom, #f7ecd0, #d8c193) !important; }
/* the frame's finish, from the piece's own frame (viewer.js sets data-look) */
.v-viewer[data-look="walnut"] .v-viewer-box { --vf-base: #4a2f1d; --vf-tex: url("./tex/walnut-col-2k.jpg"); }
.v-viewer[data-look="mahogany"] .v-viewer-box { --vf-base: #5a2418; --vf-tex: url("./tex/mahogany-col-2k.jpg"); }
.v-viewer[data-look="rosewood"] .v-viewer-box { --vf-base: #3a1a14; --vf-tex: url("./tex/rosewood-col-2k.jpg"); }
.v-viewer[data-look="teak"] .v-viewer-box { --vf-base: #5c4630; --vf-tex: url("./tex/teak-col-2k.jpg"); }
.v-viewer[data-look="cherry"] .v-viewer-box { --vf-base: #6a3a22; --vf-tex: url("./tex/cherry-col-2k.jpg"); }
.v-viewer[data-look="ebony"] .v-viewer-box { --vf-base: #16110e; --vf-tex: url("./tex/ebony-col-2k.jpg"); }
.v-viewer[data-look="gilt"] .v-viewer-box { --vf-base: #a37a35; --vf-tex: url("./tex/gilt-col-2k.jpg"); }
.v-viewer[data-look="brass"] .v-viewer-box { --vf-base: #a8843f; --vf-tex: url("./tex/brass-col-2k.jpg"); }
.v-viewer[data-look="nickel"] .v-viewer-box { --vf-base: #8f9296; --vf-tex: none; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.3) 100%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.04) 1px 3px); }
.v-viewer[data-look="limewash"] .v-viewer-box { --vf-base: #d9d2c3; --vf-tex: none; }
.v-viewer[data-look="limewash"] .v-viewer-text { color: rgba(40, 32, 20, 0.85); text-shadow: none; }
.v-viewer[data-look="limewash"] .v-viewer-text span { color: rgba(40, 32, 20, 0.6); }

/* Enroll page */
.v-page { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; padding: 48px 16px 64px; overflow: auto; height: 100%; box-sizing: border-box; }
body.v-scroll { overflow: auto; }
.v-page h1 { font: 400 30px/1.15 var(--v-serif); letter-spacing: .05em; margin: 0 0 8px; }
.v-page h2 { font: 400 19px/1.2 var(--v-serif); letter-spacing: .03em; margin: 30px 0 8px; }
.v-page p, .v-page li { color: #cfcac0; }
.v-page .v-muted { color: var(--v-dim); font-size: 13.5px; }
.v-field { display: grid; gap: 6px; margin: 14px 0; }
.v-field label { color: var(--v-dim); font-size: 13px; }
.v-field input { font: inherit; color: var(--v-fg); background: rgba(255, 255, 255, .04); border: 1px solid var(--v-line); border-radius: 8px; padding: 9px 12px; }
.v-field input:focus { outline: none; border-color: rgba(217, 178, 111, .6); }
.v-steps { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 6px; }
.v-steps li { display: flex; gap: 10px; align-items: baseline; color: var(--v-dim); font-size: 13.5px; }
.v-steps li::before { content: "○"; color: var(--v-dim); }
.v-steps li.v-doing::before { content: "◔"; color: var(--v-warm); }
.v-steps li.v-done::before { content: "●"; color: var(--v-warm); }
.v-steps li.v-fail::before { content: "×"; color: var(--v-danger); }
.v-steps li.v-done, .v-steps li.v-doing { color: var(--v-fg); }
.v-out { display: grid; gap: 10px; margin-top: 16px; }
.v-out[hidden] { display: none; }
.v-out textarea {
  width: 100%; box-sizing: border-box; min-height: 190px; resize: vertical; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--v-fg); background: rgba(255, 255, 255, .04); border: 1px solid var(--v-line); border-radius: 8px; padding: 10px 12px;
}
.v-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.v-note { background: var(--v-warm-soft); border: 1px solid rgba(217, 178, 111, .35); border-radius: 10px; padding: 10px 14px; color: var(--v-fg); font-size: 13.5px; }
.v-checks { margin: 10px 0 0; padding: 0; list-style: none; color: var(--v-dim); font-size: 13px; display: grid; gap: 4px; }
.v-checks li.v-ok { color: #9fb98a; }
.v-checks li.v-bad { color: var(--v-danger); }

@media (prefers-reduced-motion: reduce) {
  .v-btn { transition: none; }
}
@media (max-width: 480px) {
  .v-btn-primary { width: 100%; max-width: 360px; }
  .v-viewer-text span { display: none; }
  .v-viewer-text { max-width: calc(50% - 58px); }
}

/* Enroll: the six words (enroll.js; tokens from house.css with fallbacks) */
.words { display: grid; gap: 14px; }
.words[hidden] { display: none; }
.word-list {
  list-style: none; margin: 4px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px;
  counter-reset: word;
}
.word-list li {
  counter-increment: word; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--hair, rgba(241, 237, 228, .14)); background: rgba(241, 237, 228, .04);
  font: 400 clamp(20px, 5vw, 26px)/1.1 var(--serif, Georgia, serif); color: var(--ink, #f1ede4); letter-spacing: .01em;
}
.word-list li::before { content: counter(word, decimal-leading-zero); font: 500 10px/1 var(--mono, monospace); letter-spacing: .2em; color: var(--amber, #eeb03f); }
.words .row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
@media (max-width: 480px) { .word-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }