/* ═══════════════════════════════════════════════════════════════════════════
   SHARED WIDGET LAYER - the parts core.js renders into every design
   ═══════════════════════════════════════════════════════════════════════════
   ⛔ STRUCTURE ONLY, DRIVEN BY VARIABLES. Every colour, radius, font and weight
   below reads a var that the DESIGN sets. This file decides that a calendar cell
   is a square with a date in the corner. It never decides what a calendar cell
   looks like. That is the design's job, and each of the five answers it
   differently.

   ⛔ IT EXISTS BECAUSE FIVE HAND-WRITTEN COPIES IS FIVE CHANCES TO SHIP A
   MOCKUP. Eli reviews these to approve one and will read the numbers while he
   does. The calendar, the charts and the slippage table have to be genuinely
   live in all five, so they are written once.

   Designs override anything here freely. Defaults are deliberately plain.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --w-radius:10px;
  --w-gap:10px;
  --w-mono:ui-monospace,'SF Mono',SFMono-Regular,'Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
  --w-cell-min:64px;
}

/* ── charts ───────────────────────────────────────────────────────────────── */
.lp-chart{width:100%;height:100%;display:block;overflow:visible}
.chart-box{width:100%;height:clamp(190px,34vw,320px);overflow:hidden}
.chart-box.short{height:clamp(150px,26vw,230px)}
.cline{stroke:var(--up);stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.cg{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.cl{fill:var(--dim);font-size:11px;font-family:var(--w-mono)}
.cdot{fill:var(--up);stroke:var(--bg);stroke-width:2;vector-effect:non-scaling-stroke}
.mb{transition:opacity .15s,filter .15s}
.mb.up{fill:var(--up2)}
.mb.dn{fill:var(--down)}
.mb:hover{opacity:.75}
/* the bar being read, lit by the hover layer rather than by :hover, so the
   whole column is live and not just the pixels the rectangle covers */
.mb.hot{opacity:1;filter:brightness(1.35) saturate(1.1)}

/* ── the chart readout ──────────────────────────────────────────────────────
   ⛔ THIS REPLACES SVG `<title>`, WHICH IS THE OS TOOLTIP (Eli, 2026-08-26:
   "it looks like old text boxes now"). Everything here is ours: the crosshair,
   the dot on the line, and the panel. `pointer-events:none` throughout, so the
   readout can never intercept a click meant for the chart or for the calendar
   sitting underneath it. */
.has-hover{position:relative}
.lp-cross{stroke:var(--dim);stroke-width:1;stroke-dasharray:2 3;
  vector-effect:non-scaling-stroke;pointer-events:none;transition:opacity .12s}
.lp-hdot{fill:var(--up);stroke:var(--bg);stroke-width:2;
  vector-effect:non-scaling-stroke;pointer-events:none;transition:opacity .12s}
.lp-tip{position:absolute;left:0;top:0;z-index:6;pointer-events:none;
  opacity:0;transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
  min-width:132px;padding:9px 12px 10px;border-radius:12px;
  background:rgba(10,14,19,.93);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09);
  font-variant-numeric:tabular-nums}
.lp-tip.on{opacity:1;transform:translateY(0)}
.lp-tip .k{display:block;font-family:var(--w-mono);font-size:9.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--dim);margin-bottom:3px;white-space:nowrap}
.lp-tip b{display:block;font-size:19px;font-weight:600;line-height:1.15;white-space:nowrap}
.lp-tip b.up{color:var(--up)} .lp-tip b.dn{color:var(--down)}
.lp-tip .r{display:flex;justify-content:space-between;gap:14px;margin-top:4px;
  font-size:11px;white-space:nowrap}
.lp-tip .r:first-of-type{margin-top:7px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,.09)}
.lp-tip .r i{font-style:normal;color:var(--dim)}
.lp-tip .r em{font-style:normal;color:var(--txt);font-weight:600}
.lp-tip .r em.up{color:var(--up)} .lp-tip .r em.dn{color:var(--down)}
/* ⛔ THE READOUT IS NOT SWITCHED OFF ON A PHONE (Eli, 2026-08-27: the value has
   to show on the point being pressed, on mobile as well as on desktop). This
   used to be `@media(hover:none){.lp-tip,.lp-cross,.lp-hdot{display:none}}` -
   the reader with the smallest screen and the most reason to want a number
   read out to them was the one reader who could never get one. The stated
   worry, "the panel would appear on tap and never leave", is real and is
   answered where it belongs: `attachHover` dismisses a TOUCH readout by itself
   after the finger lifts, and a mouse readout still leaves on pointerleave.
   ⛔ AND THE CHART OWNS ONLY THE SIDEWAYS GESTURE. `touch-action:pan-y` on the
   host leaves vertical scrolling to the browser, so scrubbing a chart can never
   trap a reader who is trying to scroll the page. It is set in the script, on
   the host it attaches to, so a chart cannot get the listeners without it. */
.has-hover{touch-action:pan-y}

/* ── the v2 marker's note ───────────────────────────────────────────────────
   The line itself stays exactly as Eli approved it ("the grey outline is
   perfect"). This is only what appears when a pointer finds it. */
.v2-hit{fill:transparent;cursor:help;pointer-events:all}
.v2-tip{max-width:260px;z-index:7}
.v2-tip b.neutral{color:var(--txt);font-size:14px;letter-spacing:.1px}
.v2-tip .note{display:block;margin-top:6px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:11px;line-height:1.6;color:var(--dim);white-space:normal}
/* The marker note is tap-toggled as well as hover-shown, so a phone reader can
   find out what the line on their chart means. It no longer needs a media query
   to survive: nothing hides the readout layer on touch any more. */

/* ⛔ THE CRITERIA MARK IS A LINE AND NOTHING ELSE. Eli asked for "just the line
   and a tiny marker", no text and no callout, because an unbroken curve implies
   one unchanged system produced all of it and the mark is the only thing that
   has to be said about that. Grey on purpose: it is not a result. */
.v2-mark{stroke:var(--neutral);stroke-width:1;stroke-dasharray:3 4;
  vector-effect:non-scaling-stroke;opacity:.75}
.v2-dot{fill:var(--neutral);opacity:.9}

/* where each strategy entered a combined curve. Soft, small, no readout. */
.entry-mark{fill:var(--up);opacity:.14}
.entry-core{fill:var(--up);opacity:.7}
.entry-mark.e2{fill:var(--cool);opacity:.20}
.entry-core.e2{fill:var(--cool);opacity:.85}

/* the calculator's two lines: the plan, and the same record at flat size */
.calc-comp{stroke:var(--cool)}
.calc-flat{stroke:var(--neutral);stroke-width:1.5;opacity:.8}

/* ⛔ THE AXIS TEXT MUST NOT STRETCH. The chart SVG uses
   preserveAspectRatio="none" so the PATH fills any width without dropping a
   day, which is exactly what "show all the results of each day on all
   applicable devices" requires - but that same scaling would smear the labels
   into unreadable ovals on a phone. Undoing it per text node keeps every day
   plotted and every label legible. */
.lp-chart text{vector-effect:non-scaling-stroke}
@supports (-webkit-touch-callout:none){.lp-chart text{font-size:11px}}

/* ── calendar ─────────────────────────────────────────────────────────────── */
.cal-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cal-nav{width:34px;height:34px;flex:none;border-radius:var(--w-radius);cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  font-size:17px;line-height:1;transition:border-color .18s,color .18s,background .18s}
.cal-nav:hover:not(:disabled){border-color:var(--up2);color:var(--up)}
.cal-nav:disabled{opacity:.32;cursor:not-allowed}
.cal-title{font:var(--w-cal-title,600 15px/1 inherit);letter-spacing:.4px;color:var(--txt)}
.cal-sum{margin-left:auto;color:var(--dim2);font-size:12.5px;font-family:var(--w-mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-sum i{color:var(--neutral);font-style:normal;padding:0 3px}
/* ⛔ FIVE COLUMNS, MONDAY TO FRIDAY (Eli, 2026-08-26). There is not one weekend
   session in either record, so a Saturday or a Sunday cell was furniture that
   could only ever be empty, and an empty cell in a results calendar invites the
   reader to ask what happened on it. The night session runs Monday to Thursday
   and keeps its Friday column, empty, because a four-column month reads as a
   broken calendar rather than as a fact about the strategy. */
.cal-dow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--w-gap);margin-bottom:6px}
.cal-dow span{text-align:center;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--neutral)}
.cal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--w-gap)}
.cal-c{position:relative;min-height:var(--w-cell-min);border-radius:var(--w-radius);
  border:1px solid var(--line);background:var(--panel2);padding:7px 8px;
  display:flex;flex-direction:column;gap:2px;overflow:hidden;
  font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none;
  margin:0;width:100%}
.cal-c.pad{border:none;background:none;min-height:0}
.cal-c.off{opacity:.34;background:transparent}
.cal-c.on{cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s}
.cal-c.on:hover,.cal-c.on:focus-visible{transform:translateY(-2px);border-color:var(--line2);
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.cal-c.on.sel{border-color:var(--up);box-shadow:0 6px 22px rgba(0,0,0,.5)}
.cal-d{font-size:10.5px;color:var(--neutral);font-family:var(--w-mono);line-height:1}
.cal-v{font:var(--w-cal-val,700 13px/1.1 inherit);font-variant-numeric:tabular-nums;
  margin-top:auto;letter-spacing:-.2px}
.cal-t{font-size:9.5px;color:var(--neutral);font-family:var(--w-mono);line-height:1}
.cal-c.up{border-color:rgba(57,255,20,.30);background:rgba(57,255,20,.07)}
.cal-c.up .cal-v{color:var(--up)}
.cal-c.dn{border-color:rgba(255,77,77,.30);background:rgba(255,77,77,.06)}
.cal-c.dn .cal-v{color:var(--down)}
.cal-c.flat .cal-v{color:var(--dim2)}
.cal-c.none .cal-v{color:var(--neutral);font-size:10px;font-weight:400}

/* ── the day, opened ──────────────────────────────────────────────────────
   ⛔ EVERY FIELD IN HERE IS IN THE RECORD OR IS ARITHMETIC ON IT. Eli asked to
   be able to open a day and read it, so it reads out the day's trading result,
   what the commission took, the trades taken, how deep it went before it closed
   and where the account stood after it. Nothing was added to fill the panel. */
.cal-day:empty{display:none}
.day-open{margin-top:var(--w-gap);border:1px solid var(--line2);border-radius:var(--w-radius);
  background:var(--panel2);padding:14px 16px}
.day-open:focus{outline:none}
.day-open:focus-visible{outline:2px solid var(--up);outline-offset:2px}
.day-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--line)}
.day-head b{font-size:13.5px;color:var(--txt)}
.day-head span{font-size:11px;color:var(--neutral);font-family:var(--w-mono)}
/* ⛔ THE OLD `auto-fit` GRID IS GONE, AND WHY MATTERS. Nine equal cells at
   minmax(112px,1fr) re-flowed to a different column count at every width, and
   because a label like "TRADING P&L before fees" wraps at some of those widths
   and not others, the VALUES ended up on several different baselines inside one
   panel. It read as broken. Two fixed structures replace it and neither can
   drift: three headline cells on one row, then a two-column ledger whose values
   share one right edge no matter how long the labels are. */

/* the three figures the reader opened the day for */
.day-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.dh{min-width:0}
.dh span{display:block;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh b{display:block;margin-top:6px;font-family:var(--w-mono);font-size:clamp(15px,2.4vw,20px);
  font-weight:600;font-variant-numeric:tabular-nums;color:var(--txt);line-height:1.15}

/* the ledger: label left, value hard right, one row per fact */
.day-ledger{display:grid;gap:0}
.dl-r{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--line)}
.dl-r:last-child{border-bottom:none}
.dl-k{font-size:11.5px;color:var(--dim2);min-width:0}
.dl-k i{display:block;font-style:normal;font-size:10px;color:var(--neutral);margin-top:1px}
.dl-v{font-family:var(--w-mono);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--txt);white-space:nowrap;text-align:right}
/* the context block reads as secondary: same alignment, quieter tone */
.day-ledger.ctx{margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.day-ledger.ctx .dl-v{color:var(--dim2);font-weight:500}

/* a phone cannot hold five readable columns of money, so the cells shrink to
   a colour-and-date grid and the value stays only where it fits */
@media(max-width:640px){
  :root{--w-cell-min:46px;--w-gap:5px}
  .cal-c{padding:5px 4px}
  .cal-v{font-size:9.5px}
  .cal-t{display:none}
  .day-open{padding:12px 13px}
  /* the three headlines stay on one row on a phone - they are short, and
     stacking them would push the ledger below the fold */
  .day-hero{gap:8px}
  .dh span{font-size:8.5px;letter-spacing:1.2px}
  .dl-k{font-size:11px}
  .dl-v{font-size:12.5px}
}

/* ── slippage table ───────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--w-radius);background:var(--panel2)}
.slip-tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.slip-tbl caption{caption-side:top;text-align:left;padding:14px 16px 12px;
  color:var(--dim);font-size:12px;letter-spacing:.3px;border-bottom:1px solid var(--line)}
.slip-tbl th{text-align:left;padding:11px 16px;color:var(--up);
  font:600 10px/1 inherit;letter-spacing:1.8px;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap}
.slip-tbl td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--dim2);
  vertical-align:middle}
.slip-tbl tbody tr:last-child td{border-bottom:none}
.slip-tbl td b{color:var(--txt);display:block;font-weight:600}
.slip-tbl td span{display:block;color:var(--neutral);font-size:11.5px;margin-top:2px}
.slip-tbl .n{text-align:right;font-family:var(--w-mono);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.slip-tbl tbody tr{transition:background .16s}
.slip-tbl tbody tr:hover{background:rgba(255,255,255,.022)}
.slip-tbl tr.is-on{background:rgba(57,255,20,.07)}
.slip-tbl tr.is-on td{color:var(--txt)}
.slip-tbl .up{color:var(--up)}
.slip-tbl .dn{color:var(--down)}
.slip-tbl .dim{color:var(--neutral)}

/* ── the info box ───────────────────────────────────────────────────────────
   A real <details>, so it opens with no script, is keyboard reachable for free,
   and costs one line of height until someone wants it. */
.info{margin:0 0 var(--w-gap);border:1px solid var(--line);border-radius:var(--w-radius);
  background:var(--panel2);overflow:hidden}
.info summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:10px 13px;font-size:12px;color:var(--dim2);
  transition:background .18s,color .18s}
.info summary::-webkit-details-marker{display:none}
.info summary:hover{background:rgba(255,255,255,.03);color:var(--txt)}
.info summary i{flex:none;width:17px;height:17px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(57,255,20,.14);color:var(--up);
  font:700 10px/1 var(--w-mono);font-style:normal}
.info summary::after{content:'+';margin-left:auto;color:var(--neutral);
  font:400 15px/1 var(--w-mono);transition:transform .22s ease}
.info[open] summary::after{content:'−'}
.info[open] summary{border-bottom:1px solid var(--line);color:var(--txt)}
.info-b{padding:12px 13px 13px}
.info-b p{margin:0 0 9px;font-size:12px;line-height:1.75;color:var(--dim)}
.info-b p:last-child{margin-bottom:0}
.info-b b{color:var(--dim2)}

/* ── shared tone helpers ──────────────────────────────────────────────────── */
.t-up{color:var(--up)}
.t-dn{color:var(--down)}
.t-dim{color:var(--dim)}
.nums{font-variant-numeric:tabular-nums}

/* ⛔ MOTION IS A PREFERENCE, NOT A DECISION WE MAKE FOR THE READER. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}