/* ===== Quick Read tiles + collapsible sections ===== */
.qr-section{ padding-top:28px; padding-bottom:8px; background:radial-gradient(800px 260px at 50% 0%, rgba(239,201,120,0.08), transparent 70%); }
.qr-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin-bottom:16px; }
.qr-eyebrow{ display:block; font-size:11px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:6px; }
.qr-head h2{ margin:0; font-size:clamp(26px,5.5vw,36px); line-height:1.1; letter-spacing:-0.01em; color:var(--ink); }
.qr-head p{ margin:6px 0 0; font-size:14px; color:var(--muted); }
.qr-actions{ display:flex; gap:8px; }
.qr-btn{ font:inherit; font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:999px; cursor:pointer; color:var(--gold-bright); background:rgba(239,201,120,0.08); border:1px solid rgba(239,201,120,0.35); transition:background .18s ease, border-color .18s ease; }
.qr-btn:hover{ background:rgba(239,201,120,0.16); border-color:rgba(239,201,120,0.6); }
.qr-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:900px){ .qr-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } }
.qr-tile{ --g:239,201,120; display:flex; flex-direction:column; gap:7px; min-width:0; padding:15px 15px 13px; border-radius:18px; text-decoration:none; color:inherit;
  border:1px solid rgba(var(--g),0.25);
  background:radial-gradient(220px 110px at 0% 0%, rgba(var(--g),0.17), transparent 70%), linear-gradient(180deg,#181922,#111218);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.qr-tile:hover,.qr-tile:focus-visible{ border-color:rgba(var(--g),0.6); transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,0.42), 0 12px 40px rgba(var(--g),0.12); }
.qr-wide{ grid-column:span 2; }
.qr-top{ display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:rgb(var(--g)); }
.qr-ico{ width:28px; height:28px; display:grid; place-items:center; font-size:15px; border-radius:9px; background:rgba(var(--g),0.16); border:1px solid rgba(var(--g),0.35); letter-spacing:0; }
.qr-v{ font-family:'Fraunces', Georgia, serif; font-size:clamp(21px,5.6vw,31px); font-weight:600; line-height:1.05; color:var(--ink); overflow-wrap:break-word; }
.qr-wide .qr-v{ background:linear-gradient(180deg,#fff2c9 0%, #efc978 50%, #b8892f 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Never clip the sentence: every tile grows to fit its own words */
.qr-s{ font-size:12.5px; line-height:1.45; color:var(--muted); overflow-wrap:break-word; }
.qr-go{ margin-top:auto; padding-top:2px; font-size:11px; font-weight:700; letter-spacing:0.04em; color:rgba(var(--g),0.95); }
.qr-t-clock{ --g:255,138,112; } .qr-t-fx{ --g:183,156,255; } .qr-t-hist{ --g:239,201,120; }
.qr-t-px{ --g:245,184,75; } .qr-t-tvn{ --g:94,214,200; } .qr-t-rate{ --g:110,170,255; } .qr-t-m2{ --g:110,220,150; }

/* Small phones: tighter label spacing so titles stay on fewer lines, and one tile per row on very narrow screens */
@media (max-width:480px){
  .qr-top{ letter-spacing:0.08em; gap:7px; }
  .qr-tile{ padding:14px 13px 12px; }
}
@media (max-width:339px){
  .qr-grid{ grid-template-columns:minmax(0,1fr); }
  .qr-wide{ grid-column:auto; }
}

/* ===== Sections: a short preview first, then "Learn more" ===== */
/* Collapsed = header + summary + a preview of the data. Everything else waits behind the button. */
.cx.is-collapsed > .wrap > :not(.cx-head):not(.cx-keep):not(.cx-more){ display:none !important; }
.cx.is-collapsed{ min-height:0 !important; }
#worldclock.cx.is-collapsed, #currency-board.cx.is-collapsed{ min-height:0 !important; }
/* World clock: the map is the preview (tag + map + button + credit stay; the city tiles, finder wait) */
.cx.is-collapsed .wc-hook > :not(.econ-hook-tag):not(.wc-map):not(.cx-more):not(.wc-credit){ display:none !important; }

.cx-more{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:50px; margin:16px 0 6px; padding:13px 18px;
  font:inherit; font-size:15px; font-weight:800; line-height:1.25; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  color:#10101a; background:linear-gradient(180deg, rgba(var(--accent-rgb,239,201,120),1), rgba(var(--accent-rgb,239,201,120),0.82));
  border:1px solid rgba(var(--accent-rgb,239,201,120),0.9); border-radius:14px;
  box-shadow:0 8px 22px rgba(var(--accent-rgb,239,201,120),0.22);
  transition:transform .15s ease, filter .15s ease, background .2s ease; }
.cx-more:hover{ filter:brightness(1.07); }
.cx-more:active{ transform:scale(.985); }
.cx-more:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.cx-more-arrow{ flex:none; width:9px; height:9px; margin-top:-4px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg); transition:transform .2s ease, margin .2s ease; }
/* Open state: quiet outline button so the content below is the focus */
.cx-more[aria-expanded="true"]{ color:var(--ink); background:rgba(var(--accent-rgb,239,201,120),0.08); border-color:rgba(var(--accent-rgb,239,201,120),0.45); box-shadow:none; }
.cx-more[aria-expanded="true"] .cx-more-arrow{ transform:rotate(-135deg); margin-top:4px; }
/* inside the clock's hook the button sits right under the map */
.wc-hook > .cx-more{ margin-top:12px; }
@media (prefers-reduced-motion:reduce){ .cx-more, .cx-more-arrow{ transition:none; } }

/* ===== Quick Read: stars + hint ===== */
.qr-head p.qr-starhint{ margin-top:8px; color:var(--muted); }
.qr-starhint strong{ color:var(--gold-bright); font-weight:700; }
.qr-starhint-ico{ color:var(--gold-bright); }
.qr-grid{ grid-auto-flow:row dense; }
.qr-item{ position:relative; display:flex; min-width:0; }
.qr-item > .qr-tile{ flex:1 1 auto; min-width:0; }
.qr-item > .qr-tile .qr-top{ padding-right:34px; }
.qr-star{ position:absolute; top:8px; right:8px; z-index:2; width:40px; height:40px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:transparent; color:rgba(255,255,255,.55); cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.qr-star svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; transition:fill .15s; }
@media (hover:hover){ .qr-star:hover{ color:#efc978; background:rgba(239,201,120,.13); } }
.qr-star:focus-visible{ outline:2px solid #efc978; outline-offset:1px; }
.qr-star[aria-pressed="true"]{ color:#efc978; }
.qr-star[aria-pressed="true"] svg{ fill:#efc978; filter:drop-shadow(0 0 6px rgba(239,201,120,.55)); }
.qr-item.is-starred > .qr-tile{ border-color:rgba(239,201,120,.7); box-shadow:0 0 0 1px rgba(239,201,120,.35), inset 0 1px 0 rgba(255,255,255,0.05); }
@keyframes qrStarPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
.qr-star.pop svg{ animation:qrStarPop .4s cubic-bezier(.2,1.6,.4,1); }
@media (prefers-reduced-motion:reduce){ .qr-star.pop svg{ animation:none; } }
/* the "$1 USD = 0.894 EUR" tile value is long: let it wrap on two lines at a slightly smaller size */
.qr-t-fx .qr-v{ font-size:clamp(19px,5vw,27px); line-height:1.15; }

/* ===== Explainer headings (replace the old tap-to-open bars): the text is simply shown ===== */
.fx-guide-head{ display:flex; align-items:center; gap:10px; margin:20px 0 0; padding:0 2px; font-size:15px; font-weight:800; color:var(--ink); }
.fx-guide-head .fx-guide-toggle-icon{ font-size:18px; line-height:1; }

/* ===== Markets tile: one number, one change (gold as a quiet second line) ===== */
.qr-t-mkt{ --g:140,148,168; cursor:default; }
.qr-t-mkt[data-dir="up"]{ --g:95,208,138; }
.qr-t-mkt[data-dir="down"]{ --g:224,138,138; }
.qr-t-mkt:hover,.qr-t-mkt:focus-within{ transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); border-color:rgba(var(--g),0.25); }
.mkt-name{ font-size:12.5px; font-weight:700; color:var(--muted); }
.mkt-main{ display:flex; flex-direction:column; gap:2px; }
.mkt-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.qr-t-mkt .mkt-val{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--ink);
  font-size:clamp(30px,8vw,44px); font-weight:600; letter-spacing:-0.015em; font-variant-numeric:lining-nums tabular-nums; }
.mkt-chg{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:15px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--muted-2); background:rgba(255,255,255,0.06); }
.mkt-chg-sm{ padding:4px 9px; font-size:12.5px; }
.mkt-chg.up{ color:#5fd08a; background:rgba(95,208,138,0.14); }
.mkt-chg.down{ color:#e08a8a; background:rgba(200,70,70,0.16); }
.mkt-sub{ display:flex; align-items:center; gap:10px; padding-top:9px; border-top:1px solid rgba(255,255,255,0.08); }
.mkt-sub .mkt-name{ flex:1 1 auto; }
.mkt-sub + .mkt-sub{ margin-top:-1px; }
.mkt-sval{ font-size:17px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.mkt-chg[hidden], .mkt-sub[hidden], .mkt-fallback[hidden]{ display:none; }
.mkt-fallback{ align-self:flex-start; font-size:12px; font-weight:700; color:rgba(var(--g),0.95); text-decoration:none; }
.mkt-fallback:hover,.mkt-fallback:focus-visible{ text-decoration:underline; }