/* ThetaRules design tokens: the one set of colours, fonts and shadows every page uses.
   Light by default; dark follows the system setting, or data-theme="dark" / "light" on <html> forces one.
   Pages keep only their own layout CSS and refer to these names (never to raw colours). */
:root {
  /* surfaces and text */
  --paper: #ffffff;        /* page background */
  --raised: #ffffff;       /* cards, panels */
  --well: #f4f4f5;         /* insets, tracks, table stripes */
  --ink: #0a0a0a;          /* text */
  --muted: #71717a;        /* secondary text */
  --line: #e4e4e7;         /* borders */
  --line-2: #d4d4d8;       /* stronger borders */
  /* brand */
  --teal: #1fd0d6;
  --teal-text: #0e7c80;    /* teal that reads as text or a link */
  --teal-soft: rgba(31,208,214,0.14);
  --teal-ink: #0a0d14;     /* text on a teal fill */
  --btn-fg: #ffffff;       /* text on an ink button */
  --card-dark: #0a0a0a;    /* dark feature boxes (rule of thumb, playbooks): white text on them in both themes */
  /* meaning */
  --good: #15803d; --good-soft: rgba(21,128,61,0.12);
  --bad: #dc2626;  --bad-soft: rgba(220,38,38,0.12);
  --warn: #b45309; --warn-soft: rgba(217,119,6,0.14);
  --info: #2563b0; --info-soft: rgba(59,130,217,0.12);
  /* options legs and rule steps */
  --call: #2563b0;
  --put: #dc2626;
  --entry: #0e7c80; --manage: #56627a; --adjust: #b45309; --exit: #15803d;
  --scen: #1e4f9a;         /* a scenario line on a chart */
  /* type and depth */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(10,10,10,0.05), 0 8px 24px -12px rgba(10,10,10,0.14);
  /* page width: one centred container per page; tools are wide, reading pages narrower (<html data-width="read">) */
  --w-tool: 1320px;
  --w-read: 1160px;
  --w: var(--w-tool);
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  color-scheme: light;
}
:root[data-width="read"] { --w: var(--w-read); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #101216; --raised: #181b21; --well: #1f2229;
  --ink: #f2f2f0; --muted: #9a9aa2; --line: #2a2d34; --line-2: #3a3d45;
  --teal: #3fe0e5; --teal-text: #5eead4; --teal-soft: rgba(63,224,229,0.16); --teal-ink: #f2f2f0; --btn-fg: #0a0d14; --card-dark: #262a33;
  --good: #4ade80; --good-soft: rgba(74,222,128,0.14);
  --bad: #f87171;  --bad-soft: rgba(248,113,113,0.14);
  --warn: #f0b429; --warn-soft: rgba(240,180,41,0.14);
  --info: #8ab8f0; --info-soft: rgba(138,184,240,0.14);
  --call: #62b2ea; --put: #f87171;
  --entry: #5eead4; --manage: #9aa6bc; --adjust: #f0b429; --exit: #4ade80;
  --scen: #7aa7e8;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.55);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --paper: #101216; --raised: #181b21; --well: #1f2229;
  --ink: #f2f2f0; --muted: #9a9aa2; --line: #2a2d34; --line-2: #3a3d45;
  --teal: #3fe0e5; --teal-text: #5eead4; --teal-soft: rgba(63,224,229,0.16); --teal-ink: #f2f2f0; --btn-fg: #0a0d14; --card-dark: #262a33;
  --good: #4ade80; --good-soft: rgba(74,222,128,0.14);
  --bad: #f87171;  --bad-soft: rgba(248,113,113,0.14);
  --warn: #f0b429; --warn-soft: rgba(240,180,41,0.14);
  --info: #8ab8f0; --info-soft: rgba(138,184,240,0.14);
  --call: #62b2ea; --put: #f87171;
  --entry: #5eead4; --manage: #9aa6bc; --adjust: #f0b429; --exit: #4ade80;
  --scen: #7aa7e8;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.55);
  color-scheme: dark;
}

/* ---------- the shared header: logo, page menu, live SPY, Portfolio (written into every page by build.py) ---------- */

.apps { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 3px; border-radius: 999px; background: var(--well); border: 1px solid var(--line); position: relative; z-index: 20; }
.apps .ngrp { position: relative; flex: 0 0 auto; }
.apps .gbtn { font: 700 0.78rem/1 var(--sans); padding: 0.42rem 0.8rem; border-radius: 999px; color: var(--muted); background: none; border: 0; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; }
.apps .gbtn:hover, .apps .ngrp.open .gbtn { color: var(--ink); }
.apps .ngrp.here .gbtn { background: var(--ink); color: var(--paper); }
.apps .gbtn small { font-weight: 600; opacity: .75; font-size: inherit; }
.apps .gbtn svg { width: 10px; height: 10px; }
.apps .menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 15rem; padding: 0.35rem; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.apps .ngrp.open .menu { display: block; }
.apps .menu a { display: block; padding: 0.5rem 0.65rem; border-radius: 8px; text-decoration: none; color: var(--ink); font: 700 0.84rem/1.25 var(--sans); text-transform: none; letter-spacing: normal; white-space: normal; }
.apps .menu a span { display: block; font-weight: 500; font-size: 0.74rem; color: var(--muted); margin-top: 0.1rem; }
.apps .menu a:hover { background: var(--well); }
.apps .menu a[aria-current="page"] { background: var(--teal-soft); }
.brand .tr-brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.22rem; letter-spacing: -0.025em; line-height: 1; }
.brand .tr-word b { color: var(--teal-text); font-weight: 800; }
.brand .tr-page { color: var(--muted); font-weight: 700; font-size: .82em; margin-left: .2rem; padding-left: .6rem; border-left: 1px solid var(--line-2); }
/* one centred container on every page: header, content and footer share the same edges. --w is 1440px on tool pages
   and 1160px on reading pages; the padding is inside it, so text starts at the same place everywhere */
header > .wrap, header > .hwrap, main.wrap, main > .wrap, main.gutter > *, main.doc,
.tr-foot .tf-in, .tr-foot .tf-mkt, .tr-foot .tf-note, .tr-guides, .tr-guide {
  max-width: var(--w) !important; margin-inline: auto !important; padding-inline: var(--gutter) !important; box-sizing: border-box;
}
.wrap { max-width: var(--w) !important; }
header.hero, main.gutter, .tr-foot { padding-inline: 0 !important; }
/* space between the header and the page (the pages' own .wrap rules zeroed it on Builder and Trade Read) */
main.wrap, main.doc { padding-top: 1.4rem !important; }
/* one page title style everywhere: the visible H1 at the top of the content */
main h1:not([style*="position:absolute"]), .tr-h1 { font: 700 1.6rem/1.2 var(--sans); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 .4rem; text-wrap: balance; }
/* a subtitle inside the H1: <h1>Title <small>what it does</small></h1> */
main h1 small, .tr-h1 small { display: block; font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: .25rem; }
@media (max-width: 760px) { main h1:not([style*="position:absolute"]), .tr-h1 { font-size: 1.35rem; } }
header.hero > .wrap { padding-block: 0.7rem 0.9rem !important; }
body { margin: 0 !important; }
/* two-line header: logo, menu and live SPY; then the page's own symbol row */
header > .wrap { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: .55rem !important; }
.tr-row1 { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.tr-row2 { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; min-width: 0; }
.tr-row2:empty { display: none; }
header > .hwrap > .tr-row1 { flex: 1 1 auto; }
.tr-row2 > .quick { flex: 1 1 0; min-width: 0; }
.hero-top > h1 { display: none !important; }
header #live, .symbar .hint { display: none !important; }
header #refresh.tr-refresh { width: 2.3rem; height: 2.3rem; padding: 0; display: inline-grid; place-items: center; font-size: 1.05rem; line-height: 1; border-radius: 999px; }
.tr-spy { margin-left: auto; display: inline-flex; align-items: baseline; gap: .45rem; padding: .32rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--well); color: var(--ink); text-decoration: none; font: 700 .82rem/1 var(--sans); white-space: nowrap; }
.tr-spy .px { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .9rem; }
.tr-spy .ch.up { color: var(--good); } .tr-spy .ch.dn { color: var(--bad); }
.tr-spy small { color: var(--muted); font-weight: 600; font-size: .72rem; }
.tr-mkt { display: inline-flex; align-items: center; padding: .32rem .7rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font: 700 .78rem/1 var(--sans); white-space: nowrap; }
.tr-mkt:hover { border-color: var(--ink); }
/* symbol autocomplete (symbox.js), under any symbol box */
.symbox-host { position: relative; }
.symbox { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; width: min(22rem, 90vw); max-height: 22rem; overflow-y: auto; background: var(--raised); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(10,10,10,.25); padding: .25rem; }
.symbox .sbx { display: flex; align-items: baseline; gap: .55rem; padding: .45rem .6rem; border-radius: 8px; cursor: pointer; font-size: .84rem; }
.symbox .sbx b { font: 700 .84rem var(--mono); min-width: 4.6rem; color: var(--ink); }
.symbox .sbx span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.symbox .sbx em { font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-text); }
.symbox .sbx.on, .symbox .sbx:hover { background: var(--well); }
.symbox .sbx.none { color: var(--muted); cursor: default; }
.tr-spy i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); align-self: center; }
.tr-spy i.off { background: var(--muted); }
.tr-pf { display: inline-flex; align-items: center; gap: .4rem; padding: .36rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--well); color: var(--ink); text-decoration: none; font: 700 .8rem/1 var(--sans); white-space: nowrap; }
.tr-pf svg { width: 14px; height: 14px; }
.tr-pf:hover { border-color: var(--line-2); }
.tr-pf[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* the theme menu: a round button with the current mode's icon, and a vertical menu (light / system / dark; nav.js) */
.tr-theme { position: relative; flex: 0 0 auto; }
.tr-theme .tt-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--well); color: var(--ink); cursor: pointer; }
.tr-theme .tt-btn:hover, .tr-theme.open .tt-btn { border-color: var(--line-2); }
.tr-theme svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tr-theme .tt-btn svg { display: none; }
.tr-theme[data-cur="light"] .ti-light, .tr-theme[data-cur="system"] .ti-system, .tr-theme[data-cur="dark"] .ti-dark { display: block; }
.tr-theme .tt-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 140px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); box-shadow: var(--shadow); flex-direction: column; gap: 2px; }
.tr-theme.tt-left .tt-menu { right: auto; left: 0; }
.tr-theme.open .tt-menu { display: flex; }
.tr-theme .tt-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .7rem; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 .84rem/1 var(--sans); text-align: left; cursor: pointer; }
.tr-theme .tt-menu button:hover { background: var(--well); color: var(--ink); }
.tr-theme .tt-menu button[aria-checked="true"] { color: var(--ink); background: var(--well); }
.tr-theme .tt-menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--teal-text); font-weight: 800; }
.tblwrap { overflow-x: auto; max-width: 100%; }
header .brand { min-width: 160px; font-size: 1.1rem !important; }
header:not(.hero) { position: sticky !important; top: 0; z-index: 30; }
@media (max-width: 760px) { header:not(.hero) { position: static !important; } header .brand { min-width: 0; } .tr-row1 { flex-wrap: wrap; } .tr-spy small { display: none; } }
/* phones: nothing may push the page wider than the screen; wide tables scroll inside their own box */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  select, input, textarea { max-width: 100%; }
  .tblwrap { overflow-x: auto; max-width: 100%; }
  table.scen, table.t { display: block; max-width: 100%; overflow-x: auto; }
  .controls .field, .pair, .field { min-width: 0; max-width: 100%; }
  .pair { flex-wrap: wrap; }