/* Phone view (D56, #90), on top of petrades.css, loaded on every page; every rule applies to narrow screens (phones
   held upright) or to touch screens. One HTML for all screens: the same blocks, arranged for the thumb – compact
   header, tab bar at the bottom, filters behind a button, listings as cards. The desktop view of the settings (D58) sets
   a wide layout viewport, then only the touch rules apply. */

/* Teleport: phones held upright have none (cards without the tp column, Map and Share at the bottom - the rules up to
   640 px below). Tablets and wider touch screens show it like a computer again (quickfix 21.10.2026, D56): the page
   looks the same, and a Second Life app on the device may open secondlife:// links. */

@media (max-width: 640px) {
  :root { --gutter: 12px; --tabbar: 60px; --card-radius: 12px; }
  body { font-size: 16px; padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; }
  .inner, .page { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  input, select, textarea, button { font-size: 16px; } /* smaller fields make iOS zoom in */
  .detail .actions .teleport { display: none; }
  .detail .actions .map { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }

  /* ---------------------------------------------------------------- header and tab bar */
  .top { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top); }
  .top .head { display: flex; justify-content: center; overflow: hidden; } /* the logo a bit larger: the black sides are cut */
  .top .head img { flex: none; width: min(calc(100vw + 60px), 480px); max-width: none; height: auto; }
  .menu { display: none; }
  .tabbar {
    display: flex;
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    border-top: 1px solid #222;
    padding: 3px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
  }
  .tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 54px;
    padding: 5px 0 6px;
    color: #b8b8b8;
    font-size: 12px;
    letter-spacing: .02em;
    text-decoration: none;
  }
  .tabbar svg { width: 24px; height: 24px; padding: 3px 16px; box-sizing: content-box; border-radius: 999px; transition: background .15s; }
  .tabbar a.active { color: #fff; font-weight: 600; }
  .tabbar a.active svg { background: var(--accent); color: var(--on-accent); }
  .tabbar a:not(.active):active svg { background: #2a2a2a; }

  /* ---------------------------------------------------------------- breeds: one row to swipe */
  .breeds {
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 8px;
    margin: 10px calc(-1 * var(--gutter)) 2px;
    padding: 2px 28px 8px var(--gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  }
  .breeds::-webkit-scrollbar { display: none; }
  .breeds a { padding: 8px 15px; font-size: 15px; }

  .news { margin: 8px 0; padding: 8px 12px; font-size: 14px; border-radius: var(--card-radius); }

  /* ---------------------------------------------------------------- search: one row with field, search and "Filters (n)" */
  .search {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px;
    text-align: left;
    font-size: 15px;
    border-radius: var(--card-radius);
  }
  .search .row.main { display: contents; }
  .search input[type=search] { grid-column: 1; grid-row: 1; width: 100%; max-width: none; height: 44px; padding: 0 12px; border-radius: 10px; }
  .search .row.main button { grid-column: 2; grid-row: 1; width: 46px; height: 44px; padding: 0; border-radius: 10px; font-size: 0; }
  .search .row.main button::before {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    margin: auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .search .row.main .button { display: none; } /* reset: in the filter panel */
  .search .filters { grid-column: 3; grid-row: 1; }
  .search .filters > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #c8c8c8;
    border-radius: 10px;
    background: #f3f3f3;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .search .filters > summary::-webkit-details-marker { display: none; }
  .search .filters > summary::after { content: "\25BE"; color: var(--muted); }
  .search .filters[open] > summary { background: #e6e6e6; }
  .search .filters[open] > summary::after { content: "\25B4"; }
  .search .filters > summary .n { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 13px; text-align: center; }
  /* the open filters lie over the list like a sheet */
  .search .filters .panel {
    position: absolute;
    z-index: 25;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    padding: 2px 12px 12px;
    background: var(--card);
    border-radius: var(--card-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2), 0 0 0 1px var(--line);
  }
  .search .filters .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
  .search .filters label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 13px; border: 1px solid #cfcfcf; border-radius: 999px; background: #fff; white-space: nowrap; cursor: pointer; }
  .search .filters label:has(select) { padding: 3px 4px 3px 13px; }
  .search .filters select { padding: 5px 8px; border-radius: 8px; }
  .search .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 12px 0 0; padding-top: 10px; font-size: 13px; line-height: 1.6; text-align: left; }
  .search .legend .item { margin: 0; white-space: normal; }
  .search .apply { display: flex; gap: 8px; margin: 14px 0 0; }
  .search .apply .button { flex: 1; padding: 11px; border-radius: 10px; text-align: center; }
  .search .apply button { flex: 2; padding: 11px; border-radius: 10px; }
  /* search bar (#101): same blocks, in the sheet; legend (#98) as a sheet from below */
  .sb .row.main input[type=search] { padding: 0 12px; border-radius: 10px; }
  .sb .sb-row { gap: 8px; margin: 12px 0 0; }
  .sb-block { gap: 8px; }
  .sb-more { margin: 12px 0 0; }
  .sb-more > summary { padding: 6px 0; font-size: 15px; }
  .sb-active { margin: 0 2px 8px; font-size: 14px; }
  .sb-active .chip { padding: 6px 12px; }
  .results-row .sb-sort { font-size: 14px; }
  .legend-panel { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(var(--tabbar) + 10px + env(safe-area-inset-bottom)); width: auto; max-height: 65vh; columns: 1; font-size: 15px; }

  /* top sellers (#135): the label small above, the three places side by side under it */
  .tops { margin: 8px 0; padding: 2px 12px; font-size: 14px; border-radius: var(--card-radius); }
  .tops-grid, .tops-grid tbody { display: block; }
  .tops-grid tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tops-grid th { grid-column: 1 / -1; width: auto; padding: 8px 0 1px; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
  .tops-grid td { border-left: 0; }
  .tops-grid tr + tr > td { border-top: 0; }
  .tops-grid td.none { padding: 3px 0 8px; }
  .tops-grid td[colspan] { grid-column: 1 / -1; }
  .tops-grid a { gap: 4px; padding: 3px 6px 8px 0; }
  .tops .n { min-width: 0; padding: 0 5px; }

  .results { font-size: 13px; }
  .results .where { display: none; } /* one row with "Save search" and "Share" */
  .results-row { margin: 10px 2px 8px; }
  .list-actions { font-size: 14px; }
  .list-actions .button { padding: 7px 12px; border-radius: 10px; }
  .list-actions .copy { display: none; } /* phones: the share menu instead */
  .list-actions .share { display: inline-block; }
  .save-search .pop { width: calc(100vw - 2 * var(--gutter) - 4px); max-width: none; padding: 14px; border-radius: var(--card-radius); font-size: 15px; }
  .save-search .pop button { width: 100%; margin-top: 4px; padding: 11px; border-radius: 10px; }
  .save-search .pop input[type=text] { height: 44px; padding: 0 12px; border-radius: 10px; }

  /* saved searches: one row to swipe */
  .saved {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 8px;
    margin: 8px calc(-1 * var(--gutter));
    padding: 2px 28px 6px var(--gutter);
    font-size: 15px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  }
  .saved::-webkit-scrollbar { display: none; }
  .saved a { padding: 8px 14px; }
  .saved-note:target { bottom: calc(var(--tabbar) + 14px + env(safe-area-inset-bottom)); font-size: 14px; }

  /* ---------------------------------------------------------------- listings as cards (list, "More from", auctions) */
  table.list.cards, table.list.cards tbody { display: block; width: 100%; background: none; box-shadow: none; border-radius: 0; }
  table.list.cards thead { display: none; }
  table.list.cards tr {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "title title title price" "status owner region region";
    align-items: baseline;
    margin: 0 0 8px;
    padding: 10px 12px 9px;
    background: var(--card);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow);
  }
  table.list.cards tr:active { background: var(--row-hover); }
  table.list.cards tbody tr:nth-child(n) td, table.list.cards tbody tr:hover td { background: transparent; }
  table.list.cards td.title, table.list.cards td.status, table.list.cards td.price, table.list.cards td.owner, table.list.cards td.region, table.list.cards td.img {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    font-size: 13.5px;
  }
  table.list.cards td.title { grid-area: title; padding-right: 10px; font-size: 15.5px; line-height: 1.3; }
  table.list.cards td.title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--card-radius); } /* the whole card opens the pet */
  table.list.cards td.title br { display: none; }
  table.list.cards td.title .sub { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
  table.list.cards td.title .auc-note { display: block; margin-top: 3px; font-size: 13px; } /* its own line, may wrap (#136) */
  table.list.cards td.price { grid-area: price; font-size: 15px; line-height: 1.3; text-align: right; }
  table.list.cards td.price .none { display: none; } /* the cards show no dash for an empty price (#111: cards unchanged) */
  table.list.cards td.status { grid-area: status; margin-top: 7px; text-align: left; white-space: nowrap; }
  table.list.cards td.owner { grid-area: owner; max-width: 42vw; }
  table.list.cards td.region { grid-area: region; }
  table.list.cards td.owner, table.list.cards td.region { margin-top: 7px; overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
  table.list.cards td.owner a, table.list.cards td.region a { color: inherit; pointer-events: none; }
  table.list.cards td.owner::before, table.list.cards td.region::before { content: "\00B7"; margin: 0 6px; }
  table.list.cards td.status:not(:has(span[title])) ~ td.owner::before { content: none; } /* only the "i" */
  /* quick facts (#135): the status line takes the tap, not the card behind it; the "i" always shows */
  table.list.cards td.status .peek-open { position: relative; z-index: 1; display: inline-block; width: auto; margin: -8px 0; padding: 8px 8px 8px 0; }
  table.list.cards .peek-i { opacity: 1; }
  table.list.cards td.tp { display: none; }
  table.list.cards td.empty { display: block; grid-column: 1 / -1; padding: 6px 0; text-align: center; }
  table.list.cards tr.auction { background: var(--auction); box-shadow: inset 4px 0 0 #d33, var(--shadow); }
  table.list.cards tr.auction td:first-child { box-shadow: none; }
  /* with pictures ("Images"): picture on the left */
  table.list.cards.with-img tr { grid-template-columns: 90px auto auto minmax(0, 1fr) auto; grid-template-areas: "img title title title price" "img status owner region region"; }
  table.list.cards td.img { grid-area: img; align-self: start; padding-right: 10px; }
  table.list.cards td.img img { display: block; width: 80px; height: auto; border-radius: 8px; }
  /* auctions: high bid on top, time left below */
  table.list.cards.auctions tr { grid-template-areas: "title title title price" "status owner owner ending"; }
  table.list.cards.auctions td.price.ending { grid-area: ending; margin-top: 7px; font-size: 13.5px; font-weight: 400; }

  .pages { gap: 6px; margin: 16px 0 6px; font-size: 15px; }
  .pages a, .pages span { min-width: 44px; padding: 10px 6px; border-radius: 10px; }
  .pages .gap { min-width: 0; padding: 10px 0; }

  /* ---------------------------------------------------------------- detail page */
  .crumbs { margin: 10px 2px 6px; font-size: 15px; }
  .detail { padding: 14px 14px 16px; border-radius: var(--card-radius); }
  .detail .title-row .copy { display: none; } /* "Share" in the bar at the bottom */
  .detail h1 { font-size: 1.35em; }
  .detail .facts { flex-direction: column; gap: 14px; }
  .detail .picture img { width: 100%; max-width: 420px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
  .detail .data-col { width: 100%; }
  .detail table.data { width: 100%; font-size: 15px; }
  .detail table.data th { width: 40%; padding-right: 12px; white-space: normal; }
  .detail .actions {
    position: fixed;
    z-index: 35;
    left: 0;
    right: 0;
    bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -1px 0 var(--line), 0 -6px 14px rgba(0, 0, 0, .06);
  }
  .detail .actions .button { flex: 1; padding: 11px 10px; border-radius: 10px; font-size: 16px; text-align: center; }
  .detail .actions .share { display: inline-block; }
  body:has(.detail .actions) { padding-bottom: calc(var(--tabbar) + 64px + env(safe-area-inset-bottom)); }
  .detail .texts { flex-direction: column; gap: 10px; }
  .detail .texts section { padding: 10px 12px; font-size: 15px; border-radius: 10px; }
  .detail .texts summary { display: flex; justify-content: space-between; align-items: center; min-height: 32px; cursor: pointer; pointer-events: auto; }
  .detail .texts summary::after { content: "\25BE"; color: var(--muted); }
  .detail .texts details[open] summary::after { content: "\25B4"; }
  .detail .texts h2 { margin: 0; font-size: 1em; }
  .detail .texts p { margin: 8px 0 2px; }
  .detail .auction { font-size: 15px; }
  .detail table.bids { width: 100%; font-size: 14px; }
  .detail table.bids th, .detail table.bids td { padding: 6px; }
  .more h2 { margin-top: 18px; }

  /* ---------------------------------------------------------------- text pages */
  .content { padding: 4px 16px 14px; font-size: 15px; border-radius: var(--card-radius); }
  .content .intro { flex-direction: column; gap: 6px; }
  .content .intro img { width: 62%; max-width: 256px; height: auto; margin: 0 auto; }
  .content details { padding: 12px 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 6px 28px 0 16px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding: 10px 14px; white-space: nowrap; }
  table.pricing thead { display: none; } /* About → Pricing as cards (#99) */
  table.pricing, table.pricing tbody, table.pricing tr, table.pricing td { display: block; }
  table.pricing tr { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  table.pricing td, table.pricing:not(.premium) td + td, table.pricing.premium td:last-child, table.pricing.premium td:first-child { padding: 2px 0; border: 0; white-space: normal; }
  table.pricing td:first-child { font-weight: 600; }
  table.pricing td + td::before { content: attr(data-label) ": "; color: var(--muted); }
  .vision .v-hero { padding: 20px 18px 22px; } /* About → Vision (#80): steps and cards one below the other */
  .vision .v-lead { font-size: 1.35em; }
  .vision .v-values, .vision .v-flow, .vision .v-road { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .vision .v-flow li, .vision .v-road li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; }
  .vision .v-flow .v-icon, .vision .v-road .v-icon { grid-row: span 2; margin-bottom: 0; }
  .vision .v-flow li:not(:last-child)::after { top: 50px; bottom: -10px; left: 21px; right: auto; border-top: 0; border-left: 2px dotted rgba(255, 255, 255, .3); }
  .vision .v-road li::after { top: 50px; bottom: -10px; left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(color-mix(in srgb, var(--accent) 45%, #fff), transparent); }
  .vision .v-time li { grid-template-columns: 52px minmax(0, 1fr); gap: 0 12px; }
  .vision .v-time li::before { left: 25px; }
  /* the customer's account (#117): history and costs per pet as cards, the small tables stay tables */
  table.acct.history thead, table.acct.pets thead { display: none; }
  table.acct.history, table.acct.history tbody, table.acct.history tr, table.acct.history td, table.acct.pets, table.acct.pets tbody, table.acct.pets tr, table.acct.pets td { display: block; }
  table.acct.history tr, table.acct.pets tr { margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  table.acct.history td, table.acct.pets td { padding: 2px 0; border: 0; text-align: left; }
  table.acct.history td[data-label]::before, table.acct.pets td[data-label]::before { content: attr(data-label) " "; color: var(--muted); }
  table.acct.history td:empty, table.acct.pets td:empty { display: none; }
  table.acct th, table.acct td { padding: 5px 6px; }
  .acct-chart text { font-size: 22px; }
  .acct-filter .csv { margin-left: 0; }
  .feedback { padding: 12px; }
  .settings .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .settings .choices.wide { grid-template-columns: 1fr; }
  .settings .choices label { display: block; padding: 9px 0; border-bottom: 1px solid #f0f0ee; }
  .settings .choices .hint { display: block; margin: 2px 0 0 26px; }
  .settings .mini { display: none; } /* the layouts only work from 1200 px: no miniatures on phones (#95) */
  .settings .layouts { display: block; }
  .settings .layout-choice { display: block; padding: 9px 0; border-bottom: 1px solid #f0f0ee; }
  .settings .layout-choice .hint { display: block; margin: 2px 0 0 26px; }
  .settings input[type=radio], .settings input[type=checkbox] { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px; }
  .settings .saved-row { padding: 6px 0; border-bottom: 1px solid #f0f0ee; }
  .settings .saved-row input[type=text] { flex-basis: 100%; max-width: none; height: 44px; padding: 0 12px; border-radius: 10px; }
  .settings .apply .button, .settings .apply button { flex: 1; padding: 11px; border-radius: 10px; text-align: center; }
  .settings .cookie-info .button { padding: 10px 14px; border-radius: 10px; }

  .foot { margin-top: 18px; }
  .foot .inner { flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding-top: 14px; padding-bottom: 14px; }
}

/* the chips of the filters: the box itself is hidden, the whole chip shows the state (browsers with :has only) */
@supports selector(:has(*)) {
  @media (max-width: 640px) {
    .search .filters label:has(input[type=checkbox]) { position: relative; }
    .search .filters label input[type=checkbox] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
    .search .filters label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
    .search .filters label:has(:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
  }
}