/*
 * Visual icon layer for 議事録AIえらび.
 * Generic semantics follow the Lucide line-icon language used by lane 1.
 * Product identity stays compact and secondary to the editorial copy.
 */
.visual-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  vertical-align: -0.14em;
}

.eyebrow-icon {
  display: flex;
  align-items: center;
  gap: 9px;
}

.eyebrow-glyph {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 1px solid rgba(13, 111, 115, .28);
  background: rgba(13, 111, 115, .055);
  color: var(--accent);
}

.eyebrow-glyph .visual-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.note-label-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.note-label-icon .visual-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.strip-meta {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
  opacity: 1 !important;
}

.strip-meta .strip-icon {
  display: grid !important;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .28);
  opacity: 1 !important;
}

.strip-meta .strip-icon .visual-icon {
  width: 16px;
  height: 16px;
  color: white;
}

.strip-meta .strip-number {
  display: inline !important;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .08em;
  opacity: .68 !important;
}

.service-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 17px;
}

.service-context-vs {
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.service-chip,
.service-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.service-chip {
  min-height: 34px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
}

.service-logo-frame {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  overflow: hidden;
  border: 1px solid rgba(20, 32, 39, .14);
  background: #fff;
}

.service-logo-img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.service-heading {
  color: inherit;
  font-weight: 850;
  white-space: nowrap;
}

.service-heading .service-logo-frame {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  border-color: rgba(255, 255, 255, .35);
}

.service-heading .service-logo-img {
  width: 19px;
  height: 19px;
}

.decision-list li {
  position: relative;
  padding-left: 34px;
}

.decision-list .decision-icon {
  position: absolute;
  left: 0;
  top: 21px;
  width: 19px;
  height: 19px;
  color: var(--accent);
  stroke-width: 2.1;
}

.button .external-icon {
  width: 16px;
  height: 16px;
  margin-left: 7px;
  vertical-align: -0.12em;
}

@media (max-width: 820px) {
  .eyebrow-icon {
    gap: 8px;
  }

  .eyebrow-glyph {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }

  .eyebrow-glyph .visual-icon {
    width: 13px;
    height: 13px;
  }

  .strip-meta .strip-icon {
    width: 27px;
    height: 27px;
  }

  .service-context {
    margin-bottom: 14px;
  }

  .service-chip {
    min-height: 32px;
    padding: 4px 9px 4px 5px;
  }

  .service-heading {
    gap: 7px;
  }

  .service-heading .service-logo-frame {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .service-heading .service-logo-img {
    width: 17px;
    height: 17px;
  }
}