/* Inspector's Attaché. Tokens follow the site brass palette. */

@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Special+Elite&display=swap");

:root {
  --attache-display: "Cinzel Decorative", "Cinzel", Palatino, "Palatino Linotype", serif;
  --attache-plate: "Cinzel", Palatino, "Palatino Linotype", serif;
  --attache-text: "IM Fell English", Palatino, Georgia, serif;
  --attache-type: "Special Elite", "Courier New", Courier, monospace;
  --leather: #3a2216;
  --leather-deep: #24140e;
  --leather-lit: #5a3824;
  --fox: #f3e2bd;
  --fox-deep: #e4c890;
  --ink-brown: #1c120a;
  --wax: #6b1c1c;
  --wax-lit: #8d2a2a;
  --steel: #1a2430;
  --steel-lit: #314155;
  --verified: #3d5a2c;
  --denied: #6b1c1c;
}

body.attache-body {
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(232, 161, 60, 0.1), transparent 55%),
    linear-gradient(180deg, #120c08, var(--black) 40%);
  color: var(--cream);
}

.attache-body h1,
.attache-body h2,
.attache-body h3 {
  font-family: var(--attache-display);
}

.attache-shell {
  width: min(1080px, calc(100% - 1.2rem));
  margin: 0 auto;
  padding: 1rem 0 2.4rem;
}

.attache-case {
  position: relative;
  padding: clamp(1.1rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 18% 12%, rgba(232, 161, 60, 0.1), transparent 28%),
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, var(--leather-lit), var(--leather) 42%, var(--leather-deep));
  border: 3px solid #8a6432;
  box-shadow:
    inset 0 0 0 8px #2a1810,
    inset 0 0 0 10px #c4a05a,
    0 28px 70px rgba(0, 0, 0, 0.72);
}

.attache-case::before,
.attache-case::after {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #d4b36a;
  background:
    radial-gradient(circle at 50% 50%, #f0d48a 0 28%, #8a6432 32% 100%);
  box-shadow: 0 0 0 3px #2a1810;
  content: "";
  pointer-events: none;
}

.attache-case::before { top: 10px; left: 10px; }
.attache-case::after { top: 10px; right: 10px; }

.attache-rivets {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.attache-rivets span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3d98c, #8a6432 55%, #4a3418);
  box-shadow: 0 1px 0 #2a1810;
}

.attache-plate {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem 0.95rem;
  background:
    linear-gradient(180deg, #d8b46a, #9a7038);
  border: 2px solid #f0d48a;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    0 6px 0 #2a1810;
  color: #2a1810;
  text-align: center;
}

.attache-plate p,
.attache-kicker {
  margin: 0;
  font-family: var(--attache-plate);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.attache-plate h1 {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  letter-spacing: 0.08em;
  color: #1c120a;
}

.attache-lede {
  max-width: 40rem;
  margin: 0 auto 1.2rem;
  color: #f3e6c8;
  font-family: var(--attache-text);
  font-size: 1.08rem;
  text-align: center;
}

.folio-intro,
.question-copy {
  margin: 0 0 1rem;
  font-family: var(--attache-text);
  font-size: 1.05rem;
}

.question-copy {
  font-size: 1.12rem;
}

.folio-item {
  margin: 0 0 0.9rem;
  padding: 0.9rem 0.85rem 1rem;
  background: rgba(255, 250, 235, 0.42);
  border: 1px solid #b0894a;
}

.folio-item h3 {
  margin: 0 0 0.55rem;
  color: var(--ink-brown);
  font-family: var(--attache-plate);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.folio-office {
  margin: 0 0 0.2rem;
  font-family: var(--attache-plate);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.inspector-fields {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.inspector-fields div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.4rem;
}

.inspector-fields dt {
  margin: 0;
  color: #5a3a18;
  font-family: var(--attache-plate);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inspector-fields dd {
  margin: 0;
  font-family: var(--attache-text);
}

.inspector-fields dd.is-blank {
  letter-spacing: 0.08em;
}

.folio-slip p,
.folio-notes p,
.folio-report p,
.folio-receipt p {
  margin: 0 0 0.4rem;
}

.folio-tray ul {
  margin: 0;
  padding-left: 1.1rem;
}

.folio-tray li + li { margin-top: 0.35rem; }

.folio-report {
  box-shadow: inset 0 0 0 3px #6b1c1c;
}

.folio-receipt {
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(28, 18, 10, 0.06) 12px 13px),
    rgba(255, 250, 235, 0.55);
}

.attache-reply {
  margin: 0.4rem 0 0;
  padding: 0.7rem 0.8rem;
  background: rgba(255, 250, 235, 0.7);
  border-left: 4px solid #8a6432;
  font-family: var(--attache-text);
}

.attache-credit {
  margin: 1.3rem 0 0;
  color: #f3e6c8;
  font-family: var(--attache-plate);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.paper-sheet .attache-credit {
  color: #5a3a18;
}

.attache-body > .credits {
  width: min(1080px, calc(100% - 1.2rem));
  margin: 0 auto 1.4rem;
}

.attache-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin: 0 0 1.3rem;
}

.attache-toolbar .btn,
.attache-actions .btn,
.evidence-block .btn {
  font-family: var(--attache-plate);
}

.clasp {
  margin: 0 0 1.4rem;
  padding: 1rem 0.8rem 1.15rem;
  background:
    linear-gradient(180deg, #c9a25a, #8d682e 58%, #6d4e20);
  border: 2px solid #f0d48a;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.4), 0 8px 0 #24140e;
}

.clasp h2 {
  margin: 0 0 0.7rem;
  color: #1c120a;
  font-family: var(--attache-plate);
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.clasp-slots {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
}

.clasp-slot {
  aspect-ratio: 0.85;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 30%, #2a2014, #0d0a07 72%);
  border: 2px solid #4a3418;
  box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.65);
  color: #e8c36a;
  font-family: var(--attache-display);
  font-size: clamp(1.5rem, 4vw, 2.3rem);
}

.clasp-slot.is-set {
  color: #f8e7b0;
  text-shadow: 0 0 12px rgba(232, 161, 60, 0.7);
}

.envelope-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
}

.envelope {
  position: relative;
  padding: 1.1rem 1rem 1.2rem;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(150, 90, 40, 0.16), transparent 36%),
    radial-gradient(ellipse at 86% 78%, rgba(120, 70, 30, 0.14), transparent 32%),
    linear-gradient(180deg, var(--fox), var(--fox-deep));
  border: 1px solid #b0894a;
  box-shadow: 0 10px 0 #24140e;
  color: var(--ink-brown);
}

.envelope h2,
.envelope h3,
.paper-sheet h2,
.paper-sheet h3 {
  color: var(--ink-brown);
  font-family: var(--attache-display);
}

.envelope p,
.paper-sheet p,
.hint-list p {
  font-family: var(--attache-text);
}

.part-slips {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.part-slip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 250, 235, 0.5);
  border: 1px dashed #8a6432;
  color: inherit;
  font-family: var(--attache-plate);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.part-slip:hover,
.part-slip:focus-visible {
  background: rgba(255, 250, 235, 0.86);
  outline: 2px solid #6b1c1c;
  outline-offset: 2px;
}

.wax-seal {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0.4rem auto 0.7rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--wax-lit), var(--wax) 58%, #3d0e0e);
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, 0.25),
    0 6px 0 #24140e;
  color: #f3d2a0;
}

.unseals {
  margin: 0;
  color: #4a2c14;
  font-family: var(--attache-plate);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.paper-sheet {
  position: relative;
  margin: 0 0 1.1rem;
  padding: 1.15rem 1rem 1.25rem;
  background:
    radial-gradient(ellipse at 8% 12%, rgba(150, 90, 40, 0.16), transparent 34%),
    radial-gradient(ellipse at 92% 88%, rgba(110, 70, 30, 0.14), transparent 30%),
    linear-gradient(180deg, #f7ead0, #e8d0a0);
  border: 1px solid #b0894a;
  box-shadow: 0 10px 0 #24140e;
  color: var(--ink-brown);
}

.crumb {
  margin: 0 0 0.7rem;
  font-family: var(--attache-plate);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.crumb a { color: #6b1c1c; }

.evidence-block + .evidence-block { margin-top: 1.2rem; }

.evidence-label {
  margin: 0 0 0.55rem;
  font-family: var(--attache-plate);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.telegram {
  padding: 0.9rem;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(28, 18, 10, 0.05) 0 1px,
      transparent 1px 1.55rem
    ),
    #f6edd6;
  border: 8px solid #1c120a;
  outline: 2px solid #c4a05a;
  outline-offset: -14px;
}

.telegram-head {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px double #1c120a;
  font-family: var(--attache-plate);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.telegram-meta {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.8rem;
  font-family: var(--attache-type);
  font-size: 0.92rem;
}

.telegram-body {
  margin: 0;
  font-family: var(--attache-type);
  font-size: 1.05rem;
  line-height: 1.7;
}

.ticket {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(28, 18, 10, 0.06) 12px 13px),
    #f4e4b8;
  border: 2px dashed #6b4a1e;
}

.ticket-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--attache-plate);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.punches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.punch {
  width: 52px;
  height: 52px;
  justify-self: center;
  border: 2px solid #4a2c14;
  border-radius: 50%;
  background: #f8efd4;
  color: #4a2c14;
  font-family: var(--attache-plate);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.punch[aria-pressed="true"] {
  background:
    radial-gradient(circle at 50% 50%, #1c120a 0 38%, transparent 40%),
    #d8c08a;
  box-shadow: inset 0 0 0 5px #f4e4b8;
  color: transparent;
}

.punch,
.gauge-face,
.clock-face,
.cipher {
  user-select: none;
}

.punch:focus-visible,
.gauge-face:focus-visible,
.clock-face:focus-visible,
.cipher:focus-visible,
.answer-field input:focus-visible,
.btn:focus-visible,
.part-slip:focus-visible {
  outline: 3px solid #c45c1a;
  outline-offset: 3px;
}

.gauge-wrap,
.clock-row,
.cipher-wrap {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}

.gauge-face {
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, #d9e2ea 0 46%, var(--steel-lit) 48% 62%, var(--steel) 64%);
  border: 10px solid #8a6432;
  box-shadow: inset 0 0 0 4px #1a2430, 0 10px 0 #24140e;
  cursor: grab;
  touch-action: none;
}

.gauge-face[aria-valuenow] { color: #1c120a; }

.gauge-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b1c1c;
  transform-origin: center;
}

.gauge-needle {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 4px;
  height: 34%;
  background: linear-gradient(#8d2a2a, #1c120a);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(-120deg);
}

.gauge-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c4a05a;
  transform: translate(-50%, -50%);
}

.clock-row {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  width: min(100%, 720px);
  margin: 0 auto;
}

.ink-bar {
  display: inline-block;
  width: 8ch;
  height: 1.05em;
  margin: 0 0.18em;
  vertical-align: -0.2em;
  background:
    repeating-linear-gradient(90deg, #1a0c08 0 6px, #2a1410 6px 8px);
  border-radius: 1px;
  box-shadow: inset 0 -2px 0 #000, 0 1px 0 rgba(255, 240, 200, 0.25);
}

.ink-lift {
  font-family: var(--attache-plate);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.question-prompt {
  margin: 0.8rem 0 0.4rem;
  font-family: var(--attache-text);
  font-size: 1.12rem;
}

.letter-plate {
  margin: 0.8rem auto 0;
  width: min(12rem, 100%);
  padding: 0.8rem 0.6rem 1rem;
  background: linear-gradient(180deg, #d8b46a, #9a7038);
  border: 2px solid #f0d48a;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.55), 0 6px 0 #2a1810;
  text-align: center;
}

.letter-glyph {
  margin: 0.3rem 0 0;
  color: #1c120a;
  font-family: var(--attache-display);
  font-size: 3rem;
  line-height: 1;
}

.clock-face {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #f4ead6 0 68%, #1a2430 70%);
  border: 7px solid #8a6432;
  box-shadow: 0 8px 0 #24140e;
  cursor: grab;
  touch-action: none;
}

.clock-face span {
  position: absolute;
  color: #1c120a;
  font-family: var(--attache-plate);
  font-size: 0.68rem;
}

.clock-face .n { top: 7%; left: 50%; transform: translateX(-50%); }
.clock-face .e { right: 8%; top: 50%; transform: translateY(-50%); }
.clock-face .s { bottom: 7%; left: 50%; transform: translateX(-50%); }
.clock-face .w { left: 8%; top: 50%; transform: translateY(-50%); }

.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  background: #1c120a;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
}

.hand.hour {
  width: 5px;
  height: 26%;
}

.hand.minute {
  width: 3px;
  height: 36%;
  background: #4a2c14;
}

.clock-readout {
  margin: 0.35rem 0 0;
  color: #4a2c14;
  font-family: var(--attache-type);
  font-size: 0.85rem;
  text-align: center;
}

.cipher {
  position: relative;
  width: min(100%, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #c4a05a, #6d4e20);
  border: 8px solid #2a1810;
  box-shadow: 0 10px 0 #24140e;
  cursor: grab;
  touch-action: none;
}

.cipher-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
}

.cipher-letter {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #1c120a;
  font-family: var(--attache-plate);
  font-size: 0.72rem;
  font-weight: 700;
}

.cipher-inner {
  inset: 24%;
  background: radial-gradient(circle at 50% 50%, #f0d48a, #8a6432);
  border: 3px solid #2a1810;
}

.cipher-hub {
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: #1a2430;
  box-shadow: inset 0 0 0 4px #c4a05a;
}

.answer-field {
  display: grid;
  gap: 0.65rem;
}

.answer-field label {
  font-family: var(--attache-plate);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.answer-field input {
  width: 100%;
  padding: 0.75rem 0.8rem;
  border: 2px solid #8a6432;
  background: #f8efd4;
  color: var(--ink-brown);
  font-family: var(--attache-type);
  font-size: 1.05rem;
}

.stamp-stage {
  position: relative;
  min-height: 4.2rem;
}

.ink-stamp {
  position: absolute;
  left: 50%;
  top: 0.15rem;
  padding: 0.55rem 0.95rem;
  border: 5px double currentColor;
  font-family: var(--attache-plate);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-8deg) scale(1.4);
  opacity: 0;
}

.ink-stamp.is-on {
  opacity: 1;
  transform: translateX(-50%) rotate(-8deg) scale(1);
  transition: transform 0.28s ease, opacity 0.2s ease;
}

.ink-stamp.verified { color: #244016; }
.ink-stamp.denied { color: #7a1414; }

.hint-list {
  display: grid;
  gap: 0.55rem;
}

.hint-card {
  padding: 0.7rem 0.8rem;
  background: rgba(255, 250, 235, 0.55);
  border-left: 4px solid #6b1c1c;
}

.attache-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.attache-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(5, 4, 3, 0.72);
}

.attache-dialog[hidden] { display: none; }

.attache-dialog-card {
  width: min(28rem, 100%);
  padding: 1.2rem;
  background: var(--fox);
  border: 3px solid #8a6432;
  color: var(--ink-brown);
}

.attache-dialog-card h2 {
  color: var(--ink-brown);
  font-size: 1.3rem;
}

.attache-dialog-card p {
  font-family: var(--attache-text);
}

.gear-deco {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 0.6rem;
}

.print-dossier { display: none; }

@media (max-width: 820px) {
  .envelope-grid,
  .clock-row {
    grid-template-columns: 1fr;
  }

  .clasp-slots { gap: 0.28rem; }

  .punches { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .inspector-fields div {
    grid-template-columns: 1fr;
  }

  .part-slip {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ink-stamp.is-on {
    transition: none;
    transform: translateX(-50%) rotate(-8deg) scale(1);
  }
}