/* ============================================================
   proximapool — the app: phones, tablets, Apple devices
   One code, two formats: above 1100 px with a mouse nothing here applies, except
   the few Safari and autofill rules at the top. Loaded last on every page.
   Capsule, More sheet, swipe, page turn: js/app.js.
   ============================================================ */

:root, [data-theme="light"] {
  --cap-bg: #FFFFFF; --cap-ring: rgba(13,30,45,0.13);
  --cap-shadow: 0 1px 2px rgba(13,30,45,0.1), 0 14px 34px -10px rgba(13,30,45,0.32);
  --app-status: #0C1116;
}
[data-theme="dark"] {
  --cap-bg: #1A2229; --cap-ring: rgba(170,200,225,0.17);
  --cap-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 14px 34px -8px rgba(0,0,0,0.85);
  --app-status: transparent;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Autofill (password managers, iCloud Keychain): stays readable in both themes */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-1); caret-color: var(--text-1);
  box-shadow: 0 0 0 100px var(--surface-2) inset; transition: background-color 9999s;
}

/* Apple devices: the same simple controls as elsewhere, without the native look of macOS and iOS */
[data-apple] select {
  -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C98A3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 14px !important;
}
[data-apple] input[type="search"] { -webkit-appearance: none; appearance: none; }

/* Hidden above 1100 px */
.app-capsule, .app-pinned { display: none; }
.footer-install { background: none; border: 0; padding: 0; font: 480 13.5px var(--font-ui); color: var(--text-2); cursor: pointer; transition: color 130ms ease; }
.footer-install:hover { color: var(--text-1); }

/* ---- Sheets of the app (More, install): at the bottom on a phone, centred above 640 px ---- */
dialog.app-sheet {
  flex-direction: column; border: 0; padding: 0 0 max(14px, env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 480px;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px); margin: auto auto 0; overflow: auto; overscroll-behavior: contain;
  border-radius: 24px 24px 0 0; color: var(--text-1); background: var(--surface-1); box-shadow: 0 -18px 50px -18px rgba(0,0,0,0.7);
  font: 420 15px/1.45 var(--font-ui);
}
dialog.app-sheet:focus { outline: none; }
dialog.app-sheet[open] { display: flex; animation: app-sheet-up 300ms cubic-bezier(.2,.9,.3,1) both; }
dialog.app-sheet::backdrop { background: rgba(3,6,10,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes app-sheet-up { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 641px) { dialog.app-sheet { margin: auto; padding-top: 10px; border-radius: 24px; } }
.app-sheet-grip { flex: none; padding: 10px 0 12px; touch-action: none; cursor: grab; }
.app-sheet-grip::before { content: ""; display: block; width: 40px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--border-strong); }
@media (min-width: 641px) { .app-sheet-grip { display: none; } }
.app-sheet-cta { display: flex; width: auto; margin: 0 16px 8px; min-height: 48px; }
.app-sheet-label { padding: 12px 18px 4px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.app-row {
  display: flex; align-items: center; gap: 13px; width: 100%; min-height: 50px; padding: 0 18px; border: 0; background: none; cursor: pointer;
  font: 500 15.5px var(--font-ui); letter-spacing: -0.008em; color: var(--text-1); text-align: left; text-decoration: none;
}
.app-row:hover { color: var(--text-1); background: var(--row-hover); }
.app-row:active { background: var(--row-hover); }
.app-row.is-here { color: var(--primary); }
.app-row svg { flex: none; width: 21px; height: 21px; color: var(--primary); }
.app-row-go { margin-left: auto; color: var(--text-3); }
.app-row svg.app-row-go { width: 16px; height: 16px; color: var(--text-3); }
.app-sheet-close { display: flex; width: auto; margin: 10px 16px 0; min-height: 46px; }
.app-sheet-title { margin: 0; padding: 2px 18px 8px; font-size: 18px; font-weight: 620; letter-spacing: -0.015em; color: var(--text-1); }
.app-sheet-text { margin: 0; padding: 0 18px 8px; color: var(--text-2); }
.app-sheet-text b { font-weight: 600; color: var(--text-1); }

/* ---- Below 1100 px: top bar, capsule ---- */
@media (max-width: 1100px) {
  :root {
    --app-bar: 56px;
    --app-top: calc(var(--app-bar) + env(safe-area-inset-top, 0px));
    --app-bottom: env(safe-area-inset-bottom, 0px);
    --app-clear: calc(94px + var(--app-bottom));
  }
  html { scroll-behavior: auto; scroll-padding-top: calc(var(--app-top) + 8px); }
  /* hidden on both makes <body> a scroll container, where nothing sticks */
  html, body { overflow-x: clip; }
  /* A sideways swipe belongs to the tabs: Chrome would otherwise go back in its history at the same time */
  html, body { overscroll-behavior-x: none; }
  @view-transition { navigation: none; }
  main, .site-header, .nav-ind { view-transition-name: none; }
  body { padding-top: var(--app-top); padding-bottom: var(--app-clear); }

  /* The bar never moves and never changes */
  .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--app-top); padding-top: env(safe-area-inset-top, 0px); }
  /* The clock of an installed iPhone app stays white: a dark band behind it in the light theme */
  .site-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--app-status); }
  .site-header .logo-art svg { height: 36px; }
  .main-nav { display: none; }
  .container, .container-narrow { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

  /* The capsule: never leaves, only shrinks while scrolling down */
  .app-capsule {
    display: flex; align-items: center; gap: 2px; position: fixed; z-index: calc(var(--z-sticky) + 2);
    left: 0; right: 0; bottom: calc(12px + var(--app-bottom)); width: min(400px, calc(100% - 24px)); margin: 0 auto; padding: 5px;
    border-radius: 999px; background: color-mix(in srgb, var(--cap-bg) 90%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: 0 0 0 1px var(--cap-ring), var(--cap-shadow);
    translate: var(--cap-dx, 0) var(--cap-dy, 0); scale: var(--cap-scale, 1); transform-origin: 50% 100%;
    transition: translate 260ms cubic-bezier(.2,.8,.2,1), scale 260ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  .app-capsule.is-small { --cap-scale: 0.86; --cap-dy: 8px; }
  .app-capsule.is-dragging { transition: none; }
  .cap-tab { position: relative; flex: 1 1 0; min-width: 44px; height: 48px; border-radius: 999px; }
  .cap-tab.is-active { flex: 0 0 auto; }
  .cap-link {
    display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit;
    background: none; color: var(--text-2); cursor: pointer; font: 600 13.5px/1 var(--font-ui); letter-spacing: -0.012em; text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease;
  }
  .cap-link:hover { color: var(--text-1); }
  .cap-link svg { flex: none; width: 22px; height: 22px; }
  .cap-name { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 300ms ease, opacity 220ms ease; }
  .cap-tab.is-active .cap-link { padding: 0 15px 0 12px; color: var(--primary); background: var(--primary-dim); box-shadow: inset 0 0 0 1px var(--border-active); }
  .cap-tab.is-active .cap-name { max-width: 130px; opacity: 1; }
  .cap-tab.is-target .cap-link { color: var(--primary); background: var(--primary-dim); }
  /* The switch under the finger gives the iPhone's haptic tick; the click then goes to the tab */
  .cap-haptic { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .cap-swipe-tick { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

  /* The page title comes back under the bar once it has scrolled away */
  .app-pinned {
    display: block; position: fixed; z-index: calc(var(--z-sticky) + 1); top: var(--app-top); left: 0; right: 0;
    padding: 7px max(16px, env(safe-area-inset-right, 0px)) 7px max(16px, env(safe-area-inset-left, 0px));
    font: 600 14.5px/1.3 var(--font-ui); letter-spacing: -0.012em; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: color-mix(in srgb, var(--surface-1) 88%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 1px 0 var(--card-border); opacity: 0; translate: 0 -6px; pointer-events: none;
    transition: opacity 180ms ease, translate 180ms ease;
  }
  .app-pinned.is-on { opacity: 1; translate: 0 0; }

  /* The page behind a sheet does not move (overflow: hidden alone does not hold on an iPhone) */
  .page-locked body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

  main.is-dragging { transition: none; }
  main.is-back { transition: translate 220ms cubic-bezier(.2,.8,.2,1); }

  .toast-container { left: 16px; right: 16px; bottom: var(--app-clear); align-items: stretch; }
  .ww-toast { bottom: var(--app-clear); }
  .footer-install { display: none; }
}

/* ---- Turning the page: the old page leaves on the gesture, the new one comes in from the side ---- */
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  main.page-sort { opacity: 0.55; pointer-events: none; transition: translate 280ms cubic-bezier(.4,0,.2,1), opacity 280ms ease; }
  main.page-sort.to-next { translate: -33% 0; }
  main.page-sort.to-back { translate: 33% 0; }
  html[data-turn="next"] main { animation: app-turn-next 400ms cubic-bezier(.16,1,.3,1) both; box-shadow: -18px 0 40px -18px rgba(0,0,0,0.55); }
  html[data-turn="back"] main { animation: app-turn-back 400ms cubic-bezier(.16,1,.3,1) both; box-shadow: 18px 0 40px -18px rgba(0,0,0,0.55); }
}
@keyframes app-turn-next { from { translate: 100% 0; } to { translate: 0 0; } }
@keyframes app-turn-back { from { translate: -100% 0; } to { translate: 0 0; } }

/* ---- Touch screens ---- */
@media (pointer: coarse) {
  /* Like an installed app: no pinch and no double-tap zoom. iOS ignores user-scalable=no but follows touch-action;
     a stricter value (the charts: pan-y) still wins */
  * { touch-action: pan-x pan-y; }
  a, button, summary, label, select, input, [role="button"], [role="tab"], [role="switch"] { -webkit-tap-highlight-color: transparent; }
  .btn, .home-seg, .acct-tabs, .theme-toggle, .pager, .app-row, .cap-link { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

  /* Under 16 px Safari zooms the page on focus and does not give it back */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) { font-size: 16px; }
  select, textarea { font-size: 16px !important; }
  .ww-champ-montant input.ww-champ { font-size: 26px !important; }
  .dl-amount-input input { font-size: 22px !important; }
  .acct-set .form-group .acct-set-label select { height: 44px; min-height: 44px; }
  .acct-set .form-group input, .acct-set .form-group select, .acct-addr input, .acct-addr select, .form-group input, .form-group select, .home-filter input, .dl-search { min-height: 44px; }
  .dl-search { width: 100%; }

  /* The keyboard is open: the capsule steps aside */
  .is-typing .app-capsule { opacity: 0; pointer-events: none; --cap-dy: 24px; }

  /* Targets of 44 px at least */
  .btn, .btn-sm, .btn-lg, .pager .btn, .home-cta .btn-lg, .acct-addr .btn, .dl-table .btn, .pay-head .home-filter .btn { min-height: 44px; }
  .command-output .copy-btn, .copy-field button, .dl-max { min-height: 44px; min-width: 56px; }
  .dl-max { display: inline-grid; place-items: center; }
  .dl-close, .ww-icone-btn, .acct-rig-remove { width: 44px; height: 44px; }
  .ww-btn, .ww-ligne, .ww-selecteur, .ww-puce-adresse, .ww-lien-deleg, .ww-coche { min-height: 44px; }
  .home-seg button { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
  .home-seg button, .theme-toggle, .data-table a, .home-cell-link .home-cell-more { position: relative; }
  /* Hit area larger than the drawing */
  .home-seg button::after { content: ""; position: absolute; inset: -6px -2px; }
  .theme-toggle::after { content: ""; position: absolute; inset: -9px -4px; }
  .data-table a::after { content: ""; position: absolute; inset: -14px -8px; }
  .site-header .logo { min-height: 44px; }
  #login a { display: inline-block; padding: 13px 0; }
  main p.small.dim > a { display: inline-block; margin: -9px 0; padding: 13px 4px; }
  .footer-links a, .footer-install { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .footer-discord, .page-close { width: 44px; height: 44px; }
  .dl-faq summary, details.fold > summary, .ww-aide-deleg summary { min-height: 44px; display: flex; align-items: center; }
  .toc a { display: inline-flex; align-items: center; min-height: 44px; }
  .os-card, .option-card { min-height: 44px; }
}

/* ---- No pointer hovering: a tap does not leave a hover state behind ---- */
@media (hover: none) {
  .home-card:hover, .home-strip:hover, .stat-card:hover, .chart-container:hover, .feature-card:hover, .live-box:hover, .option-card:hover, .compare-list li:hover {
    transform: none; box-shadow: var(--card-shadow);
  }
  .home-card::before, .home-strip::before, .stat-card::before, .card::before, .chart-container::before, .feature-card::before, .live-box::before, .option-card::before,
  .home-card::after, .home-strip::after, .stat-card::after, .card::after, .chart-container::after, .feature-card::after, .live-box::after, .option-card::after { display: none; }
  .btn-primary:hover, [data-theme="dark"] .btn-primary:hover { background-image: var(--btn-grad); background-size: 100% 100%; box-shadow: var(--btn-shadow); }
  .btn-secondary:hover, [data-theme="dark"] .btn-secondary:hover { background-image: var(--ctl-bg); background-size: 100% 100%; box-shadow: var(--ctl-shadow); }
  .home-seg button:hover, .acct-tabs button:hover, .home-cell-link:hover { background-color: transparent; box-shadow: none; }
  .home-seg button[aria-pressed="true"]:hover, .acct-tabs button[aria-selected="true"]:hover { background: var(--ctl-bg); box-shadow: var(--ctl-shadow); }
  .data-table tbody tr:hover td { background: none; }
  .form-group input:hover:not(:focus), .form-group select:hover:not(:focus), .form-group textarea:hover:not(:focus),
  .acct-addr input:hover:not(:focus), .acct-addr select:hover:not(:focus), .home-filter input:hover:not(:focus) { border-color: var(--card-border-strong); }
  .ww-champ:hover:not(:focus) { border-color: var(--ww-ligne); box-shadow: none; }
}

/* ---- Sheets already on the site: they stop at the safe areas, the page behind stays still ---- */
dialog.ww-feuille, dialog.dl-sheet { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px); overscroll-behavior: contain; }
.dl-sheet-body { overscroll-behavior: contain; padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)); }

/* ---- Phones ---- */
@media (max-width: 720px) {
  /* The rule "every button full width" stops where a button sits next to something */
  .pager .btn, .home-filter .btn, .acct-head .btn, .home-chart-head .btn, .dl-walletbar .btn, .acct-set-actions .btn, .row .btn-ghost { width: auto; }

  /* Home: the logo is already in the bar; the figures come first */
  .home-hero { padding: 12px 0 10px; }
  .home-wordmark { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .home-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .home-cta .fee-pill { grid-column: 1 / -1; justify-self: center; }
  .home-cta .btn-lg { width: 100%; min-height: 46px; padding: 0 8px; }

  /* The pool figures live on the Pool tab; the other tabs open on their list */
  body:not([data-page="index"]) #board .home-grid { display: none; }
  body:not([data-page="index"]) #board .home-strip { margin-top: 0; }
  .home-board.page-top { padding-top: 12px; }
  .home-strip { border-radius: 16px; }
  .home-cell { min-height: 40px; }
  .home-card { border-radius: 16px; }

  /* Lists: one card per line, nothing dropped. The label sits above its value */
  .home-card.home-list { padding: 0; }
  .home-list .table-wrap, .acct-block .table-wrap { overflow: visible; }
  .data-table:not(.pay-table) { display: block; width: 100%; }
  .data-table:not(.pay-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data-table:not(.pay-table) tbody { display: block; }
  .data-table:not(.pay-table) tbody tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px 10px; padding: 12px 14px; border-top: 1px solid var(--card-border); }
  .data-table:not(.pay-table) tbody tr:nth-child(even) { background: color-mix(in srgb, var(--text-1) 2.5%, transparent); }
  .data-table:not(.pay-table) tbody tr td, .data-table:not(.pay-table) tbody tr:nth-child(even) td, .data-table:not(.pay-table) tbody tr:hover td, .home-list .data-table:not(.pay-table) td {
    display: block; min-width: 0; padding: 0; border: 0; background: none; white-space: normal; text-align: left; overflow-wrap: anywhere;
  }
  .data-table:not(.pay-table) td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font: 450 11.5px/1.3 var(--font-ui); letter-spacing: 0; color: var(--text-3); }
  .data-table td.empty { grid-column: 1 / -1; padding: 22px 8px; text-align: center; }
  .data-table td.empty::before { content: none; }
  .data-table:not(.pay-table) td.right.mono, .data-table:not(.pay-table) td.mono { font-size: 13.5px; }
  .data-table .addr, .data-table a.mono { font-size: 12.5px; }
  .data-table time { white-space: nowrap; }
  .home-list > .home-title, .acct-list-head { padding: 12px 14px 10px; }
  .home-list > .pager { padding: 10px 14px; border-top: 1px solid var(--card-border); }
  .pager { justify-content: space-between; flex-wrap: nowrap; }
  .home-list > .pager:empty { display: none; }
  .home-filter { align-items: stretch; }
  .pay-head { padding: 12px 14px 10px; }
  .pay-head .home-filter { min-width: 0; width: 100%; }
  .data-table.pay-table tbody tr { padding-left: 14px; padding-right: 14px; }
  .home-filter input { min-width: 0; }
  .home-filter .btn { flex: none; min-width: 0; padding: 0 14px; }

  /* Blocks: slot and status, then the three figures, then when and who */
  .tbl-blocks td { grid-column: span 2; }
  .tbl-blocks td:nth-child(1) { grid-column: span 3; font-size: 16px; font-weight: 600; }
  .tbl-blocks td:nth-child(1)::before, .tbl-blocks td:nth-child(2)::before { content: none !important; }
  .tbl-blocks td:nth-child(2) { grid-column: span 3; justify-self: end; align-self: center; }
  .tbl-blocks td:nth-child(4) { order: 1; }
  .tbl-blocks td:nth-child(3) { order: 2; }
  .tbl-blocks td:nth-child(5) { order: 3; }
  .tbl-blocks td:nth-child(6) { order: 4; grid-column: span 3; }
  .tbl-blocks td:nth-child(6)::before { content: none !important; }
  .tbl-blocks td:nth-child(6) time { font-size: 12.5px; }
  .tbl-blocks td:nth-child(7) { order: 5; grid-column: span 3; justify-self: end; white-space: nowrap !important; text-align: right !important; }
  .tbl-blocks td:nth-child(7)::before { content: "by" !important; display: inline !important; margin-right: 5px; }

  /* Miners: rank and address, then four figures */
  .data-table.tbl-miners tbody tr { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 9px 8px; }
  .data-table.tbl-miners tbody tr td { overflow-wrap: normal; }
  .tbl-miners td:nth-child(1) { align-self: center; font-size: 15px; font-weight: 600; }
  .tbl-miners td:nth-child(2) { grid-column: 2 / -1; align-self: center; }
  .tbl-miners td:nth-child(1)::before, .tbl-miners td:nth-child(2)::before { content: none !important; }

  /* My workers: name and state, then figures */
  .tbl-workers td { grid-column: span 2; }
  .tbl-workers td:nth-child(1) { grid-column: span 3; font-size: 15px; font-weight: 600; color: var(--text-1); align-self: center; }
  .tbl-workers td:nth-child(2) { grid-column: span 3; justify-self: end; align-self: center; }
  .tbl-workers td:nth-child(1)::before, .tbl-workers td:nth-child(2)::before { content: none !important; }
  .tbl-workers td:nth-child(3), .tbl-workers td:nth-child(4), .tbl-workers td:nth-child(9) { order: 1; }
  .tbl-workers td:nth-child(5), .tbl-workers td:nth-child(6), .tbl-workers td:nth-child(7) { order: 2; }
  .tbl-workers td.acct-platform { order: 3; grid-column: 1 / -1; min-width: 0; max-width: none; }
  .tbl-workers td:nth-child(10) { order: 4; grid-column: 1 / -1; justify-self: end; }
  .tbl-workers td:nth-child(10):empty { display: none; }

  /* Payouts: amount and state, then the rest */
  .tbl-payouts td { grid-column: span 3; }
  .tbl-payouts td:nth-child(3) { grid-column: 1 / -1; }
  .tbl-payouts td:nth-child(2) { order: -2; grid-column: span 3; font-size: 15px !important; font-weight: 600; align-self: center; }
  .tbl-payouts td:nth-child(4) { order: -1; grid-column: span 3; justify-self: end; align-self: center; }
  .tbl-payouts td:nth-child(2)::before, .tbl-payouts td:nth-child(4)::before { content: none !important; }
  .acct-tiles-5 .acct-tile:last-child { grid-column: 1 / -1; }
  #login.container-narrow { padding-left: 0; padding-right: 0; }
  .acct-head { gap: 8px 10px; }
  .acct-head #logout, .acct-head #signIn { flex: none; }

  /* Delegation: tighter cards, the unit stays next to its figure */
  .dl-table tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 14px; }
  .dl-table td { display: block; grid-column: span 2; }
  .dl-table td.dl-namecell, .dl-table td.dl-action { grid-column: 1 / -1; }
  .dl-table td::before { display: block; }
  .dl-table .data-table tbody tr td.dl-namecell { display: flex; flex-direction: row; }
  .dl-table .data-table tbody tr td.dl-rank { display: none; }
  .dl-table .data-table td.dl-namecell::before, .dl-table .data-table td.dl-action::before { content: none; }
  .dl-listhead { padding: 0 2px; }
  .dl-card { padding: 12px 0 2px; }
  .dl-card > * { margin-left: 14px; margin-right: 14px; }
  .dl-card > .table-wrap { margin-left: 0; margin-right: 0; }
  .dl-card > .dl-more { width: calc(100% - 28px); margin-bottom: 12px; }
  .dl-search { flex: 1 1 100%; }

  /* My wallet: an app screen, no footer under it */
  body[data-page="wallet"] { padding-bottom: 0; }
  body[data-page="wallet"] .site-footer { display: none; }
  .ww { min-height: calc(100dvh - var(--app-top)); }
  .ww-app { padding-bottom: var(--app-clear); }
  .ww-hero { padding-top: 5vh; }

  .site-footer { margin-top: 0; padding: 14px 0 6px; }
  .footer-row { gap: 6px 22px; }
  .footer-links { gap: 18px; }
}

@media (max-width: 360px) {
  .home-value { font-size: 19px; }
  .home-metric + .home-metric { padding-left: 10px; }
  .home-cell { padding: 7px 12px; }
  .tbl-miners td { font-size: 12.5px; }
}

/* An installed app on a tablet or a large phone in landscape: clear of the notch */
@media (max-width: 1100px) and (orientation: landscape) {
  .ww-app { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

@media print {
  .app-capsule, .app-pinned { display: none !important; }
  body { padding: 0; }
  .site-header { position: static; }
}