/* ============================================================
   My location page (/my-location/). Loads after home.css and
   features.css, which supply the hero, the section heads, the feature
   rows and the FAQ. This file is the coordinates tool, the iPhone and
   Apple Watch pitch, and the computer layout: on screens 900px and up
   nothing is centered and the sections switch sides as you go down
   (the owner's call, 2026-09-25: "left right left right... so it feels
   different"). Phones stay stacked and centered.
   ============================================================ */

/* the tool: one button, then a card with the app's six formats as tabs,
   one shown at a time (like tapping the coordinates in the app) */
.loc-tool { margin:28px auto 0; max-width:520px; }
.loc-go { width:100%; min-height:56px; font-size:17px; }
.loc-go:disabled { opacity:.72; cursor:default; animation:none; }
.loc-note { margin-top:12px; min-height:22px; font-size:15px; line-height:1.45; color:var(--t-60); text-wrap:pretty; }
.loc-note--err { color:var(--t-90); }
/* phones: the card appears with the first reading */
.loc-card { display:none; margin:16px auto 0; max-width:520px; padding:4px 16px 16px; text-align:left; border-radius:20px;
  background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px var(--line-soft); }
.loc-card.is-ready { display:block; }
/* the tab bar: three by two on phones, one row where there is room */
.loc-tabs { display:grid; grid-template-columns:repeat(3, minmax(max-content,1fr)); gap:4px; margin-top:12px; padding:4px; border-radius:14px;
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line-soft); }
.loc-tab { min-height:44px; padding:0 6px; border-radius:10px; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--t-60);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.loc-tab[aria-selected="true"] { color:#04130d; background:var(--accent); }
.loc-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (min-width:600px) { .loc-tabs { grid-template-columns:repeat(6, auto); } }
/* the readout: latitude and longitude each on their own labeled line (so
   nobody has to guess which is which); MGRS, UTM and grid square on one */
.loc-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; align-items:center; padding:16px 0 14px; }
/* every tab keeps the same height (one-line formats sit centered), so switching never moves the page */
.loc-read { min-height:80px; display:flex; flex-direction:column; justify-content:center; }
.loc-ll { display:grid; grid-template-columns:66px minmax(0,1fr); column-gap:8px; align-items:baseline; }
.loc-ll + .loc-ll { margin-top:4px; }
.loc-tag { font-size:13px; font-weight:500; line-height:1.3; color:var(--t-60); }
.loc-num { display:inline-block; font-size:clamp(16px, 4.5vw, 20px); font-weight:600; line-height:1.3; color:var(--fg); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.loc-one { display:none; }
.loc-read.is-one .loc-ll { display:none; }
.loc-read.is-one .loc-one { display:block; }
.loc-read.is-off .loc-num { font-size:15px; font-weight:500; color:var(--t-60); }
.loc-read.is-off + .loc-copy { visibility:hidden; }
.loc-lab { margin-top:6px; font-size:13px; line-height:1.3; color:var(--t-60); }
.loc-copy { min-width:68px; min-height:44px; padding:0 14px; border-radius:999px; font-size:15px; font-weight:600;
  color:var(--accent); background:var(--accent-fill); box-shadow:inset 0 0 0 1px var(--accent-border);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.loc-copy.is-done { color:#04130d; background:var(--accent); }
.loc-acc { padding:12px 0 0; font-size:13px; line-height:1.4; color:var(--t-60); box-shadow:inset 0 1px 0 var(--line-soft); }
.loc-actions { display:flex; gap:12px; margin-top:14px; }
.loc-actions button { flex:1 1 0; min-height:48px; border-radius:14px; font-size:15px; font-weight:600; color:var(--fg);
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--line-soft); }
.loc-actions button[hidden] { display:none; }
@media (hover:hover) and (pointer:fine) {
  .loc-tab[aria-selected="false"]:hover { color:var(--fg); background:rgba(255,255,255,.06); }
  .loc-copy:hover { background:rgba(97,224,175,.18); }
  .loc-actions button:hover { background:rgba(255,255,255,.1); }
}

/* the pitch right after the coordinates: iPhone and Apple Watch. On phones
   the line and the App Store button come straight after the headline, then
   the picture, so the download is the next thing under the coordinates. */
@media (max-width:899px) { .loc-app .split { grid-template-areas:"head" "rest" "media"; } }
.loc-app .split__rest { text-align:center; }
.loc-app .lede { margin-inline:auto; }
.loc-app .stage { width:min(76vw, 360px); }
.loc-app .cta__actions { margin-top:28px; }

/* ---------------- computers: left to right, nothing centered ---------------- */
@media (min-width:900px) {
  /* top: the question and the button on the left, the card on the right,
     already showing its empty rows so nothing moves when it fills in */
  .loc .ph { text-align:left; }
  .loc .ph > .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto auto 1fr;
    column-gap:clamp(56px,8vw,120px); align-items:start; }
  .loc .ph > .wrap > * { grid-column:1; }
  .loc .ph__lead { margin-inline:0; }
  .loc-tool { margin:32px 0 0; max-width:none; }
  .loc-go { width:auto; padding:0 36px; }
  .loc-card { display:block; }
  .loc .ph > .wrap > .loc-card { grid-column:2; grid-row:2 / span 3; margin:0; max-width:none; }
  .loc-card:not(.is-ready) .loc-num { width:62%; height:12px; border-radius:6px; background:rgba(255,255,255,.08); vertical-align:middle; }
  .loc-card.is-finding:not(.is-ready) .loc-num { animation:loc-wait .9s var(--ease) infinite alternate; }
  .loc-card:not(.is-ready) .loc-copy { visibility:hidden; }
  .loc-card:not(.is-ready) .loc-actions { display:none; }

  /* the pitch: picture on the left, the words and the QR on the right */
  .loc-app .split__rest, .loc-app .lede { text-align:left; margin-inline:0; }
  .loc-app .cta__actions { align-items:flex-start; }
  .loc-app .proof { justify-content:flex-start; }

  /* then the sides keep switching so the page never repeats itself:
     formats with the words on the left, iPhone with the words on the right,
     the FAQ with the words on the left again */
  .loc .fx-sec--text > .wrap, .loc .faq > .wrap { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(56px,8vw,120px); align-items:center; }
  .loc .fx-sec--text .fx-head, .loc .faq__head { grid-column:1; grid-row:1 / span 3; text-align:left; margin:0; }
  .loc .fx-sec--text .fx-head .h2, .loc .faq__head .h2 { margin-inline:0; max-width:12ch; }
  .loc .fx-sec--text .fx-list, .loc .fx-sec--text .fx-note, .loc .fx-sec--text .fx-out, .loc .faq__cols { grid-column:2; max-width:none; margin-inline:0; }
  .loc .fx-sec--text .fx-list { margin-top:0; }
  .loc .faq__cols { grid-template-columns:minmax(0,1fr); }
  /* nothing in these needs clipping, and a fade that ends a section must not
     start below the clip (it would never be seen, so it would never start) */
  .loc .fx-sec--text { overflow:visible; }
  /* iPhone: flipped, the list on the left and the words on the right */
  .loc #iphone > .wrap { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .loc #iphone .fx-head { grid-column:2; }
  .loc #iphone .fx-list, .loc #iphone .fx-out { grid-column:1; }
}
@keyframes loc-wait { to { background-color:rgba(255,255,255,.18); } }
@media (prefers-reduced-motion:reduce) { .loc-card .loc-num { animation:none !important; } }

/* One heading for search: the label and "Where am I?" together are the page's h1,
   laid out exactly as the label and title of every other page */
.loc-h1 { font:inherit; line-height:inherit; letter-spacing:normal; }
.loc-h1 .ph__title { display:block; color:var(--fg); font-weight:800; text-wrap:balance; }   /* as the other pages' titles */

/* feel: taps answer instantly with a small press, like the app's buttons */
.loc-tab, .loc-copy, .loc-actions button { transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s var(--ease); }
.loc-tab:active, .loc-copy:active, .loc-actions button:active { transform:scale(.96); }
/* while it looks, the button stays bright and shows a small spinner */
.loc-go:disabled { opacity:1; cursor:progress; }
.loc-go.is-busy::after { content:""; width:14px; height:14px; margin-left:10px; border-radius:50%;
  border:2px solid rgba(4,19,13,.75); border-right-color:transparent; animation:loc-spin .7s linear infinite; }
@keyframes loc-spin { to { transform:rotate(360deg); } }