/*
 * line-oa-link.css — per-tool styles for the LINE OA Link & QR Generator.
 * Tokens only; no inline styles (CSP).
 */

/* Share-link builder sits below the ID field, divided by a hairline. */
.loa-share {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

/* Inline result for the generated share link. */
.loa-share-result {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* QR block: centered code, caption and download actions. */
.loa-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.loa-qr {
  width: 200px;
  height: 200px;
}
.loa-qr-caption {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 32ch;
  margin: 0;
}
.loa-qr-actions {
  justify-content: center;
  margin-top: 0;
}

/* Generated links list — one card-like row per link format. */
.loa-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.loa-link {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--neutral-50);
}
.loa-link-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.loa-link-label {
  font: 500 var(--text-sm) / 1.4 var(--font-sans);
  color: var(--text-secondary);
}

/* Value + action buttons sit on one row, wrapping on narrow screens. */
.loa-link-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.loa-link-value {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
}
a.loa-link-value:hover { text-decoration: underline; }

/* ID-type note: keep the info icon on the same line as the text. */
.loa-idnote {
  margin-top: var(--space-4);
  align-items: flex-start;
}