/* The introduction card, exactly as the cards already on the boards (the 2025 Google Slides template):
   yellow notes with a thin black outline on a dark background, olive shadows on name, team and photo.
   Laid out on an A6 sheet (148 × 105 mm) at the slide's scale when its height fills the sheet:
   1 slide point = 0.259259 mm. All sizes below are slide points × --k, so the numbers match the template. */

.sdcard {
  --k: 0.259259mm;
  --fs: 9;
  --line: calc(1.1 * var(--k));
  --drop: calc(6 * var(--k));
  position: relative;
  width: 148mm;
  height: 105mm;
  overflow: hidden;
  isolation: isolate;
  background: #131217;
  color: #131217;
  font-family: var(--sd-font);
  /* The template uses plain Inter: no platform alternates, so screen, PDF and PNG break and space words alike. */
  font-feature-settings: normal;
  font-variant-numeric: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.sdcard.yg { --sd-font: "Inter", Arial, sans-serif; --sd-note: #FFF903; --sd-drop: #9F9B00; }
.sdcard.sero { --sd-font: "Google Sans", "Inter", Arial, sans-serif; --sd-note: #FFFFFF; --sd-drop: linear-gradient(45deg, #0433FF 0%, #FF40FF 100%); }
.sdcard :where(h2, h3, p, ul, li, figure) { margin: 0; padding: 0; }
/* the app styles its own headings in Poppins; on the card everything is the template's font */
.sdcard h2, .sdcard h3 { font-family: var(--sd-font); letter-spacing: normal; }

/* a note: yellow (or white) fill with a thin black outline; some carry an olive (or gradient) shadow */
.sd-note { position: absolute; background: var(--sd-note); box-shadow: 0 0 0 var(--line) #000; }
.sd-note.sd-shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(var(--drop), var(--drop));
  background: var(--sd-drop);
  box-shadow: 0 0 0 var(--line) #000;
}

/* positions, from the template (slide points → mm, centred on the sheet) */
.sd-namebox { left: 9.37mm; top: 4.24mm; width: 46.09mm; height: 12.06mm; }
.sd-teambox { left: 9.37mm; top: 22.03mm; width: 46.09mm; height: 11.96mm; }
.sd-photobox { left: 9.37mm; top: 39.6mm; width: 46.09mm; height: 59.37mm; }
.sd-like { left: 59.83mm; top: 4.24mm; }
.sd-dislike { left: 100.95mm; top: 4.24mm; }
.sd-love { left: 59.83mm; top: 54.79mm; }
.sd-heart { left: 100.95mm; top: 54.79mm; }
.sd-box { width: 36.75mm; height: 46.04mm; display: flex; flex-direction: column; padding: calc(10.4 * var(--k)) calc(7 * var(--k)) calc(7 * var(--k)); }

/* name and team: bold, centred in their note */
.sd-namebox, .sd-teambox { display: flex; align-items: center; justify-content: center; padding: 0 calc(7 * var(--k)); text-align: center; }
.sd-name {
  display: block;
  width: 100%;
  font-weight: 700;
  font-size: calc(23 * var(--k));
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}
.sd-team { width: 100%; font-weight: 700; font-size: calc(14 * var(--k)); line-height: 1.2; text-wrap: balance; text-align: center; }

/* the four boxes: bold centred heading, items with an empty line between them */
/* headings break like the template (no balancing), so they match the cards on the board */
.sd-box h3 { flex: none; font-weight: 700; font-size: calc(14 * var(--k)); line-height: 1.2; text-align: center; text-wrap: balance; margin-bottom: calc(7 * var(--k)); }
.sd-txt { position: relative; flex: 1; min-height: 0; overflow: hidden; font-size: calc(var(--fs) * var(--k)); line-height: 1.4; }
.sd-txt ul { list-style: none; min-height: 100%; outline: none; }
.sd-txt li { text-wrap: balance; overflow-wrap: anywhere; }
.sd-txt li + li { margin-top: 0.6em; }

/* photos: up to four, the frame fills itself */
/* only the photos are clipped, so the frame keeps its shadow */
.sd-photos { position: absolute; inset: 0; overflow: hidden; display: grid; gap: var(--line); background: #000; }
.sd-photos.n-0, .sd-photos.n-1 { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.sd-photos.n-2 { grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 1fr); }
.sd-photos.n-3 { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }
.sd-photos.n-3 > :first-child { grid-column: 1 / 3; }
.sd-photos.n-4 { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }
.sd-photos figure { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.sd-photos img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-photos.n-0 { background: #DDEFFA; }

/* hub header card: one large note in the same style */
.sd-header .sd-hubnote { left: 24mm; top: 30mm; width: 100mm; height: 40mm; display: flex; align-items: center; justify-content: center; padding: 0 6mm; }
.sd-header .sd-hname { font-weight: 700; font-size: calc(40 * var(--k)); line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; }

/* ---------- editing affordances (never exported) ---------- */
.sdcard.editing [contenteditable] { outline: none; cursor: text; caret-color: #000; }
.sdcard.editing .sd-name:hover, .sdcard.editing .sd-team:hover,
.sdcard.editing .sd-txt:hover { box-shadow: 0 0 0 0.35mm rgba(0, 0, 0, 0.2); border-radius: 0.6mm; }
.sdcard.editing .sd-name:focus, .sdcard.editing .sd-team:focus,
.sdcard.editing .sd-txt:focus-within { box-shadow: 0 0 0 0.45mm #000; border-radius: 0.6mm; }
.sdcard.editing .is-empty::before { content: attr(data-ph); color: rgba(0, 0, 0, 0.38); }
.sd-ph { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: rgba(0, 0, 0, 0.38); }
.sd-ph[hidden] { display: none; }
.sd-box.full .sd-txt { box-shadow: 0 0 0 0.45mm #E4003A; border-radius: 0.6mm; }
/* Under its own box: the top row's tags sit in the gap between the rows, the bottom row's in the card's bottom
   margin, so two full boxes above each other never cover each other's tag. */
.sd-fulltag {
  position: absolute;
  right: 0;
  bottom: -0.3mm;
  transform: translateY(100%);
  z-index: 3;
  background: #E4003A;
  color: #fff;
  font: 600 6.5pt/1 "Inter", Arial, sans-serif;
  padding: 0.8mm 1.5mm;
  border-radius: 0.8mm;
  white-space: nowrap;
  pointer-events: none;
}
.sd-photos.editable { cursor: pointer; }
.sd-photos.editable figure.active { outline: 0.6mm solid #E4003A; outline-offset: -0.6mm; cursor: grab; }
.sd-photos.editable figure.active:active { cursor: grabbing; }
.sd-photos .sd-addhint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 6mm;
  text-align: center;
  color: #131217;
  font: 700 calc(14 * var(--k)) / 1.2 var(--sd-font);
}