/* ==================================================================
   patterns.css — FULL REBUILD for candlestick-patterns.php.

   Structure of this file, in order:
     1. Shared styles (used on both desktop and mobile)
     2. DESKTOP layout (fixed 3-panel "game" view, >900px wide)
     3. MOBILE layout (normal scrolling single column, <=900px wide)

   Reuses the :root color/font variables already defined in
   css/styles.css (loaded before this file on the page).
   ================================================================== */


/* ============================================================
   1. SHARED — applies at every screen size
   ============================================================ */

*{ box-sizing:border-box; }

#patternsApp{ display:flex; flex-direction:column; }

/* ---- top bar ---- */
#pTopbar{
  height:56px; background:var(--bg-raise); border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 18px; gap:16px; flex-shrink:0;
}
#pTopbar .site-logo{ display:flex; align-items:center; gap:9px; text-decoration:none; }
#pTopbar .bars{ display:flex; align-items:flex-end; gap:3px; height:22px; }
#pTopbar .bars i{ width:4px; border-radius:1px; display:block; }
#pTopbar .bars i:nth-child(1){ height:9px; background:var(--red); }
#pTopbar .bars i:nth-child(2){ height:15px; background:var(--gold); }
#pTopbar .bars i:nth-child(3){ height:22px; background:var(--green); }
#pTopbar .bars i:nth-child(4){ height:12px; background:var(--green); }
#pTopbar .site-logo-text{ font-family:var(--font-d); font-weight:800; font-size:16px; color:var(--text); letter-spacing:-.01em; }
#pTopbar h1{
  font-family:var(--font-m); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin-left:6px; padding-left:14px; border-left:1px solid var(--line);
}
#pTopbar .spacer{ flex:1; }
#pTopbar .icobtn{
  background:transparent; border:1px solid var(--line); width:34px; height:34px;
  border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--text); font-size:14px;
  transition:.12s; text-decoration:none;
}
#pTopbar .icobtn:hover{ background:rgba(19,23,34,.05); border-color:#C7CBD1; }
#pTopbar .icobtn-wide{ width:auto; padding:0 12px; font-family:var(--font-m); font-size:11.5px; font-weight:600; letter-spacing:.03em; gap:6px; }

/* ---- pattern list items (used in sidebar on desktop, horizontal strip on mobile) ---- */
.pattern-item{
  display:flex; align-items:center; gap:9px; text-align:left; width:100%;
  background:transparent; border:1px solid transparent; border-left:2px solid transparent; border-radius:5px; padding:6px 8px;
  transition:.12s; cursor:pointer;
}
.pattern-item:hover{ background:rgba(19,23,34,.04); }
.pattern-item.active{ background:var(--card); border-color:var(--line); border-left-color:var(--green); }
.pattern-icon{ flex-shrink:0; width:42px; height:48px; display:flex; align-items:center; justify-content:center; }
.pattern-item-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pattern-item-name{ font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.005em; }
.pattern-item-tag{ font-size:10px; font-family:var(--font-m); color:var(--muted); letter-spacing:.01em; }

#patternSearch{
  width:100%; padding:8px 11px; border-radius:6px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font-size:12.5px; font-family:var(--font-b);
}
#patternSearch:focus{ outline:none; border-color:var(--green); }

/* ---- big candle display card ---- */
#bigCandleDisplayLabel{
  width:100%; max-width:640px; font-family:var(--font-m); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:6px;
}
#bigCandleDisplayWrap{
  width:100%; max-width:640px; background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 1px 2px rgba(16,24,40,.03); overflow:hidden; flex-shrink:0;
}
#bigCandleDisplay{ width:100%; height:auto; display:block; }
.candle-svg-icon{ width:100%; height:100%; display:block; }
.candle-svg-big{ width:100%; height:auto; display:block; aspect-ratio: 640 / 380; }

/* ---- pattern name / tags / description / detail blocks ---- */
#patternName{ font-family:var(--font-d); font-weight:700; text-align:center; letter-spacing:-.02em; }
#patternMeta{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
#patternMeta .tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600; font-family:var(--font-m); text-transform:uppercase; letter-spacing:.04em;
  padding:5px 10px; border-radius:4px; background:transparent; border:1px solid var(--line); color:var(--muted);
}
.tag-dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }
#patternDesc{ color:var(--text); text-align:left; }

.detail-block{ width:100%; }
.detail-heading{
  font-family:var(--font-m); font-size:10.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin-bottom:6px;
}
.detail-block p{ line-height:1.7; color:var(--text); }

#prevNextNav{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; border-top:1px solid var(--line); }
#prevNextNav .btn{ border-radius:6px; }
#patternCounter{ font-family:var(--font-m); font-size:11.5px; color:var(--muted); }

/* ---- right panel: legend + related patterns ---- */
#patternDetailsPanel h5{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-family:var(--font-m); font-weight:600; }
#patternDetailsPanel h5:first-child{ margin-top:0; }
.related-chip{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 9px;
  transition:.12s; cursor:pointer;
}
.related-chip:hover{ border-color:#C7CBD1; background:rgba(19,23,34,.02); }
.related-chip span:last-child{ font-size:12px; font-weight:600; color:var(--text); }
.related-icon{ flex-shrink:0; width:26px; height:32px; display:flex; align-items:center; justify-content:center; }

.legend-row{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.legend-dot{ width:8px; height:8px; border-radius:2px; flex-shrink:0; }

/* ---- entrance animation — crisp, no bounce ---- */
.candle-anim{ opacity:0; transform-origin:bottom; animation:candleIn .32s ease-out forwards; }
@keyframes candleIn{
  0%{ opacity:0; transform:scaleY(.85) translateY(4px); }
  100%{ opacity:1; transform:scaleY(1) translateY(0); }
}


/* ============================================================
   2. DESKTOP — fixed single-viewport 3-panel "game" layout.
      Applies above 900px. This is the ONLY place body/html get
      locked to 100vh — mobile explicitly undoes all of this.
   ============================================================ */
@media (min-width: 901px){
  html, body{ height:100vh; height:100dvh; overflow:hidden; }
  #patternsApp{ height:100vh; height:100dvh; }

  #pMain{ flex:1; display:grid; grid-template-columns:270px 1fr 300px; overflow:hidden; }

  #patternListPanel{ background:var(--bg-raise); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; }
  #patternSearchWrap{ padding:12px 12px 8px; flex-shrink:0; }
  #patternList{ flex:1; overflow-y:auto; padding:2px 8px 16px; display:flex; flex-direction:column; gap:1px; }

  #patternCenter{ overflow-y:auto; padding:28px 32px 40px; display:flex; flex-direction:column; align-items:center; }
  #bigCandleDisplayWrap{ margin-bottom:24px; }
  #patternName{ font-size:23px; margin-bottom:10px; }
  #patternMeta{ margin-bottom:20px; }
  #patternDesc{ max-width:640px; font-size:14px; line-height:1.75; }
  .detail-block{ max-width:640px; margin-top:20px; }
  .detail-block p{ font-size:13.5px; }
  #prevNextNav{ max-width:640px; margin-top:24px; padding-top:16px; }
  #prevNextNav .btn{ padding:9px 15px; font-size:12px; }

  #patternDetailsPanel{ background:var(--bg-raise); border-left:1px solid var(--line); overflow-y:auto; padding:18px; }
  #patternDetailsPanel h5{ margin:20px 0 10px; }
  .related-chip{ margin-bottom:6px; }
  .legend-row{ font-size:12px; padding:3px 0; }

  /* narrower desktop / laptop widths: tighten side columns, same layout */
  @media (max-width: 1180px){
    #pMain{ grid-template-columns:220px 1fr 260px; }
    #patternCenter{ padding:22px 22px 34px; }
  }
}


/* ============================================================
   3. MOBILE — normal scrolling page, single stacked column.
      Applies at 900px and below. A fixed-viewport 3-panel layout
      with 3 separately-scrolling regions doesn't work with one
      thumb on a phone, so this abandons that entirely: the whole
      page scrolls like a normal article, and the pattern list
      becomes a sticky horizontal strip you flick through instead
      of a sidebar.
   ============================================================ */
@media (max-width: 900px){
  html, body{
    height:auto; overflow-y:auto; overflow-x:hidden;
    overscroll-behavior:auto; -webkit-overflow-scrolling:touch;
  }
  #patternsApp{ height:auto; min-height:100dvh; }
  #pMain{ display:block; overflow:visible; height:auto; }

  #pTopbar{ position:sticky; top:0; z-index:20; padding:0 12px; gap:8px; }
  #pTopbar h1{ display:none; }
  #pTopbar .icobtn-wide span.label{ display:none; }

  #patternListPanel{
    display:block; position:sticky; top:56px; z-index:15;
    background:var(--bg-raise); border-bottom:1px solid var(--line);
  }
  #patternSearchWrap{ padding:10px 12px 6px; }
  #patternSearch{ padding:10px 12px; font-size:16px; } /* 16px stops iOS auto-zoom-on-focus */
  #patternList{
    display:flex; flex-direction:row; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; padding:6px 10px 12px; gap:5px;
  }
  .pattern-item{ flex-direction:column; width:auto; min-width:64px; padding:8px 6px; gap:4px; border-left-width:0; border-bottom:2px solid transparent; }
  .pattern-item.active{ border-bottom-color:var(--green); }
  .pattern-item-text{ align-items:center; text-align:center; }
  .pattern-item-name{ font-size:10px; max-width:60px; white-space:normal; line-height:1.2; }
  .pattern-item-tag{ display:none; } /* keeps the horizontal strip compact */
  .pattern-icon{ width:36px; height:42px; }

  #patternCenter{ display:block; padding:18px 16px 36px; }
  #bigCandleDisplayWrap{ margin:0 auto 16px; }
  #patternName{ font-size:19px; margin:0 0 10px; }
  #patternMeta{ margin-bottom:16px; }
  #patternDesc{ font-size:13.5px; line-height:1.7; }
  .detail-block{ margin-top:16px; }
  .detail-block p{ font-size:13px; }
  #prevNextNav{ margin-top:20px; padding-top:14px; }
  #prevNextNav .btn{ padding:11px 14px; font-size:12px; flex:1; } /* bigger tap targets */

  #patternDetailsPanel{
    display:block; background:var(--bg-raise); border-top:1px solid var(--line); padding:18px 16px 32px;
  }
  #patternDetailsPanel h5{ margin:18px 0 10px; }
  .related-chip{ padding:9px 10px; margin-bottom:6px; } /* bigger tap target */
  .legend-row{ font-size:12.5px; padding:4px 0; }
}