/* 2026-10-19. Narrowly scoped approved phone-map fixes.
 * This stylesheet loads LAST so old bundled CSS cannot restore the illustrated
 * birds/octopus sea or oversized southeast-Cornwall key.
 * Never change the SVG coastline, pins, event positions or other page designs. */
@media (orientation:landscape) {
  body.mobile-shell-active .mobile-shell-page.mobile-map-page {
    background-color:#174e61!important;
    background-image:url('/pipeline-nautical-background-clean.png?v=20261019-clean-art2')!important;
    background-position:center center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
  }

  /* No max-width media condition: the landscape phone shell can have a wide
     CSS viewport on Samsung Internet and desktop-mode mobile browsers. */
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key {
    box-sizing:border-box!important;
    width:33vw!important;
    max-width:33vw!important;
    right:max(4px,env(safe-area-inset-right))!important;
    bottom:max(6px,env(safe-area-inset-bottom))!important;
    padding:4px!important;
    gap:3px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,27px)!important;
    grid-auto-rows:27px!important;
    align-items:stretch!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key > button,
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key .pipeline-date-cell {
    box-sizing:border-box!important;
    height:27px!important;
    min-height:27px!important;
    max-height:27px!important;
    min-width:0!important;
    padding:2px 1px!important;
    font-size:clamp(7px,.6vw,8px)!important;
    line-height:1.1!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key .pipeline-date-cell > button {
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    outline:0!important;
    background:transparent!important;
    height:100%!important;
    min-height:0!important;
    padding:0!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key .pipeline-date-cell > button > span {
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    font-size:clamp(7px,.6vw,8px)!important;
  }
}

/* 4 Nov: make the Cornwall map more prominent on extra-wide phone screens.
 * The coast, town labels and event pins all live in one SVG, so the small
 * scale/shift below keeps their geometry aligned. Map controls stay fixed. */
@media (orientation:landscape) {
  body.mobile-shell-active .mobile-map-page .map-canvas svg {
    transform:translate(-32px, 9px) rotate(-1.95deg) scaleX(1.14)!important;
    transform-origin:center center!important;
  }
}


/* 4 Nov 2026 — landscape brand and map composition.
 * The header's real rendered width is measured by pipeline-shell-identity.js.
 * Use it for both the genre panel and adjacent search, rather than fragile
 * viewport fractions that give the logo and key different right edges. */
@media (orientation:landscape) {
  body.mobile-shell-active .mobile-map-page .pipeline-genre-key {
    box-sizing:border-box!important;
    width:var(--pipeline-brand-width,min(450px,35vw))!important;
    max-width:calc(100vw - 30px)!important;
    /* Keep the genre key under the logo, including shallow Android screens. */
    top:max(clamp(75px,18vh,145px),calc(var(--pipeline-brand-bottom,112px) + 13px))!important;
  }

  /* Dark, cut-corner search tab sits immediately beside the Pipeline title.
     It expands rightwards on selection, never towards/over the logo. */
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search {
    box-sizing:border-box!important;
    position:absolute!important;
    top:var(--pipeline-brand-top,14px)!important;
    left:var(--pipeline-search-left,calc(38vw + 24px))!important;
    right:auto!important;
    width:clamp(48px,4.3vw,66px)!important;
    max-width:calc(100vw - var(--pipeline-search-left,38vw) - 14px)!important;
    height:var(--pipeline-brand-height,83px)!important;
    min-height:45px!important;
    padding:6px!important;
    z-index:98!important;
    background:linear-gradient(120deg,rgba(10,32,53,.97),rgba(22,56,74,.93))!important;
    border-left:5px solid #dda95f!important;
    border-top:1px solid rgba(249,239,215,.27)!important;
    box-shadow:0 5px 19px rgba(4,19,34,.22)!important;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)!important;
    transition:width .2s ease!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search form {
    position:relative!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search input {
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:0!important;
    background-color:transparent!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%23fff2d5' stroke-width='2.4'/%3E%3Cpath d='m15 15 6 6' stroke='%23fff2d5' stroke-width='2.4' fill='none'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:29px!important;
    color:transparent!important;
    font-size:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    outline-offset:4px!important;
    cursor:pointer!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search input::placeholder {
    color:transparent!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.is-keyboard-open,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.has-query {
    width:min(330px,calc(100vw - var(--pipeline-search-left,38vw) - 14px))!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.is-keyboard-open input,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.has-query input {
    padding:0 39px 0 41px!important;
    background-color:#fff6df!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%2312374b' stroke-width='2.4'/%3E%3Cpath d='m15 15 6 6' stroke='%2312374b' stroke-width='2.4' fill='none'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-size:19px!important;
    background-position:12px center!important;
    color:#12374b!important;
    font:700 13px/1.2 Arial,system-ui,sans-serif!important;
    border:1px solid #c7ad7d!important;
    border-radius:3px!important;
    text-align:left!important;
    cursor:text!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.is-keyboard-open input::placeholder,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.has-query input::placeholder {
    color:#62716b!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search-clear {
    position:absolute!important;
    right:6px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:29px!important;
    height:29px!important;
    min-height:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    color:#173f4c!important;
    background:#eee5d1!important;
    border:1px solid #c7ad7d!important;
    border-radius:50%!important;
    font:700 20px/1 Arial,system-ui,sans-serif!important;
    z-index:2!important;
    cursor:pointer!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search-clear[hidden] {
    display:none!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search input::-webkit-search-cancel-button {
    display:none!important;
  }

  /* Make the bottom control tray a little narrower and less edge-hugging,
     keeping all ten buttons and their normal touch behaviour. */
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key {
    box-sizing:border-box!important;
    width:30vw!important;
    max-width:30vw!important;
    right:max(22px,env(safe-area-inset-right))!important;
    bottom:max(13px,env(safe-area-inset-bottom))!important;
  }
}
/* Small landscape devices still need comfortably sized touch targets. */
@media (max-width:680px) and (orientation:landscape) {
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search {
    padding:4px!important;
    border-left-width:3px!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.is-keyboard-open,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.has-query {
    width:min(245px,calc(100vw - var(--pipeline-search-left,38vw) - 10px))!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key {
    width:32vw!important;
    max-width:32vw!important;
    right:max(12px,env(safe-area-inset-right))!important;
  }
}
/* 2026-11-04: restrained panel integration (landscape only).
 * Keep SVG geometry, marker placement, colours, fonts and filter behaviour intact.
 * Small shared chamfers visually connect existing cream panels with the title tab. */
@media (orientation:landscape) {
  /* Draw the genre key slightly nearer the title while retaining the measured
     right edge and its safe-area-aware, responsive vertical fallback. */
  body.mobile-shell-active .mobile-map-page .pipeline-genre-key {
    top:max(clamp(75px,18vh,145px),calc(var(--pipeline-brand-bottom,112px) + 7px))!important;
    clip-path:polygon(0 7px,7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px))!important;
  }


  /* Same tiny chamfer as the genre panel; gently lift/inset the controls,
     without changing any of the ten filter buttons or their touch areas. */
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key {
    right:max(27px,env(safe-area-inset-right))!important;
    bottom:max(23px,env(safe-area-inset-bottom))!important;
    clip-path:polygon(0 7px,7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px))!important;
  }
}
@media (max-width:680px) and (orientation:landscape) {
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key {
    right:max(17px,env(safe-area-inset-right))!important;
    bottom:max(17px,env(safe-area-inset-bottom))!important;
  }
}

/* 4 Nov follow-up: search is a visibly labelled field in the top-right,
 * visually separate from the PIPELINE.GUIDE masthead. This is presentation
 * only; the existing one-input custom keyboard, submit and clear work as-is. */
@media (orientation:landscape) {
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search {
    left:auto!important;
    right:max(18px,env(safe-area-inset-right))!important;
    top:max(14px,env(safe-area-inset-top))!important;
    width:clamp(165px,23vw,260px)!important;
    max-width:calc(100vw - var(--pipeline-brand-width,52vw) - 30px)!important;
    height:clamp(41px,7vh,50px)!important;
    min-height:41px!important;
    padding:4px!important;
    border-left-width:3px!important;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)!important;
    transition:width .2s ease!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.is-keyboard-open,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.has-query {
    width:min(340px,35vw)!important;
    max-width:calc(100vw - var(--pipeline-brand-width,52vw) - 30px)!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search input {
    padding:0 10px 0 37px!important;
    background-color:#fff6df!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%2312374b' stroke-width='2.4'/%3E%3Cpath d='m15 15 6 6' stroke='%2312374b' stroke-width='2.4' fill='none'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-size:19px!important;
    background-position:10px center!important;
    border:1px solid #c7ad7d!important;
    border-radius:4px!important;
    color:#12374b!important;
    font:650 12px/1.2 Arial,system-ui,sans-serif!important;
    cursor:text!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search input::placeholder {
    color:#556a70!important;
    opacity:1!important;
  }
  /* Keep the public event submission link reachable beneath the search field,
     rather than under its hit target on shallow Android landscape screens. */
  body.mobile-shell-active .mobile-map-page .mobile-map-submit {
    top:max(79px,calc(env(safe-area-inset-top) + 79px))!important;
    right:max(18px,env(safe-area-inset-right))!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.is-keyboard-open input,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.has-query input {
    padding-right:39px!important;
    border-radius:4px!important;
  }
}
@media (max-width:680px) and (orientation:landscape) {
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search {
    right:max(10px,env(safe-area-inset-right))!important;
    width:clamp(146px,29vw,196px)!important;
    max-width:calc(100vw - var(--pipeline-brand-width,52vw) - 20px)!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.is-keyboard-open,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.has-query {
    width:min(260px,42vw)!important;
    max-width:calc(100vw - var(--pipeline-brand-width,52vw) - 20px)!important;
  }
}

/* 4 Nov: six columns and two rows, preserving the map and pin geometry.
 * The existing search field is opened above the compact landscape keyboard. */
@media (orientation:landscape) {
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key {
    width:35vw!important;
    max-width:35vw!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,27px)!important;
    grid-auto-rows:27px!important;
  }
  /* The word HIGHLIGHTS now breaks explicitly HIGH / LIGHTS. */
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key [data-pipeline-filter="highlightsOnly"] span,
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key [data-pipeline-filter="freeEventsToggle"] span {
    line-height:1.02!important;
    white-space:normal!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key [data-pipeline-filter="search"] i {
    display:none!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key [data-pipeline-filter="search"].active {
    background:#174553!important;
    color:#fff6df!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key [data-pipeline-filter="search"] span {
    margin:auto!important;
    text-align:center!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search {
    display:none!important;
    position:absolute!important;
    left:auto!important;
    right:max(27px,env(safe-area-inset-right))!important;
    top:auto!important;
    bottom:max(110px,calc(env(safe-area-inset-bottom) + 110px))!important;
    width:min(340px,35vw)!important;
    max-width:calc(100vw - 54px)!important;
    height:44px!important;
    min-height:44px!important;
    z-index:970!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.panel-search-open:not([hidden]) {
    display:block!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.panel-search-open.is-keyboard-open {
    bottom:max(205px,calc(env(safe-area-inset-bottom) + 205px))!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.panel-search-open.is-keyboard-open,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.panel-search-open.has-query {
    width:min(340px,35vw)!important;
    max-width:calc(100vw - 54px)!important;
  }
  /* Public submit link is no longer displaced by a permanent top-right search. */
  body.mobile-shell-active .mobile-map-page .mobile-map-submit {
    top:max(45px,calc(env(safe-area-inset-top) + 45px))!important;
    right:max(8px,env(safe-area-inset-right))!important;
  }
}
@media (max-width:680px) and (orientation:landscape) {
  body.mobile-shell-active .mobile-map-page .pipeline-filter-key {
    width:39vw!important;
    max-width:39vw!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.panel-search-open.is-keyboard-open,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.panel-search-open.has-query {
    right:max(17px,env(safe-area-inset-right))!important;
    width:min(320px,50vw)!important;
    max-width:calc(100vw - 34px)!important;
  }
}

/* Landscape search extension: the Search filter opens a tab joined to the
 * title banner instead of a floating box over Cornwall. The keyboard remains
 * the existing one-input map search keyboard. */
@media (orientation:landscape) {
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.panel-search-open.is-keyboard-open,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.panel-search-open.has-query {
    left:var(--pipeline-search-left,35vw)!important;
    right:auto!important;
    top:var(--pipeline-brand-top,14px)!important;
    bottom:auto!important;
    width:min(370px,calc(100vw - var(--pipeline-search-left,35vw) - 14px))!important;
    max-width:calc(100vw - var(--pipeline-search-left,35vw) - 14px)!important;
    height:var(--pipeline-brand-height,82px)!important;
    min-height:55px!important;
    box-sizing:border-box!important;
    padding:8px 12px!important;
    background:#183d4b!important;
    border:0!important;
    border-left:4px solid #e8b36a!important;
    border-radius:0 12px 12px 0!important;
    box-shadow:5px 6px 0 rgba(0,0,0,.12)!important;
    transition:opacity .16s ease,transform .2s ease!important;
    transform-origin:left center;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search form {
    width:100%!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    position:relative!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search input,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.is-keyboard-open input,
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search.has-query input {
    width:100%!important;
    height:100%!important;
    min-height:38px!important;
    padding:0 40px 0 18px!important;
    background:#fff6df!important;
    color:#183d4b!important;
    font:600 clamp(13px,1.6vw,18px)/1.2 system-ui,sans-serif!important;
    border:2px solid #d5c5a1!important;
    border-radius:8px!important;
    text-align:left!important;
    letter-spacing:normal!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search input::placeholder {
    color:#667b7a!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-mobile-search-clear {
    right:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }
  body.mobile-shell-active .mobile-map-page .pipeline-compact-keyboard [data-key="backspace"] {
    flex:1.25;
    background:#e8d6b8;
    font-size:clamp(16px,3vw,25px);
  }
}