/* Shared with the Færdighedsregning menus and activities. */
body { margin: 0; padding: 0; text-align: left; font-family: 'Trebuchet MS', Arial, sans-serif; }
.model-card { max-width: 1000px; margin: 0 auto 24px; text-align: center; }
.model-card canvas { display: block; width: min(100%, 600px); height: auto; margin: auto; border: 1px solid #c8e4f1; border-radius: 18px; background: #f5fbff; touch-action: none; }
.model-card .description { margin: 0 0 24px; padding: 18px; background: #e2f3fa; border: 0; border-radius: 16px; }
.model-card button { font: inherit; font-weight: bold; padding: 12px 22px; border: 2px solid white; border-radius: 16px; background: #5369d7; color: white; }
.model-card button:hover { background: #4258c4; }
.slider-container { margin: 24px auto; width: 90%; }
.slider { width: 100%; padding: 0; accent-color: #5369d7; cursor: pointer; }
.dot-grid { grid-template-columns: repeat(10, 16px); gap: 4px; }
.dot { width: 16px; height: 16px; background: #d4e4ef; }
.dot.filled { background: #5369d7; }
.double-chart { flex-wrap: wrap; gap: 24px; }
.model-card .chart { width: 150px; height: 150px; margin: 0; border: 0; background: transparent; }
#output-percentage, #output-fraction { font-weight: bold; }
#info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 600px; margin: 24px auto 0; }
#info p, #results > div { padding: 14px; margin: 0; border-radius: 14px; background: #e9edff; font-weight: bold; }
.trig-model { position: relative; max-width: 900px; margin: auto; }
.trig-model canvas { width: 100%; }
.trig-model #info { position: absolute; right: 3%; width: 25.2%; top: 25%; display: flex; flex-direction: column; gap: clamp(6px, 1vw, 12px); margin: 0; text-align: left; }
.trig-model #info p { padding: clamp(6px, 1.2vw, 14px); font-size: clamp(10px, 1.6vw, 18px); border-radius: 10px; white-space: nowrap; }
#results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 22px; line-height: 1.5; color: #214b72; }
body[data-model="negativ"] .number-line { width: calc(100% - 36px); margin: 24px auto; height: 76px; background: linear-gradient(#b5cddd, #b5cddd) center / 100% 2px no-repeat; }
.number { font: bold 22px 'Trebuchet MS', Arial, sans-serif; background: #f5fbff; }
.number.selected { border-color: #5369d7; background: #e9edff; }
.number.start { border-color: #e8b94b; }
@media (max-width: 600px) {
 .model-card { padding: 18px 12px; }
 #info, #results { grid-template-columns: 1fr; }
 .number { font-size: 15px; padding: 3px; }
 .slider-container { width: 90%; }
}