/* SPI's task-first layer uses the existing coastal palette and native layout. */
.spi-easy-shell { --spi-ink: #073b4c; --spi-sea: #087b83; --spi-paper: #fffdf7; }
.spi-easy-shell .liq-top-bar { display: none !important; }
.spi-easy-shell .spi-trip-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.spi-easy-shell .spi-trip-fields label:first-child { grid-column: 1 / -1; }
.spi-easy-shell .spi-optional-tool > .spi-trip-fields { padding: 0 1rem 1rem; }
.spi-easy-shell .luperiq-ts-layout--header { padding-bottom: .8rem !important; min-height: 0 !important; }
.spi-easy-shell .luperiq-ts-layout--header > .luperiq-ts-layout-row:has(.luperiq-ts-block--rotating-text),
.spi-easy-shell .luperiq-ts-layout--header > .luperiq-ts-layout-row:has(.luperiq-ts-block--mega-nav) { display: none !important; }
.spi-easy-shell .luperiq-ts-layout--header > .luperiq-ts-layout-row:first-child { padding-block: .65rem !important; }
.spi-easy-shell .luperiq-ts-layout--header > .luperiq-ts-layout-row:first-child > .luperiq-ts-layout-col:last-child { display: none !important; }
/* The server-rendered task nav is the no-JavaScript fallback now. */
.spi-easy-shell .luperiq-ts-no-js-header-nav { display: none !important; }
.spi-easy-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; width: calc(100% - 1rem); box-sizing: border-box; max-width: 62rem; margin: 0 auto; padding: .3rem .75rem; }
/* R84a fix: the resting link colour follows the HEADER's own text token.
   Until R84a the row sat on its own ink band (`--spi-ink`), so `#fff` was
   right; inside the floating header it sits on the header's ground, which on
   SouthPadreInfo.com is light (`--luperiq-header-bg: #f8fbff`), and white on
   that is invisible. Every other state in this row was already dark-on-pale
   (hover/current `#073b4c` on `#d9f6ef`, My Trip on `#fde68a`, the newsletter
   pill on `#d9f6ef`), so this is the one line that assumed a dark ground.
   The token, not a literal, so the row tracks Theme Studio if the header
   ground ever changes. */
.spi-easy-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem .9rem; border-radius: 999px; color: var(--luperiq-header-text, #073b4c) !important; text-decoration: none; font-weight: 750; font-size: 1rem; }
.spi-easy-nav a:hover,.spi-easy-nav a[aria-current] { color: #073b4c !important; background: #d9f6ef; }
.spi-easy-nav a[href="/trip-ideas/my-trip/"] { color: #073b4c !important; background: #fde68a; }
/* R90 (Dave): unselected task links were ink-on-dark on the hero header at
   desktop width too. Same chips as the phone row, at every width: light text
   on a translucent ink pill; current and My Trip keep their fills. */
.spi-easy-shell .spi-header-navigation > .spi-easy-nav a { color: #fff !important; background: rgba(7, 59, 76, .62); border: 1px solid rgba(255, 255, 255, .3); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.spi-easy-shell .spi-header-navigation > .spi-easy-nav a:hover,
.spi-easy-shell .spi-header-navigation > .spi-easy-nav a[aria-current] { color: #073b4c !important; background: #d9f6ef; border-color: #d9f6ef; text-shadow: none; }
.spi-easy-shell .spi-header-navigation > .spi-easy-nav a[href="/trip-ideas/my-trip/"] { color: #073b4c !important; background: #fde68a; border-color: #fde68a; text-shadow: none; }
.spi-easy-shell :is(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #dc8b00; outline-offset: 4px; }
.spi-easy-shell .spi-topic-hero { padding: clamp(1.4rem,3vw,2.5rem); margin-block: .5rem 1rem; border-radius: 1.25rem; min-height: 0; }
.spi-easy-shell :is(.spi-topic-hero,.spi-trip-hero) h1 { max-width: 28ch; font-size: clamp(2rem,4.2vw,3.6rem); line-height: 1.08; }
.spi-easy-shell .spi-topic-hero .spi-deck { font-size: 1.08rem; margin-block: .65rem 0; }
.spi-easy-shell .spi-trip-day { min-height: 0; }
.spi-easy-shell .spi-trip-empty { padding: .7rem; }
.spi-easy-shell .spi-guide-actions { margin: 1rem auto; justify-content: flex-start; }
.spi-easy-shell .spi-trip-hero { padding: clamp(1.5rem,4vw,3rem); margin-bottom: 2rem; }
.spi-easy-shell .spi-trip-hero aside { display: none; }
.spi-easy-shell .spi-trip-hero { grid-template-columns: 1fr; }
/* Hero actions are buttons, not prose links: preserve readable state colors. */
.spi-easy-shell .spi-community-hero a.spi-button:is(:link,:visited,:hover,:focus-visible) { color: #fff; background: var(--spi-sea); text-decoration: none; }
.spi-easy-shell .spi-community-hero a.spi-button--ghost:is(:link,:visited,:hover,:focus-visible) { background: var(--spi-ink); }
.spi-easy-shell .spi-community-code .spi-eyebrow { color: inherit; }
.spi-related-disclosure,.spi-page-contents,.spi-optional-tool,.spi-reservation-disclosure { border: 1px solid #c5dddd; border-radius: .85rem; background: #fff; margin: 1rem 0; }
:is(.spi-related-disclosure,.spi-page-contents,.spi-optional-tool,.spi-reservation-disclosure) > summary { min-height: 44px; padding: .8rem 1rem; color: #073b4c; cursor: pointer; font-weight: 750; }
.spi-related-disclosure .spi-context-nav { margin: 0; box-shadow: none; border: 0; }
.spi-page-contents { max-width: 54rem; margin-inline: auto; }
.spi-page-contents nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; padding: 0 1rem 1rem; }
.spi-page-contents a { padding: .5rem 0; color: #087b83; }
.spi-article h2 { margin: 2rem 0 .7rem; color: #073b4c; font: 750 1.5rem/1.25 Georgia,serif; scroll-margin-top: 1rem; }
.spi-article p,.spi-article li { line-height: 1.75; }
.spi-planner-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1rem 0; }
.spi-planner-actions :is(a,button) { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .85rem 1.1rem; border: 1px solid #087b83; border-radius: .8rem; background: #e9f8f4; color: #073b4c; font-family: inherit; font-weight: 750; font-size: 1rem; line-height: 1.25; text-decoration: none; cursor: pointer; }
.spi-easy-shell .spi-planner-actions a,.spi-easy-shell .spi-planner-actions a:visited { color: #fff; background: #087b83; text-decoration: none; }
.spi-reservation-disclosure .spi-manual-plan { margin: 0; border: 0; box-shadow: none; }
.spi-reservation-disclosure:not([open]) { display: none; }
.spi-trip-day li { grid-template-columns: minmax(0,1fr) auto auto auto !important; }
.spi-item-editor { grid-column: 1 / -1; display: grid; gap: .75rem; padding: 1rem; border: 1px solid #c5dddd; border-radius: .75rem; background: #f3faf7; }
.spi-item-editor[hidden] { display: none; }
.spi-item-editor label { display: grid; gap: .4rem; font-weight: 700; }
.spi-item-editor :is(input,textarea) { width: 100%; min-height: 44px; padding: .7rem; border: 1px solid #99b9bd; border-radius: .5rem; background: #fff; font: inherit; box-sizing: border-box; }
.spi-trip-day [data-edit-item] { min-width: 44px; min-height: 44px; color: #075d64; border: 1px solid #b0cfd0; background: #fff; border-radius: .5rem; cursor: pointer; }
.spi-item-editor button { width: auto !important; min-height: 44px; padding: .6rem 1rem !important; color: #073b4c !important; background: #d9f6ef !important; }
.spi-optional-tool :is(.spi-packing,.spi-trip-notes) { margin: 0; border: 0; box-shadow: none; padding: 1rem; }
/* R93 — see spi-traveler.css: the bar floats only while edits are unsaved.
   No `position` here on the resting state, so spi-traveler.css's `static`
   wins whichever order the two sheets load in; the dirty rule carries one
   extra class so it beats the component sheet's own dirty rule. */
.spi-easy-shell .spi-trip-savebar { z-index: 25; box-shadow: 0 4px 24px #073b4c22; }
.spi-easy-shell .spi-trip-savebar.is-dirty { position: sticky; bottom: .5rem; }
@media (max-height: 520px) { .spi-easy-shell .spi-trip-savebar.is-dirty { position: static; } }
.spi-easy-shell .spi-library-search { position: relative; top: auto; margin-top: 1rem; }
.spi-topic-shortcuts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin: 1.2rem 0; }
.spi-easy-shell .spi-topic-shortcuts a { display: grid; gap: .45rem; padding: 1.2rem; border: 1px solid #bfdcd5; border-radius: .85rem; color: #073b4c; background: #fff; text-decoration: none; }
.spi-topic-shortcuts a:hover { background: #e9f8f4; border-color: #087b83; }
.spi-topic-shortcuts strong { font-size: 1.1rem; }
.spi-topic-shortcuts span { color: #476a70; font-size: .9rem; line-height: 1.4; }
.spi-home-search { max-width: 42rem; margin: 1rem 0; padding: 1rem; color: #073b4c; background: #fffdf7; border-radius: 1rem; }
.spi-home-search label { display: block; margin-bottom: .5rem; font-weight: 750; }
.spi-home-search > div { display: flex; gap: .5rem; }
.spi-home-search input { flex: 1; min-width: 0; padding: .8rem; border: 1px solid #9fbebd; border-radius: .5rem; font: inherit; }
.spi-home-search button { min-height: 44px; padding: .8rem; border: 0; border-radius: .5rem; color: #fff; background: #087b83; font: inherit; cursor: pointer; }
.spi-easy-shell .spi-library-groups { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.spi-easy-shell .spi-library-groups details[open] { grid-column: 1 / -1; }
.spi-easy-shell .spi-library-groups summary::after { content: '+'; font-size: 1.2rem; }
.spi-easy-shell .spi-library-groups details[open] > summary::after { content: '−'; }
.spi-easy-shell .spi-destination-footer { padding-block: 2rem; }
.spi-easy-shell .spi-destination-footer__lead { display: none; }
.spi-easy-shell .luperiq-theme-footer:has(.spi-destination-footer) .luperiq-ts-layout--footer { display: none; }
.spi-footer-help { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #ffffff30; font-size: .9rem; }
.spi-footer-help a { color: #c6eee7; padding: .5rem 0; }
.spi-footer-help span { flex: 1 1 15rem; padding: .5rem 0; }
@media(max-width: 650px) {
  .spi-topic-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .spi-home-search > div { flex-wrap: wrap; }
  .spi-home-search button { flex: 1 1 100%; }
  .spi-easy-nav { gap: 0; padding-inline: .25rem; }
  .spi-easy-nav a { flex: 1; font-size: .84rem; padding: .65rem .25rem; white-space: nowrap; }
  .spi-easy-shell .spi-topic-hero h1 { font-size: 2rem; }
  .spi-easy-shell .spi-library-groups { grid-template-columns: 1fr; }
  .spi-planner-actions > * { flex: 1 1 100%; }
  .spi-trip-day li { grid-template-columns: minmax(0,1fr) auto auto !important; }
  .spi-trip-day .spi-trip-item { grid-column: 1 / -1; }
  .spi-easy-shell .spi-destination-footer__nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
  .spi-easy-shell .spi-destination-footer__nav a { min-height: 44px; padding-block: .6rem; }
}
@media(max-width: 650px), (max-height: 520px) {
  /* R85 (Dave: the phone header took half the screen). The task links are ONE
     row that scrolls sideways -- chips, not a wall -- so the sticky header
     keeps brand, search and one thin task row. The current page's chip is
     scrolled into view by spi-easy.js; the right edge fades to say "more". */
  .spi-easy-shell .spi-header-navigation > .spi-easy-nav {
    position: relative; display: flex; flex-wrap: nowrap; justify-content: flex-start;
    gap: .3rem; width: 100%; max-width: 100%; margin: 0; padding: .1rem 1.25rem .25rem 0;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
  }
  .spi-easy-shell .spi-header-navigation > .spi-easy-nav::-webkit-scrollbar { display: none; }
  .spi-easy-shell .spi-header-navigation > .spi-easy-nav a {
    flex: 0 0 auto; min-width: 0; min-height: 38px; padding: .45rem .8rem; font-size: .88rem;
    white-space: nowrap; scroll-snap-align: start;
    /* R86 (Dave): dark ink on the dark hero backdrop was invisible. The chips
       are their own surface now -- light text on a translucent ink pill -- so
       they read on the photo header AND on the pale news front page. */
    color: #fff !important; background: rgba(7, 59, 76, .62); border: 1px solid rgba(255, 255, 255, .3);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  }
  .spi-easy-shell .spi-header-navigation > .spi-easy-nav a:hover,
  .spi-easy-shell .spi-header-navigation > .spi-easy-nav a[aria-current] { color: #073b4c !important; background: #d9f6ef; border-color: #d9f6ef; text-shadow: none; }
  .spi-easy-shell .spi-header-navigation > .spi-easy-nav a[href="/trip-ideas/my-trip/"] { color: #073b4c !important; background: #fde68a; border-color: #fde68a; text-shadow: none; }
}
}
@media(prefers-reduced-motion: reduce) { .spi-easy-shell * { scroll-behavior: auto !important; transition: none !important; } }