/* Field notebook: a leather-bound book on the desk, in the spirit of an inspector's rulebook.
   Paper is muted so it sits in the dark table without glaring; ink, stamps and typed slips
   carry the hierarchy. Positioned and sized by notebook.js. */
.notebook{
  --nb-leather:#3b2b22; --nb-leather-dark:#241a15; --nb-stitch:#9c7b58;
  --nb-paper:#d3c8ac; --nb-paper-edge:#b9ac8c; --nb-card:#e4dac1; --nb-slip:#dcd1b6;
  --nb-ink:#2e251c; --nb-ink-soft:#66573f; --nb-stamp:#9a3a2c; --nb-priv:#5d4394; --nb-rule:#8fa3b566; --nb-margin:#b0564a73;
  --nb-type:"Courier Prime","Courier New",Courier,monospace;
  --nb-hand:"Segoe Print","Bradley Hand","Noteworthy","Comic Neue",cursive;
  position:fixed;z-index:60;left:24px;top:80px;width:340px;height:480px;
  display:flex;flex-direction:column;padding:0 9px 9px;border-radius:10px 10px 12px 12px;
  background:radial-gradient(120% 90% at 30% 0%,#4a372b,transparent 60%),linear-gradient(var(--nb-leather),var(--nb-leather-dark));
  box-shadow:0 30px 60px -18px #000,0 0 0 1px #140e0b,inset 0 1px #6a503d;
  color:var(--nb-ink);transform-origin:center;
}
#app:not(.ingame) .notebook{display:none}
.notebook[hidden]{display:none}
.notebook.is-moving{user-select:none;box-shadow:0 40px 80px -18px #000,0 0 0 1px #140e0b,inset 0 1px #6a503d}
.notebook.is-moving .nb-page{pointer-events:none}

/* Top edge: the binding strap, and the drag handle. */
.nb-bar{position:relative;display:flex;align-items:center;gap:8px;height:38px;padding:0 2px 0 6px;color:#e6d4b4;cursor:grab;touch-action:none;user-select:none}
.notebook.is-moving .nb-bar{cursor:grabbing}
.nb-bar:after{content:"";position:absolute;left:-3px;right:-3px;bottom:4px;border-bottom:1px dashed var(--nb-stitch);opacity:.55;pointer-events:none}
.nb-bar>.icon{font-size:16px;color:#d9b98a}
.nb-bar h2{margin:0;font:700 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.nb-owner{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:italic 12px var(--nb-hand);color:#c9ae86}
.nb-owner:not(:empty):before{content:"property of ";font:10px var(--sans);font-style:normal;color:#9c8466}
.nb-close{display:grid;place-items:center;flex:none;width:28px;height:28px;margin-left:auto;padding:0;border:0;border-radius:6px;background:transparent;color:#bfa27c}
.nb-close:hover{background:#ffffff14;color:#f1e1c4}
.nb-close .icon{font-size:16px}
.nb-close:focus-visible,.nb-tabs button:focus-visible{outline:2px solid #f1d49a;outline-offset:1px}

/* Index tabs stand up from the page edge; the selected one joins its page. */
.nb-tabs{display:flex;gap:3px;padding:0 8px;margin-top:2px}
.nb-tabs button{position:relative;display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 11px;border:0;border-radius:7px 7px 0 0;background:#a99b7b;color:#4a3d2d;font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;transform:translateY(3px);transition:transform .15s,background .15s}
.nb-tabs button:hover{transform:translateY(1px);background:#b9ab8b}
.nb-tabs button[aria-selected=true]{transform:none;background:var(--nb-paper);color:var(--nb-ink);z-index:1}
.nb-tabs .icon{font-size:12px}
.nb-tabs [data-nb-tab=evidence] .icon{color:var(--nb-priv)}
.nb-unread{display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--nb-priv);color:#f3ecff;font:700 9.5px var(--mono);letter-spacing:0}
.nb-unread:empty{display:none}

/* One page at a time: the selected tab's section fills it. */
.nb-page{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding:16px 18px 18px;border-radius:3px 3px 6px 6px;background:var(--nb-paper);
  background-image:radial-gradient(#00000009 1px,transparent 1.2px),linear-gradient(#ffffff10,#0000000c);background-size:5px 5px,100% 100%;
  box-shadow:0 2px 0 #9f9377,0 4px 0 #8d8166,0 6px 12px -4px #000;scrollbar-color:#8e8063 transparent}
.nb-page::-webkit-scrollbar-track{background:transparent}
.nb-page::-webkit-scrollbar-thumb{background:#8e8063;border-color:var(--nb-paper)}
.notebook:not([data-tab=dossier]) #nbDossier,.notebook:not([data-tab=evidence]) #nbEvidence,.notebook:not([data-tab=notes]) #nbNotes{display:none}

/* Rubber stamps head each section. */
.nb-stamp{display:flex;align-items:center;gap:8px;width:fit-content;margin:0 0 12px;padding:2px 8px;border:2px solid currentColor;border-radius:3px;color:var(--nb-stamp);font:800 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;transform:rotate(-1.4deg);opacity:.86;mix-blend-mode:multiply}
.nb-stamp-priv{color:var(--nb-priv);transform:rotate(.8deg)}
.nb-stamp-notes{color:#2f5776;transform:rotate(-.6deg)}
.nb-aside{font:400 9.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--nb-ink-soft);cursor:help}

/* Cover page. */
.nb-assignment{display:flex;gap:12px;align-items:flex-start}
.nb-assignment img{width:64px;height:64px;flex:none;border-radius:4px;background:#00000014;box-shadow:inset 0 0 0 1px #00000024;image-rendering:auto}
.nb-assignment small{display:block;font:600 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--nb-ink-soft)}
.nb-role{display:block;margin:1px 0 4px;font:700 17px var(--nb-type);color:var(--nb-ink)}
.nb-role-card{margin:0;font:12.5px/1.5 var(--nb-type);color:#3e3326}
.nb-role-card:empty{display:none}
.nb-voice{position:relative;margin:18px 4px 6px 2px;padding:16px 14px 12px;background:var(--nb-card);box-shadow:0 1px 2px #0000003d,0 6px 12px -8px #0000006b;transform:rotate(-.7deg)}
.nb-voice figcaption{display:flex;align-items:center;gap:6px;margin-bottom:6px;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nb-stamp)}
.nb-voice p{margin:0;font:italic 13px/1.55 Georgia,"Times New Roman",serif;color:var(--nb-ink);white-space:pre-wrap}
.nb-clip{position:absolute;top:-10px;right:22px;width:12px;height:30px;border:2px solid #8a8f94;border-radius:6px 6px 7px 7px;box-shadow:inset 0 0 0 2px transparent;transform:rotate(8deg)}
.nb-clip:after{content:"";position:absolute;left:1px;right:1px;top:5px;bottom:-2px;border:2px solid #9ba0a5;border-top:0;border-radius:0 0 5px 5px}
.nb-sub{margin:18px 0 6px;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--nb-ink-soft)}
.nb-tips{margin:0;padding:0 0 0 16px;font-size:12px;line-height:1.5;color:#3e3326}
.nb-tips li{margin:0 0 5px}
.nb-tips li::marker{content:"— ";color:var(--nb-stamp)}
.nb-empty{margin:0;font:italic 12px var(--nb-type);color:var(--nb-ink-soft)}

/* Private information: typed slips filed in order. */
#priv{display:flex;flex-direction:column;gap:8px;font:12.5px/1.5 var(--nb-type);color:var(--nb-ink)}
#priv:empty:before{content:"Nothing filed yet. Private results land here.";font-style:italic;color:var(--nb-ink-soft)}
#priv>div{padding:8px 10px;background:var(--nb-slip);box-shadow:0 1px 2px #00000030,inset 3px 0 color-mix(in srgb,var(--nb-priv) 70%,transparent)}
#priv>div:nth-child(odd){transform:rotate(-.25deg)}
#priv>div:nth-child(even){transform:rotate(.3deg)}
#priv>div:last-child{animation:nb-file .35s cubic-bezier(.2,.8,.2,1)}
@keyframes nb-file{from{opacity:0;transform:translateY(-6px) rotate(-1.5deg)}}
.notebook .priv-when{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;border-radius:2px;color:var(--nb-priv);font:800 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:0 5px}

/* Notes: ruled paper that scrolls with the writing. */
#nbNotes{flex:1;display:flex;flex-direction:column;min-height:0}
.notebook #mynotes{flex:1;width:100%;min-height:140px;margin:0;padding:3px 6px 24px 34px;border:0;border-radius:0;resize:none;outline:0;
  background:linear-gradient(90deg,transparent 26px,var(--nb-margin) 26px 27px,transparent 27px),repeating-linear-gradient(transparent 0 23px,var(--nb-rule) 23px 24px);
  background-attachment:local;color:#243a52;font:15px/24px var(--nb-hand);caret-color:#243a52}
.notebook #mynotes::placeholder{color:#7b8a96}
.notebook #mynotes:focus-visible{box-shadow:inset 0 0 0 2px #2f577640}

/* Names and roles referenced in rich text read as ink on paper. */
.notebook .text-reference.reference-name{color:color-mix(in srgb,var(--name-color) 40%,var(--nb-ink));font-weight:700}
.notebook .text-reference.reference-role{color:color-mix(in srgb,var(--alignment) 45%,var(--nb-ink));font-weight:700}
.notebook .text-reference:hover{background:#0000000f}

/* Corner grip for resizing. */
.nb-grip{position:absolute;right:1px;bottom:1px;width:18px;height:18px;cursor:nwse-resize;touch-action:none;
  background:linear-gradient(135deg,transparent 45%,#9c7b58 45% 52%,transparent 52% 64%,#9c7b58 64% 71%,transparent 71% 83%,#9c7b58 83% 90%,transparent 90%)}

/* ---------------------------------------------------------------- the you dock's notebook button */
.notebook-button{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 10px;border:0;border-radius:9px;
  background:linear-gradient(#3b2b22,#2b1f19);box-shadow:inset 0 0 0 1px #5a4332,inset 0 1px #6a503d;color:#e6d4b4;font-size:12px;font-weight:600;text-align:left}
.notebook-button:hover{box-shadow:inset 0 0 0 1px #c9a472,inset 0 1px #6a503d}
.notebook-button .icon{font-size:16px;color:#d9b98a}
.notebook-button.is-open{background:linear-gradient(#4a372b,#33251d);box-shadow:inset 0 0 0 1px #c9a472}
.notebook-button .count{margin-left:auto;display:grid;place-items:center;min-width:20px;height:18px;padding:0 5px;border-radius:99px;background:#00000040;color:#cdb793;font:700 10px var(--mono)}
.notebook-button .count:empty{display:none}
.notebook-button.has-unread .count{background:var(--priv);color:#1b1230}
.notebook-button.has-unread .count:before{content:"";width:6px;height:6px;margin-right:4px;border-radius:50%;background:#1b1230}
.notebook-button.has-unread .count{display:inline-flex;align-items:center}
@media (prefers-reduced-motion:no-preference){.notebook-button.has-unread .count:before{animation:pulse 1s ease-in-out infinite}}

.notebook-top{display:none}

/* Phones: the notebook is a bottom sheet; always one page at a time. */
@media (max-width:760px){
  #app.ingame .notebook-top{position:relative;display:inline-grid;place-items:center;width:34px;height:32px;padding:0}
  .notebook-top .icon{font-size:17px}
  .notebook-top.has-unread:after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--priv);box-shadow:0 0 0 2px var(--panel)}
  .notebook{left:0;right:0;top:auto;bottom:0;width:auto;height:min(78dvh,640px);padding-bottom:max(9px,env(safe-area-inset-bottom));border-radius:14px 14px 0 0}
  .nb-bar{cursor:default}
  .nb-grip{display:none}
  .nb-close{width:36px;height:32px}
  .nb-tabs button{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){#priv>div:last-child{animation:none}}