/*
 * Mobile (≤ 760px): site chrome and homepage, from the Pen frames
 * "D2 · Mobile · Homepage v2" (XXoKE) and "D2 · Mobile · Search open" (Koldb).
 * Desktop is untouched: the wrappers below are layout-neutral there and the
 * mobile-only parts are hidden.
 */

/* Desktop: search wrappers don't box anything; mobile-only parts are hidden. */
.d2-search__bar, .d2-search__box { display: contents; }
.d2-search__cancel, .d2-nav__btn, .d2-menu, .d2-lead, .d2-mlist, .d2-tablefoot__more { display: none; }

@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  html.d2-noscroll, html.d2-noscroll body { overflow: hidden; }

  /* Header (nETex): 64 tall, wordmark, search and menu buttons */
  .d2-nav { height: 64px; gap: 12px; padding: 14px 16px; }
  .d2-wordmark { flex: 1; min-width: 0; gap: 8px; height: 20px; }
  .d2-wordmark__mark { width: 19px; height: 19px; }
  .d2-wordmark__name { font-size: 20px; line-height: 20px; }
  .d2-nav__links, .d2-search { display: none; }
  .d2-nav__btn { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
  .d2-nav__btn--search { background: var(--surface-alt); }
  .d2-nav__btn--menu svg + svg, .d2-nav.is-menu .d2-nav__btn--menu svg:first-child { display: none; }
  .d2-nav.is-menu .d2-nav__btn--menu svg + svg { display: block; }

  /* Menu sheet */
  .d2-menu { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; padding: 4px 16px 12px; background: var(--surface); box-shadow: inset 0 1px 0 var(--line), 0 16px 32px #13261A1F; }
  .d2-menu[hidden] { display: none; }
  .d2-menu a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font: 400 17px/22px var(--font-body); color: var(--ink); box-shadow: inset 0 -1px 0 var(--line); }
  .d2-menu a:last-child { box-shadow: none; }
  .d2-menu a[aria-current] { font-weight: 600; }
  .d2 .d2-menu a:hover { text-decoration: none; }

  /* Search open (Koldb): full screen, input with Cancel, results below */
  .d2-nav.is-msearch .d2-search { display: flex; flex-direction: column; align-items: stretch; position: fixed; inset: 0; z-index: 100; width: auto; height: auto; gap: 0; padding: 0; border-radius: 0; background: var(--surface); box-shadow: none; }
  .d2-nav.is-msearch .d2-search.is-focus, .d2-nav.is-msearch .d2-search.is-open { width: auto; background: var(--surface); box-shadow: none; }
  .d2-search__bar { display: flex; flex: none; align-items: center; gap: 10px; padding: 14px 16px; box-shadow: inset 0 -1px 0 var(--line); }
  .d2-search__box { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; height: 39px; padding: 10px 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }
  .d2-search__box > svg { width: 16px; height: 16px; }
  .d2-search input { font-size: 15px; line-height: 19px; }
  .d2-search__clear svg { width: 15px; height: 15px; }
  .d2-search__cancel { display: block; flex: none; padding: 0; border: 0; background: none; font: 500 14px/18px var(--font-body); color: var(--accent); cursor: pointer; }
  .d2-searchdrop { position: static; flex: 1; width: auto; max-height: none; padding-top: 0; border-radius: 0; background: var(--surface); box-shadow: none; overflow-y: auto; }
  .d2-sgroup { padding: 14px 0 4px; }
  .d2-sgroup__head { padding: 0 16px 8px; letter-spacing: 1.3px; }
  .d2-res { height: 57px; gap: 12px; padding: 11px 16px; box-shadow: inset 0 -1px 0 var(--line); }
  .d2-res.is-active, .d2-res:hover { background: transparent; }
  .d2-res img { width: 30px; height: 30px; }
  .d2-res__text { flex-direction: column; align-items: flex-start; gap: 2px; }
  .d2-res__name { font-size: 15px; line-height: 19px; }
  .d2-res__price { font-size: 13px; line-height: 17px; color: var(--ink); }
  .d2-res__logo { width: 30px; height: 30px; border-radius: 8px; }
  .d2-res--ex .d2-res__name { font-weight: 500; }
  .d2-res--guide { height: 40px; }
  .d2-res--guide .d2-res__name { font-size: 14px; line-height: 18px; }
  .d2-sfoot { padding: 14px 16px; border-radius: 0; background: none; }
  .d2-sfoot a { font-size: 14px; line-height: 18px; }
  .d2-keys { display: none; }

  /* Homepage: one column in the frame's order */
  .d2-body { flex-direction: column; align-items: stretch; }
  .d2-main, .d2-sidebar, .d2-sidebar__top { display: contents; }
  .d2-heading { order: 1; } .d2-lead { order: 2; } .d2-mlist { order: 3; } .d2-tablefoot { order: 4; }
  .d2-signals { order: 5; } .d2-rules { order: 6; } .d2-report { order: 7; } .d2-learn { order: 8; }
  .d2-table, .d2-pager { display: none; }

  .d2-heading { align-items: flex-start; gap: 6px; padding: 18px 16px 4px; }
  .d2-h1 { font-size: 30px; line-height: 30px; letter-spacing: -0.4px; }
  .d2-summary { font-size: 14px; line-height: 20px; }

  /* Lead metrics (Ay7J7) */
  .d2-lead { display: flex; gap: 10px; padding: 12px 16px 4px; }
  .d2-lead__card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .d2-lead__label { font: 400 9px/12px var(--font-mono); letter-spacing: 1.1px; color: var(--ink-muted); }
  .d2-lead__value { font: 400 22px/29px var(--font-mono); letter-spacing: -0.5px; color: var(--ink); }
  .d2-lead__delta { font: 400 11px/14px var(--font-mono); }
  .d2-lead__bars { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
  .d2-lead__bars i { flex: 1; border-radius: 1px 1px 0 0; background: #2D6B3F59; }
  .d2-lead__bars i.is-last { background: var(--accent); }

  /* Coin list (y1lqi0) */
  .d2-mlist { display: flex; flex-direction: column; padding-top: 16px; }
  .d2-mlist__head { display: flex; justify-content: space-between; height: 35px; padding: 14px 16px 8px; font: 400 10px/13px var(--font-mono); letter-spacing: 1.2px; color: var(--ink-muted); }
  .d2-mrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; box-shadow: inset 0 1px 0 var(--line); }
  .d2 .d2-mrow:hover { text-decoration: none; background: #F6F7F3; }
  .d2-mrow__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); object-fit: cover; background: #fff; }
  .d2-mrow__name { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .d2-mrow__line { display: flex; align-items: center; gap: 6px; height: 19px; }
  .d2-mrow__ticker { font: 600 15px/19px var(--font-body); color: var(--ink); }
  .d2-mrow__price { font: 400 11px/14px var(--font-mono); color: var(--ink-muted); }
  .d2-mrow__values { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .d2-mrow__supply { font: 400 15px/19px var(--font-mono); color: var(--ink); }
  .d2-mrow__chg { font: 400 12px/16px var(--font-mono); }
  .d2-mrow > svg { flex: none; }
  .d2-tablefoot { height: 41px; margin-bottom: 8px; padding: 12px 16px; gap: 12px; box-shadow: inset 0 1px 0 var(--line); }
  .d2-source { font-size: 10px; line-height: 13px; }
  .d2-tablefoot__more { display: block; flex: none; font: 500 13px/17px var(--font-body); color: var(--accent); }

  /* Signals (h86kyf) */
  .d2-signals { gap: 12px; padding: 20px 16px; box-shadow: inset 0 1px 0 var(--line); }
  .d2-signal { padding: 0; box-shadow: none; }
  .d2-signal:nth-of-type(n+4) { display: none; }
  .d2-signal__icon, .d2-signal__when { display: none; }
  .d2-signal__text { flex-direction: row; align-items: flex-start; gap: 10px; }
  .d2-signal__meta { flex: none; height: auto; }
  .d2-signal__tag { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--surface-alt); letter-spacing: 1px; }
  .d2-signal__body { font-size: 13px; line-height: 19px; }
  .d2-quiet { padding-bottom: 0; box-shadow: none; }

  /* UK rules (EI02R) */
  .d2-rules { gap: 12px; padding: 20px 16px; box-shadow: inset 0 1px 0 var(--line); }
  .d2-rules:not(.is-all) .d2-rule:nth-of-type(n+5) { display: none; }
  .d2-rules__link { font-size: 13px; line-height: 17px; }
  .d2-rule { gap: 12px; }
  .d2-rule__dot { width: 10px; height: 10px; }
  .d2-rule__text { gap: 2px; }
  .d2-rule__date { font-size: 10px; line-height: 13px; }
  .d2-rule__label { font-size: 13px; line-height: 17px; }

  /* State of sterling onchain (UDrGq) */
  .d2-report { gap: 10px; margin: 4px 16px 20px; padding: 18px; }
  .d2-report__title { line-height: 22px; }
  .d2-report__v { font-size: 16px; line-height: 21px; }

  /* Learn the basics (K9QWSj): cards scroll sideways */
  .d2-learn { gap: 12px; padding: 20px 16px; background: var(--surface-alt); box-shadow: inset 0 1px 0 var(--line); }
  .d2-learn__head { align-items: flex-start; gap: 12px; }
  .d2-learn .d2-eyebrow { display: none; }
  .d2-learn__title { font-size: 22px; line-height: 26px; }
  .d2-learn .d2-link { flex: none; font-size: 13px; line-height: 17px; padding-top: 3px; }
  .d2-guides { display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; }
  .d2-guides::-webkit-scrollbar { display: none; }
  .d2-guide { flex: 0 0 250px; gap: 8px; scroll-snap-align: start; }
  .d2-guide__img { height: 140px; }
  .d2-guide__eyebrow { font-size: 9px; line-height: 12px; letter-spacing: 1.2px; }
  .d2-guide__title { font-size: 18px; line-height: 1.2; }
  .d2-guide__dek { display: none; }

  /* Footer (ph0nL) */
  .d2-footer { gap: 14px; padding: 28px 16px 32px; }
  .d2-footer__top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .d2-footer__wordmark { font-size: 20px; line-height: 20px; }
  .d2-footer__links { flex-direction: column; gap: 10px; }
  .d2-footer__links a, .d2-footer__links button { font-size: 14px; line-height: 18px; text-align: left; }
}

/* Tablet (761–1100px): the desktop header, tightened so the search box fits. */
@media (min-width: 761px) and (max-width: 1100px) {
  .d2-nav { gap: 24px; padding: 20px 24px; }
  .d2-nav__links { gap: 20px; }
  .d2-search { flex: 0 1 240px; width: auto; min-width: 150px; }
  .d2-search.is-focus, .d2-search.is-open { width: auto; flex-basis: 300px; }
  .d2-searchdrop { width: min(420px, calc(100vw - 48px)); }
}