/* ===========================================================================
   Trench Analyze

   The same room as the other Trenches: one dark space, one lit surface in
   the middle of it, one colour. Here the lit surface is a form, and then a
   brief. It is read on a phone first, so there is one column and nothing
   that needs a pointer.
   =========================================================================== */

@import url('/fonts/fonts.css');

:root {
  --void:     #080C0E;
  --room:     #0E1417;
  --panel:    #141B1F;
  --line-d:   #222B31;
  --line-d2:  #2E383F;

  --fg:       #E9EFF1;
  --fg-2:     #9AA7AD;
  --fg-3:     #7C8A91;

  --stage:    #FFFFFF;
  --stage-2:  #F6F8F8;
  --line-l:   #E4E9EA;
  --line-l2:  #CDD5D7;
  --ink:      #0F1619;
  --ink-2:    #586369;
  --ink-3:    #68747A;
  --ink-4:    #8C979C;

  --accent:      #10715A;
  --accent-hi:   #148A6D;
  --accent-lit:  #35C48F;
  --accent-ink:  #0B5F4B;

  --warn:   #8A6A08;
  --danger: #C04A40;

  --t-0: 10px; --t-1: 11px; --t-2: 12.5px; --t-3: 14px; --t-4: 15px;
  --t-5: 18px; --t-6: 24px; --t-7: 34px;

  --sans: 'IBM Plex Sans Hebrew', -apple-system, system-ui, "Segoe UI", sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, "SF Mono", Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 44px;
  --r-lg: 14px; --r: 8px; --r-sm: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { background: var(--void); }
body {
  min-height: 100dvh;
  font-family: var(--sans);
  font-size: var(--t-3);
  line-height: 1.55;
  color: var(--fg);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  padding: 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}

button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; }
.num, .ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- the room ---------------------------------------------------------- */

.room {
  background: var(--room);
  border: 1px solid var(--line-d);
  border-radius: var(--r-lg);
  min-height: calc(100dvh - 12px);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.top {
  height: 52px; flex: none;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s4);
  border-bottom: 1px solid var(--line-d);
  background: var(--panel);
}
.mark { width: 14px; height: 18px; color: var(--accent-lit); flex: none; }
.wordmark { font-size: var(--t-2); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.top .who { margin-inline-start: auto; font-size: var(--t-2); color: var(--fg-3); letter-spacing: .04em; }

.floor {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s3) var(--s2) var(--s7);
}

/* ---- the stage — the one lit surface ----------------------------------- */

.stage {
  width: 100%; max-width: 640px;
  background: var(--stage);
  color: var(--ink);
  border-radius: 10px;
  padding: var(--s5) var(--s4) var(--s5);
}

.eyebrow {
  font-size: var(--t-1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: var(--s3);
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
}
.eyebrow .of { color: var(--ink-4); letter-spacing: .06em; }
.eyebrow bdi, .block h2 bdi { direction: ltr; unicode-bidi: isolate; }

h1.ask { font-size: 26px; font-weight: 600; line-height: 1.18; letter-spacing: -.012em; }
.hint { margin-top: var(--s3); color: var(--ink-3); font-size: var(--t-4); }

/* ---- the form ---------------------------------------------------------- */

.field { margin-top: var(--s5); }
.lbl {
  display: block;
  font-size: var(--t-1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; margin-bottom: var(--s2);
}
.lbl .opt { color: var(--ink-4); letter-spacing: .04em; text-transform: none; font-weight: 400; }

.seg { display: flex; gap: var(--s2); }
.chip {
  flex: 1;
  font-family: var(--mono); font-size: var(--t-4); font-weight: 500;
  padding: 11px 0;
  border: 1px solid var(--line-l2); border-radius: var(--r-sm);
  color: var(--ink-2); background: var(--stage);
  transition: border-color .12s, color .12s, background .12s;
}
.chip:hover { border-color: var(--ink-4); color: var(--ink); }
.chip[aria-pressed=true] { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip.he { font-family: var(--sans); }

input[type=text], textarea {
  width: 100%;
  background: var(--stage-2);
  border: 1px solid var(--line-l2);
  border-radius: var(--r-sm);
  padding: 11px var(--s3);
  font-size: 16px; /* not smaller: iOS zooms into anything under 16px */
  color: var(--ink);
}
input[type=text] { margin-top: var(--s2); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
input[type=text]:placeholder-shown { text-transform: none; }
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-4); text-transform: none; letter-spacing: 0; font-family: var(--sans); }

.drop {
  display: block; position: relative;
  border: 1px solid var(--line-l2); border-radius: var(--r-sm);
  background: var(--stage-2);
  cursor: pointer; overflow: hidden;
}
.drop input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--ink-4); }
.drop:has(input:focus-visible) { outline: 2px solid var(--accent-lit); outline-offset: 2px; }

.drop-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 132px; padding: var(--s4); text-align: center;
}
.drop-empty strong { font-weight: 600; color: var(--ink); }
.drop-empty span { font-size: var(--t-2); color: var(--ink-3); max-width: 300px; }

.drop-full { display: block; }
.drop-full img { display: block; width: 100%; max-height: 260px; object-fit: contain; background: var(--room); }
.drop-meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s3); font-size: var(--t-2); color: var(--ink-3);
  border-top: 1px solid var(--line-l);
}
.drop-meta #file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.drop-meta .swap { color: var(--accent-ink); font-weight: 500; flex: none; }

.error { margin-top: var(--s4); color: var(--danger); font-size: var(--t-3); }

.foot {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line-l);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.foot .rest { font-size: var(--t-2); color: var(--ink-4); }

.go {
  background: var(--accent); color: #fff;
  border-radius: var(--r-sm); padding: 13px var(--s6);
  font-size: var(--t-4); font-weight: 600; letter-spacing: .01em;
  width: 100%;
}
.go:hover { background: var(--accent-hi); }
.go:disabled { background: var(--line-l2); color: var(--ink-4); cursor: default; }
.ghost { color: var(--ink-3); font-size: var(--t-3); padding: var(--s2) 0; }
.ghost:hover { color: var(--ink); }

.reading { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-l); font-size: var(--t-3); color: var(--ink-2); }
.bar { height: 2px; background: var(--line-l); border-radius: 2px; overflow: hidden; margin-bottom: var(--s3); }
.bar i { display: block; height: 100%; width: 35%; background: var(--accent); animation: sweep 1.6s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.stage.busy .field, .stage.busy h1, .stage.busy .hint { opacity: .45; pointer-events: none; }

/* ---- the brief --------------------------------------------------------- */

.brief { padding-bottom: var(--s5); }

.verdict { margin-top: var(--s2); display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.structure { font-size: var(--t-7); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; display: flex; align-items: center; gap: var(--s3); }
.structure::before { content: ''; width: 10px; height: 10px; flex: none; background: currentColor; }
.structure .en { font-family: var(--mono); font-size: var(--t-2); font-weight: 500; color: var(--ink-4); letter-spacing: .08em; align-self: center; margin-top: 6px; }
.structure.bullish { color: var(--accent-ink); }
.structure.bearish { color: var(--danger); }
.structure.range   { color: var(--ink); }
.structure.unclear { color: var(--ink-3); }

.conf { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-2); color: var(--ink-3); }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; }
.bars i { width: 4px; background: var(--line-l2); display: block; }
.bars i:nth-child(1) { height: 6px; } .bars i:nth-child(2) { height: 9px; } .bars i:nth-child(3) { height: 12px; }
.bars[data-n="1"] i:nth-child(-n+1), .bars[data-n="2"] i:nth-child(-n+2), .bars[data-n="3"] i { background: var(--ink); }

.summary { margin-top: var(--s4); font-size: var(--t-5); line-height: 1.5; }

.block { margin-top: var(--s6); }
.block h2 {
  font-size: var(--t-1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 500; margin-bottom: var(--s3);
  display: flex; align-items: baseline; gap: var(--s2);
}
.block h2 .tag { color: var(--ink-4); letter-spacing: .04em; text-transform: none; font-weight: 400; }

.obs { list-style: none; counter-reset: obs; }
.obs li {
  counter-increment: obs;
  display: grid; grid-template-columns: 24px 1fr; gap: var(--s2);
  padding: var(--s3) 0; border-top: 1px solid var(--line-l);
  font-size: var(--t-4); line-height: 1.5;
}
.obs li:last-child { border-bottom: 1px solid var(--line-l); }
.obs li::before { content: counter(obs, decimal-leading-zero); font-family: var(--mono); font-size: var(--t-1); color: var(--ink-4); padding-top: 3px; }

.lvl-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.lvl-col h3 { font-size: var(--t-2); font-weight: 500; color: var(--ink-2); margin-bottom: var(--s1); }
.lvl {
  display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: var(--s3); align-items: baseline;
  padding: var(--s2) 0; border-top: 1px solid var(--line-l);
}
.lvl:last-child { border-bottom: 1px solid var(--line-l); }
.lvl .price { font-family: var(--mono); font-size: var(--t-5); font-weight: 500; font-variant-numeric: tabular-nums; }
.lvl .price.muted { font-size: var(--t-2); color: var(--ink-4); font-family: var(--sans); font-weight: 400; }
.lvl .note { font-size: var(--t-3); color: var(--ink-2); line-height: 1.45; }
.lvl-none { padding: var(--s2) 0; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); font-size: var(--t-3); color: var(--ink-4); }

.case { padding-block: var(--s3); padding-inline-start: var(--s4); border-inline-start: 2px solid var(--line-l2); }
.case + .case { margin-top: var(--s3); }
.case.bull { border-inline-start-color: var(--accent); }
.case.bear { border-inline-start-color: var(--danger); }
.case h3 { font-size: var(--t-2); font-weight: 600; margin-bottom: var(--s1); }
.case.bull h3 { color: var(--accent-ink); }
.case.bear h3 { color: var(--danger); }
.case p, .plain { font-size: var(--t-4); line-height: 1.55; color: var(--ink); }

.answer { margin-top: var(--s5); padding: var(--s3) var(--s4); background: var(--stage-2); border-radius: var(--r-sm); }
.answer .q { font-size: var(--t-2); color: var(--ink-3); margin-bottom: var(--s1); }
.answer .q b { color: var(--ink-2); font-weight: 500; }
.answer p { font-size: var(--t-4); line-height: 1.55; }

.note-missing { margin-top: var(--s4); font-size: var(--t-3); color: var(--warn); }

.disclaimer { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-l); font-size: var(--t-2); color: var(--ink-4); line-height: 1.5; }

.unreadable h1 { margin-top: var(--s2); }
.unreadable .plain { margin-top: var(--s3); color: var(--ink-2); }

/* ---- room to breathe on a wider screen --------------------------------- */

@media (min-width: 600px) {
  body { padding: 10px; }
  .room { min-height: calc(100dvh - 20px); border-radius: 18px; }
  .top { height: 56px; padding: 0 var(--s5); }
  .floor { padding: var(--s6) var(--s5) var(--s7); }
  .stage { padding: var(--s7) var(--s6) var(--s6); border-radius: 14px; }
  h1.ask { font-size: 32px; }
  .go { width: auto; }
  .foot .rest { margin-inline-start: auto; }
  .lvl-grid { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}

/* ---- the chart, with the brief drawn over it -------------------------- */

.chart { margin-top: var(--s4); }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.chart-head .lbl { margin: 0; }
.toggle {
  font-size: var(--t-2); font-weight: 500; color: var(--accent-ink);
  border: 1px solid var(--line-l2); border-radius: var(--r-sm); padding: 5px 10px; background: var(--stage);
}
.toggle:hover { border-color: var(--ink-4); }
.toggle[aria-pressed=false] { color: var(--ink-3); }

/* The image is the truth: it is never drawn on. The marks live in a layer
   with exactly its box, positioned in fractions, so they follow it to any
   size without a single pixel being computed here. */
.frame { position: relative; direction: ltr; border: 1px solid var(--line-l2); border-radius: var(--r-sm); overflow: hidden; background: var(--room); }
.frame img { display: block; width: 100%; height: auto; }
.marks { position: absolute; inset: 0; pointer-events: none; font-family: var(--sans); }
.marks[hidden] { display: none; }

.mk { position: absolute; }
.mk .tag {
  position: absolute; white-space: nowrap;
  font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: .02em;
  padding: 2px 5px; border-radius: 3px; direction: rtl; unicode-bidi: plaintext;
  color: #fff; background: rgba(15, 22, 25, .85);
}
/* The price rides on the tag only where there is room for it; on a phone the
   levels list right under the chart says the same number. */
.mk .tag bdi { display: none; font-family: var(--mono); font-weight: 500; letter-spacing: 0; opacity: .85; }

/* a line across the whole chart */
.mk.line { left: 0; right: 0; height: 0; border-top: 1.5px solid; transform: translateY(-.75px); }
.mk.line .tag { top: -19px; left: 6px; }
.mk.line.tag-right .tag { left: auto; right: 6px; }
.mk.line.below .tag { top: 4px; }
.mk.line.support { border-color: var(--accent-lit); } .mk.line.support .tag { background: var(--accent-ink); }
.mk.line.resistance { border-color: #E8756A; } .mk.line.resistance .tag { background: var(--danger); }
.mk.line.invalidation { border-top-style: dashed; border-color: #D6A63C; } .mk.line.invalidation .tag { background: var(--warn); }

/* a point on a candle */
.mk.point { width: 0; height: 0; }
.mk.point::before {
  content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid #fff; background: var(--accent-lit); box-sizing: border-box;
}
.mk.point .tag { left: 0; transform: translateX(-50%); top: -22px; }
.mk.point.below .tag { top: 10px; }
.mk.point.edge-l .tag { transform: none; left: 8px; }
.mk.point.edge-r .tag { transform: translateX(-100%); left: -8px; }
.mk.point.LH::before, .mk.point.LL::before, .mk.point.break::before, .mk.point.rejection::before { background: #E8756A; }
.mk.point.LH .tag, .mk.point.LL .tag, .mk.point.break .tag, .mk.point.rejection .tag { background: var(--danger); }
.mk.point.HH .tag, .mk.point.HL .tag, .mk.point.reclaim .tag { background: var(--accent-ink); }
.mk.point.other::before { background: #D6A63C; } .mk.point.other .tag { background: var(--warn); }

.chart-note { margin-top: var(--s2); font-size: var(--t-2); color: var(--ink-4); }

@media (min-width: 600px) {
  .mk .tag { font-size: 12px; padding: 3px 6px; }
  .mk .tag bdi { display: inline; }
  .mk.line .tag { top: -22px; }
  .mk.point .tag { top: -26px; }
  .mk.point.below .tag { top: 12px; }
}