/* Path: static/inspect.css
 *
 * Purpose:
 * - The inspect view from static/inspect.js: a dark vignette over the studio scene, the item's name
 *   and line, and paper set as a thermal receipt, a handwritten card or a typed page.
 * - Each paper names its own --paper and --ink, and the key hint takes the ink, so it reads at full
 *   strength on any paper; tests/test_readable.py checks the contrast.
 */

.inspect { --dark: #0a0d12; --dark-ink: #e8eef6; position: absolute; inset: 0; z-index: 48; cursor: grab; touch-action: none; user-select: none; color: var(--dark-ink); }
.inspect:active { cursor: grabbing; }
.inspect-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(10,13,18,0) 35%, rgba(10,13,18,.7) 75%, rgba(4,5,8,.96) 100%); }
.inspect-info { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: max-content; max-width: min(460px, calc(100% - 140px)); text-align: center; pointer-events: none; }
.inspect-name { margin: 0 0 6px; font: 400 clamp(20px, 3vw, 28px) var(--f-type, 'Special Elite', monospace); color: var(--dark-ink); }
.inspect-line { margin: 0; font: 13px/1.5 'JetBrains Mono', monospace; color: #c9d6e6; }
.inspect-help { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100% - 32px); font: 12px 'JetBrains Mono', monospace; color: var(--dark-ink); text-align: center; pointer-events: none; }
.inspect-help kbd { font: 600 11px 'JetBrains Mono', monospace; padding: 0 4px; border: 1px solid currentColor; }
.inspect-close { position: absolute; right: 20px; top: 18px; padding: 6px 12px; cursor: pointer; }

/* Paper sits to the right on a wide screen and along the bottom on a narrow one. */
.inspect-paper { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: min(360px, 42%); padding: 22px 24px 16px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 60px rgba(0,0,0,.65); cursor: default; }
.inspect-text { margin: 0 0 14px; max-height: 56vh; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.inspect-paper .inspect-help { position: static; transform: none; width: auto; max-width: none; color: var(--ink); border-top: 1px solid var(--ink); padding-top: 8px; }
.paper-receipt { --paper: #f4f1ea; --ink: #1f1d1a; width: min(300px, 42%); background-image: linear-gradient(rgba(0,0,0,.04), transparent 30%, rgba(0,0,0,.05)); }
.paper-receipt .inspect-text { font: 12px/1.45 'JetBrains Mono', monospace; letter-spacing: .02em; }
.paper-hand { --paper: #f3ead2; --ink: #23324a; transform: translateY(-50%) rotate(-1.2deg); background-image: repeating-linear-gradient(transparent 0 27px, rgba(60,90,140,.16) 27px 28px); }
.paper-hand .inspect-text { font: 400 23px/28px 'Reenie Beanie', cursive; letter-spacing: .03em; }
.paper-type { --paper: #ece6d6; --ink: #2b2a26; }
.paper-type .inspect-text { font: 14px/1.6 'Special Elite', 'Courier New', monospace; }

/* The Look button on each inventory slot. */
.inv-grid li .inv-look { padding: 2px 10px; font-size: 10px; cursor: pointer; }

@media (max-width: 700px), (max-aspect-ratio: 11/10) {
  .inspect-paper, .paper-receipt { right: 50%; top: auto; bottom: 16px; transform: translateX(50%); width: min(420px, calc(100% - 32px)); }
  .paper-hand { transform: translateX(50%) rotate(-1deg); }
  .inspect-text { max-height: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-hand, .inspect-paper { transition: none; }
}