/* ==========================================================================
   beindie — share cards (feature: cards)

   Two unrelated surfaces, one file, because both are small:
     .sharebox*   the share row under a Pro Tip (public, site.css tokens)
     .card-*      the gallery on /admin/cards (admin.css tokens)

   The token fallbacks (`var(--line, var(--hair, #d9d4c7))`) are deliberate:
   the public stylesheet calls the hairline `--line`, the admin one `--hair`,
   and this file is loaded next to either.
   ========================================================================== */

/* ---------- public: the share row under a Pro Tip ---------- */

.sharebox {
  border: 1px solid var(--line, var(--hair, #d9d4c7));
  border-left: 4px solid var(--accent, #ffd400);
  background: var(--paper-2, var(--surface, #fbf9f4));
  padding: 22px 24px 24px;
}

.sharebox__dek {
  margin: 8px 0 0;
  color: var(--muted, #6b6558);
  font-size: 15px;
  line-height: 1.5;
  max-width: 52ch;
}

.sharebox__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}

.sharebox__row--cards {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px dashed var(--line, var(--hair, #d9d4c7));
}

.sharebox__hint {
  flex: 1 1 200px;
  min-width: 0;
}

/* .copy ships with a top margin meant for a grid cell; in a flex row it is noise */
.sharebox .copy { margin-top: 0; }

@media (max-width: 520px) {
  .sharebox { padding: 18px 16px 20px; }
  .sharebox__row .btn,
  .sharebox__row .copy { flex: 1 1 auto; text-align: center; justify-content: center; }
}

@media print {
  .sharebox { display: none; }
}

/* ---------- admin: /admin/cards ---------- */

.card-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  border: 1px solid var(--hair, #d9d4c7);
  background: var(--surface, #fffefb);
  padding: 14px 16px;
}

.card-summary__stat { display: flex; align-items: baseline; gap: 8px; }
.card-summary__n { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 20px; }
.card-summary__lbl { font-size: 12px; color: var(--muted, #726c5f); }
.card-summary__spacer { flex: 1 1 auto; }
.card-summary form { margin: 0; }

.card-warn {
  border: 1px solid var(--red, #ff2d2d);
  padding: 12px 14px;
  margin-top: 16px;
  font-size: 13px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.card-tile {
  border: 1px solid var(--hair, #d9d4c7);
  background: var(--surface, #fffefb);
  padding: 12px;
  min-width: 0;
}

.card-tile__frame {
  display: block;
  border: 1px solid var(--hair-soft, #e6e1d5);
  background: var(--paper, #f4f1ea);
  overflow: hidden;
}

.card-tile__frame img {
  width: 100%;
  height: auto;
  display: block;
}

.card-tile__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.card-tile__name {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.card-tile__tag {
  font-family: var(--font-pixel, monospace);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--muted, #726c5f);
  flex: 0 0 auto;
}

.card-tile__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
}

.card-tile__links a { color: var(--muted, #726c5f); }
.card-tile__links a:hover { color: var(--ink, #141414); }

.card-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.card-section-head h2 { font-size: 17px; }
.card-section-head hr { flex: 1 1 auto; margin: 0; }