/* ==========================================================================
   K05 Icons, Illustration & Product Imagery — page styles (kit/iconography.html)
   ========================================================================== */

.kit-h2--tight {
  margin-bottom: 8px;
}

.icons-intro {
  max-width: 64ch;
  margin: 0 0 20px;
  color: var(--ink-2);
}

/* Icon set: heading + search + size toggle -------------------------------- */
.icons-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
}

.icons-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: -.02em;
}

.icons-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.icons-search {
  width: 220px;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  -webkit-appearance: none;
  appearance: none;
}

.icon-sizes {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 10px;
}

.icon-sizes__option {
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}

.icon-sizes__option[aria-pressed="true"] {
  background: var(--ink);
  color: var(--canvas);
}

/* Icon grid (1px gaps show the line color as hairlines) */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--line);
}

.icon-grid__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px 12px;
  background: var(--surface);
  color: var(--ink);
}

.icon-grid__cell:hover {
  background: var(--surface-2);
}

.icon-grid__name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.icons-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* Spot illustrations ----------------------------------------------------- */
.spot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}

.spot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.spot__text {
  font-size: 14px;
  color: var(--ink-2);
}

/* Shared 96×72 canvas for absolutely positioned shapes */
.spot__art {
  position: relative;
  width: 96px;
  height: 72px;
}

.spot__art > span {
  position: absolute;
  border: 1.5px solid var(--ink);
}

/* Inbox zero: two stacked cards + a dot */
.spot-inbox__back {
  inset: 12px 0 0 12px;
  border-radius: 10px;
}

.spot-inbox__front {
  inset: 0 12px 12px 0;
  border-radius: 10px;
  background: var(--surface);
}

.spot__art > .spot-inbox__dot {
  top: 18px;
  left: 18px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--pos-bg);
}

/* No themes yet: three rising bars */
.spot-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 72px;
}

.spot-bars__bar {
  width: 22px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
}

.spot-bars__bar--s { height: 30px; }
.spot-bars__bar--m { height: 50px; }

.spot-bars__bar--l {
  height: 72px;
  background: var(--action-tint);
}

/* Invite your team: two overlapping circles */
.spot-team__circle {
  top: 10px;
  left: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.spot-team__circle--second {
  left: 36px;
  background: var(--info-bg);
  mix-blend-mode: multiply;
}

/* Something broke: diamond with a dot */
.spot-broke__diamond {
  top: 8px;
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  transform: rotate(45deg);
}

.spot-broke__dot {
  top: 28px;
  left: 40px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--warn-bg);
}

/* Photo placeholders (duotone stripes via --tone-a / --tone-b) ------------ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.photo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.photo__frame {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: repeating-linear-gradient(135deg, var(--tone-a) 0 10px, var(--tone-b) 10px 20px);
}

.photo__label {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
}

.photo__note {
  font-size: 13px;
  color: var(--ink-2);
}

/* Product imagery do / don't --------------------------------------------- */
.imagery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.imagery-rule {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.imagery-rule__label {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}