/* Outfit generator: request form, result card and history. */

.outfit-form {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.field-row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr 1fr;
}

.field {
  display: grid;
  gap: var(--space-xs);
  font-size: var(--font-sm);
  color: var(--muted);
}

.field select,
.field input[type="range"] {
  width: 100%;
}

.field select {
  padding: var(--space-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

#temperatureValue {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text);
}

.choice-group {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
}

.choice-group legend {
  padding: 0;
  font-size: var(--font-sm);
  color: var(--muted);
}

.choice {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  font-size: var(--font-md);
}

.switch {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-sm);
  align-items: center;
  font-size: var(--font-md);
}

.switch small {
  grid-column: 2;
  font-size: var(--font-sm);
  color: var(--muted);
}

.outfit-status:empty {
  display: none;
}

.outfit-status {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--mint);
}

.outfit-result {
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.outfit-head {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.outfit-head h2 {
  margin: var(--space-xs) 0 0;
}

.badge-curated {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-xs);
  color: var(--mint);
  white-space: nowrap;
  background: var(--mint-soft);
  border-radius: var(--radius-sm);
}

.outfit-render {
  display: block;
  width: 100%;
  margin-bottom: var(--space-lg);
  cursor: zoom-in;
  border-radius: var(--radius-sm);
}

.outfit-render-placeholder {
  padding: var(--space-2xl) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: var(--font-sm);
  color: var(--muted);
  text-align: center;
  background: var(--surface2);
  border-radius: var(--radius-sm);
}

.outfit-items {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  margin-bottom: var(--space-lg);
}

.outfit-item {
  margin: 0;
}

.outfit-item-photo {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  background: var(--surface2);
  border-radius: var(--radius-sm);
}

.outfit-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.item-initial {
  font-size: var(--font-xl);
  color: var(--muted);
}

.item-flag {
  position: absolute;
  right: var(--space-xs);
  bottom: var(--space-xs);
  left: var(--space-xs);
  padding: 2px var(--space-xs);
  font-size: var(--font-xs);
  color: var(--surface);
  text-align: center;
  background: var(--gold);
  border-radius: var(--radius-sm);
}

.outfit-item figcaption {
  display: grid;
  gap: 2px;
  padding-top: var(--space-sm);
  font-size: var(--font-sm);
}

.outfit-item figcaption span {
  color: var(--muted);
}

.outfit-reasons,
.outfit-warnings,
.outfit-shopping ul {
  display: grid;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
  margin: 0 0 var(--space-lg);
  font-size: var(--font-md);
}

.outfit-warnings {
  color: var(--gold);
}

.outfit-shopping {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  background: var(--surface2);
  border-radius: var(--radius-sm);
}

.outfit-shopping strong {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--font-sm);
}

.outfit-shopping ul {
  margin-bottom: 0;
}

.outfit-error {
  margin: 0 0 var(--space-md);
  font-size: var(--font-sm);
  color: var(--danger);
}

.section-heading {
  margin: var(--space-xl) 0 var(--space-md);
  font-size: var(--font-lg);
}

.outfit-history {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.history-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm);
  text-align: left;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.history-card:hover {
  border-color: var(--mint);
}

.history-thumb {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  background: var(--surface2);
  border-radius: var(--radius-sm);
}

.history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-placeholder {
  padding: var(--space-xs);
  font-size: var(--font-xs);
  color: var(--muted);
  text-align: center;
}

.history-body {
  display: grid;
  gap: 2px;
}

.history-meta {
  font-size: var(--font-sm);
  color: var(--muted);
}

.empty-hint {
  margin: 0;
  font-size: var(--font-md);
  color: var(--muted);
}

@media (max-width: 480px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.intro-small {
  margin: 0 0 var(--space-lg);
  font-size: var(--font-md);
  color: var(--muted);
}

.rule-groups {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.rule-group {
  padding: var(--space-md) var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.rule-group h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--mint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rule-group ul {
  display: grid;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
  margin: 0;
  font-size: var(--font-md);
}