/* wgf-states.css — Module M55: Empty / Loading / Error states.
   Shared non-happy-path states — loading skeletons, empty states, error states,
   and offline/stale banners. Reused across every data surface so the site degrades
   gracefully and never shows a broken or blank box. Colours/type from _tokens.css. */

/* ── skeleton base ── */
.sk{
  background:var(--wgf-panel-3);
  border-radius:var(--radius-control);
  display:block;
}
@keyframes sk-pulse{from{opacity:.35}to{opacity:.75}}
@media(prefers-reduced-motion:no-preference){
  .sk{animation:sk-pulse 1.4s ease-in-out infinite alternate;}
}
@media(prefers-reduced-motion:reduce){
  .sk{animation:none;opacity:.5;}
}

/* ── skeleton: text block ── */
.sk-text-block{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  padding:var(--space-4);
  box-shadow:var(--shadow-1);
}
.sk-text-block .sk-title      {height:1.15em; width:44%; margin-bottom:var(--space-3);}
.sk-text-block .sk-line       {height:.85em;  width:100%; margin-bottom:var(--space-2);}
.sk-text-block .sk-line-75    {height:.85em;  width:75%;  margin-bottom:var(--space-2);}
.sk-text-block .sk-line-60    {height:.85em;  width:60%;  margin-bottom:var(--space-2);}
.sk-text-block .sk-line-88    {height:.85em;  width:88%;  margin-bottom:var(--space-2);}
.sk-text-block .sk-gap        {height:var(--space-3);}
.sk-text-block .sk-sub        {height:.75em;  width:36%;  margin-top:var(--space-1);}

/* ── skeleton: table rows ── */
.sk-table-block{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.sk-table-head{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--wgf-border-neutral);
  background:var(--wgf-panel-2);
}
.sk-table-head .sk{height:.7em; border-radius:4px; opacity:.4;}
.sk-table-head .sk:nth-child(1){width:60%;}
.sk-table-head .sk:nth-child(2){width:70%;}
.sk-table-head .sk:nth-child(3){width:55%;}
.sk-table-head .sk:nth-child(4){width:65%;}
.sk-table-row{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--space-3);
  align-items:center;
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--wgf-border-neutral-soft);
}
.sk-table-row:last-child{border-bottom:none;}
.sk-table-row .sk-cell-icon{
  display:inline-block;
  width:28px; height:28px;
  border-radius:var(--radius-control);
  margin-right:var(--space-2);
  flex:0 0 auto;
}
.sk-table-row .sk-cell-label{
  display:inline-block;
  height:.85em;
  border-radius:4px;
  vertical-align:middle;
}
.sk-cell-wrap{display:flex;align-items:center;}
.sk-table-row .sk-val{height:.85em; border-radius:4px;}

/* ── skeleton: card grid ── */
.sk-card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-3);
}
@media(max-width:580px){.sk-card-grid{grid-template-columns:1fr;}}
.sk-card{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  padding:var(--space-3) var(--space-3) var(--space-4);
  box-shadow:var(--shadow-1);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.sk-card .sk-card-icon{width:40px;height:40px;border-radius:var(--radius-control);align-self:flex-start;}
.sk-card .sk-card-name{height:.85em;width:80%;margin-top:var(--space-1);}
.sk-card .sk-card-sub {height:.75em;width:55%;}
.sk-card .sk-card-price{height:1em;width:65%;margin-top:var(--space-1);}
.sk-card .sk-card-bar {height:.6em;width:90%;margin-top:var(--space-1);}
.sk-card .sk-card-bar2{height:.6em;width:70%;}

/* ── skeleton: chart ── */
.sk-chart-block{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  padding:var(--space-4);
  box-shadow:var(--shadow-1);
}
.sk-chart-header{display:flex;gap:var(--space-3);margin-bottom:var(--space-4);}
.sk-chart-header .sk-ch-title{height:1.1em;width:38%;}
.sk-chart-header .sk-ch-pill {height:1.5em;width:14%;border-radius:var(--radius-pill);}
.sk-chart-yaxis{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:40px;
  height:160px;
  float:left;
  margin-right:var(--space-2);
  gap:0;
}
.sk-chart-yaxis .sk{height:.65em;border-radius:4px;opacity:.4;}
.sk-chart-area{
  overflow:hidden;
  height:160px;
  background:var(--wgf-panel-2);
  border-radius:var(--radius-control);
  position:relative;
}
.sk-chart-wave{
  width:100%; height:100%;
  display:block;
}
.sk-chart-xaxis{
  display:flex;
  justify-content:space-between;
  margin-top:var(--space-2);
}
.sk-chart-xaxis .sk{height:.65em;border-radius:4px;opacity:.4;width:8%;}
.sk-chart-clearfix::after{content:'';display:table;clear:both;}

/* ── empty state base ── */
.empty-state{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  padding:var(--space-5) var(--space-4);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--space-2);
  box-shadow:var(--shadow-1);
}
.empty-state__mark{
  width:52px; height:52px;
  border-radius:50%;
  background:var(--wgf-panel-3);
  border:1px solid var(--wgf-border-neutral);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--space-1);
}
.empty-state__mark svg{opacity:.55;}
.empty-state__heading{
  font-family:var(--font-display);
  font-size:var(--text-md);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--wgf-text);
  margin:0;
}
.empty-state__body{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  max-width:52ch;
  margin:0;
  line-height:1.6;
}
.empty-state__action{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-link);
  text-decoration:none;
  margin-top:var(--space-1);
  border-bottom:1px solid rgba(255,217,120,.25);
  padding-bottom:1px;
  transition:color var(--motion-fast) var(--ease-standard),
             border-color var(--motion-fast) var(--ease-standard);
}
.empty-state__action:hover{color:var(--wgf-gold-bright);border-color:rgba(255,217,120,.6);}
.empty-state__action:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:2px;}

/* search-suggestion pill row */
.empty-state__suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  justify-content:center;
  margin-top:var(--space-1);
}
.empty-state__pill{
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  background:var(--wgf-panel-2);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-pill);
  padding:2px var(--space-3);
  text-decoration:none;
  transition:color var(--motion-fast) var(--ease-standard),
             border-color var(--motion-fast) var(--ease-standard),
             background var(--motion-fast) var(--ease-standard);
}
.empty-state__pill:hover{
  color:var(--wgf-gold-bright);
  border-color:var(--wgf-border);
  background:var(--wgf-panel-3);
}
.empty-state__pill:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-pill);}

/* ── error state ── */
.error-state{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-left:3px solid var(--wgf-down);
  border-radius:var(--radius-card);
  padding:var(--space-4);
  display:flex;
  gap:var(--space-3);
  align-items:flex-start;
  box-shadow:var(--shadow-1);
}
.error-state__icon-wrap{
  width:36px; height:36px;
  flex:0 0 auto;
  border-radius:50%;
  background:rgba(229,86,75,.12);
  border:1px solid rgba(229,86,75,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
}
.error-state__icon-wrap svg{opacity:.85;}
.error-state__body{flex:1 1 auto;}
.error-state__heading{
  font-family:var(--font-display);
  font-size:var(--text-sm);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--wgf-text);
  margin:0 0 var(--space-1);
}
.error-state__msg{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  margin:0 0 var(--space-3);
  line-height:1.6;
}
.error-state__actions{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.btn-retry{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--wgf-gold-primary);
  background:var(--wgf-panel-3);
  border:1px solid var(--wgf-border);
  border-radius:var(--radius-control);
  padding:var(--space-2) var(--space-3);
  cursor:pointer;
  line-height:1;
  transition:background var(--motion-fast) var(--ease-standard),
             border-color var(--motion-fast) var(--ease-standard),
             color var(--motion-fast) var(--ease-standard);
}
.btn-retry:hover{background:var(--wgf-panel-2);border-color:var(--wgf-border-strong);color:var(--wgf-gold-bright);}
.btn-retry:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.btn-secondary{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  background:none;
  border:none;
  cursor:pointer;
  padding:var(--space-2) var(--space-1);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color var(--motion-fast) var(--ease-standard);
}
.btn-secondary:hover{color:var(--wgf-text);}
.btn-secondary:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px;}

/* ── offline / stale fallback ── */
.offline-banner{
  background:var(--wgf-panel-2);
  border:1px solid var(--wgf-border-neutral);
  border-top:2px solid var(--wgf-gold-muted);
  border-radius:var(--radius-card);
  padding:var(--space-3) var(--space-4);
  display:flex;
  align-items:center;
  gap:var(--space-3);
  box-shadow:var(--shadow-1);
}
.offline-banner__dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--wgf-gold-muted);
  flex:0 0 auto;
  opacity:.85;
}
.offline-banner__body{flex:1 1 auto;}
.offline-banner__heading{
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--wgf-gold-muted);
  margin:0 0 2px;
}
.offline-banner__msg{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  margin:0;
  line-height:1.5;
}
.offline-banner__msg time{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-neutral-text);
}
.offline-banner__action{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-link);
  text-decoration:none;
  flex:0 0 auto;
  white-space:nowrap;
  transition:color var(--motion-fast) var(--ease-standard);
}
.offline-banner__action:hover{color:var(--wgf-gold-bright);}
.offline-banner__action:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:2px;}

/* ── stale data overlay (shown on top of partial content) ── */
.stale-overlay-wrap{position:relative;}
.stale-ribbon{
  position:absolute;
  top:0; left:0; right:0;
  background:rgba(185,166,107,.10);
  border-bottom:1px solid rgba(185,166,107,.22);
  padding:var(--space-1) var(--space-4);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-gold-muted);
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  z-index:1;
}
.stale-ribbon__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--wgf-gold-muted);opacity:.75;flex:0 0 auto;
}
.stale-content-card{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  opacity:.75;
  filter:grayscale(.3);
}
.stale-content-inner{
  padding:var(--space-5) var(--space-4) var(--space-4);
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  line-height:1.6;
}
.stale-content-inner .sk-phantom{
  margin-bottom:var(--space-2);
  height:.85em;
  background:var(--wgf-panel-3);
  border-radius:4px;
  opacity:.5;
}