/* Touch targets
   On touch screens only, small controls get an invisible touch area of
   about 44 x 44px around them. Nothing here is visible: the area is an
   empty pseudo-element, so typography, spacing and position stay exactly
   as designed. Desktop (mouse) is untouched.
   By default the area reaches out evenly on every side until it is 44px
   across. touch-targets.js then trims each side to half the gap to the
   nearest neighbouring control, so two areas never overlap and no area
   ever covers another control. */

@media (hover: none) and (pointer: coarse) {

    .lang-btn,
    .nav-nameplate,
    .nameplate,
    .room-exit,
    .room-exits a,
    .archive-back,
    .archive-intervene,
    .fc-back,
    .fc-eyebrow a,
    .ed-cta,
    .ed-end-primary a,
    .works-connect a,
    .floorplan a,
    .field-toggle,
    .inspect-cue,
    .plaque-deeper-link,
    .mindmap-step-back,
    .filmstrip-arrow,
    .filmstrip-jump,
    .lightbox-close,
    .lost-nav a,
    .portfolio-nav a,
    .workplan-nav a,
    .section-download,
    dd > a:only-child,
    .export-controls button {
        --tt: 1;   /* marks a touch target for touch-targets.js */
    }

    /* Controls in the normal flow need a positioning context; fixed and
       absolute ones (nameplates, step back, close) already have one */
    .lang-btn,
    .room-exit,
    .room-exits a,
    .archive-back,
    .archive-intervene,
    .fc-back,
    .fc-eyebrow a,
    .ed-cta,
    .ed-end-primary a,
    .works-connect a,
    .floorplan a,
    .field-toggle,
    .inspect-cue,
    .plaque-deeper-link,
    .filmstrip-arrow,
    .filmstrip-jump,
    .lost-nav a,
    .portfolio-nav a,
    .workplan-nav a,
    .section-download,
    dd > a:only-child,
    .export-controls button {
        position: relative;
    }

    .lang-btn::after,
    .nav-nameplate::after,
    .nameplate::after,
    .room-exit::after,
    .room-exits a::after,
    .archive-back::after,
    .archive-intervene::after,
    .fc-back::after,
    .fc-eyebrow a::after,
    .ed-cta::after,
    .ed-end-primary a::after,
    .works-connect a::after,
    .floorplan a::after,
    .field-toggle::after,
    .inspect-cue::after,
    .plaque-deeper-link::after,
    .mindmap-step-back::after,
    .filmstrip-arrow::after,
    .filmstrip-jump::after,
    .lightbox-close::after,
    .lost-nav a::after,
    .portfolio-nav a::after,
    .workplan-nav a::after,
    .section-download::after,
    dd > a:only-child::after,
    .export-controls button::after {
        content: '';
        position: absolute;
        /* reach out to 44px across, or as far as the script allows */
        top:    var(--tt-top,    min(0px, calc(50% - 22px)));
        bottom: var(--tt-bottom, min(0px, calc(50% - 22px)));
        left:   var(--tt-left,   min(0px, calc(50% - 22px)));
        right:  var(--tt-right,  min(0px, calc(50% - 22px)));
        background: none;
    }

    /* A link wrapped onto two lines (touch-targets.js marks it) keeps
       its own text as its touch area */
    [data-tt-wrapped]::after { display: none; }

    /* Works: the bracketed links already use both pseudo-elements for
       their [ ] marks, so they grow with padding that a matching
       negative margin cancels out */
    .work-link {
        padding-block: 12px;
        margin-block: calc(2rem - 12px) -12px;
    }
}