/* ------------------------------------------------------------------
   Crazy Mother
   Layout: title → row of pictures → crazy/hot chart (left) + details (right)
   ------------------------------------------------------------------ */

:root {
  --paper: #fdf3e3;
  --paper-2: #f7e6cd;
  --card: #fff8ea;
  --ink: #241c17;
  --ink-soft: #6a5749;
  --tomato: #e2402c;
  --mustard: #f2b230;
  --teal: #1f7a6c;

  --rule: 3px solid var(--ink);
  --rule-thin: 2px solid var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);

  --display: "Arial Black", "Arial Bold", Impact, system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", Times, serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --gap: 1.5rem;
  --pad: clamp(1rem, 2.5vw, 1.75rem);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    45deg, rgba(36, 28, 23, .03) 0 2px, transparent 2px 9px);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

code {
  font-family: var(--mono);
  font-size: .85em;
  background: rgba(36, 28, 23, .08);
  padding: .1em .35em;
  border-radius: 4px;
}

/* ── masthead ───────────────────────────────────────────── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: 1rem clamp(1rem, 2.5vw, 2rem) .85rem;
  border-bottom: var(--rule);
  background: var(--ink);
  color: var(--paper);
}
.masthead__title {
  font-family: var(--display);
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0;
}
.masthead__hint {
  margin: 0;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mustard);
}

/* ── row of pictures ────────────────────────────────────── */

.strip {
  display: flex;
  gap: .75rem;
  padding: .9rem clamp(1rem, 2.5vw, 2rem);
  border-bottom: var(--rule);
  background: var(--paper-2);
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.thumb {
  position: relative;
  flex: 1 1 0;
  min-width: clamp(84px, 8vw, 110px);
  max-width: 190px;
  aspect-ratio: 1;
  padding: 0;
  border: var(--rule);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform .1s ease, box-shadow .1s ease;
}
.thumb:hover { transform: translate(-1px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.thumb:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.thumb[aria-pressed="true"] {
  border-color: var(--tomato);
  box-shadow: 0 0 0 3px var(--tomato), var(--shadow-sm);
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* revealed by script.js only once the file really loads */
}
.thumb[data-loaded="true"] img { opacity: 1; }

.thumb__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  text-align: center;
  padding: .35rem;
  background-image: repeating-linear-gradient(
    -45deg, rgba(36, 28, 23, .07) 0 7px, transparent 7px 14px);
  color: var(--ink-soft);
  font-size: .6rem;
  line-height: 1.25;
}
.thumb__ph b { font-size: 1.05rem; font-family: var(--mono); color: var(--ink); }
.thumb[data-loaded="true"] .thumb__ph { display: none; }

.thumb__n {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 5px;
  min-width: 1.4em;
  padding: .05em .3em;
  border: var(--rule-thin);
  border-radius: 999px;
  background: var(--mustard);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

/* ── board: chart + details ─────────────────────────────── */

.board {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 30%);
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--rule);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: var(--pad);
}
.panel__note {
  margin: 1.1rem 0 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── the chart: crazy across, hot up ────────────────────── */

.quad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: .55rem;
  width: 100%;
}

.quad__label {
  font-family: var(--serif);
  font-size: clamp(.9rem, 1.7vw, 1.35rem);
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1.1;
  text-align: center;
}
.quad__label--top    { grid-area: 1 / 2 / 2 / 3; }
.quad__label--left   { grid-area: 2 / 1 / 3 / 2; }
.quad__label--right  { grid-area: 2 / 3 / 3 / 4; }
.quad__label--bottom { grid-area: 3 / 2 / 4 / 3; }

.plot {
  grid-area: 2 / 2 / 3 / 3;
  position: relative;
  width: 100%;
  max-width: min(100%, 56vh);
  aspect-ratio: 1;
  border: 2px dashed rgba(36, 28, 23, .18);
  border-radius: 10px;
}

.plot__axes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.plot__line { stroke: var(--ink); stroke-width: 1.5; }
.plot__arrow { fill: var(--ink); }

/* picture markers */

.marker {
  position: absolute;
  z-index: 2;
  width: clamp(38px, 5.4vw, 58px);
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper-2);
  display: grid;
  place-content: center;
  cursor: pointer;
  overflow: hidden;
  transform: translate(-50%, 50%) scale(1);
  transition:
    left .5s cubic-bezier(.2, .9, .25, 1),
    bottom .5s cubic-bezier(.2, .9, .25, 1),
    transform .15s ease,
    box-shadow .15s ease;
}
.marker[hidden] { display: none; }
.marker:hover { transform: translate(-50%, 50%) scale(1.08); z-index: 4; }
.marker:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  z-index: 4;
}
.marker[aria-pressed="true"] {
  transform: translate(-50%, 50%) scale(1.14);
  box-shadow: 0 0 0 3px var(--tomato);
  z-index: 3;
}

.marker img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.marker[data-loaded="true"] img { opacity: 1; }

.marker__n {
  position: absolute;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  min-width: 1.1em;
  padding: 0 .16em;
  border-radius: 4px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
}

/* ── details ────────────────────────────────────────────── */

.detail__who {
  min-height: 1.2em;
  margin: 0 0 .55rem;
  font-family: var(--display);
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--tomato);
}

.detail__summary {
  margin: 0;
  font-size: .98rem;
  color: var(--ink);
}

/* the dropdown menus */

.detail__menus {
  display: grid;
  gap: .85rem;
  margin-top: 1.4rem;
}

.field { display: grid; gap: .3rem; }

.field__label {
  font-family: var(--display);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.field__select {
  width: 100%;
  padding: .55rem .7rem;
  border: var(--rule-thin);
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .82rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.field__select:hover:not(:disabled) { background: #fff3d9; }
.field__select:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.field__select:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* copy / save buttons */

.detail__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: 1.1rem;
}

.btn-action {
  padding: .65rem .5rem;
  border: var(--rule-thin);
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--display);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.btn-action:hover { background: var(--mustard); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.btn-action:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-action:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.detail__status {
  min-height: 1.2em;
  margin: .7rem 0 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--teal);
}
.detail__status[data-error="true"] { color: var(--tomato); }

/* ── responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; }
  .plot { max-width: min(100%, 74vw); }
}

@media (prefers-reduced-motion: reduce) {
  .thumb, .marker { transition: none; }
}