/* Position Sync feature styles (#222). Every rule is scoped under .ps-root so
 * the feature can be mounted inside another page (Daily Runs' Position Sync
 * tab) without styling it, or being styled by it. The colour tokens are defined
 * on the root, not on :root. */
.ps-root {
	--bull: #22b86c; --bull-bg: #16352a; --bull-ink: #46e08f;
	--neutral: #474c54; --neutral-bg: #2a2d33; --neutral-ink: #9aa0a6;
	--bear: #e0483d; --bear-bg: #3a2220; --bear-ink: #f0726a;
	--bg: #1e1e1e; --surface: #252525; --surface2: #2c2c2c;
	--ink: #ffffff; --muted: #9aa0a6; --muted2: #6b7177; --line: #333333; --line2: #3d3d3d;
	--accent: #00d9ff;
	box-sizing: border-box; height: 100%; display: flex; flex-direction: column; overflow: hidden;
	margin: 0; font-family: 'Manrope', sans-serif; color: var(--ink); background: var(--bg); font-size: 13px;
}
.ps-root *, .ps-root *::before, .ps-root *::after { box-sizing: border-box; }
.ps-root:fullscreen { height: 100vh; }
.ps-head { padding: 14px 20px 10px; border-bottom: 1px solid var(--line); background: var(--bg); flex-shrink: 0; position: relative; }
.ps-fsbtn { font: inherit; font-size: 12px; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 7px; background: var(--surface); color: var(--muted); cursor: pointer; }
.ps-fsbtn:hover { color: var(--accent); border-color: var(--accent); }
.ps-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .2px; }
.ps-title .ps-accent { color: var(--accent); }
.ps-sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.ps-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; }
.ps-controls input, .ps-controls select { font: inherit; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 7px; background: var(--surface); color: var(--ink); }
.ps-controls input { width: 140px; }
.ps-controls input::placeholder { color: var(--muted2); }
.ps-controls input:focus, .ps-controls select:focus { outline: none; border-color: var(--accent); }
.ps-legend { display: flex; justify-content: center; gap: 15px; align-items: center; color: var(--muted); font-size: 11.5px; padding: 9px 0 8px; flex-shrink: 0; }
.ps-legend span { display: inline-flex; align-items: center; }
.ps-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; }
.ps-flipdemo { position: relative; display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--neutral); margin-right: 5px; }
.ps-flipdemo::after { content: ""; position: absolute; top: 0; right: 0; border-top: 7px solid #ffd23f; border-left: 7px solid transparent; }
.ps-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ps-root table { border-collapse: separate; border-spacing: 0; width: 100%; }
.ps-root th, .ps-root td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ps-root thead th { position: sticky; top: 0; z-index: 20; background: var(--surface2); color: #cfd3d8; font-weight: 600; padding: 7px 8px; font-size: 11.5px; text-align: center; }
.ps-root thead th.today { background: #06343d; color: var(--accent); }
.ps-root th.tkh, .ps-root td.tk { position: sticky; left: 0; z-index: 10; background: #1c1c1c; text-align: left; padding: 6px 10px; min-width: 76px; }
.ps-root thead th.tkh { z-index: 25; background: var(--surface2); }
.ps-root td.tk { font-weight: 800; border-left: 4px solid var(--neutral); color: var(--ink); }
.ps-root td.tk:hover { background: var(--surface); }
.ps-root td.tk .last { font-weight: 500; font-size: 10px; }
.ps-root td.cell { min-width: 42px; text-align: center; font-weight: 700; color: #fff; padding: 0; position: relative; }
.ps-root td.cell.empty { background: var(--bg); color: #3a3a3a; padding: 8px 0; }
.ps-root td.cell.flip::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 9px solid #ffd23f; border-left: 9px solid transparent; pointer-events: none; }
.ps-root td.cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
/* A ticker or a day is a button: the cell's whole area is its target. */
.ps-cellbtn, .ps-tkbtn { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-align: inherit; font-weight: inherit; }
.ps-cellbtn { display: block; width: 100%; padding: 8px 0; }
.ps-tkbtn { display: block; width: 100%; }
.ps-cellbtn:focus-visible, .ps-tkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ps-root tfoot td { position: sticky; bottom: 0; background: var(--surface); font-size: 10.5px; text-align: center; color: var(--muted); padding: 5px 0; z-index: 15; border-top: 1px solid var(--line2); }
.ps-root tfoot td.tk { text-align: left; font-weight: 700; color: var(--ink); background: var(--surface); }
.ps-root .b-Bull { background: var(--bull); } .ps-root .b-Neutral { background: var(--neutral); color: var(--neutral-ink); } .ps-root .b-Bear { background: var(--bear); }
.ps-root .t-Bull { color: var(--bull-ink); } .ps-root .t-Neutral { color: var(--neutral-ink); } .ps-root .t-Bear { color: var(--bear-ink); }
.ps-root .bl-Bull { border-left-color: var(--bull) !important; } .ps-root .bl-Neutral { border-left-color: var(--neutral) !important; } .ps-root .bl-Bear { border-left-color: var(--bear) !important; }
/* detail panel: fixed to the viewport, below the shared header when there is one */
.ps-panel { position: fixed; right: 0; top: var(--axera-shell-header-height, 0px); bottom: 0; width: 440px; max-width: 94vw; background: var(--surface); border-left: 1px solid var(--line2); box-shadow: -10px 0 30px rgba(0,0,0,.5); transform: translateX(100%); visibility: hidden; transition: transform .18s ease, visibility 0s .18s; z-index: 50; display: flex; flex-direction: column; }
.ps-panel.open { transform: none; visibility: visible; transition: transform .18s ease, visibility 0s; }
.ps-root:fullscreen .ps-panel { top: 0; }
.ps-ph { padding: 15px 16px; border-bottom: 1px solid var(--line2); display: flex; align-items: baseline; gap: 10px; }
.ps-ph .ps-ptk { font-size: 23px; font-weight: 800; }
.ps-ph .ps-x { margin-left: auto; font: inherit; background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 19px; }
.ps-ph .ps-x:hover { color: var(--ink); }
.ps-pbody { overflow: auto; padding: 4px 0; }
.ps-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.ps-row .d { color: var(--muted); font-size: 11px; }
.ps-row .d .chip { display: inline-block; margin-top: 5px; padding: 1px 7px; border-radius: 4px; color: #fff; font-weight: 700; font-size: 10px; }
.ps-row .r { font-size: 12px; line-height: 1.5; color: #dcdfe3; }
.ps-row .r .flip { color: #ffd23f; font-weight: 700; }
.ps-row.cur { background: #2a281c; }
.ps-root ::-webkit-scrollbar, .ps-panel ::-webkit-scrollbar { width: 11px; height: 11px; }
.ps-root ::-webkit-scrollbar-track { background: var(--surface); }
.ps-root ::-webkit-scrollbar-thumb { background: #444; border-radius: 6px; border: 2px solid var(--surface); }
.ps-root ::-webkit-scrollbar-thumb:hover { background: #555; }
/* Mounted inside another page (Daily Runs): the host supplies the title and the
 * fullscreen control, so the feature drops its own. */
.ps-embedded .ps-title, .ps-embedded .ps-fsbtn { display: none; }
.ps-embedded .ps-head { padding-top: 10px; }