/* ============================================================================
   TenTwelve — region.css · root chooser, suggestion modal, footer switcher
   Uses the brand tokens defined in site.css. Day/Night handled by those tokens.
   ============================================================================ */

/* ── ROOT CHOOSER PAGE ─────────────────────────────────────────────────── */
.rg-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(28px,6vw,72px);position:relative;overflow:hidden;text-align:center}
.rg-page .orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.rg-mark{color:var(--forest);width:46px;height:46px;margin-bottom:28px}
.rg-word{font-size:clamp(22px,3vw,28px);font-weight:500;letter-spacing:-.02em;color:var(--t1);margin-bottom:10px}
.rg-word .dot{color:var(--lbl-c)}
.rg-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lbl-c);margin-bottom:18px}
.rg-title{font-size:clamp(26px,4.4vw,46px);font-weight:300;letter-spacing:-.03em;line-height:1.05;color:var(--t1);max-width:18ch;margin-bottom:14px}
.rg-title em{font-style:italic;color:var(--clay)}
.rg-sub{font-size:clamp(14px,1.6vw,17px);font-weight:300;color:var(--t2);max-width:46ch;line-height:1.6;margin-bottom:clamp(32px,5vw,48px)}
.rg-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%;max-width:680px}
@media(max-width:600px){.rg-grid{grid-template-columns:1fr}}
.rg-card{position:relative;display:block;text-align:left;border:1px solid var(--bord);border-radius:18px;
  background:var(--surf);padding:clamp(24px,3vw,32px);transition:transform .35s var(--spring,cubic-bezier(.2,.9,.3,1)),box-shadow .35s,border-color .25s}
.rg-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(24,39,34,.12);border-color:var(--clay)}
.rg-card.rg-suggested{border-color:var(--clay)}
.rg-flag{font-size:30px;line-height:1;margin-bottom:16px;display:block}
.rg-card-region{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lbl-c);margin-bottom:8px}
.rg-card-name{font-size:clamp(19px,2.2vw,24px);font-weight:400;color:var(--t1);letter-spacing:-.01em;margin-bottom:6px}
.rg-card-meta{font-size:13.5px;color:var(--t2);line-height:1.5}
.rg-card-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13px;font-weight:500;color:var(--lbl-c)}
.rg-card-go .arr{transition:transform .25s}
.rg-card:hover .rg-card-go .arr{transform:translateX(4px)}
.rg-badge{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--clay);color:#26150C;padding:4px 10px;border-radius:100px;font-weight:500}
.rg-foot{margin-top:clamp(32px,5vw,48px);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2)}

/* ── SUGGESTION MODAL (shown on market pages when geo differs) ──────────── */
#tt-region-modal{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(16,23,21,.55);backdrop-filter:blur(6px)}
#tt-region-modal.open{display:flex}
.ttm-card{background:var(--surf);border:1px solid var(--bord);border-radius:18px;max-width:420px;width:100%;
  padding:clamp(26px,4vw,36px);box-shadow:0 30px 80px rgba(0,0,0,.3);text-align:center;animation:ttm-in .3s var(--spring,cubic-bezier(.2,.9,.3,1))}
@keyframes ttm-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ttm-mark{color:var(--forest);width:32px;height:32px;margin:0 auto 16px}
.ttm-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--lbl-c);margin-bottom:12px}
.ttm-title{font-size:clamp(19px,2.4vw,23px);font-weight:400;color:var(--t1);letter-spacing:-.01em;margin-bottom:10px;line-height:1.25}
.ttm-body{font-size:14px;color:var(--t2);line-height:1.55;margin-bottom:22px}
.ttm-actions{display:flex;flex-direction:column;gap:10px}
.ttm-go{display:block;width:100%;padding:13px;border-radius:10px;background:var(--clay);color:#26150C;font-weight:500;font-size:14px;border:1.5px solid var(--clay);min-height:46px}
.ttm-go:hover{background:var(--clay-deep);border-color:var(--clay-deep)}
.ttm-stay{display:block;width:100%;padding:11px;border-radius:10px;background:transparent;color:var(--t2);font-size:13px;border:1.5px solid var(--bord);cursor:pointer;min-height:42px}
.ttm-stay:hover{border-color:var(--t1);color:var(--t1)}

/* ── FOOTER REGION SWITCHER ────────────────────────────────────────────── */
.region-switch{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t2);border:1px solid var(--bord);
  border-radius:100px;padding:6px 13px;transition:border-color .25s,color .25s}
.region-switch:hover{border-color:var(--clay);color:var(--lbl-c)}
.region-switch svg{width:12px;height:12px;opacity:.7}