/* The Pneumatic Annex (Reel 7): the page's puzzle. Brass tubes, a
   combination door, Skipwrights' hints and Miss Pell's drawing. */

:root{--brass:#b8862f;--brass-l:#e7c47a;--glass:rgba(220,236,232,.55)}
:root[data-theme="dark"]{--glass:rgba(60,90,86,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass:rgba(60,90,86,.45)}}

.annex-brief{margin-bottom:44px}
.code-chip{cursor:pointer;font-size:.95em;background:var(--mustard)!important;color:#2b2118!important}

/* the manifest: six glass tubes */
.manifest{max-width:62rem;margin:0 auto;background:var(--paper);border:3px solid var(--rule);box-shadow:var(--shadow);padding:clamp(18px,3vw,30px)}
.manifest-head{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:baseline;border-bottom:3px double var(--rule);padding-bottom:12px;margin-bottom:20px}
.manifest-head h3{font-size:1.5rem}
.rank{font:.84rem var(--type);color:var(--muted)}
.rank b{color:var(--teal-d);font-weight:400}
:root[data-theme="dark"] .rank b{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rank b{color:var(--teal)}}
.tubes{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
@media (max-width:820px){.tubes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.tubes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tube{display:grid;justify-items:center;gap:6px;text-align:center}
.tube-no{font:.68rem var(--type);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tube-glass{position:relative;width:46px;height:120px;border:3px solid var(--rule);border-radius:23px;background:var(--glass);overflow:hidden;
  box-shadow:inset -6px 0 0 rgba(255,255,255,.35)}
.tube-glass::before,.tube-glass::after{content:"";position:absolute;left:-3px;right:-3px;height:10px;background:var(--brass);border:3px solid var(--rule)}
.tube-glass::before{top:-3px;border-radius:20px 20px 4px 4px}
.tube-glass::after{bottom:-3px;border-radius:4px 4px 20px 20px}
.tube-can{position:absolute;left:7px;right:7px;height:36px;top:-50px;border:3px solid var(--rule);border-radius:12px;background:var(--mustard)}
.tube-can::before{content:"";position:absolute;left:0;right:0;top:9px;bottom:9px;border-block:2px solid var(--rule)}
.tube.is-found .tube-can{top:66px}
@media (prefers-reduced-motion:no-preference){.tube-can{transition:top .7s cubic-bezier(.5,1.6,.5,1)}}
.tube-code{font:.84rem ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em}
.tube.is-found .tube-code{color:var(--teal-d);font-weight:700}
:root[data-theme="dark"] .tube.is-found .tube-code{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tube.is-found .tube-code{color:var(--teal)}}
.tube-letter{font:.74rem var(--type);color:var(--muted)}
.tube.is-found .tube-letter{color:var(--text)}
.tube-read{font:.72rem var(--type);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border:2px solid var(--rule);border-radius:999px;background:var(--bg-2);color:var(--text);cursor:pointer}

.dispatch{margin-top:22px;border-top:1px dotted color-mix(in srgb,var(--rule) 45%,transparent);padding-top:16px;display:grid;gap:8px}
.dispatch label{font:.86rem var(--type)}
.dispatch label small{color:var(--muted)}
.dispatch > div{display:flex;gap:10px;flex-wrap:wrap}
.dispatch input{flex:1;min-width:10rem;font:1.1rem ui-monospace,Menlo,monospace;text-transform:uppercase;padding:9px 12px;border:2px solid var(--rule);border-radius:8px;background:var(--bg-2);color:var(--text)}
.dispatch-msg{font:.84rem var(--type);color:var(--red);min-height:1.3em}

/* the door */
.door{max-width:62rem;margin:40px auto 0;display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:center;background:
  linear-gradient(135deg,color-mix(in srgb,var(--brass) 22%,var(--paper)),var(--paper));border:3px solid var(--rule);box-shadow:var(--shadow);padding:clamp(18px,3vw,32px);position:relative}
.door::before{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--rule) 40%,transparent);pointer-events:none}
@media (max-width:820px){.door{grid-template-columns:1fr}}
.door-plate{display:grid;gap:8px}
.door-plate h3{font-size:1.6rem}
.door-plate p{color:var(--muted)}
.wheels{display:grid;gap:14px;justify-items:start}
.wheel-row{display:flex;gap:10px;flex-wrap:wrap}
.wheel-wrap{display:grid;justify-items:center;gap:4px}
.wheel-n{font:.68rem var(--type);color:var(--muted)}
.wheel{width:52px;height:68px;text-align:center;font:800 2rem/1 var(--display);color:#2b2118;text-transform:uppercase;
  background:linear-gradient(#a8782a,#f0d48c 30%,#f6e2a8 50%,#f0d48c 70%,#a8782a);border:3px solid #2b2118;border-radius:10px;box-shadow:3px 3px 0 #2b2118;caret-color:transparent}
.wheel:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.lever{background:var(--teal-d);color:#fbf4e2}
button.lever{color:#fbf4e2}
.door-msg{font:.9rem var(--type);min-height:1.4em}
@media (prefers-reduced-motion:no-preference){.wheel-row.is-wrong{animation:jiggle .45s}}
@keyframes jiggle{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

/* hints */
.hints{max-width:62rem;margin:56px auto 0}
.hints-h{text-align:center;font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:22px}
.hint-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:820px){.hint-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hint-grid{grid-template-columns:1fr}}
.hint{text-align:left;display:grid;gap:8px;align-content:start;background:var(--paper);border:2px dashed var(--muted);padding:16px;cursor:pointer;color:var(--text);font:inherit;min-height:120px;transition:transform .12s}
.hint:hover{transform:rotate(-.6deg)}
.hint-text{font:.94rem/1.55 var(--type)}
.hint.is-plain{border-style:solid;border-color:var(--rule)}
.hint.is-done{opacity:.6}

/* the canister dialog */
.canister-dlg{border:3px solid var(--rule);box-shadow:10px 10px 0 var(--rule);background:var(--paper);color:var(--text);padding:0;max-width:min(92vw,34rem);border-radius:4px}
.canister-dlg::backdrop{background:rgba(29,23,18,.55)}
.cd-inner{padding:clamp(22px,4vw,36px);display:grid;gap:12px;position:relative;
  background-image:repeating-linear-gradient(transparent 0 31px,color-mix(in srgb,var(--teal) 14%,transparent) 31px 32px)}
.cd-inner .stamp{position:absolute;right:18px;top:18px}
.cd-kicker{font:.74rem var(--type);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-right:7rem}
.cd-inner h3{font-size:1.7rem}
.cd-inner blockquote{margin:0;font:1.08rem/1.75 var(--type);border-left:4px solid var(--red);padding-left:14px}
.cd-letter{font:.95rem var(--type)}
.cd-letter b{display:inline-block;background:var(--mustard);color:#2b2118;padding:2px 8px;border:2px solid #2b2118;border-radius:4px;font:800 1rem var(--display)}
.cd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* the reward */
.reward{max-width:62rem;margin:64px auto 0;display:grid;gap:28px;outline:none}
.reward > h3{text-align:center;font-size:clamp(2rem,5vw,3rem)}
.blueprint{margin:0;border:3px solid var(--rule);box-shadow:var(--shadow);background:#1c4f8a}
.blueprint svg{display:block;width:100%;height:auto}
.letter{background:var(--paper);border:2px solid var(--rule);box-shadow:var(--shadow);padding:clamp(20px,4vw,40px);display:grid;gap:12px;font:1.02rem/1.85 var(--type)}
.letter-h{font:800 1.2rem var(--display)}
.letter > div{display:grid;gap:10px}
.letter > div p:last-child{font:400 1.7rem/1.2 var(--script);color:var(--velvet)}
:root[data-theme="dark"] .letter > div p:last-child{color:var(--red)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .letter > div p:last-child{color:var(--red)}}
.certificate{position:relative;text-align:center;background:var(--paper);border:6px double var(--rule);padding:32px 24px;display:grid;gap:10px;justify-items:center}
.cert-name{font:400 clamp(2rem,6vw,3.2rem)/1 var(--script);color:var(--teal-d)}
:root[data-theme="dark"] .cert-name{color:var(--teal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cert-name{color:var(--teal)}}
.certificate p{max-width:34rem;color:var(--muted)}
.reward [data-annex-reset]{justify-self:center}

.certificate .approved{top:auto;bottom:16px;transform:rotate(-8deg)}