@charset "utf-8";
/* ============================================================================
   GOODWAY · BRIDGE — goodway.bridge.css
   ----------------------------------------------------------------------------
   The Torque frame (Site.Master) now wraps every page, while some pages and
   two scripts are still the old ones: Tires, Tire, FAQ, Info and the login
   pages are written in goodway.css (Tailwind), and goodway.js /
   goodway-shop.js show and hide things with Tailwind's class names.

   This file is the bridge between the two, and nothing else. When the last
   old page has moved to Torque and the two scripts are retired, delete it.

   How the two style sheets live on one page (Site.Master does this):
     · tq.base.css is loaded INTO A LAYER BELOW Tailwind's on an old page, so
       Tailwind's reset wins inside the old content exactly as before, and
       the Torque frame — which never leans on the base reset for its look —
       is unchanged by it.
     · the old content sits in <main class="gw-legacy …"> with the colours
       and font it was made for.
   ========================================================================= */

/* goodway-shop.js locks the page behind the quote with Tailwind's class */
html.overflow-hidden { overflow: hidden; }

/* the old scripts' toast (#gw-toast): shown and hidden with Tailwind's
   "hidden" class, drawn here as a Torque toast */
#gw-toast {
  position: fixed;
  inset-block-end: calc(var(--tq-sp-8) + var(--tq-actionbar-h, 0px));
  inset-inline-end: var(--tq-sp-8);
  z-index: var(--tq-z-toast);
  display: flex;
  align-items: flex-start;
  gap: var(--tq-sp-5);
  max-inline-size: min(400px, calc(100vw - 32px));
  padding: var(--tq-sp-6) var(--tq-sp-7) var(--tq-sp-6) var(--tq-sp-6);
  border: 1px solid rgb(var(--tq-white-rgb) / .08);
  border-radius: var(--tq-r-md);
  background: var(--tq-graphite-900);
  color: var(--tq-ink-800);
  box-shadow: 0 22px 48px -18px rgb(var(--tq-steel-rgb) / .55), 0 2px 6px rgb(var(--tq-steel-rgb) / .2);
  font-family: var(--tq-font-sans);
  font-size: var(--tq-fs-sm);
  line-height: 1.5;
  overflow: hidden;
  animation: gw-toast-in var(--tq-d-slow) var(--tq-ease-out) both;
}
#gw-toast::before {                 /* the lane along its top */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 2px;
  background: repeating-linear-gradient(90deg, rgb(var(--tq-brand-glow-rgb)) 0 9px, transparent 9px 14px);
  opacity: .6;
}
#gw-toast.hidden { display: none; }
#gw-toast .tq-i { flex: none; inline-size: 20px; block-size: 20px; color: var(--tq-brand-glow); }
@keyframes gw-toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 639px) {
  #gw-toast { inset-inline: var(--tq-sp-5); inset-block-end: calc(var(--tq-sp-5) + var(--tq-actionbar-h, 0px)); max-inline-size: none; }
}
@media (prefers-reduced-motion: reduce) { #gw-toast { animation: none; } }

/* THE OLD CONTENT. These rules sit in their own cascade layer, tq-bridge, which Site.Master orders right
   above tq-base and below all of Tailwind's (properties, tq-base, tq-bridge, theme, base, components,
   utilities): they take back from tq.base.css only what Tailwind's own reset leaves alone, and any class
   on the old page still wins over them. */
@layer tq-bridge {
  /* body type comes from tq.base.css; the old content gets back what it inherited from the old body */
  .gw-legacy {
    display: block;
    inline-size: 100%;
    min-block-size: 40vh;
    line-height: 1.5;
    letter-spacing: normal;
    text-rendering: auto;
    font-synthesis-weight: auto;
  }
  /* tq.base.css caps these at their box; Tailwind's reset does it for img and video only */
  .gw-legacy :is(svg, canvas) { max-width: none; }
  .gw-legacy picture { display: inline; }
  /* tq.base.css draws its own underline; an old link keeps the browser's */
  .gw-legacy a { text-decoration-thickness: auto; text-underline-offset: auto; }
}