/* components.css — Shared components: mode tabs, filters, flavour tags, strain grid, cards. */

/* ── BUTTON ARROW (arrowIcon() in js/core/icons.js) ── */
.ui-arrow{width:1.05em;height:1.05em;stroke-width:3;vertical-align:-.17em;display:inline-block;flex-shrink:0;}
.tut-arrow .ui-arrow,.back-btn .ui-arrow{width:18px;height:18px;vertical-align:middle;}

/* ── SECTION ── */
.section{margin-bottom:1.5rem;}
.section-title{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;display:flex;align-items:center;gap:.7rem;}
.section-title::after{content:'';flex:1;height:1px;background:var(--border);}
/* ── GLOBAL HEADER BANNER (always dark) ── */
#product-type-banner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  position:fixed;top:0;left:0;right:0;z-index:210;
  background:#0b1a0d;border-bottom:1px solid #263f2a;
  height:52px;padding:0 .6rem;
}
@media(min-width:769px) {
  #product-type-banner{left:240px;}
}
/* Center logo */
.banner-logo{font-family:var(--font-display);font-size:1.3rem;color:#f2ebd8;text-align:center;white-space:nowrap;pointer-events:none;}
.banner-logo span{color:var(--green);}
/* ── WISHLIST HEADER BUTTON (left col) ── */
.header-wishlist-btn{
  position:relative;justify-self:start;
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:rgba(255,255,255,.06);border:1px solid #263f2a;border-radius:8px;
  cursor:pointer;color:#c8dcc0;transition:background .15s,border-color .15s;
  flex-shrink:0;
}
.header-wishlist-btn:hover{background:rgba(255,255,255,.1);border-color:#52c45a;}
.header-wishlist-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--green);color:#060c07;
  border-radius:10px;font-size:.5rem;font-weight:700;
  padding:.05rem .3rem;min-width:14px;text-align:center;line-height:1.4;
}
/* ── PROFILE CHIP + POPOVER (right col) ── */
.profile-popover-wrap{position:relative;justify-self:end;}
.profile-chip-full{
  display:flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.06);border:1px solid #263f2a;border-radius:8px;
  padding:.32rem .5rem .32rem .4rem;cursor:pointer;
  transition:background .15s,border-color .15s;
  max-width:140px;
}
.profile-chip-full:hover{background:rgba(255,255,255,.1);border-color:#52c45a;}
.pcf-avatar{
  width:26px;height:26px;border-radius:50%;
  background:var(--green);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-sans);font-size:.6rem;font-weight:700;color:#060c07;flex-shrink:0;
}
.pcf-buds{font-size:.58rem;color:#6b8f65;display:flex;align-items:center;gap:.25rem;}
.pcf-buds svg{color:var(--green);}
.pcf-dots{color:#6b8f65;flex-shrink:0;margin-left:.15rem;}
.profile-chip{display:none!important;}
/* Profile popover anchored to wrap */
.profile-popover{display:none;position:absolute;top:calc(100% + 6px);right:0;width:220px;background:var(--bg1);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:200;overflow:hidden;}
@media(min-width:769px) {
  .profile-popover{display:none!important;}
}
/* ── MODE TAB BAR (inside pages) ── */
.mode-tab-bar{
  display:flex;gap:0;
  background:#0b1a0d;
  border-radius:10px;overflow:hidden;
  border:1px solid #263f2a;
  margin-bottom:1.2rem;
}
.mode-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem .5rem;background:transparent;border:none;
  font-family:var(--font-sans);font-size:.65rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#6b8f65;
  cursor:pointer;transition:background .15s,color .15s;
  border-right:1px solid #263f2a;
}
.mode-tab:last-child{border-right:none;}
.mode-tab svg{flex-shrink:0;}
.mode-tab.active{background:rgba(82,196,90,.12);color:var(--green);}
.mode-tab.active svg{stroke:var(--green);}
body.theme-hash .mode-tab.active{background:rgba(212,168,67,.1);color:var(--amber);}
body.theme-hash .mode-tab.active svg{stroke:var(--amber);}
body.theme-extract .mode-tab.active{background:rgba(200,200,64,.1);color:#c8c840;}
body.theme-extract .mode-tab.active svg{stroke:#c8c840;}
.mode-tab-medal{font-size:.65rem;}
/* ── FILTERS ── */
select{background:var(--bg2);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:.78rem;padding:.5rem .85rem;border-radius:6px;outline:none;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(82,196,90,.1);}
/* ── STRAIN GRID ── */
.strain-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;margin-bottom:1.5rem;}
/* ── RESULT CARDS ── */
.empty{text-align:center;padding:4rem 1rem;color:var(--muted);}
.empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.4;}
.empty h3{font-family:var(--font-display);font-size:1.1rem;color:var(--text);margin-bottom:.5rem;}
.empty p{font-size:.72rem;line-height:1.7;}
.card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:1.5rem;margin-bottom:1.2rem;transition:border-color .2s,box-shadow .2s;box-shadow:var(--shadow-sm);}
.card.top{border-color:var(--gold);border-left:3px solid var(--gold);box-shadow:0 4px 20px rgba(212,168,67,.12);}
.card-row1{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem;gap:.8rem;}
.card-name{font-family:var(--font-display);font-size:1.35rem;color:var(--cream);margin-bottom:.25rem;}
.card-sub{font-size:.68rem;color:var(--muted);margin-bottom:.5rem;}
.stu-note{font-size:.62rem;color:var(--muted);opacity:.8;font-style:italic;cursor:help;margin-top:.1rem;display:block;}
.card-grower{font-size:.68rem;color:var(--green);font-family:var(--font-sans);margin-bottom:.3rem;}
.card-grower::before{content:'↳ ';font-size:.6em;opacity:.5;}
.card-score-box{flex-shrink:0;}
.card-score{font-family:var(--font-sans);font-size:.7rem;font-weight:700;color:var(--bg0);background:var(--green);padding:.28rem .55rem;border-radius:20px;white-space:nowrap;display:inline-block;}
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem;}
.badge{font-size:.58rem;padding:.22rem .55rem;border-radius:20px;border:1px solid var(--border);}
.bI{background:#1E3A5F;color:#6FA8D8;border-color:#2a4f7a;}
.bS{background:#4A3208;color:#D4A843;border-color:#6a4510;}
.bH{background:#1A3320;color:#52C45A;border-color:#2a4f30;}
.bd{background:var(--bg3);color:var(--muted);}
.bT{background:rgba(224,82,82,.1);color:var(--red);border-color:rgba(224,82,82,.3);}
.bC{background:rgba(82,196,90,.1);color:var(--green);border-color:var(--green2);}
.card-desc{font-size:.72rem;color:var(--muted);line-height:1.75;margin-bottom:.8rem;font-style:italic;}
.card-flavor{font-size:.68rem;color:var(--muted);margin-bottom:.4rem;}
.card-flavor span{color:var(--text);}
.bn{font-size:.6rem;color:var(--green);width:12px;text-align:right;font-family:var(--font-sans);}
.save-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;transition:all .2s;}
.save-btn:hover{background:var(--green);color:var(--bg0);border-color:var(--green);}
.save-btn.saved{background:rgba(82,196,90,.15);border-color:var(--green);color:var(--green);cursor:default;}
/* Strain Page Styles */
.review-card{background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:1rem;margin-bottom:1rem;}
.review-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:.8rem;}
.review-badge{font-size:.7rem;background:rgba(212,168,67,.2);color:var(--gold);padding:.2rem .5rem;border-radius:2px;margin-left:.5rem;}
.review-rating{color:var(--gold);}
.review-text{color:var(--text);line-height:1.6;margin-bottom:.5rem;}