/* Market pages (includes/templates/market.php). The hero clock card reuses .ww__mk / .mk from main.css,
   driven by main.js initMarkets ([data-mk] [data-tz]); the times are also printed by the server. */

/* ---------- hero ---------- */
.mkp-hero__h { font-size: clamp(2.8rem, 5.6vw, 5.8rem); }
.mkp-clk { box-shadow: 0 40px 80px -40px rgba(17, 17, 17, .45); }
.motion .mkp-clk { animation: hero-in 1s var(--ease) .35s both; }
.mkp-clk .mk__c { padding-inline: 6px; font-size: 9.5px; }
.mkp-clk .mk { grid-template-columns: 58px minmax(0, 1fr) auto; }
.mkp-clk__ov { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 12px 14px; border-radius: 14px; font-size: 11px; line-height: 1.5; color: var(--mut); background: rgba(255, 255, 255, .05); }
.mkp-clk__ov .icon { flex: none; width: 16px; height: 16px; color: var(--orange); }
.mkp-clk__ov b { font-weight: 500; color: var(--fg); }

/* ---------- services ---------- */
.mkp-svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mkp-svc__i { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 22px 24px; border-radius: 22px; background: var(--card); transition: box-shadow .3s, translate .45s var(--ease); }
.mkp-svc__i:hover, .mkp-svc__i:focus-within { box-shadow: 0 0 0 1px var(--line), 0 24px 40px -30px rgba(17, 17, 17, .45); translate: 0 -2px; }
.mkp-svc__n { font-size: 10.5px; color: var(--mut); }
.mkp-svc__t { padding-right: 28px; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.mkp-svc__t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mkp-svc__t a:focus-visible { outline: none; }
.mkp-svc__t a:focus-visible::after { outline: 2px solid var(--pink); outline-offset: 2px; }
.mkp-svc__b { font-size: .92rem; line-height: 1.55; color: var(--mut); }
.mkp-svc__go { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: #111; transition: background .3s, color .3s; }
.mkp-svc__go .icon { width: 14px; height: 14px; }
.mkp-svc__i:hover .mkp-svc__go { color: #111; background: var(--grad-warm); }

/* ---------- the market ---------- */
.mkp-loc__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.mkp-loc__side { position: sticky; top: 110px; display: grid; justify-items: start; gap: 22px; }
.mkp-loc__body { display: grid; gap: 14px; }
.mkp-loc__b { display: grid; gap: 12px; padding: clamp(20px, 2.4vw, 30px); border-radius: 24px; background: var(--card); }
.mkp-loc__b h3 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.mkp-loc__b h3 .mono { flex: none; font-size: 11px; font-weight: 400; color: var(--pink); }
.mkp-loc__b p { max-width: 68ch; font-size: 1rem; line-height: 1.65; color: #3d3d44; }
.mkp-loc__src { font-size: 11px !important; color: var(--mut) !important; }
.mkp-loc__src a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }

/* ---------- results ---------- */
.mkp-cs__none { display: flex; align-items: flex-start; gap: 12px; max-width: 70ch; margin-bottom: 28px; padding: 18px 20px; border-radius: 18px; line-height: 1.6; color: var(--fg); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line2); }
.mkp-cs__none .ping { margin-top: 7px; }
.mkp-cs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.mkp-cs__i article { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s; }
.mkp-cs__i article:hover, .mkp-cs__i article:focus-within { box-shadow: inset 0 0 0 1px var(--line2), 0 30px 60px -30px rgba(255, 61, 129, .4); }
.mkp-cs__kick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 10.5px; color: var(--mut); }
.mkp-cs__t { font-size: 1.2rem; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.mkp-cs__t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mkp-cs__t a:focus-visible { outline: none; }
.mkp-cs__t a:focus-visible::after { outline: 2px solid var(--pink); outline-offset: -2px; }
.mkp-cs__m { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.mkp-cs__m .mono { font-size: 10px; color: var(--mut); }
.mkp-cs__m b { font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mkp-cs__m b > span:first-child { color: var(--mut); }
.mkp-cs__m small { font-size: 10px; color: var(--mut); }
.mkp-cs__s { font-size: .9rem; line-height: 1.55; color: var(--mut); }
.mkp-cs__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11px; }
.mkp-cs__go .icon { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.mkp-cs__i article:hover .mkp-cs__go { color: var(--pink); }
.mkp-cs__i article:hover .mkp-cs__go .icon { transform: translate(2px, -2px); }
.mkp-cs__all { margin-top: 32px; }

/* ---------- time zones ---------- */
.mkp-tz__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 64px); align-items: start; }
.mkp-tz__tbl { max-width: 100%; overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.mkp-tz__tbl:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.mkp-tz__tbl table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mkp-tz__tbl caption { padding: 16px 18px 6px; font-family: var(--mono); font-size: 10.5px; text-align: left; color: var(--mut); }
.mkp-tz__tbl th, .mkp-tz__tbl td { padding: 12px 18px; text-align: left; border-top: 1px solid var(--line); }
.mkp-tz__tbl thead th { font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--mut); }
.mkp-tz__tbl tbody th { font-weight: 600; }
.mkp-tz__notes { display: grid; gap: 14px; margin-top: 24px; }
.mkp-tz__notes p { max-width: 68ch; line-height: 1.65; color: #3d3d44; }
.mkp-tz__ways { display: grid; gap: 12px; }
.mkp-tz__ways li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 20px; border-radius: 22px; background: var(--card); }
.mkp-tz__ic { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: #111; }
.mkp-tz__ways h3 { font-size: 1.05rem; font-weight: 600; }
.mkp-tz__ways p { font-size: .92rem; line-height: 1.5; color: var(--mut); }
.mkp-tz__ways a, .mkp-tz__ways .selectable { justify-self: start; display: inline-block; padding-block: 10px; margin-block: -6px; font-size: .92rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }

@media (max-width: 1099px) {
  .mkp-loc__grid, .mkp-tz__grid { grid-template-columns: minmax(0, 1fr); }
  .mkp-loc__side { position: static; }
  .mkp-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkp-clk { max-width: 560px; }
}
@media (max-width: 640px) {
  .mkp-clk { margin-bottom: 56px; }
  .mkp-svc__grid { grid-template-columns: minmax(0, 1fr); }
  .mkp-tz__tbl th, .mkp-tz__tbl td { padding: 10px 12px; font-size: 13px; }
}