@import url('/dossier-v5.css');

/* Optical centering keeps the typewriter capitals inside the button face. */
.dossier-header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 20px}
.dossier-header .roll-label{display:flex;align-items:center;position:relative;top:2px}
.dossier-header .letter-window,.dossier-header .letter-track,.dossier-header .letter-track>span{height:1.25em;line-height:1.25em}
.dossier-mark{font:27px/1 Georgia,serif;color:#ecd9b7;letter-spacing:-.06em}
.dossier-intro h1{font-family:var(--case-type);font-weight:400;letter-spacing:-.04em}
.dossier-intro h1 em{font-style:normal}

/* Four photographed scraps: the irregular tears belong to the image, not a polygon. */
.node-ticket,.board-node.is-current .node-ticket{padding:19px 19px 15px 26px;background:none!important;border:0;box-shadow:none;gap:4px 8px;overflow:visible}
.ticket-paper{inset:-5px -8px -4px -5px;filter:drop-shadow(1px 3px 2px #10090399)}
.ticket-paper::before{background:var(--label-art) center/100% 100% no-repeat;clip-path:none;box-shadow:none;transform:none}
.board-node{--label-art:url('/case001-assets/natural-label-paper-01.webp')}
.board-node:nth-child(4n+2){--label-art:url('/case001-assets/natural-label-paper-02.webp')}
.board-node:nth-child(4n+3){--label-art:url('/case001-assets/natural-label-paper-03.webp')}
.board-node:nth-child(4n){--label-art:url('/case001-assets/natural-label-paper-04.webp')}
.board-node:nth-child(3n) .ticket-paper::before{transform:rotate(.8deg);background-position:center}
.board-node:nth-child(5n) .ticket-paper::before{transform:scaleX(-1) rotate(-1deg)}
.node-ticket::before{left:15px;top:2px}
.node-ticket::after{left:21px;top:13px}

/* Used clues are pencilled question marks on the hovered folder's own corner. */
.folder-hint-position{position:absolute;left:50%;top:50%;height:110%;aspect-ratio:3/4;transform:translate(-50%,-50%);z-index:4;pointer-events:none;opacity:0;transition:opacity .14s}
.board-node:has(.evidence:not(:disabled)):is(:hover,:focus-within) .folder-hint-position{opacity:1}
.folder-hint-link{position:absolute;right:7%;top:6%;min-width:32px;min-height:34px;padding:2px 3px;border:0;background:none;color:#63291e;font:700 27px/1 var(--case-type);letter-spacing:-.12em;pointer-events:auto;cursor:pointer;rotate:6deg;text-shadow:.4px .4px #63291e55}
.folder-hint-link[hidden]{display:none}
.folder-hint-link:hover,.folder-hint-link:focus-visible{color:#210e09;outline:1px dashed #7e3c2a;outline-offset:1px}

/* One full backing board owns the toolbar, paper and attached help slips. */
.case-drawer{--toolbar-height:clamp(112px,16svh,142px);isolation:isolate;width:min(1460px,98vw);height:min(920px,98svh);max-height:98svh;background:none;border:0;box-shadow:none;overflow:hidden}
.case-drawer[open]{grid-template-rows:var(--toolbar-height) minmax(0,1fr)}
.case-drawer::before{content:'';position:absolute;inset:0;z-index:-1;background:url('/case001-assets/clipboard-landscape-v1.webp') center/100% 100% no-repeat;pointer-events:none}
.case-drawer::after{display:none}
.clipboard-clamp{position:absolute;left:41.89%;top:5.31%;width:16.16%;height:14.56%;z-index:22;pointer-events:none;overflow:visible}
.folder-bar{height:var(--toolbar-height);min-height:0;position:relative;z-index:23;background:none;border:0;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:end;padding:0 3% 12px}
.folder-bar>div:nth-child(2){text-align:left;align-self:end;padding-bottom:2px;max-width:240px}
.folder-bar h2{font-size:14px;line-height:1.18;max-width:220px;white-space:nowrap}
.folder-bar>div>span{font-size:10px;color:#e0c69d}
.folder-back,.folder-actions .help-tab{min-height:39px;display:inline-flex;align-items:center;justify-content:center}
.folder-back span{display:inline}
.folder-actions{align-self:end}
.case-file-layout,.case-file-layout.has-hints{padding:0 24px 18px;gap:16px;height:100%;min-height:0;position:relative;z-index:1}
.case-file-layout.has-hints{grid-template-columns:minmax(0,1fr) 240px}
.paper-viewport{padding:4px 0 0;position:relative;isolation:isolate}
.paper-viewport::before,.paper-viewport::after{display:none}
.case-drawer:not(.is-reading) .document-sheet{padding-top:9cqh;padding-bottom:7.5cqh}
.file-hints{padding:8px 4px 0;color:#f1debb}
.help-intro{color:#f1debb}
.help-requests{background:#21130942;border-color:#d5b88066}
.hint-slip{margin-inline:0}

/* The fragment tools use the paper and dark wood palette. */
:is(#casePaper,.case-paper) .paper-control.fragment-tools button{--bubble-fill:#b68b57;background:#d7bd8a!important;color:#24180c!important;border-color:#80613c!important;box-shadow:0 2px 0 #49321d88}
:is(#casePaper,.case-paper) .paper-control.fragment-tools button:is(:hover,:focus-visible){color:#1a1008!important;border-color:#5a3b24!important}
.case-drawer .fragment-tools select{appearance:auto;color-scheme:light;color:#24180c!important;background:#c9ac77!important;border:1px solid #8a6942;border-radius:6px;padding:6px 8px;box-shadow:inset 0 1px #efdfb477}
.fragment-tools select option{color:#24180c;background:#d8c095}
.cipher-ledger td{height:31px}

/* The radio retains the original control coordinates, with its own silhouette only. */
.forensic-machine{background-image:url('/case001-assets/forensic-receiver-cutout-v1.webp');background-color:transparent;box-shadow:none;border-radius:0}

/* The heat-sensitive ink cools gradually after the candle is moved away. */
.heat-examination #hidden-ink{transition:opacity 2.8s ease,filter 2.8s ease}
.heat-examination[data-heated=true] #hidden-ink{opacity:1;filter:none;transition-duration:.9s}
.heat-examination[data-heated=false] #hidden-ink{opacity:0;filter:blur(1px)}

/* The glass follows the pointer; the lens contains a live, enlarged document. */
.paper-loupe-toggle{position:absolute;right:3.3%;top:24%;z-index:14;width:37px;height:37px;display:grid;place-items:center;border:1px solid #715131;border-radius:50%;background:radial-gradient(circle at 35% 25%,#e3cea3,#b99b66);color:#3a2819;box-shadow:1px 2px 3px #38220c45;cursor:pointer;padding:7px}
.paper-loupe-toggle svg{width:100%;height:100%}
.paper-loupe-toggle:is(:hover,:focus-visible),.paper-loupe-toggle[aria-pressed=true]{background:#ecd9ae;border-color:#4c321b;outline:2px solid #8f633742;outline-offset:2px}
.document-sheet.is-magnifying,.document-sheet.is-magnifying *{cursor:none!important}
.document-sheet.is-magnifying .paper-loupe-toggle{cursor:pointer!important}
.case-loupe{position:fixed;left:0;top:0;z-index:80;pointer-events:none;line-height:normal;isolation:isolate;will-change:transform}
.case-loupe[hidden]{display:none}
.loupe-glass{position:absolute;overflow:hidden;border-radius:50%;background:#ddc697;box-shadow:inset 0 0 12px #4c3a2350,0 3px 14px #1e12075e}
.loupe-scene{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.loupe-reflection{position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;background:linear-gradient(135deg,#fff2d130,transparent 42%,#fff9e109 70%);box-shadow:inset 2px 2px 7px #fff5da55,inset -3px -4px 6px #241b1333}
.loupe-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;object-fit:fill;pointer-events:none}
@media(max-width:1100px) and (min-width:801px){.folder-bar{gap:12px}.folder-bar>div:nth-child(2){max-width:190px}.folder-bar h2{font-size:12px}.case-file-layout.has-hints{grid-template-columns:minmax(0,1fr) 215px}}
@media(max-width:800px){
 .case-drawer{--toolbar-height:130px;width:100vw;height:100svh;max-height:100svh}
 .case-drawer::before{inset:28px 3px 3px;background-position:center bottom;background-size:100% 125%;border-radius:15px}
 .clipboard-clamp{left:calc(50% - 97px);top:48px;width:194px;height:98px}
 .folder-bar{height:130px;min-height:0;padding:0 17px 9px;gap:10px;grid-template-columns:1fr 1fr;align-items:end}
 .folder-bar>div:nth-child(2){display:none}
 .folder-actions{grid-column:2;justify-self:end}
 .folder-back,.folder-actions .help-tab{font-size:11px;min-height:34px;padding:7px 10px;max-width:158px}
 .folder-back{gap:5px}.folder-back span{display:none}.folder-back::after{content:'Vissza'}
 .case-file-layout,.case-file-layout.has-hints{display:block;padding:0 14px 18px;overflow-y:auto;overscroll-behavior:contain}
 .paper-viewport{padding:0;min-height:100%;height:auto}
 .case-drawer:not(.is-reading) .document-sheet{padding-top:58px}
 .file-hints{padding:16px 9px 3px}
 .paper-loupe-toggle{top:145px;right:2%;width:33px;height:33px}
 .folder-hint-link{font-size:25px}
}
@media(max-width:650px){.dossier-header{grid-template-columns:auto 1fr}.dossier-header nav{justify-self:end}.dossier-header nav a{font-size:14px;min-height:43px;padding:6px 13px}.dossier-mark{font-size:25px}}
@media(prefers-reduced-motion:reduce){.heat-examination #hidden-ink{transition-duration:.01s}.folder-hint-position{transition:none}}

/* Room above capitals so accents (Á, É, Ő, Ű…) are not clipped inside the boxes. */
.character-boxes .entry-char{height:34px;padding:0;font-size:19px;line-height:34px}
.witness-entry{line-height:30px}
#caseAnswer{line-height:2}

/* ---- v7 ---------------------------------------------------------------- */
/* The NB monogram is a plain link home, not one of the pill buttons. */
/* :not(#_) lifts specificity above the shared button rule, which includes id selectors. */
.dossier-header a.dossier-mark:not(#_){justify-self:start;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;padding:4px 0!important;min-height:0!important;width:auto;color:#ecd9b7!important;font:27px/1 Georgia,serif!important;letter-spacing:-.06em!important;text-transform:none!important;text-decoration:none;overflow:visible}
.dossier-header a.dossier-mark::before{display:none!important}
.dossier-header a.dossier-mark:not(#_):is(:hover,:focus-visible){color:#fff3d6!important;background:none!important;box-shadow:none!important}
.dossier-header a.dossier-mark:focus-visible{outline:1px dashed #d5b97a;outline-offset:4px}
@media(max-width:650px){.dossier-header a.dossier-mark{font-size:25px!important}}

/* The caption above the board starts at the board's wooden frame (2.55% inside the image). */
@media(min-width:651px){.board-meta{padding-inline:calc(4px + 2.56%)}}

/* Locked files: a padlock on the label instead of only a cursor hint. */
.board-node:has(.evidence:disabled) .node-state::before{content:'';display:inline-block;width:.95em;height:.95em;margin:0 .35em -.12em 0;background:currentColor;-webkit-mask:url('/case001-assets/locked-cursor.svg') center/contain no-repeat;mask:url('/case001-assets/locked-cursor.svg') center/contain no-repeat}

/* Larger, paper-filling type in the open file (desktop/tablet layout). */
@media(min-width:801px){
 .case-drawer:not(.is-reading) .document-sheet{font-size:clamp(13px,2.15cqh,16.5px);line-height:1.45}
 .case-drawer:not(.is-reading) .document-masthead p{font-size:11px}
 .case-drawer:not(.is-reading) .document-brief{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8a6a4266 transparent}
 /* 08 has the longest brief: slightly smaller type so it fits beside the ruled column line. */
 .case-drawer:not(.is-reading) .document-step-8 .document-brief>:not(blockquote){font-size:.87em}
 .case-drawer:not(.is-reading) .document-step-8 .document-brief p{margin-bottom:.6em}
 .case-drawer:not(.is-reading) .document-step-5 .document-brief .record-table{font-size:.9em}
 .case-drawer:not(.is-reading) .document-brief blockquote{font-size:clamp(16px,2.5cqh,20px);line-height:1.3}
 .case-drawer:not(.is-reading) .document-brief p{margin-bottom:.8em}
 .case-drawer:not(.is-reading) .document-brief .record-table{margin:.5em 0 1.1em}
 .case-drawer:not(.is-reading) .evidence-tag{font-size:13px}
 .case-drawer:not(.is-reading) .testimony-list{font-size:.95em;line-height:1.4}
 .case-drawer:not(.is-reading) .witness-register h3{font-size:1em}
 .case-drawer:not(.is-reading) :is(.witness-register p,.witness-workspace>p){font-size:.92em}
 .case-drawer:not(.is-reading) .witness-entry{font-size:16px}
 .case-drawer:not(.is-reading) .alphabet-strip{font-size:.95em;letter-spacing:.18em}
 .case-drawer:not(.is-reading) .alphabet-strip b{font-size:.8em;letter-spacing:.06em}
 .case-drawer:not(.is-reading) .cipher-strip small{font-size:.72em}
 .case-drawer:not(.is-reading) .diagram-instruction{font-size:1em}
 .case-drawer:not(.is-reading) .character-record p{font-size:.95em}
 .case-drawer:not(.is-reading) .record-time{font-size:.8em}
 .case-drawer:not(.is-reading) .audio-paper .morse-chart{font-size:13px}
 .case-drawer:not(.is-reading) .morse-chart :is(caption,th){font-size:12px}
 .case-drawer:not(.is-reading) .paper-control{font-size:15px}
 .case-drawer:not(.is-reading) .paper-control :is(button,select){font-size:14px}
 .case-drawer:not(.is-reading) .stencil-controls small,.case-drawer:not(.is-reading) .candle-instruction{font-size:14px}
 .case-drawer:not(.is-reading) .answer-rubric>label{font-size:16px}
 .case-drawer:not(.is-reading) .answer-rubric button{font-size:14px}
 .case-drawer:not(.is-reading) .answer-message{font-size:12px;min-height:12px}

 /* 01: the statement fills the paper instead of a small box in the middle. */
 .case-drawer:not(.is-reading) .document-step-1 .witness-statement{font-size:clamp(14px,2.6cqh,20px);line-height:1.6;padding:1.2em 1.4em;column-gap:2em}
 /* 02: a readable ledger with roomier rows. */
 .case-drawer:not(.is-reading) .document-step-2 .cipher-ledger{font-size:clamp(14px,2.35cqh,18px)}
 .case-drawer:not(.is-reading) .document-step-2 .cipher-ledger :is(th,td){height:clamp(36px,6.2cqh,50px);padding-block:4px}
 .case-drawer:not(.is-reading) .document-step-2 .alphabet-strip{font-size:clamp(13px,2.15cqh,17px);margin-top:1.2em;padding-top:.9em}
}