/* Exported card styles.
 *
 * Scoped entirely under .character-card so nothing here can leak into the app
 * shell (DESIGN.md: card themes belong to the card, never the app UI).
 *
 * Colours come only from the --c-* tokens the renderer writes on the root, so a
 * new theme is a token set in js/card/presets.js with no change here.
 *
 * IMPORTANT: this sheet must stay self-contained — no var() references to app
 * tokens and no external @font-face. It is serialised verbatim into the SVG used
 * for PNG export, where the app's stylesheets do not exist.
 */

.character-card {
  --cc-pad: 44px;
  --cc-gap: 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--cc-pad);
  gap: var(--cc-gap);
  overflow: hidden;
  background: linear-gradient(150deg, var(--c-bg) 0%, var(--c-bg) 45%, var(--c-bg-2) 100%);
  color: var(--c-text);
  font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.character-card *,
.character-card *::before,
.character-card *::after { box-sizing: border-box; }

.character-card h1,
.character-card h2,
.character-card p,
.character-card dl,
.character-card dd,
.character-card dt,
.character-card ol,
.character-card ul,
.character-card figure,
.character-card blockquote {
  margin: 0;
  padding: 0;
}

.character-card ol,
.character-card ul { list-style: none; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.cc-header {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 24px;
  align-items: start;
  padding-bottom: var(--cc-gap);
  border-bottom: 1px solid var(--c-border);
}

.cc-avatar {
  width: 132px;
  aspect-ratio: 3 / 4;
  border: 2px solid var(--c-accent);
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-panel);
}

.cc-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-avatar-empty {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--c-panel) 0 8px, transparent 8px 16px);
}

.cc-name {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.cc-class {
  margin-top: 4px;
  color: var(--c-accent);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cc-role {
  margin-top: 10px;
  color: var(--c-text-2);
  font-size: 15px;
  font-weight: 600;
}

.cc-prev {
  color: var(--c-muted);
  font-size: 12.5px;
}

.cc-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.cc-stamp {
  padding: 3px 10px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-panel);
  color: var(--c-text-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cc-stamp--accent {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.cc-bio {
  margin-top: 12px;
  color: var(--c-text-2);
  font-size: 13.5px;
  font-style: italic;
}

/* ── Body flow ───────────────────────────────────────────────────────────── */

.cc-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--card-cols, 1), minmax(0, 1fr));
  gap: var(--cc-gap);
  align-content: start;
}

/* Multi-column presets pack blocks into balanced columns. */
.character-card[data-layout='slack'] .cc-body,
.character-card[data-layout='social'] .cc-body {
  display: block;
  column-count: var(--card-cols, 2);
  column-gap: 34px;
}

.character-card[data-layout='slack'] .cc-block,
.character-card[data-layout='social'] .cc-block {
  break-inside: avoid;
  margin-bottom: var(--cc-gap);
}

.cc-block { min-width: 0; }

.cc-title {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Facts ───────────────────────────────────────────────────────────────── */

.cc-fact-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cc-fact-list--tight { gap: 6px; margin-top: 10px; }

.cc-fact dt {
  color: var(--c-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cc-fact dd {
  color: var(--c-text-2);
  font-size: 13.5px;
}

/* ── Two truths ──────────────────────────────────────────────────────────── */

.cc-truths { padding: 16px 18px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-panel); }
.cc-truths .cc-title { border-bottom-color: transparent; margin-bottom: 2px; }

.cc-hint {
  margin-bottom: 12px;
  color: var(--c-muted);
  font-size: 11.5px;
  font-style: italic;
}

.cc-truth-list {
  counter-reset: cc-truth;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-truth-list li {
  counter-increment: cc-truth;
  display: flex;
  gap: 10px;
  color: var(--c-text-2);
  font-size: 13.5px;
}

.cc-truth-list li::before {
  content: counter(cc-truth);
  flex: 0 0 20px;
  height: 20px;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}

/* ── Taste columns ───────────────────────────────────────────────────────── */

.cc-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--cc-gap);
}

.cc-col--gaming .cc-title { color: var(--c-accent-2); }
.cc-col--anime .cc-title,
.cc-col--movies .cc-title { color: var(--c-accent); }

.cc-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cc-list li {
  position: relative;
  padding-left: 14px;
  color: var(--c-text-2);
  font-size: 13.5px;
}

.cc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}

/* ── Quote ───────────────────────────────────────────────────────────────── */

.cc-quote {
  padding-left: 16px;
  border-left: 3px solid var(--c-accent);
}

.cc-quote blockquote {
  color: var(--c-text);
  font-size: 15px;
  font-style: italic;
  line-height: 1.4;
}

.cc-quote figcaption {
  margin-top: 6px;
  color: var(--c-muted);
  font-size: 12px;
}

/* ── Tags ────────────────────────────────────────────────────────────────── */

.cc-tags { display: flex; flex-wrap: wrap; gap: 7px; }

.cc-tag {
  padding: 4px 11px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-panel);
  color: var(--c-text-2);
  font-size: 12px;
}

/* ── Link / meme ─────────────────────────────────────────────────────────── */

.cc-link-value { color: var(--c-text-2); font-size: 13.5px; }
.cc-link-thumb {
  display: block;
  width: 100%;
  max-height: 96px;
  object-fit: cover;
  border-radius: 6px;
  margin: 5px 0;
  border: 1px solid var(--c-border);
}
.cc-link-url {
  margin-top: 3px;
  color: var(--c-muted);
  font-size: 11px;
  word-break: break-all;
}

/* ── Socials ─────────────────────────────────────────────────────────────── */

.cc-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 18px;
}

.cc-social { display: flex; gap: 7px; align-items: baseline; min-width: 0; }

.cc-social-label {
  color: var(--c-accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cc-social-handle {
  color: var(--c-text-2);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Media grid ──────────────────────────────────────────────────────────── */

.cc-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 12px;
}

.cc-media-item { min-width: 0; }

.cc-media-item img,
.cc-media-empty {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  object-fit: cover;
  background: var(--c-panel);
}

.cc-media-item--game img { border-color: var(--c-accent-2); }
.cc-media-item--anime img,
.cc-media-item--movie img { border-color: var(--c-accent); }

.cc-media-item figcaption {
  margin-top: 5px;
  color: var(--c-muted);
  font-size: 10px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.cc-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* Added by fitCard when a fixed preset could not keep everything. Set apart from
 * the brand stamp so it reads as information about this card, not decoration. */
.cc-dropped {
  padding-left: 12px;
  border-left: 1px solid var(--c-border);
  color: var(--c-text-2);
}

/* ── Print: the A4 preset becomes a real vector PDF via the browser ──────── */

/* The print clone lives in the document, so it needs hiding on screen. Only the
 * print block used to set `display`, which left a full A4 card visible at the
 * bottom of the page after every print — and `afterprint` does not fire when the
 * dialog is dismissed, so it stayed there. */
#card-print-root { display: none; }

@media print {
  @page { size: A4 portrait; margin: 0; }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  /* Hide the entire app; only the card prints. */
  body > *:not(#card-print-root) { display: none !important; }

  #card-print-root { display: block !important; }

  #card-print-root .character-card {
    width: 210mm !important;
    height: 297mm !important;
    min-height: 0 !important;
    border-radius: 0;
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}