/* ==========================================================
   RESULTS-WEB — COMPONENT STYLES ONLY
   Phase 2 rule: NO grid / widths / spacing for results here.
   Layout truth lives in: /static/results-layout.css
   ========================================================== */

/* Reset minimal + box sizing */
html, body { height: 100%; }
body { margin: 0; }

.results-shell,
.results-shell *{
  box-sizing: border-box;
}

/* Global */
body.results-app{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #111;
  background: #fff;
}

/* Header (component styling) */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.site-header__inner{
  display: flex;
  align-items: center;
}

.brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand__img{
  height: 45px;
  width: auto;
  display: block;
}

/* Footer (component styling) */
.site-footer{
  margin-top: 28px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
  padding: 10px 0;
}

.site-footer__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer__logo{
  height: 56px;
  width: auto;
  display: block;
}

.site-footer__right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  gap: 2px;
  font-size: 13px;
  color: rgba(0,0,0,.70);
}

.muted{ color: rgba(0,0,0,.60); }

@media (max-width: 520px){
  .site-footer__inner{
    flex-direction: column;
    align-items: center;
  }
  .site-footer__right{
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================
   PHASE 5 — COMPONENTS: KV (accordion key/value)
   Goal: make kv__k (labels) bold in left column accordions
   ========================================================== */

.kv__k{
  font-weight: 600;
}


/* ==========================================================
   PHASE 5 — BLOCK 2 (MARKET) — COMPONENT STYLES
   Scope strictly to #blk-2-market to avoid side effects
   ========================================================== */

#blk-2-market .market-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px 0;
}

#blk-2-market .market-stat__label{
  font-weight: 600;
  margin-bottom: 6px;
}

#blk-2-market .market-stat__value{
  line-height: 1.25;
}

#blk-2-market .market-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Button in B2 (keep existing btn system, just refine inside B2) */
#blk-2-market .market-actions .btn{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.1;
}

/* Gauge block */
#blk-2-market .market-gauge{
  margin-top: 10px;
}

#blk-2-market .market-gauge__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 6px 0;
}

#blk-2-market .market-gauge__k{
  font-weight: 600;
}

#blk-2-market .market-gauge__v{
  font-weight: 600;
  white-space: nowrap;
}

#blk-2-market .market-gauge__sub{
  margin: 6px 0 10px 0;
}

/* Generic gauge component used by B2 */
#blk-2-market .gauge{
  margin-top: 6px;
}

#blk-2-market .gauge__bar{
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #eee;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#blk-2-market .gauge__seg{
  display: block;
}

/* Simple 4-step scale (can be tuned later) */
#blk-2-market .gauge__seg--s1{ background: #59b26a; }
#blk-2-market .gauge__seg--s2{ background: #d6c85a; }
#blk-2-market .gauge__seg--s3{ background: #e49a4e; }
#blk-2-market .gauge__seg--s4{ background: #d85a5a; }

/* Pin */
#blk-2-market .gauge__pin{
  position: absolute;
  top: -7px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
}

#blk-2-market .gauge__pin-dot{
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8C6A3F;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* Labels under the gauge */
#blk-2-market .gauge__labels{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

#blk-2-market .gauge__lab-k{
  font-weight: 600;
  font-size: 12px;
}

#blk-2-market .gauge__lab-v{
  font-size: 13px;
}

#blk-2-market .gauge__lab--center{
  text-align: center;
}

#blk-2-market .gauge__lab--right{
  text-align: right;
}


/* ==========================================================
   PHASE 5 — MODAL SYSTEM (data-modal-open / data-modal-close)
   ========================================================== */
.modal{
  display: none; /* default hidden */
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.modal[aria-hidden="false"]{
  display: block;
}

.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.modal__panel{
  position: relative;
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  margin: 24px auto;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 50px rgba(0,0,0,0.25);
}

.modal__head{
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.modal__title{
  font-weight: 600;
}

.modal__close{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
}

.modal__close:hover{
  background: rgba(0,0,0,0.06);
}

.modal__body{
  padding: 14px 16px 18px 16px;
}

/* ==========================================================
   PHASE 5 — B2: make gauge pin more visible
   ========================================================== */
#blk-2-market .gauge__pin{
  top: -10px;
}

#blk-2-market .gauge__pin-dot{
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}