/* Entry 013 — The Reference Desk
   Series: Counterfactual Defaults.
   Scene art direction: a reading room after hours. One warm lamp falls from
   upper-center over walnut dark. The hero is a single luminous catalogue card —
   glowing parchment, square-cornered the way real index cards are — floating
   above a dim catalogue drawer. One accent: a reading-lamp green (the
   librarian's ink), used only for the cataloged mark, the active tab, and the
   reply-owed stamp. Display serif: Fraunces, for the abstract line.
   Surface choice (warm paper, not cold glass) and crisp corners set this entry
   apart from 011's blue glass and 012's teal bar. */

.desk-scene {
  --ink: #2b2018;          /* warm card ink, never pure black */
  --paper-edge: rgba(120, 92, 64, 0.34);
  --green: #4f9468;        /* reading-lamp green — the one accent */
  --green-ink: #346b49;
  --green-glow: rgba(99, 168, 122, 0.55);
  --rust: #bd6a39;         /* overdue */
  --faint: rgba(58, 44, 32, 0.56);

  display: grid;
  place-items: center;
  min-height: 820px;
  padding: 96px 32px;
  border-color: rgba(26, 19, 14, 0.7);
  /* background-first: a real photograph (warm lamp on walnut) carries the room;
     a soft scrim keeps the parchment card and drawer legible. */
  background-image:
    linear-gradient(180deg, rgba(28, 20, 14, 0.32) 0%, rgba(24, 17, 12, 0.18) 42%, rgba(18, 12, 8, 0.62) 100%),
    url("../../public/media/backgrounds/dark-warm-18-philipp.jpg");
  background-size: cover, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat, no-repeat;
}

/* mid layer — the lamp's pooled light, spilled and blurred over the desk */
.lamp {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 34%;
  width: min(820px, 92%);
  height: 520px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(58% 56% at 50% 42%, rgba(255, 222, 168, 0.20), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* THE DESK — hero card + actions + catalogue drawer                   */
/* ------------------------------------------------------------------ */

.desk {
  position: relative;
  z-index: 2;
  width: min(580px, 100%);
  display: grid;
  gap: 26px;
}

/* ---- the hero: a luminous catalogue card (warm parchment) ---- */
.card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 34px 34px 22px;
  border-radius: 8px;            /* crisp, index-card corners */
  font-family: var(--ui-sans);
  color: var(--ink);
  background:
    linear-gradient(168deg, rgba(247, 239, 224, 0.95), rgba(233, 220, 198, 0.9));
  border: 1px solid rgba(255, 250, 238, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px var(--paper-edge),
    0 50px 110px rgba(18, 11, 6, 0.62),
    0 12px 34px rgba(60, 38, 16, 0.34);
  backdrop-filter: blur(2px);
  transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 600ms ease;
}

/* faint ruled baseline, like a real catalogue card */
.card::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  top: 92px;
  height: 1px;
  background: rgba(120, 92, 64, 0.18);
  pointer-events: none;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(120, 92, 64, 0.4);
  transition: background 500ms ease, box-shadow 500ms ease;
}

.card[data-state="filed"] .status-dot {
  background: var(--green);
  box-shadow: 0 0 12px var(--green-glow);
}

.callno {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  transition: color 500ms ease;
}

.card[data-state="filed"] .callno { color: var(--green-ink); }

.card-from {
  margin: 6px 0 -8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

/* subject = title, Fraunces for warmth */
.card-subject {
  margin: 0;
  font-family: "Fraunces", "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.08;
  letter-spacing: 0.002em;
  color: #241a12;
  text-wrap: balance;
}

/* the soul voice — an abstract, in Fraunces italic */
.card-abstract {
  margin: 2px 0 0;
  font-family: "Fraunces", "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.45;
  color: #4a3a2b;
  max-width: 42ch;
  animation: rise 500ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

/* subject headings — the machine's classification, clickable */
.card-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  animation: rise 560ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

.subject-chip {
  font-family: var(--ui-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(79, 148, 104, 0.45);
  background: rgba(99, 168, 122, 0.1);
  color: var(--green-ink);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 160ms ease;
}

.subject-chip:hover { transform: translateY(-1px); background: rgba(99, 168, 122, 0.2); }
.subject-chip[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #f6fbf6;
  box-shadow: 0 6px 16px rgba(79, 148, 104, 0.4);
}

.card-seealso {
  margin: 2px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: #6b5640;
  animation: rise 600ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.card-seealso b { font-style: normal; font-weight: 600; color: var(--green-ink); }

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 92, 64, 0.16);
}

/* the reply-owed stamp — green ink, askew like a real rubber stamp */
.stamp {
  font-family: var(--ui-sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-ink);
  padding: 6px 11px;
  border: 2px solid var(--green-ink);
  border-radius: 5px;
  background: rgba(99, 168, 122, 0.07);
  transform: rotate(-3.2deg);
  cursor: pointer;
  transition: transform 200ms ease, color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.stamp:hover { transform: rotate(-3.2deg) scale(1.03); }

.stamp.is-overdue {
  color: var(--rust);
  border-color: var(--rust);
  background: rgba(189, 106, 57, 0.08);
  transform: rotate(2.4deg);
}

.card-received {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ---- actions ---- */
.desk-actions {
  display: flex;
  justify-content: center;
}

.btn {
  font-family: var(--ui-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 7px;
  padding: 13px 30px;
  cursor: pointer;
  transition: transform 180ms ease, background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

.btn-file {
  border: 1px solid var(--green-ink);
  background: linear-gradient(180deg, #5aa377, #3f7a59);
  color: #f4fbf5;
  box-shadow: 0 12px 30px rgba(40, 86, 56, 0.45);
}
.btn-file:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(40, 86, 56, 0.55); }
.btn-file:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }

/* ---- the catalogue drawer (dim, in shadow below the lamp) ---- */
.shelf {
  margin-top: 4px;
  padding: 18px 20px 20px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(34, 24, 17, 0.5), rgba(22, 15, 10, 0.62));
  border: 1px solid rgba(120, 92, 64, 0.3);
  box-shadow: 0 24px 60px rgba(10, 6, 3, 0.5), 0 1px 0 rgba(170, 130, 90, 0.18) inset;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.shelf-title {
  font-family: var(--ui-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(214, 192, 162, 0.6);
}

.shelve-by { display: inline-flex; gap: 2px; }

.seg {
  font-family: var(--ui-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(214, 192, 162, 0.6);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}
.seg:hover { color: #f0e3cf; }
.seg.is-on {
  color: #f4fbf5;
  background: rgba(79, 148, 104, 0.32);
  border-color: rgba(99, 168, 122, 0.5);
}

.shelf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }

.shelf-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 7px;
  background: rgba(247, 239, 224, 0.045);
  border: 1px solid rgba(170, 130, 90, 0.12);
  transition: background 240ms ease, border-color 240ms ease, opacity 240ms ease, transform 360ms cubic-bezier(0.2, 0.6, 0.2, 1);
  animation: rise 420ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

.shelf-row .row-call {
  font-family: var(--ui-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(160, 200, 172, 0.78);
  white-space: nowrap;
}

.shelf-row .row-subject {
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px;
  color: rgba(238, 226, 208, 0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shelf-row .row-from { font-style: italic; color: rgba(206, 186, 158, 0.62); }

.shelf-row .row-owed {
  font-family: var(--ui-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(206, 186, 158, 0.66);
  white-space: nowrap;
}
.shelf-row.is-overdue .row-owed { color: var(--rust); }
.shelf-row.is-fresh { border-color: rgba(99, 168, 122, 0.4); background: rgba(99, 168, 122, 0.08); }

/* cross-reference highlight */
.shelf-list.is-filtering .shelf-row { opacity: 0.26; }
.shelf-list.is-filtering .shelf-row.is-match {
  opacity: 1;
  background: rgba(99, 168, 122, 0.12);
  border-color: rgba(99, 168, 122, 0.42);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .card-abstract, .card-subjects, .card-seealso, .shelf-row { animation: none; }
}

/* ---- small screens ---- */
@media (max-width: 720px) {
  .desk-scene { padding: 64px 14px; min-height: 0; }
  .card { padding: 26px 22px 18px; }
  .card::after { left: 22px; right: 22px; }
  .shelf-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .shelf-row { grid-template-columns: 1fr auto; }
  .shelf-row .row-call { grid-column: 1 / -1; }
}