/* Card selection replaces the touch catalog's checkbox and trailing tick. */
html:is([data-app-layout=phone],[data-app-layout=tablet]) {
  #optionPanel .layer-item > :is(.catalog-layer-state,input[name=basemapToggle]),
  :is(#optionPanel,.cart-reorder-preview) .cart-layer-enable {display:none!important;}
  #optionPanel :is(.catalog-list,#list-basemaps) {box-sizing:border-box;}
  #optionPanel #empty-cart-msg {color:var(--app-ink)!important;}

  #optionPanel :is(.catalog-list,#list-basemaps) > .layer-item {
    min-height:52px!important;margin:0 0 6px!important;padding:3px 8px!important;
    gap:8px;border:1px solid var(--app-line)!important;border-radius:12px!important;
    background:var(--app-raised)!important;box-shadow:none!important;cursor:pointer;
  }
  #optionPanel :is(.catalog-list,#list-basemaps) > .layer-item.app-layer-card-selected {
    border-color:var(--app-accent)!important;background:var(--app-selected)!important;
    box-shadow:inset 0 0 0 1px var(--app-accent)!important;
  }
  #optionPanel .layer-item :is(.layer-title-zoom,.basemap-choice) {
    flex:1;min-width:0;min-height:44px;padding:4px 2px!important;
    display:flex;align-items:center;text-align:left;text-decoration:none!important;
    color:var(--app-ink)!important;font:600 14px/1.3 var(--font-body)!important;
    touch-action:manipulation;overflow-wrap:anywhere;
  }
  #optionPanel .layer-item :is(.layer-title-zoom,.basemap-choice)::after {content:none!important;display:none!important;}
  #optionPanel .layer-item :is(.layer-title-zoom,.basemap-choice)[aria-disabled=true] {color:var(--app-muted)!important;cursor:not-allowed;}
  /* Provider basemap rows carry an inner gallery panel on desktop. Touch shows
     the same flat card as every catalog row, so drop that inner surface. */
  #optionPanel #list-basemaps.basemap-gallery .layer-item > .basemap-choice {
    background:transparent!important;border:0!important;box-shadow:none!important;
  }
  #optionPanel #list-basemaps.basemap-gallery .layer-item > .basemap-choice .basemap-caption {
    color:inherit!important;font:inherit!important;text-align:left!important;min-height:0!important;
  }
  #optionPanel .layer-item .app-catalog-info {flex:0 0 44px;width:44px;min-height:44px;}
  /* mobileApp.css orders the provider rows as label then native radio. The
     touch layout hides that radio, so keep the Info action trailing the label. */
  #optionPanel #list-basemaps.basemap-gallery .layer-item > .app-catalog-info {order:3;}
  #optionPanel .layer-item:focus-within {outline:2px solid var(--app-accent);outline-offset:1px;}

  /* Active layers keep just the handle, name, opacity and independent X. */
  :is(#optionPanel,.cart-reorder-preview) .cart-layer-card {padding:3px 8px;border-radius:12px;}
  .cart-layer-card.cart-reorder-preview {padding:3px 8px;border-radius:12px;}
  :is(#optionPanel,.cart-reorder-preview) .cart-layer-header {
    grid-template-columns:28px minmax(0,1fr) 44px;grid-template-rows:24px 44px;
    column-gap:10px;row-gap:0;min-height:68px;
  }
  :is(#optionPanel,.cart-reorder-preview) .cart-layer-middle {display:contents;}
  :is(#optionPanel,.cart-reorder-preview) .cart-drag-handle {
    grid-column:1;grid-row:1/3;align-self:center;display:grid;place-items:center;
    width:44px;height:44px;margin-left:-8px;touch-action:none;cursor:grab;
  }
  :is(#optionPanel,.cart-reorder-preview) .cart-layer-title {
    grid-column:2;grid-row:1;display:block;min-width:0;max-height:none;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font:600 13px/1.4 var(--font-body)!important;cursor:pointer;
  }
  :is(#optionPanel,.cart-reorder-preview) .cart-opacity-control {
    grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr) 34px;gap:6px;padding:0;
  }
  :is(#optionPanel,.cart-reorder-preview) .cart-opacity-control .compact-slider {height:44px!important;min-height:44px!important;}
  :is(#optionPanel,.cart-reorder-preview) .cart-opacity-value {font-size:12px;}
  :is(#optionPanel,.cart-reorder-preview) .cart-remove-btn {grid-column:3;grid-row:1/3;align-self:center;width:44px;min-height:44px;}
}