:root {
  --assessment-visual-ink: var(--assessment-ink, var(--ink, #212121));
  --assessment-visual-paper: var(--assessment-paper, var(--panel, #fffcf0));
  --assessment-visual-blue: var(--assessment-blue, var(--blue, #bde7fb));
  --assessment-visual-green: var(--assessment-green, var(--green, #d1e8ca));
  --assessment-visual-yellow: var(--assessment-yellow, var(--yellow, #ffe298));
  --assessment-visual-neutral: var(--assessment-neutral, var(--neutral, #fff2df));
}

.dot-subitising-grid { display: grid; grid-template-columns: repeat(5, 28px); justify-content: center; gap: 8px; width: min(100%, 200px); margin: 0 auto; }
.dot-subitising-dot { display: block; width: 24px; height: 24px; border: 3px solid var(--assessment-visual-ink); border-radius: 50%; background: var(--assessment-visual-blue); transform: rotate(var(--dot-rotate, 0deg)); }

.number-bond-diagram { display: grid; justify-items: center; width: min(100%, 520px); margin: 0 auto; }
.number-bond-visual { display: block; width: min(100%, 460px); height: auto; overflow: visible; }
.number-bond-visual__line { fill: none; stroke: var(--assessment-visual-ink); stroke-width: 8; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.number-bond-visual__circle { stroke: var(--assessment-visual-ink); stroke-width: 7; vector-effect: non-scaling-stroke; }
.number-bond-visual__circle--whole { fill: var(--assessment-visual-yellow); }
.number-bond-visual__circle--part { fill: var(--assessment-visual-green); }
.number-bond-visual__circle--missing { fill: #fbdce9; }
.number-bond-visual__label, .number-bond-visual__number { fill: var(--assessment-visual-ink); text-anchor: middle; dominant-baseline: middle; }
.number-bond-visual__label { font-size: 18px; font-weight: 900; }
.number-bond-visual__number { font-size: 56px; font-weight: 900; }

.array-pattern-wrap { position: relative; width: max-content; max-width: 100%; margin: 0 auto; padding: 7px; overflow: auto; border: 4px solid var(--assessment-visual-ink); background: var(--assessment-visual-neutral); }
.array-pattern { --array-cell-size: clamp(24px, min(5vw, 4.25vh), 38px); --array-gap: 6px; display: grid; grid-template-columns: repeat(var(--array-columns), var(--array-cell-size)); gap: var(--array-gap); justify-content: center; }
.array-cell { display: block; aspect-ratio: 1; border: 3px solid var(--assessment-visual-ink); background: var(--assessment-visual-blue); }
.array-cell.is-covered { border-color: transparent; background: transparent; }

.place-value-houses { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; width: min(100%, 620px); margin: 0 auto; }
.place-value-house { min-width: 98px; border: 3px solid var(--assessment-visual-ink); background: var(--assessment-visual-paper); }
.place-value-house__name { padding: 7px; border-bottom: 3px solid var(--assessment-visual-ink); background: var(--assessment-visual-green); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.place-value-house__digits { padding: 11px; font-family: "Courier New", monospace; font-size: clamp(22px, 4vw, 34px); font-weight: 900; letter-spacing: .08em; text-align: center; }
.highlight-number { display: inline-block; padding: 10px 14px; border: 4px solid var(--assessment-visual-ink); background: var(--assessment-visual-paper); font-family: "Courier New", monospace; font-size: clamp(34px, 7vw, 64px); font-weight: 900; }
.highlight-number mark { padding: 0 .05em; background: var(--assessment-visual-yellow); color: inherit; }

.grid-reference { display: grid; grid-template-columns: repeat(6, minmax(34px, 52px)); grid-template-rows: repeat(5, minmax(34px, 52px)); justify-content: center; gap: 2px; margin: 0 auto; }
.grid-reference--with-labels { grid-template-columns: 30px repeat(6, minmax(34px, 52px)); grid-template-rows: repeat(5, minmax(34px, 52px)) 30px; }
.grid-reference-cell, .grid-reference-label { display: grid; place-items: center; }
.grid-reference-cell { border: 2px solid var(--assessment-visual-ink); background: #fff; }
.grid-reference-label { font-weight: 900; }
.grid-reference-cell.is-highlighted { background: var(--assessment-visual-blue); }
.grid-counter { display: block; width: 65%; aspect-ratio: 1; border: 3px solid var(--assessment-visual-ink); border-radius: 50%; background: #d64848; }

.cartesian-plane-svg, .map-grid-svg { display: block; width: min(100%, 620px); height: auto; max-height: 430px; margin: 0 auto; overflow: visible; }
.cartesian-plane-svg__panel { fill: #fff; stroke: var(--assessment-visual-ink); stroke-width: 5; vector-effect: non-scaling-stroke; }
.cartesian-plane-svg__grid-line { stroke: #b8c8d0; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cartesian-plane-svg__axis { stroke: var(--assessment-visual-ink); stroke-width: 4; }
.cartesian-point { fill: #d64848; stroke: var(--assessment-visual-ink); stroke-width: 5; vector-effect: non-scaling-stroke; }
.cartesian-plane-svg__label, .cartesian-plane-svg__axis-label { fill: var(--assessment-visual-ink); font-family: Verdana, Arial, sans-serif; font-weight: 900; text-anchor: middle; }
.cartesian-plane-svg__label--y { text-anchor: end; }
.cartesian-plane-svg__axis-label { font-size: 26px; }
.map-grid-svg__cell { fill: #e8f5f8; stroke: var(--assessment-visual-ink); stroke-width: 5; }
.map-grid-svg__cell.has-place { fill: var(--assessment-visual-green); }
.map-grid-svg__label { fill: var(--assessment-visual-ink); font-size: 19px; font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.map-grid-svg__arrow-line, .map-grid-svg__compass line { stroke: var(--assessment-visual-ink); stroke-linecap: square; vector-effect: non-scaling-stroke; }
.map-grid-svg__arrow-line { stroke-width: 7; }
.map-grid-svg__compass line { stroke-width: 4; }
.map-grid-svg__arrow { fill: var(--assessment-visual-ink); font-size: 72px; font-weight: 900; text-anchor: middle; }
.map-grid-svg__compass text { fill: var(--assessment-visual-ink); font-size: 20px; font-weight: 900; text-anchor: middle; }

.area-model { display: grid; justify-items: center; gap: 8px; width: min(100%, 520px); margin: 0 auto; }
.area-model__body { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
.area-model__width, .area-model__height { padding: 6px 8px; border: 3px solid var(--assessment-visual-ink); background: var(--assessment-visual-yellow); font-size: 17px; font-weight: 900; line-height: 1; white-space: nowrap; }
.area-model__height { writing-mode: vertical-rl; transform: rotate(180deg); }
.measurement-grid { display: grid; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto; overflow: auto; }
.measurement-grid__cell { width: 24px; height: 24px; border: 1px solid #8eb7c7; background: #dff1f7; }
.measurement-grid--area { --area-cell-size: clamp(22px, 5vw, 38px); gap: 3px; overflow: visible; border: 4px solid var(--assessment-visual-ink); background: var(--assessment-visual-ink); }
.measurement-grid--area .measurement-grid__cell { width: var(--area-cell-size); height: var(--area-cell-size); border: 0; background: var(--assessment-visual-blue); }
.measurement-grid--perimeter .measurement-grid__cell { background: #fff; }
.measurement-grid--perimeter .measurement-grid__cell.is-edge { background: var(--assessment-visual-yellow); }
.measurement-note { margin: 6px 0 0; font-size: 14px; font-weight: 900; text-align: center; }

.pattern-color { color: var(--pattern-color, currentColor); }
.pattern-color--red { --pattern-color: #d64848; }
.pattern-color--blue { --pattern-color: #1b65b9; }
.pattern-color--green { --pattern-color: #287a3e; }
.pattern-color--orange { --pattern-color: #c75d00; }
.pattern-color--purple { --pattern-color: #6841a8; }
.pattern-dot, .pattern-dot-tile { border-radius: 50%; background: currentColor; }
.pattern-dot { width: 24px; height: 24px; }
.pattern-shape { font-size: 30px; line-height: 1; }
.pattern-question { border-style: dashed !important; }

.fraction-choice-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 auto; }
.fraction-choice { min-width: 68px; padding: 9px; border: 3px solid var(--assessment-visual-ink); background: #fff; font-size: 22px; font-weight: 900; text-align: center; }
.assessment-choice-option__visual { display: grid; place-items: center; width: 100%; pointer-events: none; }
.word-problem-text { margin: 0 auto; max-width: 720px; font-size: 1.1em; font-weight: 800; line-height: 1.5; }
.time-table { width: min(100%, 680px); margin: 10px auto 0; border-collapse: collapse; background: #fff; }
.time-table th, .time-table td { padding: 9px 12px; border: 3px solid var(--assessment-visual-ink); text-align: left; }
.time-table th { background: var(--assessment-visual-blue); text-transform: uppercase; font-size: .8em; }

@media (max-width: 520px) {
  .grid-reference { grid-template-columns: repeat(6, minmax(27px, 1fr)); grid-template-rows: repeat(5, 34px); }
  .grid-reference--with-labels { grid-template-columns: 24px repeat(6, minmax(27px, 1fr)); grid-template-rows: repeat(5, 34px) 24px; }
  .place-value-house { min-width: 82px; }
  .time-table th, .time-table td { padding: 7px 5px; font-size: .78rem; }
}

@media print {
  .array-pattern-wrap, .place-value-house, .highlight-number, .grid-reference-cell,
  .area-model__width, .area-model__height, .measurement-grid--area,
  .fraction-choice, .time-table th, .time-table td { border-color: #000 !important; }
  .assessment-preview-question__visual { overflow: visible !important; }
}