:root {
  --bg:        #ffffff;
  --tile:      #f1efe8;
  --surface:   #ffffff;
  --border:    #d3d1c7;
  --text:      #0b0b0b;
  --text-soft: #5f5e5a;
  --accent:    #185fa5;
  --danger:    #a32d2d;
  --radius:    2px;
  --pad:       16px;
}

[data-theme="dark"] {
  --bg:        #161514;
  --tile:      #232220;
  --surface:   #1c1b1a;
  --border:    #35332f;
  --text:      #f1efe8;
  --text-soft: #b4b2a9;
  --accent:    #85b7eb;
  --danger:    #f09595;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--pad);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

header h1 { font-size: 18px; font-weight: 500; margin: 0; }

main { padding: var(--pad); max-width: 1100px; margin: 0 auto; }

a { color: var(--accent); }

button, .btn {
  font: inherit;
  font-size: 16px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-height: 44px;
}

button.primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

button:disabled { opacity: 0.5; cursor: default; }

.icon-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 8px;
  line-height: 1;
}

input, select, textarea {
  font: inherit;
  font-size: 16px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  min-height: 44px;
}

label { display: block; font-size: 13px; color: var(--text-soft); margin-bottom: 4px; }

.field { margin-bottom: 16px; }

.muted { color: var(--text-soft); font-size: 14px; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 600px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.tile {
  background: var(--tile);
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip { display: inline-block; margin: 0; }

.chip input { position: absolute; opacity: 0; width: 0; height: 0; }

.chip span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.chip input:checked + span {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.chip input:focus-visible + span { outline: 2px solid var(--accent); }

/* Toolbar above the grid */

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 20px;
}

.toolbar .btn { text-decoration: none; }

/* Filter bar */

.filters { margin-bottom: 20px; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.filter-label {
  font-size: 13px;
  color: var(--text-soft);
  min-width: 70px;
}

.chip-link, .pill {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}

.chip-link.is-active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.pill { color: var(--text-soft); }

/* Grid cards */

.card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-name {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Item detail */

.detail { display: grid; gap: 24px; }

@media (min-width: 700px) {
  .detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.detail-image { aspect-ratio: 3 / 4; }

.meta { margin: 0; }

.meta > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.meta dt { font-size: 13px; color: var(--text-soft); }

.meta dd { margin: 0; text-align: right; }

button.danger {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--surface);
}

.notice {
  padding: 12px 14px;
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--tile);
  font-size: 14px;
}

/* Top-level navigation between the two views */

.nav {
  display: flex;
  gap: 4px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.nav a {
  padding: 12px 4px;
  margin-right: 20px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.nav a.is-active { color: var(--text); border-bottom-color: var(--text); }

/* Fit builder - an equipment panel: fixed slots arranged around a figure.
   One grid places every slot by name. The middle two columns are the figure,
   the outer two are the accessories, and each accessory spans two rows of the
   figure so it sits beside the upper body or the lower body rather than
   floating. Slots are sized to what goes in them: a belt is a thin strip, a
   top and a trouser leg need real height. Coat and sweater share a row, or
   six full-height slots would push the shoes off the screen. */

.fit-panel {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr) 78px;
  grid-template-rows: 124px 158px 60px 158px 116px;
  grid-template-areas:
    "acc1 coat   sweater acc3"
    "acc1 top    top     acc3"
    "acc2 belt   belt    acc4"
    "acc2 bottom bottom  acc4"
    ".    shoes  shoes   .";
  gap: 7px;
  margin-bottom: 20px;
}

.slot--coat    { grid-area: coat; }
.slot--sweater { grid-area: sweater; }
.slot--top     { grid-area: top; }
.slot--belt    { grid-area: belt; }
.slot--bottom  { grid-area: bottom; }
.slot--shoes   { grid-area: shoes; }

.slot--acc1 { grid-area: acc1; }
.slot--acc2 { grid-area: acc2; }
.slot--acc3 { grid-area: acc3; }
.slot--acc4 { grid-area: acc4; }

/* An accessory spans two rows of the figure but stays small, centred in that
   span, so it reads as jewellery rather than another garment. */
.slot--acc1, .slot--acc2, .slot--acc3, .slot--acc4 {
  align-self: center;
  height: 96px;
}

@media (min-width: 700px) {
  .fit-panel {
    grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1fr) 132px;
    grid-template-rows: 200px 250px 84px 250px 170px;
    justify-content: center;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto 24px;
  }

  .slot--acc1, .slot--acc2, .slot--acc3, .slot--acc4 { height: 150px; }
}

.slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  touch-action: pan-y;
}

/* The label names an empty slot. Once a piece is in it the picture says what
   it is, and the label would only steal room from the photo. */
.slot-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  pointer-events: none;
}

.slot.is-filled .slot-label { display: none; }

.slot-face {
  flex: 1;
  align-self: stretch;
  min-height: 0;
  min-width: 0;
  padding: 5px;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.slot-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  /* Cutouts are transparent PNGs, so a white shirt on a light tile would have
     no edge at all. The shadow follows the garment's own outline. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}

[data-theme="dark"] .slot-face img,
[data-theme="dark"] .tile img { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }

.slot-step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  min-height: 44px;
  min-width: 30px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--text-soft);
  font-size: 22px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s;
}

.slot-step--prev { left: -2px; }
.slot-step--next { right: -2px; }

.slot.is-filled .slot-step,
.slot:hover .slot-step,
.slot:focus-within .slot-step { opacity: 0.85; }

.slot.is-disabled { opacity: 0.4; }
.slot.is-disabled .slot-face { cursor: default; }
.slot.is-disabled .slot-step { display: none; }

/* Only said when a tag is what emptied the slot. An accessory slot with
   nothing left to offer is obvious on its own and needs no label. */
.slot.is-empty .slot-label { font-size: 0; }

.slot.is-empty .slot-label::after {
  content: 'no match';
  font-size: 10px;
  letter-spacing: 0.1em;
}

.fit-actions { display: flex; gap: 10px; margin-bottom: 24px; }

#fit-tags .chip-link { cursor: pointer; }

#fit-hint { margin-top: 4px; }

/* Picker overlay: the wardrobe grid narrowed to one category */

.picker {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.picker[hidden] { display: none; }

.picker-sheet {
  width: 100%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--pad);
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

@media (min-width: 700px) {
  .picker { align-items: center; }
}

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

.picker .card {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}