/* ===== LingoDeck Card Styles ===== */
/* Card is A4 ratio: 794px x 1122px */

.card-page {
  width: 794px;
  height: 1122px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 34px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* Title area */
.card-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 14px;
}
.card-title-main { flex: 1; }
.card-word {
  font-size: 34px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.15;
  letter-spacing: 2px;
}
.card-pinyin {
  font-size: 26px;
  color: #555;
  margin-top: 4px;
  font-style: italic;
}
.card-tags { display: flex; flex-direction: column; align-items: flex-end; margin-left: 12px; }
.card-tag {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  padding-left: 22px;
  position: relative;
  margin: 2px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  white-space: nowrap;
}
.card-tag::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #D81B60;
}
/* Out-of-syllabus badge (amber, English labels, smaller) */
.card-tag.tag-warn {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: #B45309;
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: 999px;
  padding: 4px 12px 4px 24px;
  max-width: 340px;
  white-space: normal;
  line-height: 1.3;
}
.card-tag.tag-warn::before { background: #F59E0B; left: 10px; }

/* Main content */
.card-main { display: flex; gap: 16px; flex: 1; min-height: 0; }
.card-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card-right {
  flex: 0 0 196px;
  background: #F5F9FF;
  padding: 16px 14px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.card-cover {
  width: 100%;
  height: 145px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
  background: #f0f0f0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* Example sentence with pinyin */
.card-example {
  font-size: 19px;
  line-height: 2.2;
  color: #333;
  margin-bottom: 10px;
  text-align: justify;
  padding: 0 4px;
  /* scoped Chinese tracking: body sentences only (titles/labels untouched) */
  letter-spacing: 2px;
}
.card-example ruby { ruby-position: over; margin: 0 3px; }
.card-example rt {
  font-size: 14px;
  color: #444;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* Golden sentence */
.card-golden { margin-bottom: 12px; }
.card-golden-title {
  background: linear-gradient(90deg, #f68e8e, #e57373);
  padding: 6px 16px;
  color: #fff;
  font-size: 16px;
  border-radius: 6px 6px 0 0;
  font-weight: 600;
}
.card-golden-content {
  background: #fff9e6;
  padding: 10px 14px;
  line-height: 2.25;
  font-size: 17px;
  border-radius: 0 0 6px 6px;
  border: 1px solid #eee;
  border-top: none;
  color: #333;
  letter-spacing: 1.5px;
}
.card-golden-content ruby { ruby-position: over; margin: 0 3px; }
.card-golden-content rt {
  font-size: 14px;
  color: #444;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* Translation */
.card-trans { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.card-trans-title {
  background: linear-gradient(90deg, #ADD890, #8BC34A);
  padding: 7px 16px;
  color: white;
  font-size: 15px;
  border-radius: 6px 6px 0 0;
  font-weight: 600;
}
.card-trans-content {
  flex: 1;
  background: #F9F9F9;
  padding: 10px 14px 10px;
  line-height: 1.72;
  font-size: 14.5px;
  border-radius: 0 0 6px 6px;
  border: 1px solid #eee;
  border-top: none;
  color: #444;
  text-align: justify;
  display: flex;
  flex-direction: column;
}
.trans-text { flex: 1; }
/* Theme-word meaning strip, pinned to the bottom of the translation box,
   with a small gap from the box's bottom edge */
.theme-meaning {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #EEF4FF;
  border: 1px solid #D6E4FF;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
.theme-meaning .tm-bulb { flex: 0 0 auto; }
.theme-meaning b { color: #1A4FA0; font-size: 15px; }
.theme-meaning i { color: #888; font-size: 13px; font-weight: 400; }

/* Key words sidebar — words flow from the top; the collocations block
   below is pinned to the bottom via margin-top:auto. */
.card-words-list { display: flex; flex-direction: column; }
.card-words-title {
  color: #D81B60;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #D81B60;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.card-words-header {
  display: flex; gap: 8px; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; align-items: center;
}
.card-words-header span { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-imp { background: #D81B60; }
.dot-nor { background: #4CAF50; }

.word-item { margin-bottom: 12px; padding: 2px 0; }
.word-item:last-child { margin-bottom: 0; }
.word-en { font-size: 19px; font-weight: 700; margin-bottom: 2px; color: #D81B60; }
.word-en.normal { color: #4CAF50; }
.word-py { font-size: 14px; color: #555; font-weight: 600; margin-bottom: 2px; }
.word-cn { font-size: 15px; color: #333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; line-height: 1.3; }

/* Common collocations block — pinned near the bottom but lifted 50px so it
   does not sit on the card's lower edge (visual balance with the left
   translation box) */
.card-collocations {
  margin-top: auto;
  margin-bottom: 50px;
  padding-top: 14px;
  border-top: 1px dashed #C9D8EE;
}
.coll-title {
  font-size: 14px;
  font-weight: 700;
  color: #2B6CB0;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coll-item { margin-bottom: 12px; }
.coll-item:last-child { margin-bottom: 0; }
.coll-w {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #2B6CB0;
  line-height: 1.25;
}
.coll-py {
  display: block;
  font-size: 13px;
  color: #555;
  font-style: italic;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Highlight styles — applied ON the ruby element so text + background
   live in one node (html2canvas renders them in correct order) */
ruby.hl-imp {
  background: #fff3cd;
  color: #D81B60;
  padding: 0 3px;
  border-radius: 4px;
  font-weight: 700;
}
ruby.hl-imp rt { color: #D64545; font-weight: 700; }
ruby.hl-nor {
  background: #e8f4f8;
  color: #3E8E41;
  padding: 0 3px;
  border-radius: 4px;
  font-weight: 600;
}
ruby.hl-nor rt { color: #4CAF50; font-weight: 600; }

/* ===== Print / Multi-card layouts ===== */
/* A sheet = one A4 page holding 1 / 2 / 4 cards.
   .sheet-wrap is the on-screen flow box; JS (fitSheets) scales the inner
   sheet/card to the available width and resizes the wrap to match.
   In print everything resets to real A4 size (see @media print below). */
.sheet-wrap {
  position: relative;
  margin: 0 auto 24px;
}
.sheet-wrap:last-child { margin-bottom: 0; }
.sheet-wrap > .sheet,
.sheet-wrap > .card-page {
  position: absolute;
  top: 0; left: 0;
  /* fitSheets() applies a responsive scale; anchor it at the top-left
     (default center origin would shift the scaled sheet right & down) */
  transform-origin: top left;
}

.sheet {
  width: 794px;
  height: 1122px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

/* Each slot holds the fixed 794x1122 card, scaled to its sheet size */
.card-fit {
  position: absolute;
  width: 794px;
  height: 1122px;
  overflow: hidden;
}
.card-fit .card-page {
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  width: 794px;
  height: 1122px;
}

/* --- 2-up: LANDSCAPE A4 (1123x794), two portrait cards side by side ---
   card 794x1122 scaled by 561.5/794 ≈ 0.7072 => visual 561.5 x 794,
   so two cards exactly tile the 1123px landscape width (left 0 + 561.5). */
.sheet.landscape {
  width: 1123px;
  height: 794px;
}
.sheet.layout-2 .card-fit {
  top: 0;
  transform: scale(0.7072);
  transform-origin: top left;
}
.sheet.layout-2 .card-fit:nth-child(1) { left: 0; }
.sheet.layout-2 .card-fit:nth-child(2) { left: 561.5px; }
/* vertical cut line down the middle */
.sheet.layout-2::after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 561.5px; top: 12px; bottom: 12px;
  border-left: 1px dashed #ccc;
}

/* --- 4-up: PORTRAIT A4 (794x1122), 2x2 grid, scale 0.5 --- */
.sheet.layout-4 .card-fit {
  transform: scale(0.5);
  transform-origin: top left;
}
.sheet.layout-4 .card-fit:nth-child(1) { top: 0; left: 0; }
.sheet.layout-4 .card-fit:nth-child(2) { top: 0; left: 397px; }
.sheet.layout-4 .card-fit:nth-child(3) { top: 561px; left: 0; }
.sheet.layout-4 .card-fit:nth-child(4) { top: 561px; left: 397px; }
/* horizontal + vertical cut lines */
.sheet.layout-4::before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 397px; top: 12px; bottom: 12px;
  border-left: 1px dashed #ccc;
}
.sheet.layout-4::after {
  left: 12px; right: 12px; top: 561px;
  border-top: 1px dashed #ccc;
}

@media print {
  body { background: #fff; }
  header, footer, #formPanel, #loading, #demoBanner, #emptyState, #adUnlockBox,
  .wordSuggest { display: none !important; }
  main { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  main > .grid { display: block !important; }
  main > .grid > div:last-child { width: 100% !important; max-width: 100% !important; }
  #previewArea { padding: 0 !important; box-shadow: none !important; border: none !important; background: #fff !important; min-height: auto !important; }
  /* undo the on-screen responsive scaling: every wrap becomes a real A4 page */
  .sheet-wrap {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    page-break-after: always;
    break-after: page;
  }
  .sheet-wrap:last-child { page-break-after: auto; break-after: auto; }
  .sheet-wrap > .sheet,
  .sheet-wrap > .card-page {
    position: static !important;
    transform: none !important;
  }
  .sheet {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  #cardContainer > .card-page {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    page-break-after: always;
    break-after: page;
  }
  #cardContainer > .card-page:last-child { page-break-after: auto; break-after: auto; }
}

@page { size: A4 portrait; margin: 0; }
/* 2-up sheets print on landscape A4 */
@page ld-landscape { size: A4 landscape; margin: 0; }
.sheet.layout-2 { page: ld-landscape; }