/* Equal viewport geometry is required for normalised linked geographic views. */
.tn-locality-pair .tn-panels { flex: 0 0 auto !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .tn-locality-pair .tn-stage, body.display-mode .tn-locality-pair .tn-stage { height: 260px !important; min-height: 260px !important; max-height: 260px !important; flex: none !important; }
body .tn-locality-pair .tn-stage .sv-viewport, body.display-mode .tn-locality-pair .tn-stage .sv-viewport { height: 260px !important; min-height: 260px !important; max-height: 260px !important; flex: none !important; }
.tn-locality-pair.tn-pair-unavailable .tn-stage { visibility: hidden; }
.tn-locality-pair.tn-pair-unavailable .tn-grid-wrap { display: none; }
.tn-pair-notice, .tn-pair-credit { padding: .35rem .65rem; overflow-wrap: anywhere; }
.tn-pair-credit { font-size: .85rem; margin: 0; }
@media (max-width: 640px) { .tn-locality-pair .tn-panels { grid-template-columns: 1fr; } }

/* Candidate: visible controls and compact, non-truncated mandatory credit. */
.tn-zoom-controls { display: flex; gap: .4rem; padding: .2rem 0; }
.tn-zoom-controls .btn-control { min-width: 48px; min-height: 48px; font-size: 1.6rem; font-weight: 800; }
#tnResetView { min-height: 48px; }
.tn-zoom-controls button:focus-visible, #tnResetView:focus-visible, .tn-credit-details summary:focus-visible, .tn-pair-credit a:focus-visible { outline: 3px solid #155eef; outline-offset: 3px; }
.tn-credit-visible { font-size: .78rem; line-height: 1.25; }
.tn-credit-details { font-size: .78rem; line-height: 1.3; }
.tn-credit-details summary { cursor: pointer; padding: .25rem 0; min-height: 28px; }
.tn-credit-details p { margin: .3rem 0; }
.tn-view-control:disabled { opacity: .5; cursor: not-allowed; }

/* The whole comparison scrolls; no fixed-height parent may crop table/footer. */
html.tn-scroll-root { overflow-y: auto !important; }
html.tn-scroll-root body.maths-activity.tn-activity { height: auto !important; overflow-y: visible !important; }
body.maths-activity.tn-activity .tn-container.tn-locality-pair {
    height: auto !important; max-height: none !important;
    overflow: visible !important; box-sizing: border-box;
}
body.maths-activity.tn-activity .tn-locality-pair .tn-grid-wrap {
    max-height: none !important; overflow: visible !important; flex: 0 0 auto;
}
.tn-credits-footer { flex: 0 0 auto; margin-top: .4rem; border-top: 1px solid #ccd3db; padding-top: .25rem; }
.tn-credits-footer .tn-pair-credit { padding: .2rem 0; }
.tn-credits-footer .tn-credit-visible { font-size: .75rem; line-height: 1.25; }
/* ActivityCore fullscreens documentElement, not the activity container. */
html.tn-scroll-root:fullscreen { height: 100%; overflow-y: auto !important; }
html.tn-scroll-root:-webkit-full-screen { height: 100%; overflow-y: auto !important; }
.tn-container:focus-visible { outline: 3px solid #155eef; outline-offset: -3px; }

.tn-markup-tools { display:flex;flex-wrap:wrap;gap:.4rem;flex:0 0 auto;align-items:center; }
.tn-markup-tools :focus-visible {outline:3px solid #155eef;outline-offset:2px;}
/* Prevent visible footer text and native summary/focus outline from touching. */
.tn-credits-footer .tn-credit-visible { display: block; line-height: 1.5; margin-bottom: .45rem; }
.tn-credits-footer .tn-credit-details { display: block; clear: both; line-height: 1.5; }
.tn-credits-footer .tn-credit-details summary { padding: .3rem .15rem; margin: .2rem 0; min-height: 32px; }



/* Classroom-first: only essential instructions visible; responsive usable maps. */
.tn-markup-instructions { font-size: .8rem; }
.tn-markup-instructions summary { cursor: pointer; padding: .4rem; }
.tn-markup-instructions[open] { flex: 0 0 100%; }
.tn-markup-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.tn-markup-status.tn-markup-alert { position: static; width: auto; height: auto; clip-path: none; color: #8b1020; }
body .tn-locality-pair .tn-stage, body.display-mode .tn-locality-pair .tn-stage,
body .tn-locality-pair .tn-stage .sv-viewport, body.display-mode .tn-locality-pair .tn-stage .sv-viewport {
    height: clamp(220px, 42dvh, 560px) !important; min-height: 220px !important; max-height: 560px !important;
}

/* One marking toolbar, using the original Map Explorer styles. */
.tn-locality-pair .tn-zoom-controls, .tn-locality-pair .activity-header .controls-container { display:none !important; }
.tn-markup-tools {gap:.3rem;}

/* Mixed-cache compatibility: retain legacy helper classes; no legacy engine code. */
/* Evidence belongs to the image world, not the viewport/letterbox. */
.tn-mark-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.tn-mark-shape { fill: none; stroke: #c51b30; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
.tn-mark-shape.tn-mark-preview { stroke-dasharray: 4 3; opacity: .65; }
.sv-viewport.tn-mark-mode { touch-action: none; cursor: crosshair; }
.tn-markup-tools { display: flex; gap: .4rem; flex-wrap: wrap; flex: 0 0 auto; align-items: center; }
.tn-markup-tools button, .tn-markup-tools select { min-height: 44px; padding: .35rem .65rem; }
.tn-markup-tools button[aria-pressed="true"] { background: #dceaff; outline: 2px solid #155eef; }
.tn-markup-help, .tn-markup-status { flex: 0 0 100%; font-size: .8rem; line-height: 1.4; margin: 0; }
.tn-markup-tools :focus-visible, .sv-viewport.tn-mark-mode:focus-visible { outline: 3px solid #155eef; outline-offset: 2px; }
/* Existing Map Explorer's compact radio-button convention, local styles only. */
.tn-locality-pair .tn-zoom-controls, .tn-locality-pair .activity-header .controls-container { display: none !important; }
.tn-mark-toolset { display: flex; flex-wrap: wrap; flex: 0 0 auto; align-items: center; gap: .3rem; }
.tn-markup-tools { gap: .3rem; }
.tn-markup-tools .btn-control { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .25rem .65rem; border: 2px solid var(--maths-border, #ccd3db); border-radius: 10px; background: #fff; color: var(--see-ink, #123); font-size: .92rem; font-weight: 800; line-height: 1.1; touch-action: manipulation; }
.tn-mark-toolset button[aria-checked="true"] { background: var(--see-accent, #155eef); border-color: var(--see-accent, #155eef); color: white; }
.tn-mark-area { fill: rgba(197,27,48,.18); }

.tn-mark-first { fill: #fff; stroke: #c51b30; stroke-width: 3px; vector-effect: non-scaling-stroke; }