/* f604 PC vs phone polish (Will, Oct 23: 'We need to make sure PC version is optimized for PC and mobile is optimized for phones').
   html.pcf = a mouse / trackpad screen (matchMedia '(hover: hover) and (pointer: fine)', set in index.html before first paint; live on change).
   Everything here is :where() = zero specificity, so any rule a page already has (its own cursor, outline, size) still wins. */
/* PC: everything you can click shows the hand cursor (Chrome / Safari give <button>, <summary>, <select> and labels an arrow) */
:where(html.pcf) :where(button, [role=button], [role=tab], [role=radio], [role=option], [role=menuitem], summary, select, label[for], input[type=checkbox], input[type=radio], input[type=range], input[type=color], input[type=file]):where(:not(:disabled, [aria-disabled=true])){cursor:pointer}
/* PC keyboard users: a visible focus ring on anything focusable that has none of its own (only on keyboard focus, never on a click) */
:where(html.pcf) :where(a[href], button, [role=button], [role=tab], summary, select, [tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid #8b6cff;outline-offset:2px}
/* PC hover feedback on the region postcards (phones keep the press scale) */
:where(html.pcf) .rg-pc:hover:not(.on){transform:translateY(-3px);box-shadow:0 8px 18px #0003,0 0 0 1.5px var(--surf-line,#0002)}
/* PC (900px+) layouts that were a phone column in the middle of a big empty screen */
@media (min-width:900px){
  /* Favorite region: the 9 postcards as a 3 x 3 wall of big postcards, 'No favorite' under it */
  main:has(.rg-page){max-width:1120px}
  .rg-page .rg-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px!important}
  .rg-page .rg-list .rg-pc,.rg-page .rg-list .rg-pc.on{height:150px}
  .rg-page .rg-list .rg-pc.on{transform:translateY(-2px)}
  .rg-page .rg-list .rg-none{grid-column:1 / -1;max-width:420px;justify-self:center}
  .rg-page .rg-pcl b{font-size:20px}.rg-page .rg-pcl small{font-size:13px}
  .rg-page .rg-tap,.rg-page .rg-foot{text-align:center;justify-content:center}
  /* My cards: the Done button is a normal-size button, not a 1000px bar */
  main #save.btn{display:block;width:auto;min-width:280px;max-width:440px;margin-left:auto;margin-right:auto}
  main #save.btn + #saved{display:block;text-align:center;margin-top:6px}
}
/* Phones: small tap targets get an invisible 44px hit area (the drawing does not change) */
@media (pointer:coarse){
  #theme-bar .tb-look{position:relative}#theme-bar .tb-look::after{content:"";position:absolute;inset:-6px -2px}
  .r2-help{position:relative}.r2-help::after{content:"";position:absolute;inset:-8px}
  .ssm-x::after,.ssm-snd::after,.ssm-mus::after{content:"";position:absolute;inset:-7px}
}
/* f612 PC Home = two columns (Will, Oct 23: 'wouldn't a quick fix be to just put the two columns side by side, the share trade box on the
   left and the pack progress bar on the right?'). Layout only (no markup, no card internals): mouse / trackpad screens 1100px+ wide.
   Left = 'Request it now' (Gifts | Trades, .hc-now); right = Scan, My cards progress (.hc-ov), Missing (.hc-miss). Phones untouched. */
@media (min-width:1100px){
  html.pcf body:has(.hc-home) main{max-width:1240px;padding-left:28px;padding-right:28px}
  html.pcf .hc-home .hc{max-width:none;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:24px;row-gap:16px;align-items:start}
  html.pcf .hc-home .hc>*{margin-top:0;margin-bottom:0}
  html.pcf .hc-home .hc>.hc-now{grid-column:1;grid-row:2 / 4;position:sticky;top:16px} /* stays in view while the long Pack progress list scrolls */
  html.pcf .hc-home .hc>.hc-scan{grid-column:1 / -1;grid-row:1;justify-self:center;width:min(100%,680px);margin-bottom:6px} /* f620 (Will: 'move the scan icon to the middle ... just for PC'): Scan centred on top of both columns */
  html.pcf .hc-home .hc>.hc-ov{grid-column:2;grid-row:2}
  html.pcf .hc-home .hc>.hc-miss{grid-column:2;grid-row:3}
  html.pcf .hc-home .hc:has(>.hc-now[hidden]){display:block;max-width:560px} /* an extra-language tab hides Request it now: back to one column */
  html.pcf .hc-home .hc:has(>.hc-now[hidden])>*:not(:last-child){margin-bottom:16px}
  html.pcf body:has(.hc-home) .snd-pin{max-width:560px;margin-left:auto;margin-right:auto}
}
/* f617 PC Home shows every Gifts / Trades card (homecoll.js): a left column taller than the window scrolls with the page (no sticky, nothing cut off);
   tiles past the first 5 rows skip rendering until scrolled near (content-visibility), so hundreds of cards stay light. */
@media (min-width:1100px){
  html.pcf .hc-home .hc>.hc-now.hc-tall{position:static}
  html.pcf .hc-home .hc-now .hc-grid>.hc-sp:nth-child(n+31){content-visibility:auto;contain-intrinsic-size:auto 150px}
}