/* Location rule v2 (OA_LOCATION_V2, places/loc.py): the fixed header chip, the first-arrival card, the reminder
   toast and the soft line after a page's first result. Loaded only while the switch is on. */
/* ONE row on every page (owner, 24 Oct 2026: "make a fix box for location"): a fixed-size chip box and the language
   switch, same height everywhere. A long town name never wraps: it scrolls slowly inside the box (owner's choice "a",
   the site's ONE allowed moving text; loc-v2.js), and with prefers-reduced-motion it ends in an ellipsis instead. */
.loc-bar { position: sticky; top: 0; z-index: 20; flex-wrap: nowrap; gap: 4px; min-height: 44px; }
.loc-chip { font-weight: 600; gap: .35em; flex: 0 1 auto; min-width: 0; max-width: 360px; white-space: nowrap; }
.loc-chip .loc-verb { flex: 0 0 auto; text-decoration: underline; text-underline-offset: 3px; }
.loc-chip .loc-sep { flex: 0 0 auto; }
.loc-box { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-box.is-long { text-overflow: clip; }
.loc-box.is-long .loc-town { display: inline-block; will-change: transform; }
.loc-bar .lang-switch { flex: 0 0 auto; margin-left: 8px; }
@media (max-width: 640px) { .loc-chip { max-width: 60%; } }

.loc-link { background: none; border: 0; padding: 0 6px; min-height: 44px; font: inherit; color: var(--oa-kumkum);
            text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.loc-msg { margin: 8px 0 0; font-size: .9rem; color: var(--oa-text-soft); }
.loc-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none;
         font-size: 1.5rem; line-height: 1; color: var(--oa-text-soft); cursor: pointer; }

/* rule 4 / 5: one calm line after the first result, never above the H1 */
.loc-ask { padding: 0 16px; margin: 18px 0; }
.loc-ask-in { max-width: 1080px; margin: 0 auto; padding: 12px 16px; border: 1px solid var(--oa-line);
              border-radius: var(--oa-radius, 12px); background: var(--oa-paper); }
.loc-ask-q { margin: 0 0 6px; }
.loc-ask-btns, .loc-toast-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.loc-event { margin: 10px 0 0; font-size: .95rem; }

/* rule 3: the reminder, small and fixed, never blocking */
.loc-toast { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; padding: 12px 48px 12px 16px;
             background: var(--oa-paper); border: 1px solid var(--oa-line); border-radius: 12px;
             box-shadow: var(--oa-shadow, 0 8px 24px rgba(0, 0, 0, .15)); transition: opacity .4s; }
.loc-toast.out { opacity: 0; pointer-events: none; }
.loc-toast-q { margin: 0 0 6px; font-weight: 600; }

/* rule 0: the first-arrival card: a bottom sheet on a phone, a corner card on a desktop */
.loc-card { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow: auto;
            padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--oa-paper);
            border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
            transform: translateY(105%); transition: transform .35s ease; }
.loc-card.in { transform: none; }
.loc-card-h { margin: 0 40px 8px 0; font-size: 1.15rem; font-weight: 700; }
.loc-card-line { margin: 0 0 14px; }
.loc-card-note { margin: 12px 0 0; font-size: .8rem; color: var(--oa-text-soft); }
.loc-card-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.loc-card-here { flex: 1 1 100%; min-height: 50px; font-size: 1.05rem; }   /* the one big button: the phone's location */
.loc-card-choose { min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--oa-primary);
                   background: none; color: var(--oa-primary); font: inherit; font-size: .95rem; font-weight: 600;
                   cursor: pointer; }
.loc-card-pick input { width: 100%; min-height: 44px; margin-top: 10px; }
.loc-card-pick .results { margin: 6px 0 0; }
@media (min-width: 720px) {
  .loc-card { left: auto; right: 24px; bottom: 24px; width: 380px; border-radius: 16px;
              box-shadow: 0 12px 40px rgba(0, 0, 0, .2); transform: translateY(24px); opacity: 0;
              transition: transform .35s ease, opacity .35s ease; }
  .loc-card.in { transform: none; opacity: 1; }
  .loc-toast { left: auto; width: 360px; }
}
@media (prefers-reduced-motion: reduce) { .loc-card, .loc-toast { transition: none; } }

/* the calculation point, next to the results (A185) */
.loc-basis { margin: 10px 0 0; font-size: .9rem; opacity: .9; }