/* ---------------------------------------------------------------------------
   paper.css — /paper.

   The page is one long column of cards, and the thing that keeps it readable is
   that every card answers exactly one question. The account bar is the only
   element that breaks the card rhythm on purpose: it is the balance, it is what
   the reader came for, and it belongs above the fold rather than inside a box
   with a heading like everything else.

   Colour is doing work, not decoration. Green and red mean money in and money
   out and are never used for anything else — a violet accent carries "this is a
   control" and amber carries "this is a caveat", so a red number on this page
   can only ever be a loss.
--------------------------------------------------------------------------- */

.pp {
    max-width: 1180px;
    padding-bottom: 60px;
}

/* ---- hero ---------------------------------------------------------------- */

.pp-hero {
    padding: 28px 0 18px;
}
.pp-title {
    margin: 0 0 8px;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(96deg, #e8eaf2 20%, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pp-sub {
    margin: 0;
    max-width: 74ch;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.65;
}
.pp-sub b { color: var(--txt); font-weight: 600; }
.pp-sub a { color: #c4b5fd; }

/* ---- the sample banner ---------------------------------------------------- */

.pp-demo {
    margin: 4px 0 18px;
    padding: 12px 16px;
    border: 1px solid rgba(245, 182, 81, 0.4);
    border-radius: 12px;
    background: rgba(245, 182, 81, 0.1);
    color: #f3d9a4;
    font-size: 12.5px;
    line-height: 1.6;
}
.pp-demo b { color: var(--amber); }
.pp-demo button {
    margin-left: 8px;
    padding: 4px 10px;
    border: 1px solid rgba(245, 182, 81, 0.5);
    border-radius: 7px;
    background: transparent;
    color: var(--amber);
    font: 700 11.5px/1 "Inter", system-ui, sans-serif;
    cursor: pointer;
}
.pp-demo button:hover { background: rgba(245, 182, 81, 0.18); }

/* ---- the account ---------------------------------------------------------- */

.pp-acct {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) 3fr;
    gap: 22px;
    align-items: center;
    margin: 6px 0 22px;
    padding: 20px 22px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 18px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(139, 92, 246, 0.16), transparent 62%),
        var(--card);
}
.pp-acct-k {
    display: block;
    color: var(--faint);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.pp-acct-v {
    display: block;
    margin: 3px 0 2px;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.pp-acct-v.up { color: var(--up); }
.pp-acct-v.down { color: var(--down); }
.pp-acct-d { font-size: 12px; color: var(--muted); }
.pp-acct-d b.up { color: var(--up); }
.pp-acct-d b.down { color: var(--down); }

.pp-acct-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.pp-acell {
    padding: 11px 13px;
    border: 1px solid var(--card-brd);
    border-radius: 12px;
    background: rgba(8, 9, 16, 0.4);
}
.pp-acell .k {
    display: block;
    color: var(--faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.pp-acell .v {
    display: block;
    margin-top: 3px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.pp-acell .v.up { color: var(--up); }
.pp-acell .v.down { color: var(--down); }
.pp-acell .s { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }

.pp-acct-edit {
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 5px 11px;
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.14);
    color: #cbb6ff;
    font: 700 11px/1 "Inter", system-ui, sans-serif;
    cursor: pointer;
}
.pp-acct-edit:hover { background: rgba(139, 92, 246, 0.26); }

/* ---- cards ---------------------------------------------------------------- */

.pp-card { padding: 20px 22px 22px; margin-bottom: 18px; }
.pp-h {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.pp-h h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.pp-count {
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 7px;
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    font-size: 11.5px;
    font-weight: 700;
}
.pp-count:empty { display: none; }
.pp-note {
    margin: 0 0 14px;
    max-width: 82ch;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}
.pp-note b.up { color: var(--up); }
.pp-note b.down { color: var(--down); }
.pp-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.pp-grid2 > .pp-card { margin-bottom: 0; }
.pp-grid2 + .pp-grid2 { margin-top: 18px; }
.pp-grid2:last-of-type { margin-bottom: 18px; }

.pp-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}
.pp-chips button {
    padding: 6px 12px;
    border: 1px solid var(--card-brd);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font: 600 12px/1 "Inter", system-ui, sans-serif;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.pp-chips button:hover { color: var(--txt); border-color: var(--border-2, rgba(255, 255, 255, 0.18)); }
.pp-chips button.on {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
}
.pp-daychip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.2);
    color: #cbb6ff;
    font-size: 12px;
    font-weight: 700;
}
.pp-daychip button {
    padding: 0 4px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 11px;
}

.pp-empty {
    padding: 22px;
    border: 1px dashed var(--card-brd);
    border-radius: 14px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.7;
    text-align: center;
}
.pp-empty a { color: #c4b5fd; }
.pp-empty b { color: var(--txt); }

/* ---- charts --------------------------------------------------------------- */

.pp-chart { position: relative; height: 300px; }
.pp-chart.sm { height: 220px; }

/* ---- open positions -------------------------------------------------------- */

.pp-positions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
/* The empty state is prose, not a card, so it spans both columns. */
.pp-positions > .pp-empty { grid-column: 1 / -1; }
.pp-pos {
    padding: 15px 17px;
    border: 1px solid var(--card-brd);
    border-left: 3px solid var(--card-brd);
    border-radius: 14px;
    background: rgba(8, 9, 16, 0.35);
}
.pp-pos.is-up { border-left-color: var(--up); }
.pp-pos.is-down { border-left-color: var(--down); }
.pp-pos-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.pp-con { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-con b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.pp-exp {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    color: var(--faint);
}
.pp-side {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.pp-side.long { background: var(--up-soft); color: var(--up); }
.pp-side.short { background: var(--down-soft); color: var(--down); }
.pp-off { color: var(--amber); font-size: 11px; }
.pp-pnl {
    margin-left: auto;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pp-pnl.up { color: var(--up); }
.pp-pnl.down { color: var(--down); }
.pp-pnl small { font-size: 12px; opacity: 0.75; }
.pp-wait { font-size: 12px; color: var(--faint); font-family: "Inter", sans-serif; }

.pp-nums {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 10px;
}
.pp-nums .k {
    display: block;
    color: var(--faint);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pp-nums .v {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pp-nums .v small { color: var(--faint); font-weight: 500; }

/* Where the mark sits between the stop and the target. The one thing a glance
   wants and the one thing a row of numbers cannot give it. */
.pp-track {
    position: relative;
    height: 5px;
    margin: 0 0 11px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 93, 108, 0.5), rgba(255, 255, 255, 0.07) 48%, rgba(22, 209, 149, 0.5));
}
.pp-track i {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(10, 11, 20, 0.9);
    transform: translateY(-50%);
    transition: left 0.3s ease;
}

.pp-plan {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
}
.pp-plan .tp { color: var(--up); }
.pp-plan .sl { color: var(--down); }
.pp-plan .wait { color: var(--faint); font-family: "Inter", sans-serif; }
.pp-plan em {
    font-style: normal;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pp-hit {
    padding: 2px 8px;
    border-radius: 7px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
}
.pp-hit.up { background: var(--up-soft); color: var(--up); }
.pp-hit.down { background: var(--down-soft); color: var(--down); }

.pp-meta {
    margin-top: 9px;
    color: var(--faint);
    font-size: 11px;
}
.pp-src { color: var(--muted); }

.pp-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.pp-acts button {
    padding: 6px 12px;
    border: 1px solid var(--card-brd);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--txt);
    font: 600 12px/1 "Inter", system-ui, sans-serif;
    cursor: pointer;
}
.pp-acts button:hover { background: rgba(255, 255, 255, 0.08); }
.pp-acts .pp-close { color: var(--down); border-color: rgba(255, 93, 108, 0.32); }
.pp-acts .pp-edit { color: #c4b5fd; border-color: rgba(139, 92, 246, 0.34); }
.pp-acts .pp-drop { margin-left: auto; color: var(--faint); }

.pp-editor {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
    padding: 13px;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.07);
}
.pp-editor label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
}
.pp-editor input {
    padding: 7px 9px;
    border: 1px solid var(--card-brd);
    border-radius: 8px;
    background: var(--bg2);
    color: var(--txt);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13px;
}
.pp-e-acts { display: flex; gap: 7px; }
.pp-e-acts button {
    padding: 8px 13px;
    border: 1px solid var(--card-brd);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--txt);
    font: 700 12px/1 "Inter", system-ui, sans-serif;
    cursor: pointer;
}
.pp-e-acts .pp-e-save { background: var(--violet); border-color: var(--violet); color: #fff; }
.pp-e-note {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: var(--faint);
    font-size: 11px;
    line-height: 1.6;
}
.pp-e-note b { color: var(--muted); }

.pp-auto {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}
.pp-auto input { accent-color: var(--violet); width: 15px; height: 15px; }

/* ---- stats ----------------------------------------------------------------- */

.pp-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.pp-stat {
    padding: 12px 13px;
    border: 1px solid var(--card-brd);
    border-radius: 12px;
    background: rgba(8, 9, 16, 0.38);
}
.pp-stat .k {
    display: block;
    color: var(--faint);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.pp-stat .v {
    display: block;
    margin-top: 4px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.pp-stat .v.up { color: var(--up); }
.pp-stat .v.down { color: var(--down); }
.pp-stat .s { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.pp-stats .pp-empty { grid-column: 1 / -1; }

/* ---- calendar --------------------------------------------------------------- */

.pp-hist-top {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.pp-cal {
    padding: 14px;
    border: 1px solid var(--card-brd);
    border-radius: 14px;
    background: rgba(8, 9, 16, 0.35);
}
.pp-cal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.pp-cal-t { flex: 1; text-align: center; }
.pp-cal-t b { display: block; font-size: 14px; font-weight: 700; }
.pp-cal-t span {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.pp-cal-t span.up { color: var(--up); }
.pp-cal-t span.down { color: var(--down); }
.pp-cal-nav {
    width: 28px;
    height: 28px;
    border: 1px solid var(--card-brd);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.pp-cal-nav:hover { color: var(--txt); background: rgba(255, 255, 255, 0.08); }
.pp-cal-dow,
.pp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}
.pp-cal-dow {
    margin-bottom: 5px;
    color: var(--faint);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-align: center;
    text-transform: uppercase;
}
.pp-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--faint);
    font-family: inherit;
    cursor: default;
}
.pp-cell.pad { visibility: hidden; }
.pp-cell .d { font-size: 11px; font-weight: 600; }
.pp-cell .p {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    min-height: 11px;
}
/* Empty days lose their box entirely, so the days that traded are the only
   things on the grid with edges. */
.pp-cell.has {
    border-color: rgba(255, 255, 255, 0.09);
    color: var(--txt);
    cursor: pointer;
}
.pp-cell.has:hover { border-color: rgba(255, 255, 255, 0.3); }
.pp-cell.sel { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }

.pp-range-lead {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--card-brd);
}
.pp-range-lead .k {
    color: var(--faint);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.pp-range-lead .v {
    margin-left: auto;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.pp-range-lead .v.up { color: var(--up); }
.pp-range-lead .v.down { color: var(--down); }
.pp-range-rows { display: grid; gap: 9px; margin-top: 12px; }
.pp-range-rows > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12.5px;
}
.pp-range-rows .k {
    min-width: 62px;
    color: var(--faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.pp-range-rows .v { color: var(--muted); }
.pp-range-rows .v b.up { color: var(--up); }
.pp-range-rows .v b.down { color: var(--down); }
.pp-range-rows .v small { color: var(--faint); }
.pp-range-none { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.pp-range { min-width: 0; }

/* ---- the log ---------------------------------------------------------------- */

.pp-log { overflow-x: auto; }
.pp-ltbl { min-width: 1090px; }
.pp-otbl { min-width: 980px; }
.pp-lrow {
    display: grid;
    grid-template-columns:
        minmax(140px, 1.3fr) 62px 84px 44px 76px 76px 96px 104px 104px 58px 92px;
    gap: 12px;
    align-items: center;
    padding: 9px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    font-size: 12.5px;
}
.pp-lrow:last-child { border-bottom: 0; }
.pp-lhead {
    border-bottom: 1px solid var(--card-brd);
    color: var(--faint);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pp-lrow .r { text-align: right; }
.pp-lrow .mono,
.pp-ltbl .mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.pp-lrow .up { color: var(--up); }
.pp-lrow .down { color: var(--down); }
.pp-lk { font-weight: 600; }
.pp-lwhen { color: var(--txt); font-size: 11.5px; white-space: nowrap; }
/* The date, dimmed, so a column of stamps is read down by the clock and the day
   is only doing work where it changes. */
.pp-lwhen .d { color: var(--faint); font-style: normal; }
.pp-lwhy { font-size: 11px; }
.pp-lwhy i { color: var(--faint); font-style: normal; }
.pp-lwhy b.up { color: var(--up); }
.pp-lwhy b.down { color: var(--down); }

/* ---- settings ---------------------------------------------------------------- */

.pp-set-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 14px;
}
.pp-set { display: flex; flex-direction: column; gap: 6px; }
.pp-set .k { font-size: 12px; font-weight: 600; color: var(--txt); }
.pp-set input {
    padding: 9px 11px;
    border: 1px solid var(--card-brd);
    border-radius: 9px;
    background: var(--bg2);
    color: var(--txt);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 14px;
}
.pp-set small { color: var(--faint); font-size: 11px; line-height: 1.55; }

.pp-set-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-btn {
    padding: 9px 15px;
    border: 1px solid var(--violet);
    border-radius: 9px;
    background: var(--violet);
    color: #fff;
    font: 700 12.5px/1 "Inter", system-ui, sans-serif;
    cursor: pointer;
}
.pp-btn.ghost {
    border-color: var(--card-brd);
    background: rgba(255, 255, 255, 0.03);
    color: var(--txt);
}
.pp-btn.ghost:hover { background: rgba(255, 255, 255, 0.08); }
.pp-btn.danger {
    margin-left: auto;
    border-color: rgba(255, 93, 108, 0.35);
    background: rgba(255, 93, 108, 0.1);
    color: var(--down);
}
.pp-btn.danger:hover { background: rgba(255, 93, 108, 0.2); }

.pp-foot {
    margin: 16px 0 0;
    color: var(--faint);
    font-size: 11.5px;
    line-height: 1.7;
}
.pp-foot a { color: var(--muted); }

/* ---- toast --------------------------------------------------------------------- */

.pp-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 4200;
    max-width: min(620px, calc(100vw - 32px));
    padding: 12px 18px;
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    background: rgba(18, 20, 34, 0.97);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    color: var(--txt);
    font-size: 12.5px;
    line-height: 1.55;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.pp-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- the super panel ------------------------------------------------------
   The balance, and every switch that changes what the book does NEXT, in one
   frame above everything that only reports. The rule that keeps it honest: if a
   control changes a number shown below it, it belongs here; if it only changes
   what you are looking at, it belongs on the card it filters. */

.pp-panel {
    margin: 6px 0 22px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 18px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(139, 92, 246, 0.16), transparent 62%),
        var(--card);
}
/* The account bar lives inside the panel now, so it gives up its own frame. */
.pp-panel .pp-acct {
    margin: 0;
    border: 0;
    border-radius: 18px 18px 0 0;
    background: transparent;
}
.pp-acct-main { min-width: 0; }

.pp-ctrls {
    display: grid;
    grid-template-columns: auto auto minmax(220px, 1fr);
    gap: 22px;
    align-items: start;
    padding: 16px 22px 18px;
    border-top: 1px solid rgba(139, 92, 246, 0.22);
}
.pp-ctrl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-ctrl-end { justify-self: end; align-items: flex-end; text-align: right; }
.pp-ctrl-k {
    color: var(--faint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.pp-ctrl small { color: var(--faint); font-size: 11px; line-height: 1.5; max-width: 34ch; }

/* A segmented control, because the two products are one choice and a pair of
   checkboxes would let you say neither. */
.pp-seg {
    display: inline-flex;
    /* Hug the buttons. The control sits in a flex column whose width is set by
       the caption under it, and `stretch` left the track running on past
       "Delivery" into dead space that read as a third, empty option. */
    align-self: flex-start;
    padding: 3px;
    border: 1px solid var(--card-brd);
    border-radius: 10px;
    background: rgba(8, 9, 16, 0.5);
}
.pp-seg button {
    /* Equal halves, so the violet pill is the same size whichever is on and
       the track does not resize as you toggle it. */
    flex: 1 0 auto;
    min-width: 96px;
    padding: 7px 15px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: 700 12px/1 "Inter", system-ui, sans-serif;
    text-align: center;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}
.pp-seg button:hover { color: var(--txt); }
.pp-seg button.on {
    background: var(--violet);
    color: #fff;
    box-shadow: 0 1px 8px rgba(139, 92, 246, 0.45);
}
.pp-seg button:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }

.pp-switches { display: flex; flex-direction: column; gap: 8px; }
.pp-sw {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}
.pp-sw:hover { color: var(--txt); }
.pp-sw input { width: 15px; height: 15px; accent-color: var(--violet); cursor: pointer; }

.pp-bal-set { display: flex; gap: 7px; align-items: center; }
.pp-bal-set input {
    width: 140px;
    padding: 8px 11px;
    border: 1px solid var(--card-brd);
    border-radius: 9px;
    background: var(--bg2);
    color: var(--txt);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13.5px;
    text-align: right;
}
.pp-btn.sm { padding: 8px 13px; font-size: 12px; }

/* ---- the open book: its total, and closing in bulk ------------------------- */

.pp-live { display: inline-flex; align-items: baseline; gap: 8px; font-size: 12px; }
.pp-live .k {
    color: var(--faint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.pp-live b { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.pp-live b.up { color: var(--up); }
.pp-live b.down { color: var(--down); }
.pp-unpriced { color: var(--faint); font-size: 11px; }

.pp-bulk { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.pp-bulk[hidden] { display: none; }
.pp-selall { font-size: 11.5px; }
/* Inside the bulk bar the danger button is one of a row, not the last thing on
   a settings card, so it does not get to shove itself to the right. */
.pp-bulk .pp-btn.danger { margin-left: 0; }
.pp-btn:disabled { opacity: 0.42; cursor: not-allowed; }
.pp-btn:disabled:hover { background: rgba(255, 255, 255, 0.03); }
.pp-bulk .pp-btn.danger:disabled:hover { background: rgba(255, 93, 108, 0.1); }

.pp-pick { display: flex; align-items: center; padding-right: 2px; cursor: pointer; }
.pp-pick input { width: 15px; height: 15px; accent-color: var(--violet); cursor: pointer; }
.pp-pos.is-sel {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.08);
}

/* ---- the product, wherever it is shown ------------------------------------
   Deliberately not green or red. On this page those two colours mean money in
   and money out and nothing else, and a category is not a result. */

.pp-prod {
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    white-space: nowrap;
}
.pp-prod.intraday {
    background: rgba(255, 255, 255, 0.07);
    color: var(--muted);
}
.pp-prod.delivery {
    background: rgba(96, 165, 250, 0.16);
    color: #93c5fd;
}
.pp-acts .pp-prodbtn { color: #93c5fd; border-color: rgba(96, 165, 250, 0.34); }

/* ---- search, filters, pagers ----------------------------------------------- */

.pp-search { margin-left: auto; }
.pp-search input {
    width: min(280px, 46vw);
    padding: 8px 12px;
    border: 1px solid var(--card-brd);
    border-radius: 999px;
    background: var(--bg2);
    color: var(--txt);
    font-size: 12.5px;
}
.pp-search input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.55);
}
.pp-search input::placeholder { color: var(--faint); }

/* Each chip group is one axis of the filter, so they are separated rather than
   run together — four rows of pills you cannot tell apart is not a filter. */
.pp-filters {
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--card-brd);
}
.pp-filters .pp-chips { margin-left: 0; }
.pp-filters .pp-chips button { padding: 5px 11px; font-size: 11.5px; }

.pp-pager {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--card-brd);
}
.pp-pager[hidden] { display: none; }
.pp-pg-n { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pp-pg-b { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.pp-pg-b button {
    min-width: 30px;
    padding: 5px 9px;
    border: 1px solid var(--card-brd);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font: 700 13px/1 "Inter", system-ui, sans-serif;
    cursor: pointer;
}
.pp-pg-b button:hover:not(:disabled) { color: var(--txt); background: rgba(255, 255, 255, 0.08); }
.pp-pg-b button:disabled { opacity: 0.32; cursor: not-allowed; }
.pp-pg-b b {
    padding: 0 8px;
    color: var(--txt);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.pp-pg-b b i { color: var(--faint); font-style: normal; font-weight: 500; }

/* ---- picking the dates ------------------------------------------------------ */

.pp-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pp-dates label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pp-dates input {
    padding: 6px 9px;
    border: 1px solid var(--card-brd);
    border-radius: 8px;
    background: var(--bg2);
    color: var(--txt);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
}
.pp-dates input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

.pp-range-body { min-width: 0; }
.pp-range-none { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 14px 0 0; }

/* ---- the order book ---------------------------------------------------------- */

.pp-orow {
    display: grid;
    grid-template-columns:
        104px minmax(136px, 1.3fr) 56px 84px 44px 86px 96px 92px minmax(86px, 1fr);
    gap: 12px;
    align-items: center;
    padding: 9px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    font-size: 12.5px;
}
.pp-orow:last-child { border-bottom: 0; }
.pp-orow .r { text-align: right; }
.pp-orow .mono,
.pp-otbl .mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
/* What the fill DID to the position. Opening and adding are the same act in
   different sizes, so they read the same; closing and reducing likewise. */
.pp-eff { font-size: 11px; font-weight: 700; }
.pp-eff.open,
.pp-eff.add { color: #93c5fd; }
.pp-eff.close,
.pp-eff.reduce { color: var(--muted); }
.pp-eff.reverse { color: var(--amber); }
.pp-osrc { color: var(--faint); font-size: 11px; }
.pp-osrc i { font-style: normal; }
.pp-lwhy b.eod { color: var(--muted); }

/* ---- orders waiting for the bell -------------------------------------------
   Amber, which on this page means "this is a caveat" — the row is not a
   position and not a trade, and must not be able to read as either. */

.pp-pend-card { border-color: rgba(245, 182, 81, 0.3); }
.pp-pend-card[hidden] { display: none; }
.pp-pends { display: grid; gap: 8px; }
.pp-pend {
    display: grid;
    grid-template-columns:
        minmax(150px, 1.3fr) 56px 84px 96px 152px minmax(120px, 1fr) 30px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(245, 182, 81, 0.26);
    border-radius: 11px;
    background: rgba(245, 182, 81, 0.06);
    font-size: 12.5px;
}
.pp-pend .mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.pp-pend small { color: var(--faint); }
.pp-pend .pp-exp { margin-left: 8px; }
.pp-pend-w { color: #f3d9a4; font-size: 11.5px; font-weight: 600; }
.pp-pend-x {
    width: 26px;
    height: 26px;
    border: 1px solid var(--card-brd);
    border-radius: 7px;
    background: transparent;
    color: var(--faint);
    font-size: 12px;
    cursor: pointer;
}
.pp-pend-x:hover { color: var(--down); border-color: rgba(255, 93, 108, 0.4); }
.pp-pend-card .pp-live { color: #f3d9a4; font-size: 11.5px; }
.pp-pend-card .pp-btn.sm { margin-left: auto; }

/* ---- the settings card -------------------------------------------------------- */

.pp-settings { margin-top: 26px; }

/* ---- narrower ------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .pp-acct { grid-template-columns: 1fr; }
    .pp-acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pp-grid2 { grid-template-columns: 1fr; }
    .pp-hist-top { grid-template-columns: 1fr; }
    .pp-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pp-positions { grid-template-columns: 1fr; }
    .pp-ctrls { grid-template-columns: 1fr 1fr; }
    .pp-ctrl-end { grid-column: 1 / -1; justify-self: start; align-items: flex-start; text-align: left; }
}
@media (max-width: 620px) {
    .pp-acct-grid { grid-template-columns: 1fr; }
    .pp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-editor { grid-template-columns: 1fr 1fr; }
    .pp-set-grid { grid-template-columns: 1fr; }
    .pp-chips { margin-left: 0; }
    .pp-btn.danger { margin-left: 0; }
    .pp-ctrls { grid-template-columns: 1fr; gap: 16px; }
    .pp-search { margin-left: 0; width: 100%; }
    .pp-search input { width: 100%; }
    .pp-dates { margin-left: 0; }
    .pp-bulk { margin-left: 0; width: 100%; }
    .pp-pg-b { margin-left: 0; }
    .pp-filters { gap: 8px 12px; }
    .pp-seg { align-self: stretch; }
    .pp-seg button { flex: 1 1 0; min-width: 0; }
    .pp-pend { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pp-pend-x { justify-self: end; }
}