/* =============================================================================
 * css/recents.css - "Recent" tools row on the home grid
 * =============================================================================
 * Companion to css/pins.css: same tokens, same house style, same safety
 * margins (44px touch targets, forced-colors fallback, print-quiet).
 * The mini-cards are deliberately lighter than the full .tool-card - Recent
 * is a glance, not a destination list.
 * =========================================================================== */

/* Row layout: a single scrolling strip on small screens (keeps Recent one
 * line tall), a wrapped grid on wide screens. */
.recents-grid{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:thin;
  padding:2px 2px 10px;
  margin:0 0 2px;
  -webkit-overflow-scrolling:touch;
}
@media (min-width:1100px){
  .recents-grid{
    overflow-x:visible;
    flex-wrap:wrap;
  }
}

.recent-card{
  flex:0 0 auto;
  width:104px;
  min-width:104px;
  min-height:88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:12px 8px 10px;
  margin:0;
  border:1px solid transparent;
  border-radius:var(--r-md, 12px);
  background:color-mix(in srgb, var(--surface-2) 55%, transparent);
  color:var(--fg);
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur-base, .2s) var(--ease-out, ease-out),
             border-color var(--dur-base, .2s) var(--ease-out, ease-out),
             transform var(--dur-base, .2s) var(--ease-out, ease-out);
}
.recent-card:hover{
  background:var(--surface-3);
  border-color:var(--line);
  transform:translateY(-1px);
}
.recent-card:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
.recent-card:active{
  transform:translateY(0) scale(.98);
}

.recent-icon{
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-3);
  color:var(--muted);
  transition:color var(--dur-base, .2s) var(--ease-out, ease-out),
             background var(--dur-base, .2s) var(--ease-out, ease-out);
}
.recent-icon svg{
  width:18px;
  height:18px;
}
.recent-card:hover .recent-icon{
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}

.recent-name{
  font:600 11px/1.25 var(--sans, 'Space Grotesk', system-ui, sans-serif);
  color:var(--fg);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Pressed affordance for touch parity with hover. */
.recent-card:active .recent-icon{
  color:var(--accent-ink);
  background:var(--accent);
}

@media (pointer:coarse){
  .recent-card{
    width:116px;
    min-width:116px;
    min-height:96px;
  }
}

@media (prefers-reduced-motion:reduce){
  .recent-card,
  .recent-icon{
    transition:none;
  }
  .recent-card:hover,
  .recent-card:active{
    transform:none;
  }
}

/* Forced-colors: keep the pressed/focus affordances free of fill reliance. */
@media (forced-colors:active){
  .recent-card:focus-visible{
    outline:2px solid Highlight;
    outline-offset:2px;
  }
}

/* Print: launcher chrome is noise on paper. */
@media print{
  #recentsWrap{ display:none !important; }
}