/* ==========================================================================
   TRACK RECORD (track-record.html)
   --------------------------------------------------------------------------
   Loaded after styles.css. The page reuses the floating nav, the shared
   section header and the footer; this file adds the page frame — head +
   summary strip, the filter toolbar — and the log itself: one table in a
   dark panel, a month row heading each group, with the loading skeleton,
   error panel and the phone layout that folds each row into a card.
   ========================================================================== */

/* -- Frame ---------------------------------------------------------------- */
.tr-head,.tr-log{background:#010101;color:#f8fafc;font-family:"Inter",Arial,sans-serif}
.tr-inner{max-width:1264px;margin:0 auto;padding-inline:32px}
/* The footer's Track Record link is this page. */
.vf-links a[aria-current="page"]{color:#fff}

/* Head: the floating nav rides over the first 76px, so the content starts
   below it. Same dual brand glow as the hero, pooled behind the title. */
.tr-head{position:relative;isolation:isolate;padding:180px 0 56px;overflow:hidden}
.tr-head::before{
  content:"";position:absolute;left:50%;top:-6%;width:min(920px,100%);height:70%;z-index:-1;
  transform:translateX(-50%);pointer-events:none;filter:blur(30px);
  background:
    radial-gradient(ellipse 45% 55% at 38% 42%, rgba(var(--lakshmi-rgb),.26), transparent 70%),
    radial-gradient(ellipse 45% 55% at 66% 52%, rgba(var(--vishnu-rgb),.34), transparent 70%);
}
.tr-lede{max-width:560px;margin:4px 0 0;color:#a6a6a6;font-size:15px;line-height:1.5;text-align:center}
/* GET TRADES under the lede: the site's primary button (hero size, the
   logo-gradient fill and glow every GET TRADES shares in styles.css). */
.tr-cta{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  height:50px;margin-top:10px;padding:0 28px;border-radius:999px;overflow:hidden;
  background:var(--cta-gradient);color:#fff;
  font-size:15px;font-weight:500;line-height:1;letter-spacing:-.1px;text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 20px -4px rgba(var(--cta-rgb),.5);
  transition:filter .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),transform .2s ease;
}
.tr-cta:hover{filter:brightness(1.12);box-shadow:var(--cta-glow-hover);transform:translateY(-1px)}
.tr-cta-arrow{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.tr-cta:hover .tr-cta-arrow{transform:translateX(3px)}

/* Summary strip: one panel, four cells, hairlines between. */
.tr-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:48px 0 0;
  border:1px solid rgba(255,255,255,.08);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.tr-stat{padding:24px 16px 22px;text-align:center}
.tr-stat + .tr-stat{border-left:1px solid rgba(255,255,255,.08)}
.tr-stat dt{margin:0 0 8px;color:#a3a3a3;font-size:13px;line-height:20px;font-weight:400}
.tr-stat dd{margin:0;color:#fff;font-size:32px;line-height:1.1;font-weight:500;letter-spacing:-1px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tr-stat dd small{display:block;margin-top:6px;color:#727272;font-size:12px;line-height:18px;font-weight:400;letter-spacing:0}
/* The values rise in one after the other the first time the strip paints
   (track-record.js sets --i on each cell and counts the numbers up on the
   same stagger); the labels are there from the start. */
.tr-stat dd{
  opacity:0;transform:translateY(12px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
.tr-stats.is-revealed .tr-stat dd{opacity:1;transform:none}
.tr-stat dd{position:relative}
.tr-stat-n{display:inline-block}
/* The Win rate's party popper (track-record.js): bits thrown from the
   number's centre, each animated on its own, gone again in under two
   seconds. The strip does not clip, so they can fly past its edge. */
.tr-pop{position:absolute;left:50%;top:.55em;width:0;height:0;z-index:1;pointer-events:none}
.tr-pop i{position:absolute;left:-3px;top:-5px;width:6px;height:10px;border-radius:1.5px;background:var(--c,#fff);will-change:transform,opacity}
.tr-pop i.is-dot{left:-3px;top:-3px;width:6px;height:6px;border-radius:50%}
.tr-pop i.is-strip{left:-1.5px;top:-8px;width:3px;height:16px;border-radius:2px}

.tr-disclaimer{max-width:760px;margin:22px auto 0;color:#707070;font-size:12px;line-height:18px;text-align:center}

/* -- Toolbar -------------------------------------------------------------- */
.tr-log{padding:8px 0 var(--section-pad)}
.tr-toolbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;
  padding-bottom:22px;
}
/* The chips run on one line and scroll sideways when there are more than
   fit, so the count on the right stays put. The scrollbar is hidden; the
   edges fade instead (track-record.js sets can-left / can-right), and the
   3px padding keeps focus rings inside the clip. */
.tr-filters{
  display:flex;flex:1 1 0;min-width:0;align-items:center;gap:8px;
  margin:-3px;padding:3px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:none;
  --fade-l:0px;--fade-r:0px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
}
.tr-filters::-webkit-scrollbar{display:none}
.tr-filters.can-left{--fade-l:40px}
.tr-filters.can-right{--fade-r:40px}
.tr-outcomes{display:contents}
.tr-chip{
  display:inline-flex;flex-shrink:0;align-items:center;gap:7px;
  height:36px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:#a3adbd;font-family:inherit;font-size:13.5px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.tr-chip:hover{color:#fff;border-color:rgba(255,255,255,.24)}
.tr-chip.is-active{background:#fff;border-color:#fff;color:#0b0d12}
.tr-chip-count{
  min-width:20px;padding:3px 6px;border-radius:999px;
  background:rgba(255,255,255,.08);color:inherit;
  font-size:11.5px;font-weight:600;line-height:1;text-align:center;font-variant-numeric:tabular-nums;
}
.tr-chip.is-active .tr-chip-count{background:rgba(11,13,18,.09)}
.tr-chip-count:empty{display:none}
/* Applied filters: one chip per ticked dropdown value, tinted so it reads
   as a filter that is on, with an × — the whole chip removes it. */
.tr-active{display:flex;flex-shrink:0;align-items:center;gap:8px;margin-left:4px;padding-left:12px;border-left:1px solid rgba(255,255,255,.12)}
.tr-active[hidden]{display:none}
.tr-chip--on{gap:5px;padding:0 9px 0 12px;border-color:rgba(29,94,224,.45);background:rgba(29,94,224,.14);color:#fff}
.tr-chip--on:hover{border-color:rgba(29,94,224,.75);background:rgba(29,94,224,.24);color:#fff}
.tr-chip-key{margin-right:1px;color:rgba(255,255,255,.55);font-weight:500}
.tr-chip-key::after{content:":"}
.tr-chip-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:2px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .2s ease}
.tr-chip--on:hover .tr-chip-x{background:rgba(255,255,255,.22)}
.tr-toolbar-note{display:flex;flex-shrink:0;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 0 auto;color:#6b7280;font-size:13px;line-height:20px;white-space:nowrap}
.tr-dot{color:#4b5160}
/* Flag beside the count: when the sheet was read, "Saved copy" when it
   could not be reached, amber "Mock data" on a local ?mock run. */
.tr-flag{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  color:#9aa0ad;font-size:11.5px;font-weight:500;line-height:16px;
}
.tr-flag-dot{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.tr-flag--warn{border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.1);color:#fbbf24}

/* -- Filters + sort ------------------------------------------------------- */
/* The controls row sits above the chips, hung off the right edge: search,
   one tick-list dropdown per facet the sheet has, the period picker and
   Sort (newest or oldest first). The Clear link lives in the chips row and
   appears once something is set. */
.tr-controls{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-end;gap:8px;margin:0 0 14px}
.tr-search,.tr-select{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:#a3adbd;font-size:13px;line-height:1;
  transition:border-color .2s ease,background .2s ease;
}
.tr-search:focus-within,.tr-select:focus-within,.tr-drop:focus-visible{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.tr-search{flex:0 1 240px;color:#7c818d}
.tr-search svg{flex-shrink:0}
.tr-search input,.tr-select select{
  -webkit-appearance:none;appearance:none;border-radius:0;   /* no native search-field chrome on iOS */
  min-width:0;height:100%;padding:0;border:0;background:none;outline:none;
  color:#ededed;font-family:inherit;font-size:13.5px;line-height:1;
}
.tr-search input{width:100%}
.tr-search input::placeholder{color:#7c818d}
.tr-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.tr-select span,.tr-drop span{color:#7c818d;font-size:12.5px;white-space:nowrap}
.tr-select select{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  padding-right:18px;font-weight:500;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c818d' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") right center/10px 6px no-repeat;
}
.tr-select select option{background:#14161c;color:#ededed}
.tr-facets,.tr-rail-wrap,.tr-rail{display:contents}
.tr-clear[hidden]{display:none}
.tr-clear{
  flex-shrink:0;height:36px;padding:0 8px;border-radius:999px;border:1px solid transparent;background:none;
  color:#a3adbd;font-family:inherit;font-size:13px;font-weight:500;line-height:1;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(163,173,189,.4);
}
.tr-clear:hover{color:#fff}
/* Layout toggle: signals as rows (the sheet as it is) or as columns. */
.tr-layout{
  display:inline-flex;flex-shrink:0;align-items:center;gap:2px;height:36px;padding:3px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
}
.tr-layout-btn{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:28px;border:0;border-radius:999px;
  background:none;color:#7c818d;cursor:pointer;transition:color .2s ease,background .2s ease;
}
.tr-layout-btn:hover{color:#fff}
.tr-layout-btn.is-active{background:rgba(255,255,255,.12);color:#fff}

/* Dropdown buttons (the facets and Period): a pill like the other
   controls with the label, the current value and a chevron, opening a
   popover underneath. */
.tr-drop{cursor:pointer;font-family:inherit;text-align:left}
.tr-drop strong{min-width:0;overflow:hidden;color:#ededed;font-size:13.5px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.tr-drop svg{color:#7c818d;flex-shrink:0;margin-left:2px}
.tr-drop[aria-expanded="true"]{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}

/* Facet menus: a tick list. Any number of rows can be on; the All row is
   on when none are. Each row shows how many signals carry that value. */
.tr-facet{position:relative}
.tr-facet.is-set .tr-drop{border-color:rgba(29,94,224,.5)}
.tr-menu{
  position:absolute;z-index:30;top:calc(100% + 8px);left:0;
  min-width:max(100%,220px);max-height:min(380px,60vh);overflow:auto;padding:6px;
  border:1px solid rgba(255,255,255,.1);border-radius:14px;
  background:#111318;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);
}
.tr-menu[hidden]{display:none}
.tr-menu.is-right{left:auto;right:0}
.tr-menu-sep{height:1px;margin:4px 8px;background:rgba(255,255,255,.08)}
.tr-opt{
  display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;
  border:0;border-radius:9px;background:none;
  color:#a3adbd;font-family:inherit;font-size:13.5px;font-weight:500;line-height:1;text-align:left;white-space:nowrap;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.tr-opt:hover,.tr-opt:focus-visible{background:rgba(255,255,255,.05);color:#fff;outline:none}
.tr-opt[aria-checked="true"]{color:#fff}
.tr-opt-text{flex:1;overflow:hidden;text-overflow:ellipsis}
.tr-opt-count{color:#6b7280;font-size:11.5px;font-variant-numeric:tabular-nums}
.tr-check{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:16px;height:16px;border-radius:5px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#fff;
  transition:background .15s ease,border-color .15s ease;
}
.tr-check svg{opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease}
.tr-opt[aria-checked="true"] .tr-check{border-color:var(--vishnu-500);background:var(--vishnu-500)}
.tr-opt[aria-checked="true"] .tr-check svg{opacity:1;transform:none}

/* Period: the calendar popover — presets down the left, two months on the
   right, a summary and Apply along the foot. Days are 34px rounds; a
   picked span shows as a tinted band with solid ends. */
.tr-period{position:relative}
.tr-cal{
  position:absolute;z-index:30;top:calc(100% + 8px);left:0;
  display:flex;min-width:max-content;
  border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;
  background:#111318;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);
  font-size:13px;
}
.tr-cal[hidden]{display:none}
.tr-cal.is-right{left:auto;right:0}
.tr-cal-presets{display:flex;flex-direction:column;gap:2px;padding:12px 10px;border-right:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.tr-cal-preset{
  padding:8px 12px;border:0;border-radius:10px;background:none;text-align:left;
  color:#a3adbd;font-family:inherit;font-size:13px;font-weight:500;line-height:18px;white-space:nowrap;cursor:pointer;
}
.tr-cal-preset:hover{background:rgba(255,255,255,.05);color:#fff}
.tr-cal-preset.is-active{background:rgba(255,255,255,.08);color:#fff}
.tr-cal-body{display:flex;flex-direction:column;padding:14px 16px 12px}
.tr-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.tr-cal-titles{display:flex;flex:1}
.tr-cal-title{flex:1;color:#ededed;font-size:13.5px;font-weight:600;line-height:20px;text-align:center}
.tr-cal-nav{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#a3adbd;cursor:pointer;
}
.tr-cal-nav:hover:not(:disabled){color:#fff;border-color:rgba(255,255,255,.24)}
.tr-cal-nav:disabled{opacity:.3;cursor:default}
.tr-cal-months{display:flex;gap:20px}
.tr-cal-month{width:calc(7 * 36px)}
.tr-cal-week,.tr-cal-grid{display:grid;grid-template-columns:repeat(7,36px)}
.tr-cal-week span{height:24px;color:#6b7280;font-size:11px;font-weight:500;line-height:24px;text-align:center}
.tr-cal-grid{row-gap:2px}
.tr-cal-blank{height:34px}
.tr-cal-day{
  position:relative;isolation:isolate;height:34px;margin:0;padding:0;border:0;background:none;
  color:#d4d7de;font-family:inherit;font-size:13px;font-weight:500;line-height:34px;text-align:center;cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.tr-cal-day::before{
  content:"";position:absolute;inset:1px 0;z-index:-1;background:transparent;
  transition:background .12s ease;
}
.tr-cal-day::after{
  content:"";position:absolute;inset:1px 1px;z-index:-1;border-radius:50%;background:transparent;
  transition:background .12s ease;
}
.tr-cal-day:hover:not(:disabled)::after{background:rgba(255,255,255,.08)}
.tr-cal-day.is-today{color:#fff;font-weight:600}
.tr-cal-day.is-today::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.tr-cal-day.is-in::before{background:rgba(29,94,224,.22)}
.tr-cal-day.is-start::before{left:50%;border-radius:17px 0 0 17px}
.tr-cal-day.is-end::before{right:50%;border-radius:0 17px 17px 0}
.tr-cal-day.is-start.is-end::before{background:transparent}
.tr-cal-day.is-start::after,.tr-cal-day.is-end::after{background:var(--vishnu-500);box-shadow:none}
.tr-cal-day.is-start,.tr-cal-day.is-end{color:#fff;font-weight:600}
.tr-cal-day:disabled{color:#3f4450;cursor:default}
.tr-cal-day:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:50%}
.tr-cal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.tr-cal-summary{margin:0;color:#8b8f99;font-size:12.5px;line-height:18px}
.tr-cal-actions{display:flex;gap:8px}
.tr-cal-clear,.tr-cal-apply{
  height:32px;padding:0 14px;border-radius:999px;font-family:inherit;font-size:13px;font-weight:500;line-height:1;cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.tr-cal-clear{border:1px solid rgba(255,255,255,.12);background:none;color:#a3adbd}
.tr-cal-clear:hover{color:#fff;border-color:rgba(255,255,255,.24)}
.tr-cal-apply{border:1px solid #fff;background:#fff;color:#0b0d12}
.tr-cal-apply:hover:not(:disabled){background:#e8e8e8;border-color:#e8e8e8}
.tr-cal-apply:disabled{opacity:.4;cursor:default}
/* Narrow screens: the popovers become sheets pinned to the bottom of the
   viewport — the tick lists as they are, the calendar with one month and
   its presets as a chip row on top. Fixed, so they also clear the rail the
   pills scroll in on a phone. */
@media (max-width:760px){
  .tr-menu,.tr-menu.is-right{position:fixed;top:auto;left:12px;right:12px;bottom:12px;min-width:0;max-height:min(420px,60vh);padding:8px;border-radius:16px}
  .tr-menu .tr-opt{height:42px;font-size:14px;border-radius:10px}
  .tr-cal{position:fixed;top:auto;left:12px;right:12px;bottom:12px;flex-direction:column;min-width:0;border-radius:16px}
  .tr-cal.is-right{left:12px;right:12px}
  .tr-cal-presets{flex-direction:row;flex-wrap:wrap;gap:6px;padding:12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .tr-cal-preset{padding:6px 11px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:12.5px}
  .tr-cal-preset.is-active{background:#fff;border-color:#fff;color:#0b0d12}
  .tr-cal-body{padding:12px 14px}
  .tr-cal-title[data-month="0"],.tr-cal-month[data-month="0"]{display:none}
  .tr-cal-months{justify-content:center}
  .tr-cal-month{width:calc(7 * 40px)}
  .tr-cal-week,.tr-cal-grid{grid-template-columns:repeat(7,40px)}
  .tr-cal-foot{flex-wrap:wrap}
}

/* -- The log panel -------------------------------------------------------- */
/* Fifteen columns need the whole canvas: the log section runs out to the
   1440 frame (32px gutters) instead of the 1264 content column. The panel
   scrolls sideways if a viewer's fonts still push it wider. */
.tr-log .tr-inner{max-width:1440px;padding-inline:16px}
.tr-panel{
  border:1px solid rgba(255,255,255,.08);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  /* clip, not hidden: keeps the rounded corners without making the panel a
     scroll container, which would pin the sticky header to the panel
     instead of the viewport. Older engines fall back to hidden. */
  overflow:hidden;overflow:clip;
  opacity:0;transition:opacity .4s ease;
}
.tr-panel.is-ready,.tr-panel[aria-busy="true"]{opacity:1}
/* The research-only strip (styles.css) closes the panel under the table;
   "Illustrative record." leads it only while the sample list is showing. */
.tr-panel > .card-disclaimer{padding:10px 12px;font-size:12px;line-height:18px;background:rgba(255,255,255,.025)}
/* Borders are kept on the cells (separate, no spacing) rather than
   collapsed, so they travel with the stuck header. Every column, headers
   and values alike, is left-aligned, with a hairline between columns. */
.tr-table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.tr-table th,.tr-table td{padding:12px 6px;vertical-align:middle;text-align:left}
.tr-table th:first-child,.tr-table td:first-child{padding-left:12px}
.tr-table th:last-child,.tr-table td:last-child{padding-right:12px}
.tr-table thead th + th,.tr-row td + td{border-left:1px solid rgba(255,255,255,.06)}
/* The sheet's headers, as written, centred on the row since the long ones
   wrap to two or three lines. The
   row sticks to the top of the viewport while the table scrolls under it,
   until the table's last row pushes it away. Sticky goes on the cells, not
   <thead>, which Safari does not stick; the rule line is a shadow because
   collapsed borders do not travel with a stuck cell. It pins --tr-stick
   below the viewport edge: a 16px breather, or clear of the nav pill while
   that is showing (it hides on scroll-down; script.js toggles .is-hidden).
   The band above the stuck row is masked by .tr-mask, a sibling stuck to
   the viewport edge just above the row, so rows do not scroll past it and
   the panel's own top edge (which scrolls away) is covered; the mask's
   bottom edge carries a copy of that edge, laid over the top of the row,
   so the stuck row looks exactly as it does at rest. It sits outside the
   panel because the panel clips its children at the padding box, which
   would leave the border showing. */
.tr-log{--tr-stick:16px}
.n-142-5:not(.is-hidden) ~ .tr-log{--tr-stick:88px}
.tr-table thead th{
  position:sticky;top:var(--tr-stick);z-index:3;
  padding-top:12px;padding-bottom:11px;vertical-align:bottom;
  color:#8b8f99;font-size:11px;font-weight:500;line-height:14px;letter-spacing:.01em;
  background:#0b0c0f;box-shadow:0 1px 0 rgba(255,255,255,.08);
  transition:top .35s cubic-bezier(.16,1,.3,1);
}
.tr-mask{
  position:sticky;top:0;z-index:4;
  box-sizing:border-box;height:var(--tr-stick);margin-top:calc(-1 * var(--tr-stick));
  border-bottom:1px solid rgba(255,255,255,.08);
  background:var(--dark);pointer-events:none;visibility:hidden;
  /* Both follow --tr-stick on the header's own curve; together they always
     add up to zero, so the panel never shifts as the pin moves. */
  transition:height .35s cubic-bezier(.16,1,.3,1),margin-top .35s cubic-bezier(.16,1,.3,1);
}
/* The corners: two 20px squares over the row's top corners (above it in
   the stack), each painting the page black outside the panel's arc and the
   hairline along it, clear inside so the row shows through — the same cut
   the panel's own rounded corners make at rest. */
.tr-mask::before,.tr-mask::after{
  content:"";position:absolute;top:100%;width:20px;height:20px;
  --edge:rgba(255,255,255,.08);
}
.tr-mask::before{left:0;background:radial-gradient(circle at 100% 100%,transparent 19px,var(--edge) 19.4px,var(--edge) 19.9px,var(--dark) 20.3px)}
.tr-mask::after{right:0;background:radial-gradient(circle at 0 100%,transparent 19px,var(--edge) 19.4px,var(--edge) 19.9px,var(--dark) 20.3px)}
.tr-panel-wrap.is-stuck .tr-mask{visibility:visible}
/* Width hints so the two longest headers wrap rather than stretch their columns. */
.tr-table thead .c-rationale{width:62px}
.tr-table thead .c-period{width:76px}
.tr-table .c-srNo{width:26px;padding-right:0}
.tr-table .c-reason{white-space:nowrap}
.tr-no{margin:0;color:#5c6170;font-variant-numeric:tabular-nums}

/* Month rows: one heads each group. */
.tr-month-row th{
  padding:11px 16px 9px;
  color:#d4d7de;font-size:13px;font-weight:600;line-height:18px;letter-spacing:-.1px;text-align:left;
  background:rgba(255,255,255,.035);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.06);
}
.tr-month-row:first-child th{border-top:0}
.tr-month-row th span{margin-left:8px;color:#6b7280;font-weight:400}

/* Signal rows. Cells are one line (a date-time cell stacks its time under
   the date); the security name is the row's anchor. */
.tr-row + .tr-row td{border-top:1px solid rgba(255,255,255,.06)}
.tr-row:hover td{background:rgba(255,255,255,.025)}
.tr-main{display:block;color:#e2e4e9;font-size:13px;font-weight:500;line-height:18px;white-space:nowrap}
.tr-asset{color:#f5f6f8;font-weight:600}
.tr-sub{display:block;margin-top:1px;color:#7c818d;font-size:11.5px;font-weight:400;line-height:15px;white-space:nowrap}
.tr-blank{color:#4b5160}

/* Buy/Sell: the hero deck's dark-ground tag colours. */
.tr-side{
  display:inline-block;padding:1px 8px;border-radius:6px;
  font-size:12px;font-weight:500;line-height:17px;letter-spacing:.01em;white-space:nowrap;
}
.tr-side--buy{background:rgba(16,185,129,.16);color:#34d399}
.tr-side--sell{background:rgba(248,113,113,.16);color:#f87171}

/* Closure reason, as typed, coloured by the outcome bucket on the row (or,
   signals as columns, on the cell). */
.tr-pill{
  display:inline-flex;align-items:center;gap:7px;
  height:26px;padding:0 10px 0 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);
  color:#c3c7d1;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;
}
.tr-pill-dot{width:7px;height:7px;border-radius:50%;background:#8c8c8c;flex-shrink:0}
.is-profit .tr-pill{border-color:rgba(16,185,129,.28);background:rgba(16,185,129,.1);color:#34d399}
.is-profit .tr-pill-dot{background:#34d399}
.is-loss .tr-pill{border-color:rgba(248,113,113,.28);background:rgba(248,113,113,.1);color:#f87171}
.is-loss .tr-pill-dot{background:#f87171}

/* -- Signals as columns --------------------------------------------------- */
/* The toggle's other layout. The sheet's headers run down the left as row
   headers and stay put while the table scrolls sideways under them; each
   signal is a column, the month groups spanning theirs along the top with
   the title stuck just past the header column. The wrapper scrolls, not
   the panel, so the research strip below holds still. */
.tr-scroll{overflow:visible}
.tr-panel.is-cols .tr-scroll{
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
}
.tr-panel.is-cols .tr-scroll::-webkit-scrollbar{height:8px}
.tr-panel.is-cols .tr-scroll::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(255,255,255,.18)}
/* At least the panel's width, so the row lines and the header band reach
   its edge however few signals there are. The signal columns have a set
   width (grown by their content), which keeps them out of the slack: that
   goes to the empty filler column each row ends in (track-record.js). */
.tr-cols{min-width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.tr-cols th,.tr-cols td{padding:11px 14px;vertical-align:middle;text-align:left;white-space:nowrap}
.tr-cols td{width:120px;min-width:120px}
.tr-cols td + td{border-left:1px solid rgba(255,255,255,.06)}
.tr-cols .tr-fill{width:auto;min-width:0;padding:0;border-left:0}
.tr-cols tbody tr + tr th,.tr-cols tbody tr + tr td{border-top:1px solid rgba(255,255,255,.06)}
.tr-cols tbody th{
  position:sticky;left:0;z-index:2;
  width:150px;min-width:150px;white-space:normal;   /* set, like the signal columns, so it keeps out of the slack */
  background:#0d0e11;color:#8b8f99;font-size:11px;font-weight:500;line-height:14px;letter-spacing:.01em;
  box-shadow:1px 0 0 rgba(255,255,255,.08);
}
.tr-cols thead th{
  padding:11px 16px 9px;
  color:#d4d7de;font-size:13px;font-weight:600;line-height:18px;letter-spacing:-.1px;
  background:rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.06);
}
.tr-cols thead th + th:not(.tr-fill){border-left:1px solid rgba(255,255,255,.06)}
.tr-cols .tr-corner{position:sticky;left:0;z-index:3;background:#16171b;box-shadow:1px 0 0 rgba(255,255,255,.08)}
.tr-cols .tr-month-title{position:sticky;left:calc(var(--tr-rowhead,150px) + 16px);display:inline-block}
.tr-cols .tr-month-title span{margin-left:8px;color:#6b7280;font-weight:400}
.tr-cols td.is-lit{background:rgba(255,255,255,.03)}
.tr-cols .c-asset td{padding-top:12px;padding-bottom:12px}
.tr-cols .tr-skel-row td .tr-skel{width:72px}

/* Pager under the panel: the range on the left, the page buttons on the
   right, styled like the chips. */
.tr-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-top:16px}
.tr-pager-info{margin-right:auto}
.tr-pager[hidden]{display:none}
.tr-pager-info{margin:0;color:#6b7280;font-size:13px;line-height:20px;font-variant-numeric:tabular-nums}
.tr-pager-nav{display:flex;align-items:center;gap:6px}
.tr-page{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:#a3adbd;font-family:inherit;font-size:13px;font-weight:500;line-height:1;cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.tr-page:hover:not(:disabled){color:#fff;border-color:rgba(255,255,255,.24)}
.tr-page.is-current{background:#fff;border-color:#fff;color:#0b0d12;cursor:default}
.tr-page:disabled{opacity:.35;cursor:default}
.tr-page--step{padding:0;width:34px}
.tr-page-gap{min-width:20px;text-align:center;color:#4b5160;font-size:13px}
/* Type a page number and press Enter or the arrow. */
.tr-goto{display:flex;align-items:center;gap:8px;margin:0;color:#6b7280;font-size:13px;line-height:20px;white-space:nowrap}
.tr-goto-input{
  width:56px;height:34px;padding:0 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:#ededed;font-family:inherit;font-size:13px;font-weight:500;line-height:1;text-align:center;
  font-variant-numeric:tabular-nums;outline:none;-moz-appearance:textfield;appearance:textfield;
  transition:border-color .2s ease,background .2s ease;
}
.tr-goto-input::-webkit-outer-spin-button,.tr-goto-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tr-goto-input::placeholder{color:#4b5160}
.tr-goto-input:focus{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}

/* Loading skeleton: bars where the text will be, shimmering. */
.tr-skel{
  display:block;width:var(--w,64px);max-width:100%;height:12px;margin:4px 0;border-radius:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);
  background-size:200% 100%;animation:tr-shimmer 1.4s ease-in-out infinite;
}
.tr-skel--sub{height:9px;margin-top:6px;opacity:.7}
.tr-skel--disc{width:32px;height:32px;margin:0;border-radius:50%}
.tr-skel--pill{height:28px;border-radius:999px}
@keyframes tr-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Error panel, in the table's place. */
.tr-state{
  padding:40px 24px;border:1px solid rgba(255,255,255,.08);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  text-align:center;
}
.tr-state-title{margin:0;color:#ededed;font-size:16px;font-weight:600;line-height:24px}
.tr-state-text{max-width:520px;margin:6px auto 0;color:#8b8f99;font-size:13.5px;line-height:20px}
.tr-state .tr-chip{margin-top:18px}
.tr-empty{margin:56px 0 0;color:#6b7280;font-size:15px;line-height:1.5;text-align:center}

@media (prefers-reduced-motion:reduce){
  .tr-chip,.tr-panel,.tr-table thead th,.tr-mask,.tr-search,.tr-select,.tr-drop,.tr-opt,.tr-check,.tr-check svg,.tr-chip-x,.tr-cal-day,.tr-page,.tr-goto-input,.tr-cta,.tr-cta-arrow,.tr-layout-btn,.tr-stat dd{transition:none}
  .tr-stat dd{opacity:1;transform:none}
  .tr-skel{animation:none}
}

/* -- Responsive ----------------------------------------------------------- */
@media (max-width:1024px){
  /* The nav is in flow below 1025px, so only its own gap is needed above the head. */
  .tr-head{padding:56px 0 48px}
  .tr-stats{margin-top:40px}
  .tr-stat{padding:22px 12px 20px}
  .tr-stat dd{font-size:28px}
}
@media (max-width:640px){
  .tr-inner{padding-inline:20px}
  .tr-head{padding:40px 0 40px}
  .tr-lede{font-size:14px}
  .tr-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px;border-radius:16px}
  .tr-stat{padding:18px 10px 16px}
  .tr-stat:first-child,.tr-stat:last-child{grid-column:1 / -1}
  .tr-stat:not(:first-child){border-top:1px solid rgba(255,255,255,.08)}
  .tr-stat:nth-child(even){border-left:0}
  .tr-stat dt{font-size:12px;line-height:18px;margin-bottom:6px}
  .tr-stat dd{font-size:24px;letter-spacing:-.6px}
  .tr-stat dd small{font-size:11px;line-height:16px;margin-top:4px}
  .tr-toolbar{padding-bottom:18px}
  .tr-chip{padding:0 12px;font-size:13px}   /* stays 36px, level with the pill rail above */
  .tr-toolbar-note{width:100%;margin-left:0;justify-content:flex-end;text-align:right;white-space:normal}   /* its own line, kept to the right */
  /* Two lines instead of four: the search box, then the filter pills on
     one line that scrolls sideways with the layout toggle held at its end.
     The wrap draws the edge fades (can-left / can-right, track-record.js)
     over the rail rather than masking it, so a menu opened from a pill,
     which is fixed to the bottom of the screen, is not faded with it. */
  .tr-search{flex-basis:100%;max-width:none}
  .tr-rail-wrap{position:relative;display:block;flex:1 1 0;min-width:0}
  .tr-rail{
    display:flex;align-items:stretch;gap:8px;
    margin:-3px;padding:3px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .tr-rail::-webkit-scrollbar{display:none}
  .tr-rail-wrap::before,.tr-rail-wrap::after{
    content:"";position:absolute;top:-3px;bottom:-3px;z-index:1;width:40px;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .tr-rail-wrap::before{left:-3px;background:linear-gradient(90deg,#010101,rgba(1,1,1,0))}
  .tr-rail-wrap::after{right:-3px;background:linear-gradient(270deg,#010101,rgba(1,1,1,0))}
  .tr-rail-wrap.can-left::before,.tr-rail-wrap.can-right::after{opacity:1}
  .tr-select,.tr-period,.tr-facet{flex:0 0 auto}
  .tr-drop{max-width:220px}
  .tr-pager{justify-content:center}
  .tr-pager-info{width:100%;margin-right:0;text-align:center}
}
/* -- Folded rows (tablet and phone) --------------------------------------- */
/* Below the desktop canvas each row folds into a card: the security name
   across the top, then every other column as a labelled value, two to a
   line, in the sheet's order. The header row is left for screen readers. */
@media (max-width:1024px){
  .tr-panel{border-radius:16px}
  .tr-panel > .card-disclaimer{padding:10px 18px}
  .tr-table{display:block}
  .tr-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tr-table thead th{position:static}
  .tr-table tbody{display:block}
  .tr-month-row{display:block}
  .tr-month-row th{display:block;padding:10px 18px 9px}
  .tr-row{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:start;
    padding:16px 18px;
  }
  .tr-row + .tr-row{border-top:1px solid rgba(255,255,255,.06)}
  .tr-row + .tr-row td{border-top:0}
  .tr-row:hover td{background:none}
  .tr-table td{display:block;padding:0;text-align:left}
  .tr-table td:first-child,.tr-table td:last-child{padding:0}
  .tr-table td::before{
    content:attr(data-label);display:block;margin-bottom:2px;
    color:#6b7280;font-size:11px;font-weight:500;line-height:14px;letter-spacing:.01em;
  }
  .tr-skel-row td::before{content:none}
  /* Security name leads the card, closure and action share the next line. */
  .tr-row .c-asset{order:-3;grid-column:1 / -1}
  .tr-row .c-asset::before{content:none}
  .tr-row .c-asset .tr-main{font-size:15px;line-height:20px;white-space:normal}
  .tr-row .c-reason{order:-2}
  .tr-row .c-action{order:-1}
  .tr-row .c-reason::before,.tr-row .c-action::before{margin-bottom:5px}
  .tr-row .c-reason .tr-pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .tr-row .c-srNo{width:auto}
  .tr-row .c-srNo .tr-no{color:#e2e4e9;font-size:13px}
  /* Date-time cells read as one line. */
  .tr-row .tr-main,.tr-row .tr-sub{display:inline;white-space:normal}
  .tr-row .tr-sub{margin:0 0 0 4px}
  .tr-row .c-sharedAt .tr-sub::before,.tr-row .c-exitAt .tr-sub::before{content:"· "}
  .tr-state{padding:32px 20px;border-radius:16px}
  /* Signals as columns keeps its table shape here, narrower. */
  .tr-cols th,.tr-cols td{padding:10px 12px}
  .tr-cols tbody th{width:116px;min-width:116px}
  .tr-cols thead th{padding:10px 14px 8px}
}
/* The nav sits over the head under 1025px (styles.css, --nav-h). */
@media (max-width:1024px){
  .tr-head{padding-top:calc(56px + var(--nav-h))}
}
@media (max-width:640px){
  .tr-head{padding-top:calc(40px + var(--nav-h))}
}