/* ═══════════════════════════════════════════════════════════════════
   ArcShare v8 refresh components — unified cards, pills, stat tiles,
   icon tiles. Requires tokens.css. Prefix .r- to avoid collisions.
   Pair with the Tabler outline webfont (loaded per page).
   ═══════════════════════════════════════════════════════════════════ */

/* icon tile — the tinted rounded square behind a line icon */
.r-icon-tile{width:var(--as-icon-tile);height:var(--as-icon-tile);
  border-radius:var(--as-icon-tile-radius);background:var(--as-accent-bg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.r-icon-tile i,.r-icon-tile{color:var(--as-accent-bright)}
.r-icon-tile i{font-size:19px}
.r-icon-tile--success{background:var(--as-success-bg)} .r-icon-tile--success i{color:var(--as-success)}
.r-icon-tile--warning{background:var(--as-warning-bg)} .r-icon-tile--warning i{color:var(--as-warning)}
.r-icon-tile--danger{background:var(--as-danger-bg)}   .r-icon-tile--danger i{color:var(--as-danger)}

/* unified card */
.r-card{background:var(--as-surface-1);border:0.5px solid var(--as-border-2);
  border-radius:var(--as-card-radius);padding:var(--as-card-pad);transition:border-color var(--as-t-fast)}
.r-card:hover{border-color:var(--as-border-3)}
.r-card__head{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.r-card__title{font-size:14px;font-weight:600;color:var(--as-text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-card__context{font-size:11px;font-family:var(--as-font-mono);color:var(--as-text-4);margin-top:1px}
.r-card__desc{font-size:12.5px;color:var(--as-text-2);line-height:1.55;margin-bottom:13px}
.r-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* tag pill (neutral) */
.r-tag{font-size:10.5px;font-family:var(--as-font-mono);color:var(--as-text-3);
  background:var(--as-surface-2);border:0.5px solid var(--as-border-1);
  padding:3px 8px;border-radius:5px;white-space:nowrap}

/* language / status badge (accent by default) */
.r-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;
  font-family:var(--as-font-mono);font-weight:500;color:var(--as-accent-bright);
  background:var(--as-accent-bg);padding:3px 9px;border-radius:5px}
.r-badge i{font-size:12px}

/* small button in card footer */
.r-cbtn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;
  font-family:var(--as-font-sans);color:var(--as-text-2);background:var(--as-surface-2);
  border:0.5px solid var(--as-border-2);padding:5px 11px;border-radius:7px;cursor:pointer;
  transition:all var(--as-t-fast)}
.r-cbtn:hover{color:var(--as-text-1);border-color:var(--as-border-3)}
.r-cbtn i{font-size:14px}
.r-cbtn--accent{color:var(--as-accent-bright);background:var(--as-accent-bg);border-color:var(--as-accent-ring)}
.r-cbtn--accent:hover{background:var(--as-accent);color:#fff}

/* stat tile (Guides-style) */
.r-stat{background:var(--as-surface-1);border:0.5px solid var(--as-border-1);
  border-radius:var(--as-card-radius);padding:14px 16px}
.r-stat__label{font-size:11px;font-family:var(--as-font-mono);color:var(--as-text-4);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.r-stat__value{font-size:24px;font-weight:700;color:var(--as-text-1);line-height:1}
.r-stat__value--accent{color:var(--as-accent-bright)}

/* filter pill row */
.r-pill{height:30px;padding:0 13px;border-radius:var(--as-r-pill);border:0.5px solid var(--as-border-2);
  background:transparent;color:var(--as-text-3);font-size:12.5px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:all var(--as-t-fast);white-space:nowrap}
.r-pill:hover{color:var(--as-text-1);border-color:var(--as-border-3)}
.r-pill.is-on{background:var(--as-accent-bg);color:var(--as-accent-bright);border-color:var(--as-accent-ring)}
.r-pill i{font-size:15px}

/* gradient headline (keep the brand gradient, apply consistently) */
.r-gradient{background:var(--as-gradient);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent}