/* RocSite shared UI kit.
   Tokens live in themes.css. This file is COMPONENTS only: the same pill, button,
   card, empty, and skeleton every view should reuse rather than re-pin locally.

   Reference: Ask `.askx-pill` / `.askx-seg` / `.askx-panel` (Quick/Thorough/Frontier).
   Ask class names stay as aliases so the front door does not visually fork. */

/* Product buttons inside #view must not inherit login chrome (full-width, uppercase,
   gold-gradient). Login keeps that look via `#login button` in the shells. */
#view button{
  width:auto;margin-top:0;text-transform:none;letter-spacing:0;
}

.roc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:auto;margin:0;min-height:var(--tap-min,44px);padding:8px 14px;
  border-radius:10px;border:1px solid var(--line2);background:var(--panel);
  color:var(--ink);font:650 13px/1 var(--font-ui,inherit);
  text-transform:none;letter-spacing:0;cursor:pointer;
  box-sizing:border-box}
.roc-btn:hover{border-color:var(--accent)}
.roc-btn.primary{
  background:var(--accent);color:var(--accent-text);border-color:var(--accent);
  font-weight:700}
.roc-btn.primary:hover{filter:brightness(1.08);color:var(--accent-text)}
.roc-btn.ghost{background:transparent;color:var(--ink)}

/* Interactive chip. Not `.pill` (ticket 2021 status badge, uppercase micro). */
.roc-pill,.askx-pill{
  margin:0;width:auto;min-height:36px;padding:8px 12px;
  border-radius:var(--r-pill,999px);border:1px solid var(--line2);
  background:transparent;color:var(--dim);
  font:650 12.5px/1 var(--font-ui,inherit);cursor:pointer;
  text-transform:none;letter-spacing:0}
.roc-pill.on,.askx-pill.on{
  color:var(--accent-on-bg,var(--accent));border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}
.roc-pill:hover,.askx-pill:hover{color:var(--ink);border-color:var(--accent)}

.roc-seg,.askx-seg{
  display:inline-flex;border:1px solid var(--line2);
  border-radius:var(--r-pill,999px);overflow:hidden;
  background:color-mix(in srgb,var(--ink) 4%,transparent)}
.roc-seg button,.askx-seg button{
  margin:0;width:auto;border:0;background:transparent;color:var(--dim);
  padding:8px 14px;min-height:36px;font:650 12.5px/1 var(--font-ui,inherit);
  cursor:pointer;text-transform:none;letter-spacing:0}
.roc-seg button[aria-pressed="true"],.roc-seg button.on,
.askx-seg button[aria-pressed="true"]{
  background:var(--accent);color:var(--accent-text,var(--bg))}

.roc-card{
  background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--r-lg,14px);padding:12px 14px;
  box-shadow:var(--shadow-1,none);box-sizing:border-box;min-width:0}

/* S3 phone: same 44px floor Ask already uses. Desktop pills stay 36. */
@media (max-width:760px){
  .roc-pill,.askx-pill,.roc-seg button,.askx-seg button{
    min-height:var(--tap-min,44px);min-width:var(--tap-min,44px)}
  .roc-card{max-width:100%}
}

/* empty() / skeleton() in base.js. Shells also carry these; keep the recipe here
   so a view that only loads the kit still has a first-run and loading state. */
.empty{padding:34px;text-align:center;color:var(--faint);font-size:13px;
  border:1px dashed var(--line2);border-radius:var(--r-lg,14px);
  background:color-mix(in srgb,var(--sunken) 20%,transparent)}
.empty .e-m{font-size:13.5px;color:var(--dim)}
.empty .e-h{margin-top:8px;font-size:12px;color:var(--faint);max-width:420px;
  margin-left:auto;margin-right:auto;line-height:1.6}

.sk{opacity:.55}
.sk-title{height:20px;width:190px;border-radius:14px;margin-bottom:10px}
.sk-sub{height:12px;width:290px;border-radius:14px;margin-bottom:22px}
.sk-row{height:46px;border-radius:14px;margin-bottom:8px}
.sk-title,.sk-sub,.sk-row{
  background:linear-gradient(90deg,rgba(128,128,128,.05) 25%,rgb(var(--glow)/.10) 50%,
             rgba(255,255,255,.04) 75%);
  background-size:280% 100%;animation:roc-sk 1.5s linear infinite}
@keyframes roc-sk{0%{background-position:140% 0}100%{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){
  .sk-title,.sk-sub,.sk-row{animation:none}
}