/* ==========================================================================
   journal.css — extra styles for the AI Trading Journal (journal.html).
   Everything else (header, fonts, colours, page head) comes from style.css.
   ========================================================================== */

:root {
  --win-text: #1d6b45;    /* green: winning trades, "Bullish" */
  --loss-text: var(--pylon-text); /* clay: losing trades, "Bearish" */
  --coach-border: var(--secondary); /* purple edge on the AI coach box */
  --coach-bg: var(--secondary-soft);
  --partial-text: #8a5a00; /* amber: calls that were half right */
}

/* Dark theme: set by main.js after sunset or by the ☀/☾ button. Before
   main.js runs, the phone's own setting is used. */
:root[data-theme="dark"] {
  --win-text: #6fcf97;
  --partial-text: #e0a64a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --win-text: #6fcf97;
    --partial-text: #e0a64a;
  }
}

/* ---------- The record ---------- */
/* Four big numbers in a grid, split by thin lines */
.record {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 44rem;
  margin: 1rem 0 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--rule); /* shows through the gaps as divider lines */
  box-shadow: var(--shadow);
}

.record > div {
  padding: 0.9rem 1rem;
  background: var(--card);
}

.record dt {
  font-family: var(--font-pixel);
  font-size: 0.5625rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.record dd {
  margin: 0.35rem 0 0;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
}

@media (min-width: 40rem) {
  .record {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* A smaller second value under a big number ("59% with scratches") */
.record dd.record__sub {
  margin-top: 0.25rem;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--muted);
}

.record__note {
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.record__note:empty {
  display: none;
}

/* The one-glance tally of the newest entry's graded calls */
.week {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin: 1rem 0 0;
}

.week__when {
  font-weight: 700;
  margin-right: 0.25rem;
}

.week__open {
  font-size: 0.875rem;
  color: var(--muted);
}

/* Each group (Calls, Options trades) gets a small heading */
.record__label {
  margin: 1.5rem 0 0;
  font-size: 1.05rem;
}

.record__label:first-child {
  margin-top: 1rem;
}

.week + .record__label {
  margin-top: 1.25rem;
}

.record__label + .record {
  margin-top: 0.5rem;
}

/* Groups with only two numbers stay two across */
@media (min-width: 40rem) {
  .record--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Entries ---------- */
.entries {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.entry {
  display: grid;
  gap: 0.75rem;
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--pylon);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.entry > * {
  margin: 0;
}

.entry__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.entry__date {
  font-family: var(--font-pixel);
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pylon-text);
}

/* Market lean pill */
.entry__bias {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.entry__bias--bullish {
  color: var(--win-text);
}

.entry__bias--bearish {
  color: var(--loss-text);
}

.entry__title {
  font-size: 1.5rem;
}

/* ---------- Trades ---------- */
.trades {
  display: grid;
  gap: 1px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--rule);
  list-style: none;
}

.trade {
  padding: 0.6rem 0.8rem;
  background: var(--bg);
}

.trade__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.trade__symbol {
  font-weight: 700;
}

.trade__side {
  font-size: 0.875rem;
  color: var(--muted);
}

/* The result sits on the right */
.trade__result {
  margin-left: auto;
  font-weight: 700;
}

.trade__result--win {
  color: var(--win-text);
}

.trade__result--loss {
  color: var(--loss-text);
}

.trade__result--open {
  font-size: 0.875rem;
  color: var(--muted);
}

/* "S1.0" / "F3.3" label */
.trade__tag {
  padding: 0 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Sold for what it cost */
.trade__result--flat {
  color: var(--muted);
}

.trade__meta {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.trade__note {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- AI coach box ---------- */
.coach {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--coach-border);
  border-radius: 0 10px 10px 0;
  background: var(--coach-bg);
}

.coach > * {
  margin: 0;
}

.coach__label {
  font-family: var(--font-pixel);
  font-size: 0.5625rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coach-border);
}

.coach__text {
  font-size: 1rem;
}

.entry__lesson {
  font-size: 1rem;
}

/* ---------- Inside an entry: headings, TLDR, small print ---------- */
.entry__sub {
  margin-top: 0.5rem;
  font-size: 1.05rem;
}

.entry__note {
  font-size: 0.875rem;
  color: var(--muted);
}

.tldr {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--pylon);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
}

.tldr > * {
  margin: 0;
}

.tldr__label {
  font-family: var(--font-pixel);
  font-size: 0.5625rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--pylon-text);
}

.tldr__text {
  font-weight: 500;
}

/* ---------- Calls ---------- */
.calls,
.scenarios,
.sectors {
  display: grid;
  gap: 1px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--rule);
  list-style: none;
}

.call,
.scenario,
.sector {
  padding: 0.65rem 0.8rem;
  background: var(--bg);
}

.call > p,
.sector > p {
  margin: 0;
}

.call__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.calls {
  counter-reset: call;
}

.call__text {
  font-weight: 700;
}

/* Number each call (1, 2, 3...) so the coach note can point to them */
.call__text::before {
  counter-increment: call;
  content: counter(call) ". ";
  color: var(--pylon-text);
}

/* Grade stamp on the right of each call */
.call__grade {
  flex-shrink: 0;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.call__grade--hit {
  color: var(--win-text);
}

.call__grade--partial {
  color: var(--partial-text);
}

.call__grade--miss {
  color: var(--loss-text);
}

.call__wrong {
  margin-top: 0.25rem !important;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Scenarios ---------- */
.scenario {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
}

.scenario p {
  margin: 0;
}

.scenario__odds {
  font-family: var(--font-pixel);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--pylon-text);
}

.scenario__name {
  font-weight: 700;
}

.scenario__text {
  margin-top: 0.2rem !important;
  font-size: 0.9375rem;
}

/* ---------- Plan ---------- */
.plan {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.2rem;
}

/* ---------- Fold-out sections (levels, sectors, schedule) ---------- */
.fold {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg);
}

.fold__title {
  min-height: 2.75rem;      /* 44px tap target */
  padding: 0.65rem 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.fold[open] .fold__title {
  border-bottom: 1px solid var(--rule);
}

.fold > :not(summary) {
  margin: 0.75rem 0.8rem;
}

.level + .level {
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

.level__symbol {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.level__rows,
.schedule {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.75rem;
  margin: 0;
  font-size: 0.9375rem;
}

.level__rows dt,
.schedule dt {
  color: var(--muted);
}

.level__rows dd,
.schedule dd {
  margin: 0;
}

.sectors {
  margin: 0.75rem 0.8rem;
}

.sector__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
}

.sector__name {
  font-weight: 700;
}

.sector__etf {
  font-size: 0.875rem;
  color: var(--muted);
}

.sector__dir {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 700;
}

.sector__dir--up {
  color: var(--win-text);
}

.sector__dir--down {
  color: var(--loss-text);
}

.sector__why {
  margin-top: 0.2rem !important;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Options trades ---------- */
.options__intro {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  color: var(--muted);
}

.options__filters {
  margin-top: 1rem;
}

.options__filters:empty {
  display: none;
}

.options__list,
[data-options-chart],
[data-options-coach] {
  max-width: 44rem;
}

.options__list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.options__list .trades {
  margin: 0;
  box-shadow: var(--shadow);
}

.options__list .trade {
  background: var(--card);
}

/* The older trades sit flush inside the tap-to-open box */
.options__older {
  background: var(--card);
}

.options__older > .trades {
  margin: 0;
  border: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: none;
}

.options__coach {
  margin-top: 1rem;
}

/* Bar chart: one bar per trade, gains up and losses down */
.bars {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.bars__svg {
  display: block;
  width: 100%;
  height: 6rem;
}

.bars__bar--win {
  fill: var(--win-text);
}

.bars__bar--loss {
  fill: var(--loss-text);
}

.bars__bar--flat {
  fill: var(--muted);
}

.bars__zero {
  stroke: var(--rule);
  stroke-width: 1;
}

.bars__caption {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* The running-total line under the bars. It shares the .bars card. */
.trend {
  margin-top: 0.75rem;
}

.trend__svg {
  display: block;
  width: 100%;
  height: 6rem;
}

.trend__zero {
  stroke: var(--rule);
  stroke-width: 1;
}

.trend__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ---------- Weekly scan (agent-fleet.html) ---------- */
/* The scan is one card, using the entry styles above */
.scan {
  max-width: 44rem;
}

/* ---------- Sources (robot entries) ---------- */
.entry__sources {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.entry__sources li + li {
  margin-top: 0.25rem;
}