/* Desktop redesign, 22 Oct 2026. Every rule in this file sits inside the desktop media query below.
   Owner comps: scratch-tmp/desktop-2026-10-22/. Phone and tablet keep what they have.

   DECKS (comp 7-decks.png). The page shell scales everything by html zoom (1.0477 at 1733px), so the sizes here are the
   comp's pixels divided by that. Rows are drawn as a five-column grid: type tile, name and type, price and facts, three
   dots, open button. Icons are masks so the row keeps its markup and the phone keeps its own icons. */
@media (min-width:768px){

  /* -------------------------------------------------------------------------------------------- page head */
  html body #view:has(.deck-toolbar)>:is(.head,.deck-toolbar,.deck-list){max-width:1296px!important}
  html body #view:has(.deck-toolbar)>.head{margin-bottom:19px!important}
  html body #view:has(.deck-toolbar)>.head h1{font-size:46px!important;letter-spacing:-.04em!important;font-weight:650!important;line-height:1!important}
  html body #view:has(.deck-toolbar)>.head .tools>.solid[data-zone="new"]{display:inline-flex;align-items:center;gap:15px;min-height:45px!important;padding:0 33px!important;border-radius:9px;font-size:16.5px!important;font-weight:600;letter-spacing:-.01em}
  html body #view:has(.deck-toolbar)>.head .tools>.solid[data-zone="new"]::before{content:"";flex:none;width:19px;height:19px;background:currentColor;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="M12 4v16M4 12h16"/></svg>') center/contain no-repeat;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="M12 4v16M4 12h16"/></svg>') center/contain no-repeat}

  /* -------------------------------------------------------------------------------------------- toolbar */
  html body #view .deck-toolbar{align-items:center;margin-bottom:26px}
  /* The filter keeps its word. 22 Oct 2026: the comp drew a sliders icon and two chevrons with no text, and that was
     built literally, so one control read as two and neither said what it filtered. The owner flagged it. The sliders
     icon stays, the label comes back, and the decorative second chevron is gone. His Redesigner comp labels its
     Filters button, so the labelled form is the one that matches the rest of the work. */
  html body #view .deck-toolbar>.pf>.pf-btn{min-height:51px;padding:0 18px;gap:12px;border-radius:10px;background:var(--card);justify-content:center}
  html body #view .deck-toolbar>.pf>.pf-btn>span{font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
  html body #view .deck-toolbar>.pf>.pf-btn>svg:first-child{display:none}
  html body #view .deck-toolbar>.pf>.pf-btn::before{content:"";flex:none;width:26px;height:26px;margin:0 -3px;background:currentColor;color:var(--ink-2);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round"><path d="M3 6h2.6M10.4 6H21M3 12h8.6M16.4 12H21M3 18h4.6M12.4 18H21"/><circle cx="8" cy="6" r="2.1"/><circle cx="14" cy="12" r="2.1"/><circle cx="10" cy="18" r="2.1"/></svg>') center/contain no-repeat;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round"><path d="M3 6h2.6M10.4 6H21M3 12h8.6M16.4 12H21M3 18h4.6M12.4 18H21"/><circle cx="8" cy="6" r="2.1"/><circle cx="14" cy="12" r="2.1"/><circle cx="10" cy="18" r="2.1"/></svg>') center/contain no-repeat}
  html body #view .deck-toolbar>.pf>.pf-btn>.pf-caret{order:2;width:13px;height:13px;margin:0;opacity:.8;color:var(--ink-2)}
  html body #view .deck-toolbar>.pf>.pf-btn>.pf-count{order:1}
  html body #view .deck-toolbar>.search{flex:0 1 419px;width:419px;min-width:0!important;min-height:51px!important;height:51px;padding:0 20px!important;gap:17px;align-items:center;border-radius:10px;background:var(--card)}
  html[data-theme] body #view .deck-toolbar>.search{background:var(--card)!important}
  html body #view .deck-toolbar>.search>svg{flex:none;width:21px;height:21px;color:var(--ink-2)}
  html body #view .deck-toolbar>.search input{font-size:17px!important;min-height:0;padding:0}
  html[data-theme] body #view .deck-toolbar>.search input{background:transparent!important}

  /* -------------------------------------------------------------------------------------------- the rows */
  /* Owner, 23 Oct 2026, "also lower the size": the list sat at a 124px row and read as four big cards rather than a list she scans.
     Everything below is the same layout scaled down about a fifth. The two controls do NOT scale past the 44px tap floor (r144):
     the dots button keeps its 42px and the open arrow comes down to exactly 44, not below. */
  html body #view .deck-row{display:grid!important;grid-template-columns:44px minmax(0,1.9fr) minmax(0,1fr) 62px 44px!important;grid-template-rows:1fr auto auto 1fr!important;column-gap:0!important;row-gap:0!important;
    align-items:center;min-height:96px!important;padding:0 16px 0 20px!important;border-radius:10px!important;text-align:left;background:var(--card)!important}
  html body #view .deck-row:hover{padding-left:20px!important;padding-right:16px!important;background:var(--card)!important}

  html body #view .deck-row>.deck-tile{display:grid;grid-column:1;grid-row:1/span 4;align-self:start;margin-top:16px;place-items:center;width:44px;height:44px;border-radius:11px;
    background:color-mix(in srgb,var(--sig) 13%,var(--card))!important;color:var(--sig)!important}
  html body #view .deck-row>.deck-tile>svg{display:none}
  html body #view .deck-row>.deck-tile::before{content:"";width:21px;height:21px;background:currentColor;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linejoin="round" stroke-linecap="round"><rect x="4" y="3" width="13" height="16" rx="1"/><path d="M7.5 8h6M7.5 11h6M7.5 14h6"/><path d="M20 7.5V21H7.5"/></svg>') center/contain no-repeat;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linejoin="round" stroke-linecap="round"><rect x="4" y="3" width="13" height="16" rx="1"/><path d="M7.5 8h6M7.5 11h6M7.5 14h6"/><path d="M20 7.5V21H7.5"/></svg>') center/contain no-repeat}

  html body #view .deck-row>.deck-main{display:contents}
  html body #view .deck-row .deck-main>b{grid-column:2;grid-row:2;margin-left:19px;display:block;font-size:17px!important;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
  html body #view .deck-row .deck-main>small{grid-column:2;grid-row:3;margin:2px 0 0 19px!important;font-size:13.5px!important;font-weight:400;line-height:1.3;color:var(--ink-3)}
  html body #view .deck-row .deal-chip{display:inline-block;margin-left:7px;vertical-align:middle;padding:3px 8px;border:1px solid color-mix(in srgb,var(--sig) 45%,transparent);border-radius:8px;
    background:color-mix(in srgb,var(--sig) 10%,var(--card));color:var(--sig);font-size:13px!important;font-weight:600;letter-spacing:.04em;line-height:1.3;text-transform:uppercase;position:relative;top:-1px}

  html body #view .deck-row .deck-main>.deck-meta{grid-column:3;grid-row:2/span 2;display:grid;gap:7px;margin:0!important;font-size:13.5px!important;color:var(--ink-2)}
  html body #view .deck-row .deck-meta>.deck-price{font-size:20.5px;font-weight:500;line-height:1.2;letter-spacing:-.015em;color:var(--sig)}
  html[data-theme="light"] body #view .deck-row .deck-meta>.deck-price{color:#163b29}
  html body #view .deck-row .deck-price .deck-per{font-size:16px;font-weight:400;letter-spacing:0;color:var(--ink-3);word-spacing:-.27em;margin-left:8px}
  html body #view .deck-row .deck-meta>.deck-meta-sep{display:none}
  html body #view .deck-row .deck-meta>.deck-meta-rest{display:flex;align-items:center;white-space:nowrap;color:var(--ink-3)}
  html body #view .deck-row .deck-meta-rest>i{flex:none;width:3px;height:3px;margin:0 14px;border-radius:50%;background:currentColor;font-size:0;font-style:normal}
  html body #view .deck-row :is(.deck-live,.deck-saved){display:inline-flex;align-items:center;gap:10px}
  html body #view .deck-row :is(.deck-live,.deck-saved)::before{content:"";flex:none;width:17px;height:17px;background:var(--ink-2);
    -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
  html body #view .deck-row .deck-live{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></svg>')}
  html body #view .deck-row .deck-saved{--ico:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h12v18l-6-4.5L6 21z"/></svg>')}

  html body #view .deck-row>.deck-dots{display:grid;grid-column:4;grid-row:1/span 4;place-items:center;justify-self:start;width:42px;height:42px;align-self:center;cursor:pointer;border-radius:10px;color:var(--ink);transition:background .16s ease}
  html body #view .deck-row>.deck-dots:hover,html body #view .deck-row>.deck-dots[aria-expanded="true"]{background:var(--card-2,var(--paper))}
  html body #view .deck-row>.deck-dots:focus-visible{outline:2px solid var(--sig);outline-offset:1px}
  html body #view .deck-row>.arw{grid-column:5;grid-row:1/span 4;display:grid;place-items:center;width:44px;height:44px;font-size:0;color:var(--ink);
    border:1px solid var(--card-edge);border-radius:10px;background:var(--card-2,var(--card));transition:border-color .16s ease,background .16s ease}
  html body #view .deck-row>.arw::before{content:"";width:23px;height:23px;background:currentColor;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18 18 6M8.5 6H18v9.5"/></svg>') center/contain no-repeat;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18 18 6M8.5 6H18v9.5"/></svg>') center/contain no-repeat}
  html[data-basis-motion] body #view .deck-row:hover>.arw{transform:none}
  html body #view .deck-row:hover>.arw{border-color:var(--card-edge-strong,var(--card-edge))}

  /* -------------------------------------------------------------------------------------------- narrow desktop
     Under about 960px the price and facts no longer fit beside the name: they drop beneath it. */
  @media (max-width:960px){
    html body #view .deck-row{grid-template-columns:44px minmax(0,1fr) 62px 44px!important;grid-template-rows:1fr auto auto auto 1fr!important}
    html body #view .deck-row>.deck-tile,html body #view .deck-row>.deck-dots,html body #view .deck-row>.arw{grid-row:1/span 5}
    html body #view .deck-row>.deck-dots{grid-column:3}
    html body #view .deck-row>.arw{grid-column:4}
    html body #view .deck-row .deck-main>.deck-meta{grid-column:2;grid-row:4;margin:8px 0 0 19px!important}
    html body #view .deck-row .deck-main>b{padding-right:12px}
    html body #view .deck-row{padding-top:6px!important;padding-bottom:6px!important}
  }

  /* -------------------------------------------------------------------------------------------- three-dot menu */
  html body #view .deck-list{position:relative}
  html body #view .deck-menu{position:absolute;z-index:20;min-width:178px;padding:6px;display:grid;gap:2px;border:1px solid var(--card-edge);border-radius:12px;background:var(--card);
    box-shadow:0 12px 30px rgba(20,32,26,.16)}
  html body #view .deck-menu>button{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
  html body #view .deck-menu>button:hover,html body #view .deck-menu>button:focus-visible{background:var(--card-2,var(--paper));outline:none}
}