/* "Your Crate": the sealed, public view of a holder's Crate. */

.yourcrate__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.readout {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--nm-bg);
  color: var(--nm-ink);
  border: 1px solid var(--nm-black);
  border-radius: var(--r-lg);
  box-shadow: 8px 8px 0 var(--nm-lime);
}

.readout__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--nm-black);
}
.readout__title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.readout__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--nm-black);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.readout__rows { display: grid; grid-template-columns: 1fr 1fr; }
.readout__row {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(14, 15, 15, 0.35);
}
.readout__row:nth-child(odd):not(.readout__row--wide):not(.readout__row--key) { padding-right: 16px; }
.readout__row--wide,
.readout__row--key { grid-column: 1 / -1; }
.readout__row dt {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-muted);
}
.readout__row dd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 30px; font-size: 18px; font-weight: 500; }
.readout__row dd.is-decrypted,
.readout__row .is-decrypted { font-family: var(--font); }
.readout__row--key { border-bottom: 0; }
.readout__row--key dd { font-size: 26px; font-weight: 600; }

/* Fill meter: hatched and unknown while sealed. */
.meter {
  --fill: 0;
  position: relative;
  display: block;
  width: 100%;
  height: 22px;
  border: 1px solid var(--nm-black);
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--nm-paper);
}
.meter__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--fill) * 100%);
  background: var(--nm-lime);
  border-right: 1px solid var(--nm-black);
  transition: width 900ms var(--ease-out);
}
.meter.is-masked {
  background: repeating-linear-gradient(-45deg, var(--nm-black) 0 6px, var(--nm-paper) 6px 12px);
  background-size: 34px 34px;
  animation: hatch 1.6s linear infinite;
}
.meter.is-masked .meter__bar { display: none; }
@keyframes hatch { to { background-position: 34px 0; } }

.pips { display: flex; flex-wrap: wrap; gap: 6px; }
.pip {
  padding: 4px 10px;
  border: 1px solid var(--nm-black);
  border-radius: var(--r-xs);
  font-size: 12px;
  font-weight: 500;
  color: var(--nm-muted);
  background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(14, 15, 15, 0.12) 4px 5px);
}
.pip.is-on { background: var(--c); color: var(--nm-black); }
.readout__tier { margin-left: auto; }

.readout__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--nm-black);
}
.readout__foot p { font-size: 14px; color: var(--nm-muted); flex: 1 1 220px; }

.crate-revealed .readout { box-shadow: 8px 8px 0 var(--nm-bg); }

/* Factor cards: NullMask's light-card-on-dark pattern, icon over text. */
.factor-cards { display: grid; grid-auto-rows: 1fr; gap: 20px; }
.factor-cards .card { justify-content: space-between; }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.card__num { font-family: var(--mono); font-size: 13px; color: var(--nm-muted); }
.factor-cards .iso-icon { width: 92px; height: 92px; margin: -6px 0 0 -6px; }
.factor-cards h3 { font-size: 19px; font-weight: 600; }
.factor-cards p { font-size: 14.5px; }

@media (max-width: 980px) {
  .yourcrate__grid { grid-template-columns: 1fr; }
  .factor-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
}
@media (max-width: 640px) {
  .readout__rows { grid-template-columns: 1fr; }
  .readout__row:nth-child(odd) { padding-right: 0; }
  .factor-cards { grid-template-columns: 1fr; }
  .factor-cards .card { flex-direction: row; align-items: center; justify-content: flex-start; }
  .factor-cards .card__top { flex-direction: column-reverse; gap: 4px; }
  .factor-cards .iso-icon { width: 72px; height: 72px; }
  .readout__tier { margin-left: 0; }
}