* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #e4e4e4;
  color: #000;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

.panel {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 16px 8px;
}

.panel h1 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 600;
}

label {
  display: block;
  margin: 14px 0 6px;
  font-weight: 600;
}

select,
textarea,
button {
  font: inherit;
  color: #000;
}

select,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #222;
  background: #fff;
}

/* Needed because the rules below set display on these same elements. */
[hidden] {
  display: none !important;
}

/* Three controls across, stacking only when the window is narrow. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 12px;
}

.hint {
  margin: 0 0 8px;
  font-weight: 400;
}

textarea {
  resize: vertical;
  line-height: 1.45;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

button {
  padding: 8px 16px;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.message,
.errors {
  margin: 14px 0 0;
  color: #111;
  font-size: 1rem;
  line-height: 1.4;
}

.errors {
  padding-left: 1.2rem;
}

.errors li + li {
  margin-top: 4px;
}

.cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 12px 40px;
}

.card {
  position: relative;
  width: 210mm;
  height: 297mm;
  padding: 14mm 10mm;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-family: Calibri, Carlito, "Segoe UI", Candara, Arial, sans-serif;
}

.card-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.remarks-line {
  display: flex;
  align-items: flex-end;
  gap: 2mm;
  margin: 8mm 0 0;
  font-size: 12pt;
  font-weight: 700;
}

.remarks-line .write-line {
  flex: 1;
  height: 6mm;
  border-bottom: 1px solid #000;
}

/* Positioned against the whole printable area of the card. */
.figure-slot {
  display: none;
  position: absolute;
  left: var(--shape-left, 17mm);
  top: var(--shape-top, 163mm);
  width: var(--shape-size, 13mm);
  height: calc(var(--shape-size, 13mm) * 1.25);
  z-index: 2;
  pointer-events: none;
  transform: rotate(var(--shape-rotate, 55deg));
  transform-origin: center center;
}

.card:not(.decor-none) .figure-slot {
  display: block;
}

.figure {
  display: none;
  width: 100%;
  height: 100%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.cards.fill-light { --shape-fill: #d9d9d9; --ink: #111; }
.cards.fill-gray { --shape-fill: #a3a3a3; --ink: #111; }
.cards.fill-dark { --shape-fill: #595959; --ink: #fff; }
.cards.fill-black { --shape-fill: #1a1a1a; --ink: #fff; }

.figure .ink {
  fill: none;
  stroke: #000;
}

.figure .mark {
  fill: none;
  stroke: #000;
}

.cards[class*="fill-"] .figure :is(circle, ellipse, rect, path[d$="z"], path[d$="Z"]):not(.mark):not(.feature):not(.ink) {
  fill: var(--shape-fill);
  stroke: #000;
}

.cards[class*="fill-"] .figure .ink {
  stroke: var(--ink);
}

.cards[class*="fill-"] .figure .mark {
  fill: var(--ink);
  stroke: none;
}

.cards[class*="fill-"] .figure .feature {
  fill: #fff;
  stroke: #000;
}

.cards.tone-dark .figure :is(circle, ellipse, rect, path[d$="z"], path[d$="Z"]):not(.mark):not(.feature):not(.ink) {
  stroke: #fff;
}

.shape-adjust {
  display: grid;
  grid-template-columns: 6.5rem 1fr 3.2rem;
  gap: 6px 8px;
  align-items: center;
  margin-top: 8px;
}

.shape-adjust label {
  margin: 0;
}

.shape-adjust input[type="range"] {
  width: 100%;
  padding: 0;
}

.shape-adjust output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.card.decor-doll .figure-doll,
.card.decor-robot .figure-robot,
.card.decor-princess .figure-princess,
.card.decor-astronaut .figure-astronaut,
.card.decor-explorer .figure-explorer,
.card.decor-monster .figure-monster,
.card.decor-dragon .figure-dragon,
.card.decor-rabbit .figure-rabbit,
.card.decor-bear .figure-bear,
.card.decor-panda .figure-panda,
.card.decor-lion .figure-lion,
.card.decor-tiger .figure-tiger,
.card.decor-elephant .figure-elephant,
.card.decor-butterfly .figure-butterfly,
.card.decor-ladybug .figure-ladybug,
.card.decor-bee .figure-bee,
.card.decor-flower .figure-flower,
.card.decor-rose .figure-rose,
.card.decor-sunflower .figure-sunflower,
.card.decor-rainbow .figure-rainbow,
.card.decor-car .figure-car,
.card.decor-bus .figure-bus,
.card.decor-truck .figure-truck,
.card.decor-bicycle .figure-bicycle,
.card.decor-kite .figure-kite,
.card.decor-balloon .figure-balloon,
.card.decor-pinwheel .figure-pinwheel,
.card.decor-paper-plane .figure-paper-plane,
.card.decor-toy-drum .figure-toy-drum,
.card.decor-toy-car .figure-toy-car,
.card.decor-teddy-bear .figure-teddy-bear,
.card.decor-yo-yo .figure-yo-yo,
.card.decor-puzzle-piece .figure-puzzle-piece,
.card.decor-spinning-top .figure-spinning-top,
.card.decor-music-note .figure-music-note,
.card.decor-camera .figure-camera,
.card.decor-telescope .figure-telescope,
.card.decor-magnifying-glass .figure-magnifying-glass {
  display: block;
}

.sheet-head {
  text-align: center;
}

.logo {
  display: block;
  width: 22mm;
  height: 22mm;
  margin: 0 auto 1.5mm;
  object-fit: contain;
}

.school-name {
  margin: 0;
  text-align: center;
  font-size: 16pt;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}

.doc-title {
  margin: 1.5mm 0 0;
  text-align: center;
  font-size: 13pt;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 1.5mm;
}

.identity {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  margin: 4mm 0 3mm;
  font-size: 12pt;
}

.identity p {
  margin: 0;
}

.identity span {
  font-weight: 700;
}

.student-name {
  margin: 5mm 0 3.5mm;
  text-align: left;
  font-size: 18pt;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

table.marks,
table.final {
  width: 100%;
  border-collapse: collapse;
  font-size: 11pt;
}

table.marks th,
table.marks td,
table.final th,
table.final td {
  border: 1px solid #000;
  padding: 1.9mm 1.8mm;
  vertical-align: middle;
  background: #fff;
}

table.marks th,
table.final th {
  font-weight: 700;
  text-align: center;
}

table.marks td:first-child,
table.final td:first-child {
  text-align: left;
}

.idx {
  width: 12mm;
  text-align: center;
}

.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.col-subject {
  width: auto;
}

.col-total,
.col-obtained {
  width: 24mm;
}

.col-percent,
.col-grade {
  width: 16mm;
}

.center {
  text-align: center;
}

table.attendance {
  width: auto;
  margin: 2.5mm auto 0;
  border-collapse: collapse;
  font-size: 11pt;
  font-weight: 700;
}

table.attendance td {
  border: 1px solid #000;
  padding: 1.2mm 4mm;
  background: #fff;
  text-align: center;
}

table.attendance .attend-value {
  min-width: 22mm;
  height: 8mm;
}

.final-title {
  margin: 11mm 0 2mm;
  text-align: center;
  font-size: 12pt;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 1mm;
}

table.final {
  width: 92%;
  margin: 0 auto;
}

/* Overrides the first-column-left rule the marks table needs. */
table.performance td {
  height: 12mm;
  text-align: center !important;
}

/* Landscape, and it grows with the class instead of being held to one page. */
.position-sheet {
  width: 297mm;
  height: auto;
  min-height: 210mm;
}

.sheet-meta p + p {
  margin-top: 1.5mm;
}

.sheet-counts span + span {
  margin-left: 6mm;
}

table.list {
  margin-top: 2mm;
  font-size: 9pt;
}

table.list th,
table.list td {
  padding: 1mm 0.8mm;
  text-align: center;
}

table.list th.name,
table.list td.name,
table.marks.list td:first-child {
  text-align: center;
}

table.list td.name {
  text-align: left;
  white-space: nowrap;
}

.spread {
  display: flex;
  justify-content: space-between;
  gap: 8mm;
}

.totals td {
  font-weight: 700;
}

.grade {
  margin: 3mm 0 0;
  text-align: right;
  font-size: 13pt;
}

.signatures {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  gap: 10mm;
  margin-top: 16mm;
  font-size: 11pt;
  font-weight: 700;
}

.signatures p {
  display: flex;
  align-items: flex-end;
  gap: 2mm;
  margin: 0;
}

.sig-line {
  position: relative;
  display: inline-block;
  width: 38mm;
  border-bottom: 1px solid #000;
  height: 6mm;
}

/* Sits on the line without pushing the row taller. Kept near the size it is on
   the original sheet, roughly 11mm across. */
.sig-mark {
  position: absolute;
  left: 4mm;
  bottom: 0.4mm;
  width: 14mm;
  height: auto;
}

@page {
  size: A4 portrait;
  margin: 14mm 8mm;
}

/* Both pages are named so that neither kind of sheet depends on whatever the
   browser treats as the default page. */
@page card-page {
  size: A4 portrait;
  margin: 14mm 8mm;
}

@page position-page {
  size: A4 landscape;
  margin: 10mm 12mm;
}

@media print {
  html,
  body {
    margin: 0;
    background: #fff;
  }

  .no-print {
    display: none !important;
  }

  .cards {
    display: block;
    padding: 0;
    gap: 0;
  }

  .card {
    page: card-page;
    width: auto;
    height: 269mm;
    max-height: 269mm;
    margin: 0;
    padding: 0 2mm;
    box-shadow: none;
    overflow: hidden;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .card:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .position-sheet {
    page: position-page;
    width: auto;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    break-inside: auto;
    page-break-inside: auto;
  }

  .position-sheet thead {
    display: table-header-group;
  }

  .position-sheet tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

}