:root {
    --post-green: #27734a;
    --post-soft: #eef8f0;
}

.back-link {
    display: inline-block;
    margin-bottom: 10px;
    color: #245b3d;
    font-weight: 700;
    text-decoration: none;
}

.post-toolbar label {
    flex-basis: 100%;
}

#answerSheetBtn {
    background: #7c3aed;
}

#answerSheetBtn:hover,
#answerSheetBtn.is-active {
    background: #5b21b6;
}

.post-page {
    grid-template-rows: auto 1fr 1fr;
    gap: 4mm;
    padding: 8mm;
}

.post-page-title {
    margin: 0;
    padding: 2mm 4mm 1mm;
    text-align: center;
    font-size: 25pt;
    line-height: 1.05;
    color: #173d2a;
}

.post-card {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border: 2.5px solid #1f5137;
    border-radius: 7mm;
    background:
        radial-gradient(circle at 8% 12%, rgba(91, 160, 105, 0.16) 0 8mm, transparent 8.3mm),
        radial-gradient(circle at 92% 88%, rgba(236, 179, 71, 0.16) 0 10mm, transparent 10.3mm),
        linear-gradient(145deg, #fff, var(--post-soft));
    display: grid;
    grid-template-rows: auto auto 1fr;
    padding: 5mm;
}

.post-card::after {
    content: "✦  △  ○";
    position: absolute;
    right: 5mm;
    top: 4mm;
    color: #d0942c;
    font-size: 16pt;
    letter-spacing: 2mm;
}

.post-number {
    margin: 0;
    text-align: center;
    font-size: 20pt;
    line-height: 1;
    color: #17472f;
    letter-spacing: 0.06em;
}

.post-task-title {
    margin: 2mm 12mm 0;
    text-align: center;
    color: #2f6f4e;
    font-size: 14pt;
    line-height: 1.2;
    font-weight: 700;
}

.post-task {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4mm 7mm 2mm;
    overflow: hidden;
    font-size: 20pt;
    line-height: 1.35;
}

.post-task .weekset-embed-html,
.post-task .weekset-embed-stack,
.post-task .dm-weekset-task {
    width: 100%;
    max-height: 100%;
}

.post-task .dm-weekset-task {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 auto !important;
    font-size: 20pt !important;
    line-height: 1.35 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    place-items: center !important;
    column-gap: 0 !important;
}

.post-task .head,
.post-task .expr,
.post-task .dm-generated-expr,
.post-task .problem-top,
.post-task .figure,
.post-task .functions-board,
.post-task .canvas-wrap {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.post-task .expr,
.post-task .dm-generated-expr {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.post-task .workspace,
.post-task .dm-generated-workspace,
.post-task .calc-panel,
.post-task .solve,
.post-task .lines,
.post-task textarea,
.post-task input {
    display: none !important;
}

.post-task .expr,
.post-task .dm-generated-expr,
.post-task p,
.post-task li,
.post-task .dm-problem-title {
    font-size: 20pt !important;
    line-height: 1.35 !important;
}

.post-task .fraction,
.post-task .frac {
    font-size: 19pt !important;
}

.post-task .fraction .numerator,
.post-task .fraction .denominator,
.post-task .frac .top,
.post-task .frac .bottom {
    font-size: 19pt !important;
}

.post-card[data-label-key*="r-kkef-lge"] .number-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-top: 5mm !important;
    white-space: nowrap !important;
}

.post-card[data-label-key*="r-kkef-lge"] .separator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0.7em !important;
    color: #6b7f91 !important;
    font-size: 30pt !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: translateY(-0.08em);
}

.post-card[data-label-key="forkort-br-ker"] .fraction .numerator {
    min-width: 1.25em;
    padding: 0 0.12em 0.08em;
    border-bottom: 2.5px solid currentColor !important;
}

.post-card[data-label-key="forkort-br-ker"] .fraction .denominator {
    min-width: 1.25em;
    padding-top: 0.08em;
}

/* Trekantopgaverne mister kildesidens absolutte placering, når de indlejres.
   Giv Trigonometri og Pythagoras et fælles, stabilt halvside-layout. */
.post-task .problem-top:has(.triangle) {
    position: relative !important;
    width: min(100%, 158mm) !important;
    min-height: 48mm !important;
    margin: 0 auto !important;
    padding: 3mm 8mm !important;
    display: grid !important;
    grid-template-columns: minmax(45mm, 1fr) 48mm !important;
    grid-template-rows: 1fr auto !important;
    align-items: center !important;
    gap: 3mm 8mm !important;
    text-align: center !important;
    font-size: 21pt !important;
    line-height: 1.35 !important;
}

.post-task .dm-triangle-values {
    display: grid;
    gap: 2mm;
    align-content: center;
    font-size: 21pt !important;
}

.post-task .dm-triangle-figure {
    display: grid;
    place-items: center;
}

.post-task .problem-top:has(.triangle) .triangle {
    position: static !important;
    width: 43mm !important;
    max-width: 43mm !important;
    height: 43mm !important;
    transform: none !important;
    overflow: visible !important;
}

.post-task .dm-triangle-question {
    grid-column: 1 / -1;
    font-size: 21pt !important;
    font-weight: 700;
    white-space: nowrap;
}

.post-task .problem-top:has(.triangle) .triangle-label {
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Flytning, spejling og drejning: vis hele det kvadratiske koordinatsystem
   i stedet for at lade det følge postens fulde bredde og blive beskåret. */
.post-card[data-label-key*="flytning-spejling-og-drejning"] .dm-generated-expr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 4mm !important;
    width: 100% !important;
    height: auto !important;
}

.post-card[data-label-key*="flytning-spejling-og-drejning"] .dm-generated-expr > div:first-child {
    text-align: center !important;
}

.post-card[data-label-key*="flytning-spejling-og-drejning"] .dm-generated-expr h2 {
    margin: 0 0 2mm !important;
    font-size: 19pt !important;
}

.post-card[data-label-key*="flytning-spejling-og-drejning"] .dm-generated-expr .instr {
    margin: 0 !important;
    font-size: 16pt !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.post-card[data-label-key*="flytning-spejling-og-drejning"] .canvas-wrap,
.post-card[data-label-key*="flytning-spejling-og-drejning"] .dm-weekset-graphic-stack {
    width: 52mm !important;
    height: 52mm !important;
    max-width: 52mm !important;
    max-height: 52mm !important;
    overflow: hidden !important;
}

.post-card[data-label-key*="flytning-spejling-og-drejning"] .canvas-wrap img {
    width: 52mm !important;
    height: 52mm !important;
    max-width: 52mm !important;
    max-height: 52mm !important;
    object-fit: contain !important;
}

/* Kombinatorikopgaverne kan indeholde lange lister og flere delspørgsmål.
   Vis korte valglister på tværs og brug en kompakt, stadig læsbar typografi. */
.post-card[data-label-key="kombinatorik"] .dm-weekset-task {
    align-content: center !important;
    overflow: hidden !important;
}

.post-card[data-label-key="kombinatorik"] .dm-weekset-task h2 {
    margin: 0 0 2mm !important;
    font-size: 17pt !important;
    text-align: center !important;
}

.post-card[data-label-key="kombinatorik"] .dm-weekset-task p,
.post-card[data-label-key="kombinatorik"] .dm-weekset-task li,
.post-card[data-label-key="kombinatorik"] .dm-weekset-task .text {
    font-size: 13.5pt !important;
    line-height: 1.22 !important;
}

.post-card[data-label-key="kombinatorik"] .dm-weekset-task p {
    margin: 1mm 0 !important;
    text-align: center !important;
}

.post-card[data-label-key="kombinatorik"] .dm-weekset-task ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1mm 5mm !important;
    margin: 2mm auto !important;
    padding: 0 !important;
    list-style: none !important;
}

.post-card[data-label-key="kombinatorik"] .dm-weekset-task ul li {
    margin: 0 !important;
    white-space: nowrap;
}

.post-card[data-label-key="kombinatorik"] .dm-weekset-task ol {
    margin: 2mm 3mm 0 8mm !important;
    padding-left: 5mm !important;
    text-align: left !important;
}

.post-card[data-label-key="kombinatorik"] .dm-weekset-task ol li {
    margin-bottom: 1.5mm !important;
}

/* Koordinatsystemer skal vises som hele kvadrater med origo i midten.
   Flytning/spejling/drejning har sit eget velfungerende layout ovenfor. */
.post-card[data-label-key*="plac-r-punkter-i-koordinatsystemet"] .coordinate-board,
.post-card[data-label-key*="blandede-opgaver-i-funktioner"] .functions-board {
    display: grid !important;
    place-items: center !important;
    width: 61mm !important;
    min-width: 61mm !important;
    max-width: 61mm !important;
    height: 61mm !important;
    min-height: 61mm !important;
    max-height: 61mm !important;
    margin: 2mm auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
}

.post-card[data-label-key*="plac-r-punkter-i-koordinatsystemet"] .coordinate-system,
.post-card[data-label-key*="blandede-opgaver-i-funktioner"] .coord-svg,
.post-card[data-label-key*="blandede-opgaver-i-funktioner"] .functions-board > svg {
    display: block !important;
    width: 61mm !important;
    height: 61mm !important;
    max-width: 61mm !important;
    max-height: 61mm !important;
    object-fit: contain !important;
}

.post-card[data-label-key*="plac-r-punkter-i-koordinatsystemet"] .expr,
.post-card[data-label-key*="plac-r-punkter-i-koordinatsystemet"] .dm-generated-expr,
.post-card[data-label-key*="plac-r-punkter-i-koordinatsystemet"] .task-heading,
.post-card[data-label-key*="plac-r-punkter-i-koordinatsystemet"] .task-heading span {
    font-size: 15pt !important;
    line-height: 1.2 !important;
}

.post-card[data-label-key*="blandede-opgaver-i-funktioner"] .functions-card {
    display: grid !important;
    grid-template-rows: auto 61mm !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 3mm !important;
    width: 100% !important;
    height: auto !important;
}

.post-task .dm-weekset-answer {
    display: none !important;
}

.post-empty {
    color: #64748b;
    font-size: 15pt;
}

.answer-page {
    position: relative;
    display: block;
    padding: 13mm 15mm;
}

.answer-page h2 {
    margin: 0;
    text-align: center;
    font-size: 25pt;
    color: #173d2a;
}

.solution-page {
    display: block;
    padding: 13mm 15mm;
}

.solution-page > h2 {
    margin: 0;
    text-align: center;
    font-size: 25pt;
    color: #6b2f20;
}

.solution-page > h3 {
    margin: 3mm 0 8mm;
    text-align: center;
    font-size: 16pt;
}

.solution-list {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 7mm;
    height: 235mm;
}

.solution-entry {
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto 1fr;
    justify-items: center;
    align-items: center;
    padding: 4mm 6mm;
    border: 1.5px solid #c8aaa2;
    border-radius: 5mm;
    background: #fffaf8;
}

.solution-entry h4 {
    margin: 0;
    font-size: 17pt;
    color: #6b2f20;
}

.solution-task-name {
    margin: 1mm 0 2mm;
    font-size: 13pt;
    font-weight: 700;
}

.solution-content {
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18pt;
    font-weight: 700;
    overflow: hidden;
}

.solution-graphic {
    display: block !important;
    width: 66mm !important;
    height: 66mm !important;
    max-width: 66mm !important;
    max-height: 66mm !important;
    object-fit: contain;
}

.answer-page h3 {
    margin: 3mm 0 10mm;
    text-align: center;
    font-size: 16pt;
    font-weight: 600;
}

.answer-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 7mm;
    margin-top: 8mm;
    height: 225mm;
}

.answer-entry {
    display: flex;
    align-items: flex-start;
    padding: 5mm;
    border: 1.5px solid #b8c8bf;
    border-radius: 5mm;
    background: #fbfdfb;
}

.answer-entry > .answer-line {
    width: 100%;
}

.answer-entry-coordinate {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    gap: 3mm 7mm;
    padding: 3mm 7mm;
}

.answer-entry-coordinate h4 {
    margin: 0;
    font-size: 16pt;
    color: #17472f;
}

.answer-coordinate-system {
    grid-column: 2;
    display: block;
    width: 82mm;
    height: 82mm;
    max-width: 100%;
}

.answer-line-coordinate {
    grid-column: 1 / -1;
    width: 100%;
}

.answer-line {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 3mm;
    font-size: 14pt;
    font-weight: 700;
}

.answer-blank {
    height: 8mm;
    border-bottom: 1.5px solid #111827;
}

.student-name {
    position: absolute;
    left: 15mm;
    right: 15mm;
    bottom: 10mm;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 4mm;
    font-size: 14pt;
    font-weight: 700;
}

.compact-answer-list,
.compact-solution-list {
    display: grid;
    gap: 5mm;
    margin-top: 12mm;
}

.compact-answer-line,
.compact-solution-line {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 4mm;
    min-height: 9mm;
    font-size: 14pt;
    line-height: 1.25;
}

.compact-solution-line {
    padding-bottom: 2mm;
    border-bottom: 1px solid #d8c3bd;
}

.coordinate-reference {
    font-style: italic;
    font-weight: 600;
    color: #315e48;
}

.coordinate-page {
    display: block;
    padding: 9mm 11mm;
}

.coordinate-page > h2 {
    margin: 0;
    text-align: center;
    font-size: 21pt;
    color: #173d2a;
}

.teacher-coordinate-page > h2 {
    color: #6b2f20;
}

.coordinate-page > h3 {
    margin: 1.5mm 0 4mm;
    text-align: center;
    font-size: 13pt;
}

.coordinate-grid-6 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 4mm 6mm;
    height: 258mm;
}

.coordinate-cell {
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    padding: 1.5mm 2mm;
    border: 1px solid #aebfb5;
    border-radius: 3mm;
    background: #fff;
}

.coordinate-cell h4 {
    margin: 0 0 1mm;
    justify-self: stretch;
    text-align: center;
    font-size: 11pt;
}

.coordinate-cell .answer-coordinate-system,
.coordinate-cell > svg,
.coordinate-cell .coordinate-system,
.coordinate-solution-image {
    display: block !important;
    width: 68mm !important;
    height: 68mm !important;
    max-width: 100% !important;
    max-height: 68mm !important;
    object-fit: contain !important;
}

.coordinate-cell .answer-points {
    display: inline !important;
}

@media print {
    .post-page-title {
        font-size: 25pt !important;
    }

    .post-number {
        font-size: 20pt !important;
    }
}