/* Scroll & Stone - My Thread room.
   Sits on the shared codex-room.css shell (room-opening / room-title /
   room-standfirst) with only the bits this room needs of its own: the
   stat line, the plate lists, and the two-step clear control. */

.my-thread-main .mt-header { max-width: 60ch; }

.mt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.25rem;
  margin: 1.75rem 0;
  padding: 1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}

.mt-stat {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--ink);
}

.mt-section { margin: 2.25rem 0; max-width: 60ch; }

.mt-section h2 {
  font-family: var(--display);
  font-size: 1.15rem;
  margin-bottom: .75rem;
}

.mt-empty {
  font-family: var(--utility);
  font-size: .92rem;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.mt-plates {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.mt-plate a {
  font-family: var(--utility);
  font-size: .95rem;
  color: var(--pomegranate);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.mt-plate--noLink {
  font-family: var(--utility);
  font-size: .95rem;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

.mt-clear-section { border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); padding-top: 1.5rem; }

.mt-clear-btn,
.mt-clear-confirm {
  font-family: var(--utility);
  font-size: .85rem;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.mt-clear-confirm {
  margin-top: .75rem;
  border-color: var(--pomegranate);
  color: var(--pomegranate);
}

.mt-clear-warn {
  margin-top: .85rem;
  max-width: 48ch;
  font-family: var(--utility);
  font-size: .85rem;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}