/* ==========================================================================
   Joke Engine — app-specific styles (built on top of orient-luxury-core.css)
   ========================================================================== */

.je-shell{
  max-width:920px;
  margin:0 auto;
  padding:3.4rem 1.5rem 6rem 1.5rem;
}

.je-title{
  font-size:2.1rem;
  text-align:center;
  margin-bottom:0.15em;
}
.je-subtitle{
  text-align:center;
  font-family:var(--ol-font-ui);
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ol-text-faint);
  margin-bottom:2.4rem;
}

/* tabs */
.je-tabs{
  display:flex;
  justify-content:center;
  gap:0.5rem;
  margin-bottom:2rem;
  border-bottom:1px solid var(--ol-border);
}
.je-tab{
  font-family:var(--ol-font-ui);
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ol-text-dim);
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  padding:0.8em 1.4em;
  cursor:pointer;
  transition:all 0.2s ease;
}
.je-tab:hover{color:var(--ol-gold-strong);}
.je-tab.je-tab-active{
  color:var(--ol-gold);
  border-bottom-color:var(--ol-gold);
}
.je-tab-count{
  display:inline-block;
  margin-left:0.4em;
  font-family:var(--ol-font-mono);
  font-size:0.72rem;
  color:var(--ol-text-faint);
}

.je-panel{display:none;}
.je-panel.je-panel-active{display:block;}

/* filter card */
.je-filters{
  background:var(--ol-bg-card);
  border:1px solid var(--ol-border);
  border-radius:12px;
  padding:1.6rem;
  margin-bottom:2rem;
  box-shadow:var(--ol-shadow);
}

.je-field{margin-bottom:1.3rem;}
.je-field:last-child{margin-bottom:0;}

.je-field-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1rem;
}
@media (max-width:640px){
  .je-field-row{grid-template-columns:1fr;}
}

/* tag badges */
.je-tags-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-bottom:0.7em;
}
.je-tags-actions{display:flex;gap:0.5rem;}
.je-tags-actions .ol-btn{padding:0.35em 0.8em;font-size:0.7rem;}

.je-tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}
.je-tag{
  font-family:var(--ol-font-ui);
  font-size:0.74rem;
  letter-spacing:0.03em;
  padding:0.42em 0.85em;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  border:1px solid var(--ol-border);
  background:transparent;
  color:var(--ol-text-faint);
  transition:all 0.15s ease;
}
.je-tag.je-tag-on{
  background:rgba(127,174,122,0.16);
  border-color:var(--ol-success);
  color:var(--ol-success);
  font-weight:600;
}
.je-tag.je-tag-on:hover{
  background:rgba(127,174,122,0.26);
}
.je-tag:not(.je-tag-on):hover{
  border-color:var(--ol-border-strong);
  color:var(--ol-text-dim);
}

.je-search-row{
  display:flex;
  justify-content:flex-end;
  margin-top:1.5rem;
}
.je-search-row .ol-btn{padding:0.7em 2.2em;}

/* joke cards — row-wide */
.je-results{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.je-card{
  background:var(--ol-bg-card);
  border:1px solid var(--ol-border);
  border-radius:12px;
  padding:1.5rem 1.6rem;
  display:flex;
  align-items:flex-start;
  gap:1.2rem;
  box-shadow:var(--ol-shadow);
  transition:background 0.2s ease, border-color 0.2s ease;
}
.je-card:hover{
  background:var(--ol-bg-card-hover);
  border-color:var(--ol-border-strong);
}
.je-card-body{
  flex:1;
  font-family:var(--ol-font-body);
  font-size:1.28rem;
  line-height:1.55;
  color:var(--ol-text);
  white-space:pre-line;
}
.je-card-meta{
  font-family:var(--ol-font-mono);
  font-size:0.7rem;
  color:var(--ol-text-faint);
  margin-top:0.7em;
}
.je-bookmark-btn{
  flex-shrink:0;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  border:1px solid var(--ol-border);
  background:var(--ol-bg-raised);
  color:var(--ol-text-faint);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
}
.je-bookmark-btn:hover{
  border-color:var(--ol-gold);
  color:var(--ol-gold);
}
.je-bookmark-btn.je-bookmarked{
  background:var(--ol-gold-soft);
  border-color:var(--ol-gold);
  color:var(--ol-gold);
}
.je-bookmark-btn svg{width:1.2rem;height:1.2rem;fill:currentColor;}

.je-empty{
  text-align:center;
  padding:3rem 1rem;
  color:var(--ol-text-faint);
  font-family:var(--ol-font-ui);
  font-size:0.85rem;
  letter-spacing:0.04em;
}

.je-status-line{
  text-align:center;
  font-family:var(--ol-font-ui);
  font-size:0.78rem;
  color:var(--ol-text-faint);
  margin:1.2rem 0;
  min-height:1.2em;
}
.je-status-line.je-status-error{color:var(--ol-danger);}

.je-spinner{
  display:inline-block;
  width:1rem;
  height:1rem;
  border:2px solid var(--ol-border);
  border-top-color:var(--ol-gold);
  border-radius:50%;
  animation:je-spin 0.7s linear infinite;
  vertical-align:middle;
  margin-right:0.5em;
}
@keyframes je-spin{to{transform:rotate(360deg);}}

/* API usage footer */
.je-usage-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  background:var(--ol-bg-raised);
  border-top:1px solid var(--ol-border);
  padding:0.55em 1rem;
  text-align:center;
  font-family:var(--ol-font-mono);
  font-size:0.72rem;
  letter-spacing:0.02em;
  color:var(--ol-text-faint);
}
.je-usage-bar strong{color:var(--ol-gold);font-weight:600;}
.je-usage-bar .je-usage-sep{margin:0 0.6em;color:var(--ol-border-strong);}