:root {
    /* ── Brand color (oak leaf green) ───────────────────────────────
       Split into H/S/L so we can compose hsla() with any alpha.
       Change the brand color by editing these three values only.    */
    --pt-h: 122;
    --pt-s: 46%;
    --pt-l: 33%;

    --ptColor: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.65);
    /* RGB triplet for JS rgba(var(--ptColorPure), alpha) usage */
    --ptColorPure: 47, 124, 49;

    /* ── "Now" accent color (amber) ──────────────────────────────── */
    --now-h: 38;
    --now-s: 70%;
    --now-l: 52%;

    /* ── Planning mode accent color (sky blue) ──────────────────────────────── */
    --pln-h: 210;
    --pln-s: 79%;
    --pln-l: 49%;

    --ptNowColor: hsla(var(--now-h), var(--now-s), var(--now-l), 0.8);

    /* ── API / integration color ────────────────────────────────── */
    --ptApiColor: hsl(87, 61%, 40%);

    /* ── Financial category colors ──────────────────────────────────
       Full hsl() values — use hsla() at call sites when transparency
       is needed. All financial color classes derive from these vars. */
    --color-revenue: hsl(188, 41%, 48%);
    --color-opex: hsl(21, 67%, 61%);
    --color-net-profit: hsl(122, 38%, 62%);
    --color-net-profit-loss: hsl(5, 34%, 68%);
    --color-ad: hsl(95, 63%, 63%);
    --color-ad: hsl(266, 75%, 65%);

    /* ── Layout & spacing ────────────────────────────────────────── */
    --horizonPad: 4px;
    --horizonPadPlus: 8px;
    --globalMeasure: 12px;
    --globalHalf: calc(var(--globalMeasure) * 0.5);
    --globalAndAhalf: calc(var(--globalMeasure) * 1.5);
    --globalDouble: calc(var(--globalMeasure) * 2);
    --globalTriple: calc(var(--globalMeasure) * 3);
    --globalQuadra: calc(var(--globalMeasure) * 4);
    --globalFifth: calc(var(--globalMeasure) * 5);
    --globalLeam: calc(var(--globalDouble) + var(--globalMeasure));

    /* ── Shadows & effects ───────────────────────────────────────── */
    --dropDownShadow: 0 4px 8px hsla(0, 0%, 0%, 0.25);
    --skyDownShadow: -4px 4px 9px hsla(0, 0%, 0%, 0.4);
    --transitions: all 0.075s ease;

    /* ── Neutral text colors ─────────────────────────────────────── */
    --text-primary: hsla(0, 0%, 0%, 0.95);
    --text-headers: hsla(0, 0%, 0%, 0.8);
    --text-compas: hsla(0, 0%, 0%, 0.85);
    --text-resins: hsla(0, 0%, 0%, 0.5);
    --text-secondary: hsla(0, 0%, 0%, 0.63);
    --text-thirdly: hsla(0, 0%, 0%, 0.5);

    --ptZ: 99999;

    --skiesHeight: calc(var(--globalMeasure) * 2.5);

    /* ── Table view line opacity ─────────────────────────────────────
       Controls the alpha of all table row/column/border lines at once.
       Increase toward 1 for stronger lines, decrease toward 0 for fainter. */
    --ptTableLine: 0.5;

    /* Composite color for all table grid lines. Default = brand green at
       --ptTableLine alpha. Heatmap mode (.ptTable.ptTableHeatmap) overrides
       this to neutral gray so heatmap cell colors stay readable. */
    --ptTableLineColor: hsla(var(--pt-h), var(--pt-s), var(--pt-l), var(--ptTableLine));
}

/* *,
*::before,
*::after  {
} */

/* OPTIMIZE TO USE ONLY A FEW VARIABLES LATER */

#ptPWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: fit-content;
    height: 60px;
    cursor: pointer;
    padding-left: var(--globalDouble);
}

#ptP {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    padding: 0;
}

#ptAllWrap {
    position: fixed;
    inset: 0;
    z-index: var(--ptZ);
    pointer-events: none;
    display: none;
    overflow: hidden;
}

#ptAll {
    background-color: white;
    border: 3px solid var(--ptColor);
    border-top-width: 2.5px;
    border-radius: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    font-family: sans-serif;
    /* Pin line-height: WB normalizes it to 1, browsers default to ~1.2.
       Without this, the standalone page (and any non-WB host) inflates row
       heights by ~20% because every leaf inherits the looser line-height. */
    line-height: 1;
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: var(--globalMeasure);
    right: var(--globalMeasure);
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#ptAllWrap.ptAllVisible {
    display: block;
}

/* ADR-0026: this blanket reset is SCOPED to the toolbar (#ptSkies) + the Отчёты space
   body (#ptProfitTree) — NOT all of #ptAll — so it never reaches the AI/Calc space bodies
   (#ptChatRoom/#ptCalcRoom) now reparented IN-FLOW inside #ptAll. Those rooms were authored
   as document.body overlays OUTSIDE this cascade; subjecting them to `white-space: nowrap`
   here (specificity (0,1,0,0)) would beat their own class-level prose rules (e.g.
   .ptChatMsg{pre-wrap}, .ptCalcScenCell--name{normal}) and clip every wrapping string.
   Scoping reproduces their overlay-equivalent baseline exactly (their explicit border-box
   classes still apply; the rest stay content-box, as before). #ptSkies + #ptProfitTree are
   the only non-room children of #ptAll, so this is behaviour-preserving for toolbar + trunk. */
#ptSkies, #ptSkies *,
#ptSkies * ::before, #ptSkies * ::after,
#ptProfitTree, #ptProfitTree *,
#ptProfitTree * ::before, #ptProfitTree * ::after {
    box-sizing: border-box;
    white-space: nowrap;
    font-family: sans-serif;
    outline-width: none !important;
    /* border-width: 0;
    margin: 0;
    padding: 0; */
}

/* ── data-tip tooltip system ────────────────────────────────────────────
   Single tooltip element appended at body level, positioned with JS.
   Lives outside any overflow container so it can never be clipped.
   Triggered by [data-tip] attributes on hover. See prooverlays.js.        */
.ptTip {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 5px 9px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;
    max-width: 220px;
    white-space: pre-line;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.25);
    font-family: sans-serif;
    z-index: 2147483647;
}

.ptTip.ptTipVisible {
    opacity: 1;
    visibility: visible;
}

/* Shop Dropdown Styles */
.ptShopDropdown {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: calc(var(--ptZ) + 1);
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
}

.ptShopDropdownItem {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
}

.ptShopDropdownItem:hover {
    background: #f5f5f5;
}

.ptShopDropdownItem:active {
    background: #e8e8e8;
}

/* Active shop in dropdown (selected) */
.ptShopDropdownItem.active {
    background: #e8f0fe;
    font-weight: 500;
}

/* Shop name button hover effect (optional) */
#ptShopName {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

#ptShopName:hover {
    opacity: 0.8;
}

#ptSkies {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--skiesHeight);
    z-index: 50;
    /* margin-bottom: 5px; */
    border-color: inherit;
}

.ptCloud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* gap: 10px; */
    /* background-color: #ffb8b8; */
    height: var(--skiesHeight);
    border-color: inherit;
}

.ptSunDrop {
    display: flex;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-right-width: 2.5px;
    border-color: var(--ptColor);
    padding: 0px 5px;
    text-align: center;
    justify-content: center;
    align-items: center;
    /* background-color: #ccc; */
    cursor: pointer;
    height: var(--skiesHeight);
    text-decoration-color: var(--ptColor);
    user-select: none;
    z-index: 50;
    /* pointer-events: all; */
}

#ptMissTake {
    border-left-width: 0px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.7);
    margin-top: -2px;
}

#ptMissTake,
#ptHowTo {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-color: var(--ptNowColor);
    transition: var(--transitions);
}

#ptHowTo {
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
}

#ptHowTo:hover,
#ptMissTake:hover {
    font-weight: normal;
    color: rgba(0, 0, 0, 1);
}

#ptHowTo:hover::before {
    content: " 🔗 Канал с полезностями";
}

/* #ptMissTake:hover::after {
    content: " 🔗";
    margin-left: 5px;
} */

/* ADR-0026: the active-space underline is a DYNAMIC class moved by ptSwitchSpace onto the
   live tab (#ptReport / #ptAI / #ptCalc) — replacing the old static `#ptReport` underline,
   which would keep Отчёты underlined while the AI/Calc space is active. */
.ptSpaceActive {
    text-decoration-line: underline;
}

/* ADR-0026: #ptLive is hidden for 2.0 (dormant pre-wiring — the node stays for the future
   "Live данные" space, but no visible tab points at an unbuilt surface). */
.ptTabHidden {
    display: none;
}

#ptTitle {
    color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.8);
    margin: 0;
    font-size: 1.4em;
    padding: 0px 10px;
    padding-left: 12.5px;
    transition: var(--transitions);
}

#ptTitle:hover {
    color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 1);
}

#ptShopName {
    cursor: pointer;
    /* shops-cockpit-space PRD §3: #ptShopName is now mid-cluster (before #ptHistory), so it keeps a
       right divider (was 0 when it was the last item). Non-selectable — it's a button, not a label. */
    user-select: none;
    gap: 4px;
}

/* «Магазин:» context label — muted, mirrors the crown selector-label idiom in the skies bar. */
.ptSunLabel {
    opacity: 0.55;
    font-size: 0.9em;
}

/* The shop NAME (kept in its own span so the label never corrupts the name / its updates). */
#ptShopNameText {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Active-state highlight when the «Магазины» space is open (ptSwitchSpace toggles this). Mirrors
   the left-tab .ptSpaceActive underline — the shop button is the shops-space "tab". */
#ptShopName.ptShopNameActive {
    text-decoration-line: underline;
}

/* 
#ptProfile {
    transition: transform 0.2s;
    width: 32px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20%;
    border-right-width: 0px;
}

#ptProfile:hover {
    background-color: #ccc;
} */

/* .ptBold {
    font-weight: bold;
} */

.ptBigHeader.ptUnclick,
.ptUnclick,
.ptUnclick *,
.ptUnclix * {
    cursor: default !important;
    pointer-events: none !important;
}

.ptUnclick:hover::before,
.ptUnclick:hover::after {
    content: none !important;
    /* Use !important if necessary to override existing rules */
}

.ptUnclix {
    color: rgba(0, 0, 0, 0.35) !important;
}

.ptClick {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Override: ptClick buttons inside a ptTb must inherit ptTb's invisible
   pointer-events state. Without this, .ptClick's blanket
   `pointer-events: auto !important` makes the buttons hit-testable even
   when ptTb is opacity 0 — :hover on the invisible ptTb area then triggers
   visibility. We force `none` unless the ptTb is in its "shown" state
   (header hovered, ptTb itself hovered, or pinned via .ptGigActive). */
.ptTb .ptClick {
    pointer-events: none !important;
}

.ptGiganticBranch:has(> .ptBigBranch > .ptBigHeader:hover)>.ptTb .ptClick,
.ptGiganticBranch>.ptTb:hover .ptClick,
.ptGiganticBranch.ptGigActive>.ptTb .ptClick {
    pointer-events: auto !important;
}

/*click gets blocked by ptBlock*/

.ptBlock,
.ptBlock .ptClick,
.ptBlock .ptTb,
.ptBlock .ptTbi,
.ptBlock .ptLeaf,
.ptBlock .ptLeafC,
.ptBlock .ptLeafi,
.ptBlock .ptBigHeader {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    color: rgba(0, 0, 0, 0.8) !important;
}

.ptBlockH,
.ptBlockH .ptClick {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.ptBlockH::before,
.ptBlockH::after {
    content: none !important;
}

#ptSkies.ptBlock, #ptCrown.ptBlock,
#ptSkies.ptBlock *, #ptCrown.ptBlock * {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* During initial shop data load, lock all skies buttons except ptTitle */
#ptSkies.ptSkiesLoading .ptSunDrop:not(#ptTitle),
#ptSkies.ptSkiesLoading .ptSunDrop:not(#ptTitle) * {
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.45 !important;
}

/* Non-chains trunk content (dashboard/chart/table) gets .ptBlock when
   an overlay is open. We must force pointer-events: none on ALL descendants
   because the generic .ptBlock rule only targets chains-view classes
   (ptClick, ptTb, etc.). Table cells and dashboard cards have default
   pointer-events: auto which bypasses a parent-only pointer-events: none. */
#ptTrunk > .ptBlock,
#ptTrunk > .ptBlock * {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* .ptBlock .ptClick{
    pointer-events: none !important;
} */

/* .ptClick:active {
    pointer-events: auto !important;
} */

.ptGrayout {
    /* text-decoration: line-through; */
    color: rgba(0, 0, 0, 0.3);
}

.ptProfitreeColor .ptGiganticBranch {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
}

.ptNowColor .ptGiganticBranch {
    background-color: hsla(var(--now-h), var(--now-s), var(--now-l), 0.07);
}

/* ── Financial category color classes ──────────────────────────────
   All derive from --color-* variables in :root.
   Pattern: border on self, background on .ptBigBranch child.
   Revenue also tints .ptSmallBranch children.                        */

.ptRevenueColor {
    border-color: hsla(188, 41%, 48%, 0.8);
}

.ptRevenueColor .ptBigBranch {
    background-color: hsla(188, 41%, 48%, 0.3);
}

.ptRevenueColor .ptSmallBranch {
    background-color: hsla(188, 41%, 48%, 0.18);
}

/* Компенсации ВБ — presence-gated income massive between Выручка and Расходы.
   Own hue (soft sea-green) between revenue teal (188) and profit green (122). */
.ptCompensationColor {
    border-color: hsla(155, 40%, 52%, 0.8);
}

.ptCompensationColor .ptBigBranch {
    background-color: hsla(155, 40%, 52%, 0.3);
}

.ptCompensationColor .ptSmallBranch {
    background-color: hsla(155, 40%, 52%, 0.18);
}

.ptOpexColor {
    border-color: hsla(21, 67%, 61%, 0.8);
}

.ptOpexColor .ptBigBranch {
    background-color: hsla(21, 67%, 61%, 0.3);
}

.ptOpexColor .ptSmallBranch {
    background-color: hsla(21, 67%, 61%, 0.2);
}

.ptNetProfitColor {
    border-color: hsla(122, 38%, 62%, 0.8);
    column-gap: 0px !important;
}

.ptNetProfitColor .ptBigBranch {
    background-color: hsla(122, 38%, 62%, 0.35);
}

.ptNetProfitLossColor {
    border-color: var(--color-net-profit-loss);
    column-gap: 0px !important;
}

.ptNetProfitLossColor .ptBigBranch {
    background-color: hsla(5, 34%, 68%, 0.35);
}

.ptAdEffeciencyColor {
    border-color: hsla(266, 75%, 65%, 0.8);
    column-gap: 0px !important;
}

.ptAdEffeciencyColor .ptBigBranch {
    background-color: hsla(266, 75%, 65%, 0.3);
}

#ptProfitTree {
    display: flex;
    flex-direction: column;
    gap: var(--globalMeasure);
    flex: 1;
    min-height: 0;
    overflow: hidden;
    min-width: 100%;
    position: relative;
}

#ptCrown {
    /* margin-right: 2.5px;
    margin-left: 2.5px; */
    display: none;
    border-top: 2.5px solid;
    /* border-bottom-width: 0px; */
    /* padding: 0px 3px 0px 3px; */
    border-color: var(--ptColor);
    user-select: none;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    /* Pin the contextual bar to the SAME height as the parent #ptSkies toolbar (--skiesHeight) in
       EVERY view. Without this, #ptCrown grew to its tallest child, so it was taller than #ptSkies in
       Сводка/Графики (the Артикул thumbnail) and shorter in Цепочки/Таблица (text only) — an incoherent,
       view-dependent height. border-box folds the 2.5px divider into the total so it matches #ptSkies
       exactly; the thumbnail (.ptArtSelThumb) is sized to fit the tighter content box. */
    height: var(--skiesHeight);
    box-sizing: border-box;
    flex-shrink: 0;
}

/* PU-8 8a: residual overflow (very narrow viewports) degrades to a slim 5px scroll strip
   instead of a full scrollbar mauling the height-pinned row. */
#ptCrown::-webkit-scrollbar { height: 5px; }
#ptCrown::-webkit-scrollbar-thumb { background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35); border-radius: 3px; }
#ptCrown::-webkit-scrollbar-track { background: transparent; }

.ptTcItem {
    position: relative;
    display: flex;
    border-style: solid;
    border-color: inherit;
    align-items: center;
    text-align: center;
    border-right-width: 2.5px;
    border-bottom-width: 2.5px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    transition: var(--transitions);
}

.ptTcDropdown {
    position: fixed;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    background: white;
    border-color: inherit;
    border-style: solid;
    /* border: 2.5px; */
    border-radius: 4px;
    box-shadow: var(--dropDownShadow);
    pointer-events: none;
    z-index: 100;
    align-items: center;
    text-align: center;
    padding: calc(var(--globalMeasure) / 2);
    /* V2-F34: fade only — NEVER transition top/left/right. The dropdown is positioned by JS on
       hover; transitioning position made the first hover after a view switch visibly glide in
       from the previous button's stale coordinates. */
    transition: opacity 0.075s ease, visibility 0.075s ease;
}

.ptTcActive {
    border-color: inherit !important;
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
}

.ptTcButton {
    display: flex;
    border-color: inherit;
    border-style: solid;
    border-width: 2.5px;
    border-color: transparent;
    /* ← One line instead of four */
    padding: 3px 6px;   /* PU-8 8a: was 8px — ~40px back across the row against crown overflow */
    height: 100%;
    align-items: center;
    cursor: pointer;
    font-size: 0.95em;
    justify-content: center;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transitions);
}

.ptTcSolo .ptTcButton {
    border-top: none;
    border-right: none;
    border-left-style: solid;
    border-left-width: 2.5px;
    border-left-color: inherit;
}

.ptTcDropdown .ptTcButton {
    width: 100%;
    padding: 4px 6px;
}

#ptCrown>.ptTcItem:first-child>.ptTcButton {
    width: 100%;
}

.ptTcSolo .ptTcDropdown .ptTcButton {
    border-width: 0;
}

.ptTcButton:hover {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
}

.ptTcDropdown.ptDropVisible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.ptTcHeader {
    display: flex;
    border-color: inherit;
    border-style: solid;
    border-bottom-color: transparent;
    border-bottom-width: 2.5px;
    padding: 3px 0px;
    color: var(--text-primary);
    font-size: 0.8em;
    padding-left: 6px;
}

.ptVisuangle {
    font-size: 12px;
    opacity: 0.8;
}

/* The Артикул selector label. A long product title (e.g. «Подставка-держатель для телефона на стол»)
   would otherwise grow the button to its full width → push #ptCrown past the viewport → the
   overflow-x scrollbar + a toolbar that reads as «broken» (esp. when reached via a leaderboard
   drill-in). Cap + ellipsis it; the full name stays in the picker (and its tooltip). The ▼ chevron
   sits beside it and is never clipped. */
#ptDashArtsText {
    display: inline-block;
    max-width: calc(var(--globalMeasure) * 17);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.ptTcSolo {
    margin-left: auto;
    /* This will push it to the end in a flex container */
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
}

.ptSkySolo .ptSunDrop {
    border-right-width: 0px;
    border-left-style: solid;
    border-left-width: 2.5px;
    border-left-color: var(--ptColor);
}

.ptSkySolo {
    position: relative;
}

#ptOptionStuff {
    padding: 0px 7.5px;
    cursor: default;
}

.ptSkiesDropdown {
    position: absolute;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    background: white;
    /* border: 2.5px solid var(--ptColor); */
    border-radius: 4px;
    box-shadow: var(--skyDownShadow);
    pointer-events: none;
    z-index: 100;
    min-width: 150px;
    border-color: inherit;
    transition: var(--transitions);
}

.ptSkiesDropdown .ptSunDrop {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.95em;
    white-space: nowrap;
    border-width: 2.5px 0px 0px 0px;
    padding: 5px 6px;
}

.ptSkiesDropdown .ptSunDrop:hover {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
}

.ptSkiesDropdown.ptDropVisible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

#ptSpacer {
    height: 0;
}

#ptTrunk {
    display: flex;
    flex-direction: column;
    overflow: auto;
    width: auto;
    min-width: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
    gap: 24px;
    /* Top padding is bumped to ~30px so the hover ptTb of the top-most colossal
       (which floats UP into the inter-colossal gap that doesn't exist above the
       first colossal) has room to render without being clipped by the trunk's
       own scroll container. */
    padding: var(--globalMeasure) var(--globalMeasure) var(--globalMeasure) 0;
    overscroll-behavior: contain;
    overflow-anchor: none;
}

#ptTrunk>.ptColossalBranch:first-child {
    margin-top: 10px;
}

/* Chains view: no native vertical scroll. Wheel-hijack rotates the visible
   window of colossals and rows. Horizontal scroll remains for wide content. */
#ptTrunk.ptChains {
    overflow-y: hidden;
}

/* Virtual-scroll indicators ('···') overlaying trunk's top/bottom edges.
   position:fixed on document.body — never clipped by any overflow:hidden ancestor.
   JS pins top/left via getBoundingClientRect each update. */
.ptColosIndicator {
    position: absolute;
    width: 30px;
    text-align: center;
    pointer-events: none;
    user-select: none;
    font-weight: bold;
    color: var(--text-headers);
    display: none;
    z-index: 2;
}
.ptColosIndicator.ptVisible {
    display: block;
}

/* Chrome, Edge, Safari, Brave: Hide vertical, keep horizontal */
#ptTrunk::-webkit-scrollbar {
    width: 0px;
    /* Hides vertical scrollbar */
    height: var(--globalMeasure);
    /* Shows horizontal scrollbar (adjust thickness as needed) */
}

#ptTrunk::-webkit-scrollbar-track {
    background: transparent;
}

#ptTrunk::-webkit-scrollbar-thumb {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.25);
    border-radius: 2px;
}

#ptTrunk::-webkit-scrollbar-thumb:hover {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35);
}

#ptTrunk:active::-webkit-scrollbar-thumb {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.45);
}

#ptBark {
    display: grid;
    /* auto-FILL (not auto-fit): keep the empty tracks instead of collapsing them, so when only a
       few metric cards exist they hold their natural ~280–316px width and sit left-aligned, rather
       than stretching to fill the row (2 cards → half-screen each, 1 card → full width — reads
       amateur). When the row IS full the two behave identically, so the dense dashboard is unchanged. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--globalMeasure);
    margin: 0px var(--globalMeasure);
    margin-right: 0px;
    overflow-x: hidden;
    flex-shrink: 0;
    /* width: 99%; */
}

/* D1 dashboard «why» panels — top-products leaderboard + seller-expense breakdown.
   Siblings of #ptBark inside #ptTrunk (flex-column, native vertical scroll, 24px gap). */
.ptDashSection {
    margin: 0 var(--globalMeasure);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--globalHalf);
}

.ptDashSectionTitle {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-headers);
    padding-left: calc(var(--globalMeasure) * 0.25);
}

/* CX1: the chart-section title is a flex row so the x-axis step control (Дни/Недели/Месяцы) sits to
   the RIGHT of the «График: <metric>» title text — a discoverable chart-header granularity toggle. */
.ptChartsSectionTitleRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--globalMeasure);
}

/* CX1: chart-local x-axis step control — a compact segmented Дни/Недели/Месяцы selector (Q1=A),
   styled to match the toolbar's active-toggle tint (the Profitree brand HSL, like .ptTcActive). */
#ptChartStepControl {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    padding: 2px;
}
.ptChartStepBtn {
    font-family: inherit;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transitions);
}
.ptChartStepBtn:hover:not(.active) {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.06);
    color: var(--text-primary);
}
.ptChartStepBtn.active {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.12);
    color: var(--text-headers);
    cursor: default;
}

/* MAJOR-section spacing (W3-BRAND polish): widen the gap BEFORE each major Сводка group to 30px
   (cards → leaderboards, leaderboards → chart) while keeping the WITHIN-leaderboards gap
   (Топ товаров ↔ Топ расходов) at the trunk's native 24px — so the two leaderboards read as one
   group, separated from the cards above and the chart below. #ptTrunk's flex `gap` is 24px
   (--globalDouble); adding --globalHalf (6px) margin-top to the element that STARTS a new major
   group makes exactly those boundaries 24+6 = 30px. #ptDashLeaders starts the leaderboards group
   (after the cards); #ptChartsSection starts the chart group (after the expenses). #ptDashExpenses
   gets NO extra margin, so the within-leaderboards boundary above it stays 24px. In one-article
   scope (no leaderboards) #ptChartsSection follows the cards directly — still a 30px major break. */
#ptDashLeaders,
#ptChartsSection {
    margin-top: var(--globalHalf);
}

/* Recovery affordance (CF-9): the «back to the whole shop» chip shown above the cards when the
   dashboard is scoped to one article/brand. Styled as an obvious clickable pill (border + hover +
   focus ring) so a leaderboard drill-in never feels like a trap. align-self keeps it from stretching
   the full width in the flex-column trunk. */
.ptDashBackAll {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    margin: var(--globalHalf) var(--globalMeasure) 0;
    padding: calc(var(--globalMeasure) * 0.3) calc(var(--globalMeasure) * 0.7);
    border: 2px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35);
    border-radius: 5px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08);
    color: var(--text-headers);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s;
}
.ptDashBackAll:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.16);
    border-color: var(--ptColor);
}
.ptDashBackAll:focus-visible {
    outline: 2px solid var(--ptColor);
    outline-offset: 1px;
}

/* --- top-products leaderboard --- */
.ptDashLeadRows {
    display: flex;
    flex-direction: column;
    gap: calc(var(--globalMeasure) * 0.5);
}

.ptDashLeadRow {
    display: flex;
    flex-direction: column;           /* a horizontal content row + a full-width magnitude bar below */
    align-items: stretch;             /* the bar stretches the full card width → a uniform, comparable track */
    gap: calc(var(--globalMeasure) * 0.5);
    /* Roomier than the old 0.4× — the rows read «squished/too short». Vertical padding + the bigger
       thumbnail below give each row a comfortable height so the leaderboard breathes. */
    padding: calc(var(--globalMeasure) * 0.7) var(--globalMeasure);
    border: 2px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.25);
    border-radius: 4px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
    cursor: pointer;
    transition: background 0.12s;
}

/* The card's horizontal content row: rank · thumbnail · name(brand) · the metric cluster. The
   magnitude bar lives BELOW this (full card width) so its track never shares horizontal space with
   the variable-width metric cluster — that is exactly what makes the bars comparable across rows. */
.ptDashLeadTop {
    display: flex;
    align-items: center;
    gap: var(--globalMeasure);
}

.ptDashLeadRow:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.12);
}

.ptDashLeadRank {
    flex: 0 0 auto;
    min-width: calc(var(--globalMeasure) * 1.6);
    text-align: center;
    font-weight: bold;
    color: var(--text-compas);
}

/* the name column (flex-1, between the thumb and the metric cluster). The magnitude bar used to stack
   here; it is now a full-width footer (.ptDashLeadBarWrap) so the bars are comparable across rows. */
.ptDashLeadMain {
    flex: 1 1 auto;
    min-width: 0;
}

.ptDashLeadName {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-headers);
}

/* magnitude bar — a FULL-WIDTH track at the card bottom (stretched by the row's align-items:stretch).
   Every card is the same width ⇒ every track is the same width ⇒ the fills are directly comparable
   across rows. Coloured by the active metric (green profit / red loss / orange expenses). */
.ptDashLeadBarWrap {
    height: calc(var(--globalMeasure) * 0.5);
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.ptDashLeadBar {
    height: 100%;
    border-radius: 3px;
}
.ptDashLeadBar.pBarPos { background: rgba(18, 160, 80, 0.45); }
.ptDashLeadBar.pBarNeg { background: rgba(221, 45, 45, 0.45); }
.ptDashLeadBar.pBarExp { background: hsla(21, 67%, 61%, 0.5); }   /* Расходы sort → expense-orange bar */

/* D4 — leaderboard sort selector (title + pick-one chips on one head row) */
.ptDashSectionHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--globalMeasure);
    flex-wrap: wrap;
}
.ptDashSort {
    display: flex;
    gap: calc(var(--globalMeasure) * 0.3);
    flex-wrap: wrap;
}
.ptDashSortChip {
    padding: calc(var(--globalMeasure) * 0.15) calc(var(--globalMeasure) * 0.55);
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.3);
    border-radius: 999px;
    font-size: 0.82em;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ptDashSortChip:hover { background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1); }
.ptDashSortChipOn {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.18);
    color: var(--text-headers);
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.5);
    font-weight: 600;
}

/* The Выручка/Прибыль/Маржа cluster as a small, coherent stat-table: a faint outer border + faint
   per-column separators, each cell stacking a muted caption clearly ABOVE its value (the old version
   read «squished» — caption hugging value, no separation). */
.ptDashLeadMets {
    flex: 0 0 auto;
    display: flex;
    gap: 0;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.22);
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.45);
}

.ptDashLeadMet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--globalMeasure) * 0.3);
    min-width: calc(var(--globalMeasure) * 6.5);
    padding: calc(var(--globalMeasure) * 0.4) calc(var(--globalMeasure) * 0.6);
    white-space: nowrap;
    color: var(--text-compas);
    border-left: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.22);
}

.ptDashLeadMet:first-child { border-left: none; }

.ptDashLeadCap {
    font-size: 0.72em;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.ptDashLeadVal { font-weight: 600; }
.ptDashLeadVal.ptDashLeadExp { color: var(--color-opex); }   /* Расходы cell — expense-orange (D1) */

/* «Name (BRAND)» — the brand muted + suffixed after the article name (D1) */
.ptDashLeadBrand { color: var(--text-secondary); font-weight: normal; font-size: 0.88em; }

.ptDashLeadMet .pCgreen { color: rgb(18, 160, 80); }
.ptDashLeadMet .pCred   { color: rgb(221, 45, 45); }

/* --- seller-expense breakdown --- */
/* ONE shared grid (name | bar | value) so the bar column is a SINGLE track width across EVERY row →
   the bars are directly comparable, and the value column auto-sizes to the widest so all bars start
   AND end at the same x. (The old per-row flex gave each bar a different track width because the value
   column's width varied with the number's magnitude — the «random widths» report.) */
.ptDashExpRows {
    display: grid;
    grid-template-columns: calc(var(--globalMeasure) * 14) 1fr auto;
    align-items: center;
    column-gap: var(--globalHalf);
    row-gap: calc(var(--globalMeasure) * 0.4);
}

/* each row's three cells join the shared grid above (there is no row box to lose) */
.ptDashExpRow {
    display: contents;
}

.ptDashExpName {
    /* grid column 1 (fixed 14×measure) → identical for every row; long names ellipsis-truncate. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-headers);
}

.ptDashExpBarWrap {
    /* grid column 2 (1fr) → the SAME width on every row = the comparable track. */
    height: calc(var(--globalMeasure) * 0.9);
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.ptDashExpBar {
    height: 100%;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.45);
    border-radius: 3px;
}

.ptDashExpVal {
    /* grid column 3 (auto, ≥10×measure) → auto-sizes to the widest value across rows, so every bar
       ends at the same x; the value text right-aligns within its cell. */
    min-width: calc(var(--globalMeasure) * 10);
    text-align: right;
    white-space: nowrap;
    color: var(--text-compas);
    font-size: 0.92em;
}

#ptRoots {
    display: flex;
    /* gap: var(--globalHalf); */
    /* margin: var(--globalHalf) var(--globalMeasure); */
    gap: var(--globalHalf);
    /* ADR-0028: #ptRoots now lives inside the titled .ptDashSection wrapper (#ptChartsSection), which
       supplies the horizontal margin — so NO own margin-left here (it would double-indent). This also
       gives the chart a right margin it lacked, aligning its width with the leaderboard/expense sections. */
    min-height: 400px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.03);
    border-radius: 8px;
    padding: var(--globalHalf);
    width: auto;
    /* Allow natural width */
    flex-shrink: 0;
    /* Prevent shrinking */
    /* margin-top: calc(var(--globalMeasure) * 1); */
    overflow-x: hidden;
    /* Add this */
}

.ptBigHeader[contenteditable="true"] {
    cursor: text !important;
}

.ptProfitreeColor {
    border-color: var(--ptColor);
    z-index: 1;
    background-color: white;
    position: sticky;
    left: -4px;
    top: auto !important;
    bottom: auto !important;
    align-self: flex-start;
    min-width: calc(var(--globalMeasure) * 9);
    max-width: calc(var(--globalMeasure) * 9);
    margin-left: 27px;
}

.ptProfitreeColor::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% + 2.5px);
    width: calc(var(--globalMeasure) - 2px);
    height: 100%;
    background-color: white;
    z-index: -1;
    border-radius: 2px 2px 2px 2px;
}

.ptNowColor {
    border-color: var(--ptNowColor);
}

.ptColossalBranch {
    position: relative;
    font-size: 0.95em;
    display: flex;
    align-self: flex-start;
    display: inline-flex;
    width: auto;
    column-gap: var(--globalMeasure);
    background-color: white;
    /* padding-bottom: var(--globalMeasure); */
    height: fit-content;
    /* font-size: 5em !important; */
    /* margin-left: 7px; */
    /* transition: var(--transitions); */
}

.ptColossalBranch.ptColSticky {
    position: sticky;
    left: 0;
    z-index: 1;
}

.ptDivi {
    /* Layout-neutral year-boundary divider: zero height + negative margins cancel
       the trunk's flex gap (24px). The 2px border sits centered in the gap area
       so two colossals with a divi between them look spaced identically to two
       without — no more layout shifts when scrolling across year boundaries. */
    box-sizing: content-box;
    height: 0;
    border-style: dashed;
    border-width: 2px 0px 0px 0px;
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.5);
    margin-top: -13px;
    margin-bottom: -13px;
    min-width: 100% !important;
}

/* .ptColossalBranch[style*="margin-top: var(--globalMeasure)"]::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--globalMeasure));
    left: 0;
    right: 0;
    height: 1.5px;
    width: calc(100% + var(--globalMeasure));
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2);
    border-radius: 4px;
}

#ptTrunk > .ptColossalBranch:last-child::before {
    display: none;
} */

.ptUnftri,
.ptUptri,
.ptArrow,
.ptFolrow,
.ptRightar,
.ptLeftar {
    position: absolute;
    display: flex;
    z-index: 999;
    user-select: none;
    pointer-events: none;
}

.ptUnftri {
    right: calc(100% + 3px);
    transition: opacity 0.2s ease;
}

.ptUptri {
    right: calc(100% + 3px);
    margin-top: calc(var(--globalMeasure) * -3);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ptArrow {
    right: calc(100% + 5px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ptPeriodNumber {
    position: absolute;
    right: calc(100% + 5px);
    display: flex;
    align-items: center;
    z-index: 999;
    user-select: none;
    pointer-events: none;
    font-size: 0.9em;
}

.ptFolrow {
    right: calc(100% + 15px);
    opacity: 0;
    font-weight: bold;
    transform: scaleY(-1);
    transition: opacity 0.2s ease;
}

.ptRightar,
.ptLeftar {
    transition: opacity 0.2s ease;
    font-weight: bold;
    align-self: center;
}

.ptRightar {
    left: calc(100% - 7px);
}

.ptLeftar {
    right: calc(100% - 7px);
}

.ptMassiveBranch {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    border-style: solid;
    border-width: 2.5px;
    border-radius: 4px;
    width: fit-content;
    column-gap: var(--globalMeasure);
    align-self: flex-start;
    height: fit-content;
}

.ptMassiveBranch * {
    /* white-space: nowrap;
    width: auto; */
    justify-content: center;
    border-color: inherit;
}

.ptTb4 {
    max-width: var(--globalDouble);
}

.ptTb {
    /*,,toolbra — hover overlay that floats in the inter-colossal gap directly
       above its ptGiganticBranch. Top border (2.5px) overlaps the bottom border
       of the massive in the colossal above; no bottom border (the massive top
       border of THIS gigantic's massive serves as the visual bottom edge). */
    display: flex;
    text-align: center;
    align-items: stretch;
    border-style: solid;
    border-width: 2.5px;
    border-radius: 4px 4px 0px 0px;
    background-color: white;
    color: var(--text-headers);
    user-select: none;
    height: 20px;
    position: absolute;
    left: 0;
    bottom: 100%;
    box-sizing: content-box !important;
    justify-content: stretch;
    white-space: nowrap;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: var(--transitions);
    transition-delay: 0s;
}

/* Per-massive-color overrides: ptTb outer 2.5px border uses the SAME hue as
   the surrounding massive (ptOpexColor, ptRevenueColor, etc.) but at full
   alpha (1) instead of the inherited 0.8 from .ptMassiveBranch. Inner
   button-dividers keep inheriting the regular massive alpha. */
.ptOpexColor .ptTb {
    border-color: hsla(21, 67%, 61%, 1);
}

.ptRevenueColor .ptTb {
    border-color: hsla(188, 41%, 48%, 1);
}

.ptNetProfitColor .ptTb {
    border-color: hsla(122, 38%, 62%, 1);
}

.ptNetProfitLossColor .ptTb {
    border-color: hsla(5, 34%, 68%, 1);
}

.ptAdEffeciencyColor .ptTb {
    border-color: hsla(266, 75%, 65%, 1);
}

/* 4px white outline around ptTb top/left/right (NOT bottom). Implemented as
   pseudo placed ABOVE ptTb in z-order (positive z) but clip-pathed to a
   U-shape so it only paints the ring outside ptTb's bounding box — ptTb's
   own colored border stays fully visible because the cutout exactly matches
   ptTb's bounds. Pseudo extends 4px on top/left/right; bottom stays at 0
   so nothing extends downward. */
.ptTb::after {
    content: '';
    position: absolute;
    /* Pseudo positions vs ptTb's padding-box; ptTb has box-sizing: content-box +
       2.5px borders, so add +2.5px on each side to extend 4px past the BORDER
       (not the padding-box) and shift the cutout by 2.5px so it matches the
       border-box (otherwise the cutout starts at padding-box top/left and the
       pseudo paints over ptTb's own colored top/left/right borders). */
    inset: -6.5px -6.5px -2.5px -6.5px;
    border-radius: 4px 4px 16px 16px;
    background: white;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%,
            calc(100% - 4px) 100%,
            calc(100% - 4px) 4px,
            4px 4px,
            4px 100%,
            0 100%);
}

/* Re-enable hover + click on the ptBigHeader of any ptTb-owning gigantic.
   Without this, headers like bExpenses (ptUnclick) and user-expense headers
   (inside ptBigBranch.ptUnclick) have pointer-events: none !important and
   can't receive :hover or click. cursor:pointer matches other clickable
   headers in the trunk (clicking a big-header folds its massive).
   !important is required to override the .ptUnclick / .ptUnclick * rule. */
.ptGiganticBranch:has(> .ptTb)>.ptBigBranch>.ptBigHeader {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Re-enable click on the per-article direct/CoGS value cells (.ptXbuCell) in the
   chains grid. They sit inside .ptBigBranch.ptUnclick, so the blanket
   .ptUnclick * { pointer-events:none!important } kills hit-testing + cursor — but
   these cells are deep-link targets into the Expense Manager and must stay clickable.
   Overhead pro-rata cells and brand-group buckets are NOT marked .ptXbuCell, so they
   stay non-interactive. The click handler matches via closest('.ptXbuCell'), so both
   the cell and its inner .ptLeaf need pointer-events back. !important overrides .ptUnclick *. */
.ptBigBranch.ptUnclick .ptXbuCell,
.ptBigBranch.ptUnclick .ptXbuCell .ptLeaf {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Show ptTb only when hovering its gigantic's ptBigHeader, OR when hovering
   the ptTb itself (so the cursor can travel from header up to the buttons
   without the toolbar disappearing mid-move). */
.ptGiganticBranch:has(> .ptBigBranch > .ptBigHeader:hover)>.ptTb,
.ptGiganticBranch>.ptTb:hover {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 150ms;
}

/* Visually anchor the ptTb to its gigantic's ptBigHeader: the header always
   reserves a 2.5px left border (transparent by default so it occupies space
   but is invisible) on ANY ptTb-owning gigantic, then fades the color in
   together with the ptTb on hover/pin. Keeping width constant prevents the
   header from shifting when the color appears. */
.ptGiganticBranch:has(> .ptTb)>.ptBigBranch>.ptBigHeader {
    border-left-width: 2.5px;
    border-left-style: solid;
    border-left-color: transparent;
    transition: border-left-color 0.12s ease;
    transition-delay: 0s;
}

.ptGiganticBranch:has(> .ptBigBranch > .ptBigHeader:hover)>.ptBigBranch>.ptBigHeader,
.ptGiganticBranch:has(> .ptTb:hover)>.ptBigBranch>.ptBigHeader,
.ptGiganticBranch.ptGigActive>.ptBigBranch>.ptBigHeader {
    border-left-color: inherit;
    transition-delay: 150ms;
}

/* Pinned/active state shows color immediately, not delayed. */
.ptGiganticBranch.ptGigActive>.ptBigBranch>.ptBigHeader {
    transition-delay: 0s;
}

/* Pinned: gigantic is in an active modal flow (✎ edit, ⚙ settings, ➕ add).
   Stays visible regardless of hover, no delay. Clickability is governed
   separately by .ptBlock on the ptTb itself when the flow has opened a
   modal overlay (so buttons can't be re-triggered mid-flow). */
.ptGiganticBranch.ptGigActive>.ptTb {
    opacity: 1;
    transition-delay: 0s;
}

.ptGiganticBranch.ptGigActive>.ptTb:not(.ptBlock) {
    pointer-events: auto;
}

/* Suppress: sibling gigantics in a colossal where one is active.
   The existing fuckTbs() adds .ptBlock to every gigantic, then strips it from
   the active one. We use that signal to fully hide hover toolbars on blocked
   gigantics (the generic .ptBlock .ptTb rule above only dims them). */
.ptGiganticBranch.ptBlock>.ptTb {
    opacity: 0 !important;
    pointer-events: none !important;
    transition-delay: 0s;
}

.ptTbi {
    display: flex;
    text-align: center;
    align-items: stretch;
    /* align-items: stretch; */
    border-style: solid;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    height: calc(var(--globalDouble) + 2px);
    box-sizing: content-box !important;
    justify-content: stretch;
    /* border-width: 0px 0px 2px 0px;
    border-color: rgba(0, 0, 0, 0); */
}

.ptTbDate {
    /* display: flex; */
    color: var(--text-primary);
    /* text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    flex: 1;
    border-style: solid;
    cursor: pointer;
    user-select: none;
    padding-right: var(--horizonPad);
    padding-left: var(--horizonPad);
    border-width: 0px 0px 2px 0px;
    border-color: rgba(0, 0, 0, 0); */
}

.ptTbFish {
    display: flex;
    text-align: center;
    align-items: center;
    padding-right: var(--horizonPad);
    padding-left: var(--horizonPad);
    flex: 1;
    justify-content: flex-start;
    cursor: default;
    color: var(--text-secondary);
    border-style: solid;
    font-size: 0.95em;
}

.ptTbSave,
.ptTbBack,
.ptTbAdd,
.ptTbInput,
.ptTbSort,
.ptTbDistribute,
.ptTbDistMode,
.ptTbSebs,
.ptTbDelete,
.ptTbDeleteFor,
.ptTbDeleteAlltime,
.ptTbDeleteThisonly,
.ptTbDir,
.ptTbCancel,
.ptTbOver,
.ptTbDirOver {
    display: flex;
    text-align: center;
    align-items: center;
    flex: 1;
    justify-content: center;
    font-size: 0.9em;
    cursor: pointer;
    border-style: solid;
    box-sizing: content-box !important;
    padding-right: var(--horizonPad);
    padding-left: var(--horizonPad);
    min-width: var(--globalDouble);
    flex-basis: auto;
    color: var(--text-secondary);
}

.ptTbSave:active,
.ptTbSebs:active,
.ptTbBack:active,
.ptTbAdd:active,
.ptTbInput:active,
.ptTbDelete:active,
.ptTbSort:active,
.ptTbDistribute:active,
.ptTbDistMode:active {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
}

.ptRevenueColor .ptTbSave:active,
.ptRevenueColor .ptTbSebs:active,
.ptRevenueColor .ptTbBack:active,
.ptRevenueColor .ptTbAdd:active,
.ptRevenueColor .ptTbInput:active,
.ptRevenueColor .ptTbDelete:active,
.ptRevenueColor .ptTbSort:active,
.ptRevenueColor .ptTbDistribute:active,
.ptRevenueColor .ptTbDistMode:active {
    background-color: hsla(188, 41%, 48%, 0.12);
}

.ptOpexColor .ptTbSave:active,
.ptOpexColor .ptTbSebs:active,
.ptOpexColor .ptTbBack:active,
.ptOpexColor .ptTbAdd:active,
.ptOpexColor .ptTbInput:active,
.ptOpexColor .ptTbDelete:active,
.ptOpexColor .ptTbSort:active,
.ptOpexColor .ptTbDistribute:active,
.ptOpexColor .ptTbDistMode:active {
    background-color: hsla(21, 67%, 61%, 0.12);
}

.ptNetProfitColor .ptTbSave:active,
.ptNetProfitColor .ptTbSebs:active,
.ptNetProfitColor .ptTbBack:active,
.ptNetProfitColor .ptTbAdd:active,
.ptNetProfitColor .ptTbInput:active,
.ptNetProfitColor .ptTbDelete:active,
.ptNetProfitColor .ptTbSort:active,
.ptNetProfitColor .ptTbDistribute:active,
.ptNetProfitColor .ptTbDistMode:active {
    background-color: hsla(122, 38%, 62%, 0.12);
}

.ptNetProfitLossColor .ptTbSave:active,
.ptNetProfitLossColor .ptTbSebs:active,
.ptNetProfitLossColor .ptTbBack:active,
.ptNetProfitLossColor .ptTbAdd:active,
.ptNetProfitLossColor .ptTbInput:active,
.ptNetProfitLossColor .ptTbDelete:active,
.ptNetProfitLossColor .ptTbSort:active,
.ptNetProfitLossColor .ptTbDistribute:active,
.ptNetProfitLossColor .ptTbDistMode:active {
    background-color: hsla(5, 34%, 68%, 0.12);
}

.ptAdEffeciencyColor .ptTbSave:active,
.ptAdEffeciencyColor .ptTbSebs:active,
.ptAdEffeciencyColor .ptTbBack:active,
.ptAdEffeciencyColor .ptTbAdd:active,
.ptAdEffeciencyColor .ptTbInput:active,
.ptAdEffeciencyColor .ptTbDelete:active,
.ptAdEffeciencyColor .ptTbSort:active,
.ptAdEffeciencyColor .ptTbDistribute:active,
.ptAdEffeciencyColor .ptTbDistMode:active {
    background-color: hsla(266, 75%, 65%, 0.12);
}

.ptTbDistMode,
.ptTbDistribute,
.ptTbDelete,
.ptTbDeleteFor,
.ptTbDeleteAlltime,
.ptTbDeleteThisonly,
.ptTbSebs,
.ptTbSave,
.ptTbBack,
.ptTbDirOver,
.ptTbCancel,
.ptTbOver,
.ptTbDir {
    color: var(--text-secondary);
}


/* .ptTbSort,
.ptTbAdd {
    color: var(--text-thirdly);
} */
/* .ptTbAdd {
    font-weight: bold;
} */

.ptTbSave:hover,
.ptTbBack:hover,
.ptTbAdd:hover,
.ptTbInput:hover,
.ptTbSort:hover,
.ptTbDistribute:hover,
.ptTbDistMode:hover,
.ptTbDistribute:hover,
.ptTbSebs:hover,
.ptTbDelete:hover,
.ptTbDeleteAlltime:hover,
.ptTbDeleteThisonly:hover,
.ptTbDirOver:hover,
.ptTbOver:hover,
.ptTbCancel:hover,
.ptTbDir:hover {
    color: var(--text-primary);
    transition: var(--transitions);
}

/* .ptTbAdd {
    border-right-width: 2px;
} */

.ptTbCancel {
    font-weight: bold;
    border-width: 0px 2px;
}

.ptTbInput {
    transform: scaleX(-1);
}

.ptTbMore {
    font-weight: bold;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 0px 4px 0px 4px;
    cursor: pointer;
    flex: 1;
    transform: scaleX(-1);
    border-style: solid;
}

.ptTbIsAd {
    display: flex;
    text-align: center;
    text-decoration: line-through;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 1;
    border-style: solid;
    border-right-width: 2px;
}

.ptTbRename {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 0px 4px 0px 4px;
    cursor: pointer;
    flex: 1;
    border-style: solid;
    border-right-width: 2px;
    /* border-left-width: 2px; */
}

.ptTbDistribute,
.ptTbDistMode,
.ptTbDelete,
.ptTbDeleteFor,
.ptTbDeleteAlltime,
.ptTbDeleteThisonly,
.ptTbDirOver,
.ptTbCancel,
.ptTbOver,
.ptTbDir,
.ptTbSebs {
    font-size: 0.95em;
    border-left-width: 2px;
}

.ptTbDeleteFor {
    cursor: default;
}

.ptGiganticBranch {
    position: relative;
    display: flex;
    /* flex-direction: column;  -- removed: was needed to stack ptTb + ptHugeBranch vertically; toolbars are gone and ptHugeBranch is being flattened */
    flex-direction: row;
    column-gap: var(--globalMeasure);
    /* absorbed from former .ptHugeBranch — keeps spacing between big/small branches */
    height: 100%;
    color: var(--text-primary);
    border-style: solid;
    width: 100%;
    /* border-radius: 7px; */
}

/* Branch overlay (settings / creation), anchored absolute to gigantic */
.ptBranchOverlay {
    position: absolute;
    z-index: calc(var(--ptZ) + 2);
    background: white;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 220px;
    font-family: sans-serif;
    color: var(--text-primary);
    user-select: none;
}

/* .ptBranchOverlay::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.06);
} */

.ptBranchOverlay.ptOvFlipDown::before {
    top: -6px;
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.06);
}

.ptBranchOverlay.ptOvFlipUp::before {
    bottom: -6px;
}

.ptOvTitle {
    font-size: 13px;
    color: var(--text-headers);
}

.ptOvLabel {
    font-size: 11px;
    font-weight: bold;
    color: var(--text-secondary);
}

.ptOvSegmented {
    display: flex;
    flex-direction: row;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.ptOvSegmented.ptOvSegStacked {
    flex-direction: column;
}

.ptOvSeg {
    flex: 1;
    padding: 6px 8px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    background: white;
    border-right: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2);
    transition: var(--transitions);
}

.ptOvSegStacked .ptOvSeg {
    border-right: none;
    border-bottom: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2);
    text-align: left;
}

.ptOvSegStacked .ptOvSeg:last-child {
    border-bottom: none;
}

.ptOvSeg:last-child {
    border-right: none;
}

.ptOvSeg:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08);
}

.ptOvSeg.ptOvSegActive {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.25);
    font-weight: 600;
}

.ptOvTypeDisabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.ptOvSeg.ptOvSegDisabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.ptOvSegmented.ptOvAllDisabled .ptOvSeg {
    opacity: 0.4;
    cursor: not-allowed;
}

.ptOvSegmented.ptOvAllDisabled {
    pointer-events: auto;
}

.ptOvActions {
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: flex-end;
}

.ptArbExpenseOverlay {
    min-width: 420px;
}

.ptArbContentWrap {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex-wrap: wrap;
}

.ptArbLeftCol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 200px;
    height: 350px;
    justify-content: space-between;
}

.ptArbRightCol {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 220px;
    height: 350px;
}

.ptArbValues {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ptArbDateRange {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin-right: auto;
}

.ptArbDateText {
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    font-weight: bold;
}

.ptArbConfirmOverlay {
    min-width: 320px;
    max-width: 480px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.ptArbConfirmList {
    overflow-y: auto;
    max-height: 50vh;
    margin: 8px 0;
}

.ptArbConfirmRow {
    padding: 6px 10px;
    font-size: 13px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.ptArbConfirmRow:last-child {
    border-bottom: none;
}

.ptArbValuesHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ptArbUnitToggleWrap {
    display: flex;
    justify-content: flex-end;
}

.ptArbUnitToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.3);
    background: white;
    color: var(--text-primary);
    transition: var(--transitions);
    user-select: none;
}

.ptArbUnitToggle:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08);
}

.ptArbUnitToggleActive {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2) !important;
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.6);
    font-weight: 600;
}

.ptOvBtn {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.3);
    background: white;
    transition: var(--transitions);
}

.ptOvBtn:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
}

.ptOvBtn.ptOvBtnPrimary {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.7);
    color: white;
    border-color: transparent;
}

.ptOvBtn.ptOvBtnPrimary:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.85);
}

.ptOvBtn.ptOvBtnDanger {
    color: #c0392b;
}

.ptOvBtn.ptOvBtnDanger:hover {
    background: rgba(192, 57, 43, 0.1);
}

.ptOvBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.ptOvNameInput {
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.3);
    border-radius: 4px;
    font-family: inherit;
    color: var(--text-primary);
    background: white;
}

.ptOvNameInput:focus {
    outline: none;
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.7);
}

.ptOvNameInputDisabled {
    opacity: 0.5;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.06);
    cursor: not-allowed;
}

.ptOvTypes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ptOvType {
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.25);
    background: white;
    text-align: left;
    transition: var(--transitions);
}

.ptOvType:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08);
}

.ptOvType.ptOvTypeActive {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2);
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.6);
}

/* Centered expense-overlay backdrop variant.
   Reuses the ptModalBackdrop primitive (from pronotes) so click-outside cancels
   and the rest of the UI dims uniformly. The .ptBranchOverlay panel sits inside
   as the content box — its existing white-bg/padding/shadow styles work unchanged
   once we drop the position:absolute it carries by default (overridden below). */
.ptModalBackdropExpense {
    z-index: calc(var(--ptZ) + 10);
}

.ptModalBackdropExpense .ptBranchOverlay {
    position: relative;
    max-height: 88vh;
    max-width: 92vw;
    overflow-y: auto;
    /* triangle pseudo only made sense anchored to a button; centered modal has none */
}

.ptModalBackdropExpense .ptBranchOverlay::before {
    display: none;
}

/* Value-entry row inside the unified overlay's values list.
   One row = one article (with image in grouping=1, name, sales/revenue context spans, input). */
.ptOvValueRow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    font-size: 12px;
}

.ptOvValueRow.ptOvValueRowGhost {
    opacity: 0.6;
}

.ptOvValueRow .ptOvValueImg {
    height: 28px;
    width: 21px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.ptOvValueRow .ptOvValueName {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ptOvValueRow .ptOvValueContext {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    opacity: 0.75;
}

.ptOvValueRow .ptOvValueInput {
    width: 100px;
    padding: 4px 8px;
}

/* CoGS repropagation toggles — pair of checkbox-styled labels.
   Visible only when type=Себестоимость in the unified overlay. */
.ptOvRepropWrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border: 1px dashed hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35);
    border-radius: 4px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.04);
}

.ptOvRepropToggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-primary);
}

.ptOvRepropToggle input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

.ptOvRepropToggle .ptOvRepropHint {
    color: var(--text-secondary);
    font-size: 10px;
    opacity: 0.8;
}

/* ptHugeBranch flattened into ptGiganticBranch (display:flex + column-gap moved up). Kept commented for reference.
.ptHugeBranch {
    display: flex;
    column-gap: var(--globalMeasure);
    color: var(--text-primary);
    max-width: 100%;
}
*/

.ptBigHeader {
    /*,,bighead*/
    position: relative;
    user-select: none;
    color: var(--text-headers);
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    text-align: center;
    flex: 1;
    /* padding: 4px 2px 5px 2px; */
    border-style: solid;
    border-bottom-width: 1px;
    cursor: pointer;
    min-height: var(--globalDouble);
    max-height: var(--globalDouble);
    font-size: 0.95em;
    /* box-sizing: content-box !important; */
    padding-right: var(--horizonPad);
    padding-left: var(--horizonPad);
}

.ptHollow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-style: solid;
    border-width: 2.5px;
    border-radius: 4px;
    width: fit-content;
    /* align-self: flex-start; */
    height: fit-content;
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
    border-color: var(--ptColor);
    margin-left: 20px;
    /* background-color: white; */
}

.ptHollow * {
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1;
    width: auto;
    color: var(--text-primary);
    border-color: var(--ptColor);
}

.ptHollowName {
    display: flex;
    /* border-style: solid; */
    /* border-bottom-width: 2px; */
    /* min-height: var(--globalDouble);
    max-height: var(--globalDouble); */
    font-size: 1.1em;
    padding: var(--horizonPadPlus);
}

.ptPile {
    display: flex;
    border-style: solid;
    border-top-width: 2px;
    font-size: 1.05em;
    padding: 6px;
}

.ptBigBranch,
.ptSmallBranch {
    display: flex;
    flex-direction: column;
    text-align: center;
    /* border-radius: 7px 7px 0px 0px; */
    border-style: solid;
    flex: 1;
    cursor: default;
    max-width: 100%;
    /* transition: var(--transitions); */
    transition: min-width 0.3s ease-out;
}

.ptBigBranch {
    cursor: pointer;
    position: relative;
}

/* Arrow indicators for big headers ========================================= */

.ptBigHeader::before,
.ptBigHeader::after {
    content: '';
    opacity: 0;
    position: absolute;
}

/* Shared arrow appearance for all active hover states (exclude info massive) */
.ptMassiveBranch:not(.ptProfitreeColor):not(:has(> .ptGiganticBranch + .ptGiganticBranch)) .ptBigBranch:hover .ptBigHeader::before,
.ptMassiveBranch:not(.ptProfitreeColor):not(:has(> .ptGiganticBranch + .ptGiganticBranch)) .ptBigHeader:hover::before,
.ptMassiveBranch:not(.ptProfitreeColor):not(:has(> .ptGiganticBranch + .ptGiganticBranch)) .ptBigBranch:hover .ptBigHeader::after,
.ptMassiveBranch:not(.ptProfitreeColor):not(:has(> .ptGiganticBranch + .ptGiganticBranch)) .ptBigHeader:hover::after,
.ptMassiveBranch:not(.ptProfitreeColor):has(> .ptGiganticBranch + .ptGiganticBranch) .ptBigHeader:hover::before,
.ptMassiveBranch:not(.ptProfitreeColor):has(> .ptGiganticBranch + .ptGiganticBranch) .ptBigHeader:hover::after,
.ptMassiveBranch:not(.ptProfitreeColor):has(> .ptGiganticBranch + .ptGiganticBranch) .ptBigBranch:not(.ptUnclick):not(:has(.ptBigHeader:hover)):hover .ptBigHeader::before,
.ptMassiveBranch:not(.ptProfitreeColor):has(> .ptGiganticBranch + .ptGiganticBranch) .ptBigBranch:not(.ptUnclick):not(:has(.ptBigHeader:hover)):hover .ptBigHeader::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    font-weight: bold;
    opacity: 0.4;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

/* Folded massive: both body and header hover → ⟨ ⟩ (UNFOLD intent) */
.ptMassiveBranch:not(.ptProfitreeColor):not(:has(> .ptGiganticBranch + .ptGiganticBranch)) .ptBigBranch:hover .ptBigHeader::before,
.ptMassiveBranch:not(.ptProfitreeColor):not(:has(> .ptGiganticBranch + .ptGiganticBranch)) .ptBigHeader:hover::before {
    content: '⟨' !important;
    left: calc(var(--globalMeasure) * -0.65);
}
.ptMassiveBranch:not(.ptProfitreeColor):not(:has(> .ptGiganticBranch + .ptGiganticBranch)) .ptBigBranch:hover .ptBigHeader::after,
.ptMassiveBranch:not(.ptProfitreeColor):not(:has(> .ptGiganticBranch + .ptGiganticBranch)) .ptBigHeader:hover::after {
    content: '⟩' !important;
    right: calc(var(--globalMeasure) * -0.65);
}

/* Unfolded massive: header hover on ANY big header → ⟩ ⟨ (FOLD back intent) */
.ptMassiveBranch:not(.ptProfitreeColor):has(> .ptGiganticBranch + .ptGiganticBranch) .ptBigHeader:hover::before {
    content: '⟩' !important;
    left: calc(var(--globalMeasure) * -0.65);
}
.ptMassiveBranch:not(.ptProfitreeColor):has(> .ptGiganticBranch + .ptGiganticBranch) .ptBigHeader:hover::after {
    content: '⟨' !important;
    right: calc(var(--globalMeasure) * -0.65);
}

/* Unfolded massive: body hover on UNFOLDABLE big branch → ⟨ ⟩ (further UNFOLD) */
.ptMassiveBranch:not(.ptProfitreeColor):has(> .ptGiganticBranch + .ptGiganticBranch) .ptBigBranch:not(.ptUnclick):not(:has(.ptBigHeader:hover)):hover .ptBigHeader::before {
    content: '⟨' !important;
    left: calc(var(--globalMeasure) * -0.65);
}
.ptMassiveBranch:not(.ptProfitreeColor):has(> .ptGiganticBranch + .ptGiganticBranch) .ptBigBranch:not(.ptUnclick):not(:has(.ptBigHeader:hover)):hover .ptBigHeader::after {
    content: '⟩' !important;
    right: calc(var(--globalMeasure) * -0.65);
}

/* Non-unfoldable branches in unfolded massive: no arrows (base rule handles) */

.ptCd::before,
.ptCd::after {
    content: none !important;
}

.ptTinyBranch {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-weight: normal;
    position: relative;
    overflow: visible !important;
    height: var(--globalDouble);
    font-size: 1em;
    max-width: 100%;
    border-style: solid;
    border-color: inherit;
}

/* Part-E (decision 1-A): direct/CoGS per-article expense cells are clickable deep-links into
   the Manager (pre-focused on this article + period). The value itself is the edit target —
   no pencil glyph; a subtle hover affordance signals it is clickable. */
.ptXbuCell {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.ptXbuCell:hover {
    background-color: rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.ptLeaf,
.ptLeafi,
.ptLeafC {
    min-width: calc(var(--globalMeasure) * 3);
    flex: 1;
    flex-basis: auto;
    box-sizing: content-box !important;
    height: var(--globalDouble);
    padding-right: var(--horizonPad);
    padding-left: var(--horizonPad);
    border-width: 0px 1px 0px 1px;
    display: flex;
    border-style: solid;
    border-color: inherit;
    text-align: center;
    align-items: center;
    color: var(--text-primary);
}

/* An intentionally-empty leaf cell (e.g. an overhead user-expense on an article row — overhead is
   contribution-margin canonical, never allocated per-article; F5 / decision 1a). Muted «—», so it
   reads as "not applicable here", never as a missing-data gap. */
.ptLeaf.ptLeafNa {
    opacity: 0.4;
    justify-content: center;
}

.ptDrawing {
    border-radius: 4px;
    border: 2.5px solid #cfcfcf;
    box-shadow: 0 3px 3px hsla(0, 0%, 0%, 0.05);
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.3);
    /* This is critical */
    max-width: 100%;
    /* Instead of none, limit to container */
    width: 100%;
    /* Force full width of grid column */
    /* overflow: hidden; */
    box-sizing: border-box;
    min-width: fit-content;
}

.ptDrawing * {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: fit-content;
}

.ptDrawSky {
    /* Header box. The three card rows form a clean constant-step sequence — header 3×, value 2.5×,
       compare 2× (= 36/30/24px, a steady 6px / half-measure decrement) — which reads more proportional
       than the old irregular 3.75/2.5/2. The header still centres its title with breathing room above
       and below; if it reads «too close» to the value on the real-WB eyeball, nudge this multiplier up. */
    height: calc(var(--globalMeasure) * 3);
    color: var(--text-compas);
    min-width: fit-content;
    font-size: 1.1em;
    /* font-weight: bold; */
}

.ptDraw {
    border-color: inherit;
    height: auto;
    flex-direction: column;
    flex: 0 1 auto;
    width: 100%;
    box-sizing: border-box;
    /* overflow: hidden; */
    min-width: fit-content;
}


.ptDrawV,
.ptDrawVr {
    position: relative;
    border-width: 0px 0px 2px 2px;
    border-style: solid;
    border-color: inherit;
    padding: calc(var(--globalMeasure) * 0.25);
    width: 100%;
    box-sizing: border-box;
    color: var(--text-headers);
    height: calc(var(--globalMeasure) * 2.5);
    white-space: nowrap;
    /* Prevent text wrapping that could increase width */
    /* overflow: hidden; */
    text-overflow: ellipsis;
    /* Add ellipsis if text overflows */
    min-width: fit-content;
}

.ptDrawVr {
    font-weight: bold;
    border-width: 0px 0px 2px 0px;
}

.ptDrawContainer {
    justify-content: space-evenly;
    border-color: inherit;
    /* height: auto; */
    width: 100%;
    height: calc(var(--globalMeasure) * 2);
    /* overflow: hidden; */
    min-width: fit-content;
}

.ptDrawC {
    border-color: inherit;
    border-style: solid;
    padding: calc(var(--globalMeasure) * 0.25);
    font-size: 0.85em;
    color: var(--text-compas);
    flex: 1;
    min-width: fit-content;
    white-space: nowrap;
    box-sizing: border-box;
    height: calc(var(--globalMeasure) * 2);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ptDrawMain {
    justify-content: flex-start;
    font-size: 1.2em;
    border-top: 2px solid;
    border-color: inherit;
    height: auto;
    width: 100%;
    min-width: fit-content;
    /* overflow-x: auto;  */
    /* overflow-y: hidden; */
}

.ptDraw {
    color: var(--text-primary);
    min-width: fit-content;
}

/* V2-F22: prior-period legend row with no data — visible but muted (never silently absent). */
.ptLegendPrevRow--off {
    opacity: 0.45;
}

/* V2-F9 (b): the table's whole-period range note — quiet fact line above the table. */
.ptTableSnapNote {
    font-size: 12px;
    color: var(--text-secondary, #666);
    padding: 2px 0 6px 8px;
}

.ptChartTooltip {
    position: fixed !important;
    background: white;
    color: rgba(0, 0, 0, 0.75);
    padding: 4px 4px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: calc(var(--ptZ) + 2);
    pointer-events: none;
    transform: translate(-50%, -100%);
    margin-top: -10px;
    display: none;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.25);
    transition: all 0.1s ease;
    font-family: sans-serif;
}

/* CX1/2a: partial edge-bucket disclosure inside the chart tooltip — info/amber tone, never an
   alarm (the data is honest, just covers fewer days). A thin top divider separates it from the value. */
.ptChartPartialNote {
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 10px;
    text-align: center;
    color: #b8860b;
}

.ptLeafi {
    color: var(--text-headers);
    overflow: hidden !important;
    text-overflow: clip !important;
    justify-content: flex-end;
    max-width: 100%;
}

.ptLeafC {
    color: var(--text-primary);
    /* background: white !important; */
    /* text-decoration-line: underline;
    text-decoration-thickness: 2.5px;
    text-underline-offset: 7px; */
    max-width: fit-content;
    min-width: fit-content;
    /* padding-right: 4px;
    padding-left: 4px; */
    font-size: 0.95em;
}

/* .pCgreen {
    text-decoration-color: rgb(0, 213, 85);
    text-shadow: 0 0 0px rgb(0, 213, 85);
}

.pCyellow {
    text-decoration-color: rgb(255, 200, 0);
    text-shadow: 0 0 0px rgb(255, 200, 0);
}

.pCred {
    text-decoration-color: rgb(255, 8, 0);
    text-shadow: 0 0 0px rgb(255, 8, 0);
} */

.ptDrawing.pCred {
    background: rgba(255, 37, 37, 0.13);
    border-color: rgba(255, 37, 37, 0.5);
}

.ptDrawing.pCgreen {
    background: rgba(18, 209, 94, 0.13);
    border-color: rgba(18, 209, 94, 0.5);
}

.ptDrawing.pCyellow {
    /* background: rgba(247, 198, 21, 0.145);
    border-color: rgba(247, 198, 21, 0.7); */
    background: rgb(245, 245, 245);
    border-color: rgba(0, 0, 0, 0.2);
}


.ptLeafC.pCred {
    text-decoration-color: rgb(255, 37, 37);
    text-shadow: 0 0 0px rgb(255, 37, 37);
}

.ptLeafC.pCgreen {
    text-decoration-color: rgb(18, 209, 94);
    text-shadow: 0 0 0px rgb(18, 209, 94);
}

.ptLeafC.pCyellow {
    text-decoration-color: rgb(247, 198, 21);
    text-shadow: 0 0 0px rgb(247, 198, 21);
}

/* .pCgreen {
    text-decoration-color: rgb(0, 180, 75);
    text-shadow: 0 0 0px rgb(0, 180, 75);
}

.pCyellow {
    text-decoration-color: rgb(220, 170, 0);
    text-shadow: 0 0 0px rgb(220, 170, 0);
}

.pCred {
    text-decoration-color: rgb(220, 20, 0);
    text-shadow: 0 0 0px rgb(220, 20, 0);
} */

.ptLeaf[contenteditable="true"] {
    outline: none;
    outline-offset: -2px;
    background: white !important;
    cursor: text !important;
    pointer-events: auto !important;
}

.ptLeaf::after {
    content: attr(data-unit);
    pointer-events: none;
    user-select: none;
}

/* .ptLeafPieces {
    border-radius: 0px;
    border-style: solid;
    padding: 3px;
    flex: 1;
    min-height: 0;
} */

/* .ptFruit {
    border-radius: 0px;
    border-style: solid;
    padding: 3px;
    min-height: 0;
    flex: 1;
    font-weight: bold;
    border-width: 0px 1px 0px 1px;
    color: rgba(0, 0, 0, 0.95);
} */

/* Chains name+thumbnail slot (ADR-0011): the .ptLeamage class now sizes/positions the shared
   .ptNameThumb WRAPPER (hanging just left of the branch), not a bare <img>. The inner image keeps
   the chains "cover" crop; the placeholder + «N» badge come from the shared rules below. */
.ptLeamage {
    height: var(--globalLeam);
    width: calc(var(--globalLeam) * 0.75);
    right: calc(100% - 1px);
    position: absolute;
    z-index: 100;
    opacity: 0.95;
    user-select: none;
    transition: all 0.5s ease;
    border-radius: 4px;
}

.ptLeamage .ptNameThumbImg {
    object-fit: cover;
}

.ptLeamage.ptLea {
    left: -2%;
}

.ptResinMuch {
    position: absolute;
    left: 50%;
    right: 50%;
    display: flex;
    cursor: default;
    font-size: 1.1em;
    align-items: center;
    text-align: center;
    height: var(--globalMeasure);
    color: var(--text-resins);
    user-select: none;
    pointer-events: none;
}

.ptResinDrop {
    left: 100%;
    display: flex;
    position: absolute;
    cursor: default;
    align-items: center;
    text-align: center;
    border-style: solid;
    border-color: inherit;
    height: calc(100% + 2px);
    width: var(--globalMeasure);
    border-width: 0px 1px 0px 1px;
    user-select: none;
    color: var(--text-resins);
    pointer-events: none;
}

.ptResinLayer {
    /* font-weight: bold; */
    width: var(--globalMeasure);
    left: calc(100% + 2.5px);
    display: flex;
    position: absolute;
    cursor: default;
    align-items: center;
    text-align: center;
    user-select: none;
    font-size: 1.15em;
    color: var(--text-resins);
    /* border-width: 0px;
    padding: 0px; */
    pointer-events: none;
}

.ptResinLeaf {
    display: flex;
    min-height: var(--globalMeasure);
    max-height: var(--globalMeasure);
    align-items: center;
    padding: 0px;
    border-style: solid;
    border-width: 2px 0px 2px 0px;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.65);
    color: var(--text-resins);
    /* cursor: pointer; */
    box-sizing: content-box !important;
    pointer-events: none;
}

.ptMovequal {
    position: relative;
    top: -0.7px;
}

.ptUnfolded {
    /* position: sticky; */
    /* top: 0; */
    /* transform: translateY(-10px); */
    /* width: auto; */
}

.paDay {
    z-index: 1;
    left: calc(var(--globalMeasure) * 6);
}

.pbWeek {
    z-index: 2;
    left: var(--globalMeasure);
    /* left: calc(var(--globalMeasure) * 6); */
}

.pcMonth {
    z-index: 3;
    left: calc(var(--globalMeasure) * 4);
}

/* .pcMonth.ptUnfolded {
    z-index: 5;
} */

.pdQuarter {
    z-index: 4;
    left: calc(var(--globalMeasure) * 2);
}

/* .pdQuarter.ptUnfolded {
    z-index: 4;
} */

.peYear {
    z-index: 5;
}

/* .peYear.ptUnfolded {
    z-index: 3;
} */

.ptBb1 {
    border-bottom-width: 1px;
}

.ptBt1 {
    border-top-width: 1px;
}

.ptBl1 {
    border-left-width: 1px;
}

.ptBl15 {
    border-left-width: 1.5px;
}

.ptBl2 {
    border-left-width: 2px;
}

.ptBl25 {
    border-left-width: 2.5px;
}

.ptBr1 {
    border-right-width: 1px;
}

.ptBr15 {
    border-right-width: 1.5px;
}

.ptBr2 {
    border-right-width: 2px;
}

.ptBr2 {
    border-right-width: 2px;
}

.ptBb2 {
    border-bottom-width: 2px;
}

.ptBr25 {
    border-right-width: 2.5px;
}

.ptBb25 {
    border-bottom-width: 2.5px;
}

.ptNora {
    border-radius: 0px;
}

.ptNowi {
    border-color: rgba(0, 0, 0, 0);
}

.ptNowiR {
    border-left-width: 0px;
}

.ptNowiL {
    border-right-width: 0px;
}

.ptAdvants {
    text-align: left;
    display: block;
    font-size: 16px;
    font-weight: normal;
    margin-left: 10px;
    margin-top: 10px;
}

.ptOvershadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--ptZ) + 1);
    font-family: sans-serif;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
}

/* .ptNowiB {
    border-bottom-width: 0px;
} */

/* .ptLeafiT {
    display: inline-block;
    max-width: 88px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    vertical-align: middle;
    background-color: transparent !important;
} */

#ptFloatingCalendar {
    position: fixed;
    background: white;
    border-radius: 4px;
    padding: 8px;
    z-index: calc(var(--ptZ) + 1);
    display: none;
    box-shadow: var(--dropDownShadow);
    font-family: sans-serif;
}

.ptFloarrow {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 8px;
}

.ptCalClear {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
}

.ptCalNav {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 8px;
}

.ptPresetBtn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: var(--transitions);
}

.ptPreselected {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2);
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.8);
}

.pleaseGo {
    transition: background-color 0.1s ease;
}

.pleaseGo:hover {
    background: hsl(145, 44%, 62%) !important;
}

.ptMetricsList {
    width: 200px;
    flex-shrink: 0;
    overflow-y: auto;
    /* Make the list scrollable */
    border-right: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2);
    padding-right: var(--globalHalf);
    max-height: 400px;
    /* Match the chart container's min-height */
    min-width: 0;
}

.ptMetricItem {
    padding: 8px 12px;
    margin: 4px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: var(--transitions);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ptMetricItem:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
}

.ptMetricMain {
    cursor: pointer;
    position: relative;
}

.ptMetricMain.ptMetricOpen::after {
    content: '▼';
    font-size: 10px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
}

.ptMetricMain:not(.ptMetricOpen)::after {
    content: '▶';
    font-size: 10px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
}

.ptMetricSubContainer {
    margin-left: 8px;
    margin-bottom: 8px;
}

.ptMetricSubItem {
    padding: 6px 12px;
    margin: 2px 0;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    /* V2-F38: wrap, never ellipsize — «Выкупы (чистые) (руб.)» vs «(руб/шт)» truncated to the
       SAME visible label, making the two sub-series indistinguishable until clicked. */
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background 0.2s;
}

.ptMetricSubItem:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
}

.ptMetricSubItem.selected,
.ptMetricItem.selected {
    font-weight: 500;
}

/* V2-F20: charts metric list — granular chains unfold-leaves nest under their parent metric.
   The caret chip (▸ N / ▾) is the group toggle, a separate click target from the row itself
   (the row still selects/plots); children indent with a slightly smaller face. */
.ptMetricCaret {
    display: inline-block;
    margin-left: 6px;
    /* V2-F35: a power user clicks these constantly — real hit target (was 0×6px padding, 11px face) */
    padding: 3px 9px;
    font-size: 12px;
    opacity: 0.55;
    border-radius: 9px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.12);
    cursor: pointer;
    transition: var(--transitions);
}

.ptMetricCaret:hover {
    opacity: 1;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.25);
}

.ptMetricChild {
    margin-left: 14px;
    padding: 6px 12px;
    font-size: 13px;
}

.ptMetricChildSubs {
    margin-left: 22px;
}

.ptChartLeftColumn {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 200px;
    min-width: 0;
    max-height: 460px;
    gap: 4px;
    /* border-right: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2); */
    margin-right: var(--globalHalf);
}

.ptChartLineLegend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--globalMeasure) 0 4px 4px;
    font-size: 11px;
    color: var(--text-primary);
    flex-shrink: 0;
    border-top: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
    margin-top: var(--globalMeasure);
}

.ptLegendLineRow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ptLegendSampleSolid {
    width: 18px;
    height: 0;
    border-bottom: 2.5px solid var(--legend-color, #999);
    flex-shrink: 0;
}

.ptLegendSampleDashed {
    width: 18px;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--legend-color, #999) 0px, var(--legend-color, #999) 6px, transparent 6px, transparent 10px);
    opacity: 0.4;
    flex-shrink: 0;
}

.ptLegendPrevRow {
    position: relative;
}

.ptLegendPrevCheckbox {
    margin-left: auto;
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--legend-color, #999);
}

.ptChartContainer {
    position: relative;
    height: calc(100vh - 180px);
    min-height: 400px;
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
    border-left: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2);
}

.ptChartCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.ptChartCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.ptChartYAxis {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
    overflow: visible;
}

#ptChartUnitLabel {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    padding: 0 3px;
    padding-bottom: 12px;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-primary);
    text-align: right;
}

#ptChartAvgLabel {
    position: absolute;
    bottom: 100%;
    left: calc(100% + var(--globalFifth));
    width: max-content;
    padding: 0 3px;
    padding-bottom: 12px;
    font-size: 12px;
    color: var(--text-primary);
}

.ptYAxisLabel {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    min-width: 100%;
    max-width: fit-content;
    padding: 0 3px;
    text-align: center;
}

.ptXAxisLabel {
    position: absolute;
    width: 60px;
    text-align: center;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    margin-top: 8px;
    /* min-width: fit-content; */
}

.ptChartXAxis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    height: 35px;
    overflow: visible;
    /* pointer-events: none; */
}

.ptChartLegend {
    position: absolute;
    top: -25px;
    right: 0;
    display: flex;
    gap: 12px;
    font-size: 11px;
}

.ptLegendItem {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ptLegendColor {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.ptLegendColor.darker {
    filter: brightness(0.7);
}

.ptLegendColor.darkest {
    filter: brightness(0.5);
}

#ptWidgetOverlay {
    position: fixed;
    background: white;
    border-radius: 4px;
    padding: 8px;
    z-index: calc(var(--ptZ) + 1);
    box-shadow: var(--dropDownShadow);
    width: 380px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
}

.ptWidgeRow {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: move;
    user-select: none;
}

.ptWidgeBox {
    margin-right: 14px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.8);
}

/* ===== Сводка/Графики article picker (Wave B2): a body-level popover that hosts the shared
   buildArticleCombobox. The combobox's own field is hidden (the popover IS its open state), and its
   dropdown panel is reflowed from an absolute float into the popover body. Anchored to #ptTcChoosArts
   by JS (inline top/left). Body-level because #ptCrown clips its overflow. ===== */
.ptArticleComboHost {
    position: fixed;
    z-index: calc(var(--ptZ) + 1);
    width: 320px;
    max-width: 90vw;
    max-height: 75vh;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 5px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    /* The picker is mounted on document.body, OUTSIDE #ptAll — so without this it inherits the host
       WB page's font (the «weird font» report). Pin OUR family (matching #ptAll → the Артикул button)
       so the dropdown reads identically to the rest of the cockpit. (CF-D1 pinned the SIZE; this pins
       the FAMILY — the same body-mounted-overlay inheritance class.) */
    font-family: sans-serif;
}

.ptArticleComboHost .ptEmArticleCombo {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* CF-D1: inherit the .ptEmArticleCombo 13px base (was a divergent 14px) → one consistent size in
       the picker AND the Manager. The base stays ABSOLUTE px on purpose — this overlay is body-mounted
       (document.body), so an `em` base would resolve against the host WB page's root font; child sizes
       are em-OF-the-base (resolving against the combo's own px), which is safe. */
}

/* The combobox's closed field is redundant here — the popover itself is the open state. */
.ptArticleComboHost .ptEmArticleComboField { display: none; }

/* Reflow the dropdown panel from an absolutely-positioned float into the popover body. */
.ptArticleComboHost .ptEmArticleComboPanel {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.ptArticleComboHost .ptEmArticleComboList {
    flex: 1 1 auto;
    max-height: none;
}

/* #ptShopOverlay / .ptShopOption — RETIRED with showShopSelector (shops-cockpit-space PRD §3).
   The «Магазины» space (proshops.js, styles below) replaces the shop-switch overlay. */

#ptPrefOverlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 4px;
    padding: 16px;
    z-index: calc(var(--ptZ) + 1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    width: 580px;
    font-family: sans-serif;
}

.ptPrefContainer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.ptPrefCol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.ptPrefColDivider {
    width: 1px;
    align-self: stretch;
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
    flex-shrink: 0;
}

.ptPrefRowDivider {
    height: 1px;
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
    margin: 2px 0;
}

.ptPrefTitle {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    user-select: none;
}

.ptPrefSection {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
    border-radius: 4px;
    padding: 8px;
}

.ptPrefOptions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ptPrefCheckRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    cursor: pointer;
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
    border-radius: 4px;
}

.ptPrefCheckbox {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.8);
}

.ptPrefCheckLabel {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

/* ── Profitree AI chat room (AI Phase 4, C1 — ADR-0020) ──────────────
   A full-window in-page focus surface opened from the ptAI toolbar button.
   Self-contained; sits above every Profitree surface. C5 adds a left history
   sidebar, so the room is a two-column flex (sidebar + main). */
/* ADR-0026: in-flow space body — a flex:1 child of #ptAll, sized below the persistent
   #ptSkies toolbar (was a document.body `fixed inset:0` z+10 overlay pre-S3). min-height:0
   lets the inner scroll regions (.ptChatBody / .ptChatList) bound correctly; toggled
   visible/hidden by ptSwitchSpace (display). */
#ptChatRoom {
    flex: 1;
    min-height: 0;
    min-width: 100%;
    display: flex;
    flex-direction: row;
    background: #ffffff;
    font-family: sans-serif;
    overflow: hidden;
    /* ADR-0026: the same green divider #ptCrown carries — so every space body divides from
       #ptSkies identically (the cockpit reads as one coherent shell, not bolted-on overlays). */
    border-top: 2.5px solid var(--ptColor);
}

/* The chat column (header / thread / composer) — fills the space beside the sidebar. */
.ptChatMain {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── C5: conversation history sidebar ───────────────────────────── */
.ptChatSidebar {
    flex-shrink: 0;
    width: 260px;
    display: flex;
    flex-direction: column;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
    border-right: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
}

.ptChatNewBtn {
    flex-shrink: 0;
    margin: var(--globalMeasure);
    padding: var(--globalHalf) var(--globalMeasure);
    background: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    color: #ffffff;
    border-radius: 8px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: var(--transitions);
}

.ptChatNewBtn:hover {
    filter: brightness(1.08);
}

.ptChatList {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--globalHalf) var(--globalMeasure);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ptChatListEmpty {
    padding: var(--globalMeasure);
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.ptChatListItem {
    border-radius: 8px;
    transition: var(--transitions);
}

.ptChatListItem:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.10);
}

.ptChatListItem--active {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.16);
}

.ptChatListMain {
    display: flex;
    align-items: center;
    gap: var(--globalHalf);
    padding: var(--globalHalf);
}

.ptChatListOpen {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: sans-serif;
}

.ptChatListTitle {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptChatListDate {
    font-size: 11px;
    color: var(--text-secondary);
}

.ptChatListDel {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: var(--globalHalf);
    border-radius: 4px;
    opacity: 0;
    transition: var(--transitions);
}

.ptChatListItem:hover .ptChatListDel {
    opacity: 0.7;
}

.ptChatListDel:hover {
    opacity: 1;
    background: hsla(0, 70%, 50%, 0.12);
}

/* Inline two-step delete confirm (no native dialog). */
.ptChatListConfirm {
    display: none;
    align-items: center;
    gap: var(--globalHalf);
    padding: var(--globalHalf);
}

.ptChatListItem--confirming .ptChatListMain {
    display: none;
}

.ptChatListItem--confirming .ptChatListConfirm {
    display: flex;
}

.ptChatListConfirmQ {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.ptChatListConfirmYes,
.ptChatListConfirmNo {
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 12px;
    padding: 2px var(--globalHalf);
    border-radius: 4px;
    transition: var(--transitions);
}

.ptChatListConfirmYes {
    background: hsla(0, 70%, 50%, 0.15);
    color: hsl(0, 60%, 38%);
}

.ptChatListConfirmYes:hover {
    background: hsla(0, 70%, 50%, 0.28);
}

.ptChatListConfirmNo {
    background: hsla(0, 0%, 0%, 0.06);
    color: var(--text-secondary);
}

.ptChatListConfirmNo:hover {
    background: hsla(0, 0%, 0%, 0.12);
}

/* ── C6: remaining-quota readout (sidebar footer) ──────────────── */
.ptChatQuota {
    flex-shrink: 0;
    margin: 0 var(--globalHalf);
    padding: var(--globalHalf) var(--globalMeasure);
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-secondary);
    border-top: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.12);
    cursor: default;
    user-select: none;
}

/* No readout (logged out, fetch failed) → collapse the footer entirely. */
.ptChatQuota:empty {
    display: none;
}

.ptChatQuota--exhausted {
    color: hsl(0, 60%, 45%);
    font-weight: 500;
}

/* ADR-0026: a LIGHT section header (not the old solid-green overlay banner). #ptSkies is the
   space's real top bar now, so this is a quiet title row on white with a subtle divider —
   coherent with the Отчёты #ptCrown row, no heavy green block colliding with «+ Новый чат». */
.ptChatHeader {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--globalMeasure);
    padding: var(--globalHalf) var(--globalMeasure);
    background: transparent;
    color: var(--text-primary);
    flex-shrink: 0;
    border-bottom: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
}

.ptChatTitleWrap {
    display: flex;
    align-items: baseline;
    gap: var(--globalMeasure);
    min-width: 0;
}

.ptChatTitle {
    font-size: 15px;
    font-weight: 600;
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    white-space: nowrap;
    user-select: none;
}

.ptChatShop {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ADR-0026 D3: the chat close button (.ptChatClose) was removed — the AI is a switchable
   space, never a closeable overlay. Its CSS is retired with it. */

.ptChatBody {
    flex: 1;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: var(--globalMeasure);
}

.ptChatThread {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--globalMeasure);
}

.ptChatMsg {
    max-width: 85%;
    padding: var(--globalHalf) var(--globalMeasure);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--text-primary);
}

.ptChatMsg--user {
    align-self: flex-end;
    background: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

.ptChatMsg--assistant {
    align-self: flex-start;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08);
    border-bottom-left-radius: 2px;
}


/* F1 (profitree-ai-quality): styling for the Markdown the assistant bubble now renders
   (promarkdown.js). Scoped to --assistant so user/system bubbles are unaffected. */
.ptChatMsg--assistant p { margin: 0 0 var(--globalHalf); white-space: pre-wrap; }
.ptChatMsg--assistant > p:last-child { margin-bottom: 0; }
/* FF-1 (L1-14, 2026-06-28): RE-ASSERT the list marker. We inject into seller.wildberries.ru, whose
   global reset strips `list-style` (and can flip `li` to display:block) from any bare <ul>/<li> — so our
   markdown bullets rendered on separate lines but WITHOUT the «•» glyph in real WB (smoke-blind: the
   reset-free standalone.html showed them, hiding the bug). The class-scoped selector (specificity 0,1,1)
   beats any bare-element host reset; `list-style-position: outside` pairs with the padding-left so the
   marker sits in the indent; `display: list-item` restores the marker box if the host flipped it. */
.ptChatMsg--assistant ul, .ptChatMsg--assistant ol { margin: var(--globalHalf) 0; padding-left: 1.4em; white-space: normal; list-style-position: outside; }
.ptChatMsg--assistant ul { list-style-type: disc; }
.ptChatMsg--assistant ol { list-style-type: decimal; }
.ptChatMsg--assistant li { white-space: pre-wrap; margin: 2px 0; display: list-item; }
.ptChatMsg--assistant h1, .ptChatMsg--assistant h2, .ptChatMsg--assistant h3,
.ptChatMsg--assistant h4, .ptChatMsg--assistant h5, .ptChatMsg--assistant h6 {
    margin: var(--globalHalf) 0 calc(var(--globalHalf) / 2); font-size: 1.05em; font-weight: 600;
}
.ptChatMsg--assistant code {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.14);
    padding: 0 4px; border-radius: 4px; font-family: monospace; font-size: 0.92em; white-space: pre-wrap;
}
.ptChatMsg--assistant pre {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.10);
    padding: var(--globalHalf); border-radius: 8px; overflow-x: auto; white-space: pre; margin: var(--globalHalf) 0;
}
.ptChatMsg--assistant pre code { background: none; padding: 0; }
.ptChatMsg--assistant table {
    border-collapse: collapse; margin: var(--globalHalf) 0; white-space: normal;
    display: block; max-width: 100%; overflow-x: auto;   /* a wide money table scrolls inside the bubble, never spills */
}
.ptChatMsg--assistant th, .ptChatMsg--assistant td {
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.3); padding: 2px 8px; text-align: left;
}
.ptChatMsg--assistant th { font-weight: 600; }
/* #6 → M1-R2 re-ask (2026-07-19): td was blanket-nowrap (the ₽ glyph once wrapped onto its own row),
   but nowrap made any PROSE-bearing table clip + horizontally scroll inside the bubble (cells cut
   mid-word). Cells wrap normally again; money still never breaks because ptChatBindMoneyInTables
   (prochat.js pass E) NBSP-binds «1 234 ₽»-style values at render time — the guard moved from CSS
   to the post-render pass. */
.ptChatMsg--assistant td { white-space: normal; }
/* …but the ARTICLE UNIT inside a cell stays one line (thumb + name together — the ADR-0011
   name+thumbnail unit; the wrap fix above had let a narrow cell break between them, stacking the
   photo above the name). Cell-scoped on purpose: prose units keep flowing/wrapping normally. A very
   long preferred name will widen its column (content-driven — legitimate, unlike the old blanket nowrap). */
.ptChatMsg--assistant td .ptChatArtRef { white-space: nowrap; }
.ptChatMsg--assistant a { color: hsl(var(--pt-h), var(--pt-s), var(--pt-l)); text-decoration: underline; }
.ptChatMsg--assistant blockquote {
    margin: var(--globalHalf) 0; padding-left: var(--globalMeasure);
    border-left: 3px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.3); opacity: 0.92; white-space: normal;
}
.ptChatMsg--assistant hr { border: none; border-top: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2); margin: var(--globalHalf) 0; }

/* Q4 (F5) — a WB-term glossary highlight: subtle dotted underline + help cursor; the plain-Russian
   explanation is in [data-tip] (the document-level tooltip handler, prooverlays.js). Deliberately
   quiet — it must read as "hover for more", never shout. One highlight per concept per message. */
.ptChatMsg--assistant .ptChatTerm {
    text-decoration: underline dotted hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.55);
    text-underline-offset: 2px;
    cursor: help;
}
.ptChatMsg--assistant .ptChatTerm:hover {
    text-decoration-color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.06);
    border-radius: 3px;
}

.ptChatMsg--system {
    align-self: center;
    max-width: 100%;
    background: hsla(0, 0%, 0%, 0.05);
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

.ptChatFooter {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: var(--globalMeasure);
    border-top: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
    background: #ffffff;
}

.ptChatComposer {
    width: 100%;
    max-width: 720px;
    display: flex;
    align-items: flex-end;
    gap: var(--globalHalf);
}

.ptChatInput {
    flex: 1;
    resize: none;
    min-height: calc(var(--globalMeasure) * 3);
    max-height: 160px;
    padding: var(--globalHalf) var(--globalMeasure);
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35);
    border-radius: 8px;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-primary);
    outline: none;
}

.ptChatInput:focus {
    border-color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
}

.ptChatSend {
    flex-shrink: 0;
    padding: var(--globalHalf) var(--globalAndAhalf);
    background: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    color: #ffffff;
    border-radius: 8px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: var(--transitions);
}

.ptChatSend:hover {
    filter: brightness(1.08);
}

/* ── C2 (streaming round-trip) states ───────────────────────────── */

/* UX-3 (2026-06-24): while a reply streams the send button BECOMES the «Стоп» interrupt — it stays
   fully clickable (no pointer-events:none) and takes a calm neutral-grey tint so it reads as "stop",
   not the green "send" affordance. The label flips to «Стоп» in ptChatSetBusy. */
.ptChatSend--stop {
    background: hsl(var(--pt-h), 8%, 45%);
}
.ptChatSend--stop:hover {
    filter: brightness(1.12);
}

.ptChatInput:disabled {
    opacity: 0.7;
}

/* The model's reply while it streams: a pulsing «…» until the first token lands. */
.ptChatMsg--pending::after {
    content: '…';
    display: inline-block;
    animation: ptChatPulse 1.2s ease-in-out infinite;
}

/* Working status (eyeball pass #3): a muted, italic «Думаю» / «Собираю данные» label with a pulsing
   «…», shown before the first token and during a tool round-trip so the gather is never an
   unexplained pause. It lives on its OWN trailing node (.ptChatMsg--status) — NOT the answer bubble —
   so the status never overwrites streamed answer text (the shared-node wipe, Q8 #3). ptChatSubmit
   hides the node the instant real text streams and removes it when the answer lands. */
.ptChatMsg--working {
    font-style: italic;
    opacity: 0.7;
}
.ptChatMsg--working::after {
    content: '…';
    display: inline-block;
    animation: ptChatPulse 1.2s ease-in-out infinite;
}
/* The standalone status node: left-aligned, no bubble fill (a hint, not a message). */
.ptChatMsg--status {
    align-self: flex-start;
    background: none;
    padding-top: 2px;
    padding-bottom: 2px;
    color: var(--text-secondary);
}

@keyframes ptChatPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* A Russian error / quota notice (distinct from the model's own bubbles). */
.ptChatMsg--error {
    align-self: center;
    max-width: 100%;
    background: hsla(0, 70%, 50%, 0.10);
    color: hsl(0, 60%, 38%);
    font-size: 13px;
    text-align: center;
}

/* ── L1 inline confirm card (ADR-0030 — the human write-gate) ──
   An agent money-WRITE proposal: a bordered card in the thread (NOT a bubble) the seller confirms
   before anything is written, then morphs to «✓ записано» + an inline «Отменить». */
.ptChatConfirm {
    align-self: stretch;
    max-width: 100%;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35);
    border-radius: 12px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
    padding: var(--globalMeasure);
    display: flex;
    flex-direction: column;
    gap: var(--globalHalf);
    font-size: 14px;
    color: var(--text-primary);
}
.ptChatConfirm__head { display: flex; align-items: center; gap: var(--globalHalf); }
.ptChatConfirm__chip {
    font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.5px;
    background: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    border-radius: 6px; padding: 1px 6px;
}
.ptChatConfirm__title { font-weight: 600; color: var(--text-secondary); font-size: 13px; }
.ptChatConfirm__body { display: flex; flex-direction: column; gap: 2px; }
.ptChatConfirm__line { line-height: 1.4; }
.ptChatConfirm__hint { font-size: 12px; color: var(--text-secondary); }
.ptChatConfirm__actions { display: flex; gap: var(--globalHalf); margin-top: 2px; }
.ptChatConfirm__ok, .ptChatConfirm__cancel {
    border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ptChatConfirm__ok { background: hsl(var(--pt-h), var(--pt-s), var(--pt-l)); color: #fff; }
.ptChatConfirm__cancel { background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.10); color: var(--text-primary); }
.ptChatConfirm__ok:disabled, .ptChatConfirm__cancel:disabled { opacity: 0.6; cursor: default; }
.ptChatConfirm__status { font-weight: 600; color: hsl(var(--pt-h), var(--pt-s), var(--pt-l)); }
.ptChatConfirm__status--error { color: hsl(0, 60%, 42%); }
/* P2-9 (ADR-0034 §4/§6): the read-only «Открыть в Историю» pointer on a post-commit AI card — a QUIET
   secondary-color link, not an action button (undo/redo live in «История изменений», not on the card). */
.ptChatConfirm__histLink {
    align-self: flex-start; background: none; border: none; cursor: pointer;
    color: var(--text-secondary); text-decoration: underline;
    padding: 2px 0; font-size: 12px;
}
.ptChatConfirm__histLink:hover { color: hsl(var(--pt-h), var(--pt-s), var(--pt-l)); }
.ptChatConfirm--done { border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.45); }
.ptChatConfirm--cancelled { border-color: hsla(0, 0%, 50%, 0.25); background: hsla(0, 0%, 50%, 0.04); opacity: 0.85; }
.ptChatConfirm--error { border-color: hsla(0, 60%, 50%, 0.4); }

/* Starter chips (activation — Wladya 2026-06-24): clickable suggestions below the empty-chat greeting
   that prefill the input. A calm wrap-row of pill buttons; rotating set per new chat. */
.ptChatStarters { display: flex; flex-wrap: wrap; gap: var(--globalHalf); margin: 2px 0 var(--globalHalf) 0; }
.ptChatStarter {
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35);
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.06);
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    border-radius: 14px; padding: 5px 12px; font-size: 13px; cursor: pointer; line-height: 1.2;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.ptChatStarter:hover { background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.14); border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.55); }
/* The fixed capability-discovery anchor — visually distinct from the task chips (dashed "explore"
   affordance + a leading glyph) so it reads as "show me more", not as one more task (Wladya 2026-06-24). */
.ptChatStarter--explore { border-style: dashed; font-weight: 600; }
.ptChatStarter--explore::before { content: '✦ '; opacity: 0.75; }
/* WRITE (agentic) task chips — shown to ALL tiers (showcase the capability; decision 3a). A subtle
   leading glyph marks them as "the AI acts for you"; a free seller clicking one gets a clean upgrade
   prompt (gate-on-click), never a dead-end. Not a locked/greyed look — it is an invitation. */
.ptChatStarter--write::before { content: '✎ '; opacity: 0.7; }

/* Multi-article batch table (Wladya 2026-06-24 — one confirm card lists every product, no card-per-article).
   One row per allocation: name+thumbnail (ADR-0011 reserved slot) + nmId, then the ₽ amount right-aligned. */
.ptChatConfirm__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptChatConfirm__table td { padding: 4px 0; border-top: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.12); vertical-align: middle; }
.ptChatConfirm__table tr:first-child td { border-top: none; }
.ptChatConfirm__cName { display: flex; align-items: center; gap: var(--globalHalf); }
.ptChatConfirm__cNameTx { line-height: 1.3; }
.ptChatConfirm__cAmt { text-align: right; white-space: nowrap; font-weight: 600; padding-left: var(--globalMeasure); }
/* Critical-correctness (1a): the prior value an expense write will REPLACE — a destructive write must
   visibly show what it destroys. Secondary weight, amber to draw the eye to the overwrite. */
.ptChatConfirm__cWas { display: block; font-weight: 400; font-size: 11px; color: #c2410c; }
.ptChatConfirm__thumb {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 4px; overflow: hidden; display: block;
}
.ptChatConfirm__thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; display: block; }
.ptChatConfirm__thumb--ph {
    background-color: rgba(127, 127, 127, 0.10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23808080'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 62%;
    border: 1px solid rgba(127, 127, 127, 0.18); opacity: 0.5;
}

/* ── Forward unit-economics calculator (B2 / B-3 — ADR-0020 top-level-space pattern) ──
   A full-window in-page surface opened from the ptCalc toolbar button: a two-column
   body (inputs | results) under a coloured header. Mirrors the chat-room shell. */
/* ADR-0026: in-flow space body — a flex:1 child of #ptAll below the #ptSkies toolbar (was a
   document.body `fixed inset:0` z+10 overlay pre-S3). min-height:0 bounds the inner scroll;
   toggled visible/hidden by ptSwitchSpace (display). */
#ptCalcRoom {
    flex: 1;
    min-height: 0;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    font-family: sans-serif;
    color: var(--text-primary);
    overflow: hidden;
    /* ADR-0026: the same green divider #ptCrown carries (see #ptChatRoom). */
    border-top: 2.5px solid var(--ptColor);
}

/* ADR-0026: a LIGHT title row (not the old solid-green overlay banner) — #ptSkies is the
   space's real top bar now. See .ptChatHeader. */
.ptCalcHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--globalMeasure);
    padding: var(--globalHalf) var(--globalMeasure);
    background: transparent;
    color: var(--text-primary);
    flex-shrink: 0;
    border-bottom: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
}

.ptCalcTitleWrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ptCalcTitle {
    font-size: 15px;
    font-weight: 600;
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    white-space: nowrap;
    user-select: none;
}

.ptCalcSubtitle {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ADR-0026 D3: the calc close button (.ptCalcClose) was removed — the calculator is a
   switchable space, never a closeable overlay. Its CSS is retired with it. */

.ptCalcBody {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    overflow-y: auto;
}

/* ── input column ── */
.ptCalcInputs {
    flex: 0 0 440px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--globalMeasure);
    padding: var(--globalMeasure);
    border-right: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
}

.ptCalcBanner {
    font-size: 13px;
    line-height: 1.35;
    border-radius: 8px;
}

.ptCalcBanner:empty {
    display: none;
}

.ptCalcBanner--loading {
    padding: var(--globalHalf) var(--globalMeasure);
    color: var(--text-secondary);
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.06);
}

.ptCalcBanner--warn {
    padding: var(--globalHalf) var(--globalMeasure);
    color: hsl(35, 80%, 32%);
    background: hsla(40, 90%, 50%, 0.12);
}

.ptCalcBanner--error {
    padding: var(--globalHalf) var(--globalMeasure);
    color: hsl(0, 60%, 40%);
    background: hsla(0, 70%, 50%, 0.10);
}

.ptCalcField {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ptCalcField--disabled {
    opacity: 0.5;
}

.ptCalcLabel {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.ptCalcHint {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.ptCalcInput {
    padding: var(--globalHalf) var(--globalMeasure);
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35);
    border-radius: 8px;
    font-family: sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: #ffffff;
    outline: none;
    transition: var(--transitions);
    width: 100%;
    box-sizing: border-box;
}

.ptCalcInput:focus {
    border-color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
}

/* category picker */
.ptCalcSubjectWrap {
    position: relative;
}

.ptCalcSubjectDrop {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 260px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.30);
    border-radius: 8px;
    box-shadow: var(--dropDownShadow);
}

.ptCalcSubjectItem {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--globalHalf) var(--globalMeasure);
    cursor: pointer;
    transition: var(--transitions);
}

.ptCalcSubjectItem:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.10);
}

.ptCalcSubjectName {
    font-size: 13px;
    color: var(--text-primary);
}

.ptCalcSubjectParent {
    font-size: 11px;
    color: var(--text-secondary);
}

.ptCalcSubjectEmpty {
    padding: var(--globalHalf) var(--globalMeasure);
    font-size: 13px;
    color: var(--text-secondary);
}

/* model segmented control */
.ptCalcSegment {
    display: flex;
    gap: var(--globalHalf);
}

.ptCalcSegBtn {
    flex: 1;
    padding: var(--globalHalf) var(--globalHalf);
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-secondary);
    font-family: sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transitions);
}

.ptCalcSegBtn--active {
    background: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    color: #ffffff;
    border-color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
}

/* dimensions row */
.ptCalcDims {
    display: flex;
    align-items: center;
    gap: var(--globalHalf);
    flex-wrap: wrap;
}

.ptCalcDimInput {
    width: 70px;
}

.ptCalcDimX {
    color: var(--text-secondary);
    font-size: 14px;
}

.ptCalcLitersOut {
    font-size: 13px;
    color: var(--text-secondary);
    margin-left: var(--globalHalf);
}

/* toggle rows */
.ptCalcToggleRow {
    display: flex;
    align-items: center;
    gap: var(--globalHalf);
}

.ptCalcCheckbox {
    width: 16px;
    height: 16px;
    accent-color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    cursor: pointer;
}

.ptCalcToggleLabel {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.ptCalcDaysInput {
    width: 80px;
}

/* ── results column ── */
.ptCalcResults {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: var(--globalMeasure);
    padding: var(--globalMeasure);
    overflow-y: auto;
}

.ptCalcResultsHint {
    color: var(--text-secondary);
    font-size: 14px;
    padding: var(--globalMeasure);
}

.ptCalcMetrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--globalMeasure);
}

.ptCalcMetric {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--globalMeasure);
    border-radius: 10px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.06);
}

.ptCalcMetricVal {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.ptCalcMetricLabel {
    font-size: 12px;
    color: var(--text-secondary);
}

.ptCalcMetric--good .ptCalcMetricVal {
    color: hsl(140, 55%, 34%);
}

.ptCalcMetric--bad .ptCalcMetricVal {
    color: hsl(0, 60%, 42%);
}

.ptCalcVerdict {
    padding: var(--globalHalf) var(--globalMeasure);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.ptCalcVerdict--good {
    background: hsla(140, 55%, 40%, 0.12);
    color: hsl(140, 55%, 30%);
}

.ptCalcVerdict--bad {
    background: hsla(0, 70%, 50%, 0.10);
    color: hsl(0, 60%, 40%);
}

/* waterfall */
.ptCalcWaterfall {
    display: flex;
    flex-direction: column;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.ptCalcWaterTitle {
    padding: var(--globalHalf) var(--globalMeasure);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
}

.ptCalcWaterRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--globalMeasure);
    padding: var(--globalHalf) var(--globalMeasure);
    font-size: 14px;
    border-top: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08);
}

.ptCalcWaterLabel {
    color: var(--text-primary);
}

.ptCalcWaterSub {
    color: var(--text-secondary);
    font-size: 12px;
}

.ptCalcWaterVal {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.ptCalcWaterRow--minus .ptCalcWaterVal {
    color: hsl(0, 55%, 45%);
}

.ptCalcWaterRow--subtotal {
    font-weight: 600;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.04);
}

.ptCalcWaterRow--total {
    font-weight: 700;
    font-size: 15px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08);
}

/* notes */
.ptCalcNotes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ptCalcNote {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

/* D4-ii: the empty-analytics-view → calculator pointer (a no-sales beginner's bridge). */
.ptCalcEmptyLink {
    display: inline-block;
    margin-top: var(--globalMeasure);
    padding: var(--globalHalf) var(--globalMeasure);
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.10);
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.30);
    border-radius: 8px;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transitions);
}

.ptCalcEmptyLink:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.18);
}

/* estimate framing (B-3-F1): a muted line under the verdict — the result is an estimate, not advice */
.ptCalcDisclaimer {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-secondary);
    font-style: italic;
    padding: 0 2px;
}

/* ── scenarios band (B-8): full-width below the inputs|results columns ── */
.ptCalcScenarios {
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--globalHalf);
    padding: var(--globalMeasure);
    border-top: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
}

.ptCalcScenHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--globalMeasure);
    flex-wrap: wrap;
}

.ptCalcScenTitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.ptCalcScenSaveRow {
    display: flex;
    align-items: center;
    gap: var(--globalHalf);
}

.ptCalcScenName {
    width: 240px;
    max-width: 100%;
}

.ptCalcScenSaveBtn {
    flex-shrink: 0;
    padding: var(--globalHalf) var(--globalMeasure);
    border: 1px solid hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    border-radius: 8px;
    background: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    color: #ffffff;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transitions);
    white-space: nowrap;
}

.ptCalcScenSaveBtn:hover {
    filter: brightness(1.08);
}

.ptCalcScenEmpty {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}

.ptCalcScenTable {
    display: flex;
    flex-direction: column;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.ptCalcScenRow {
    display: grid;
    /* V2-F27: each row is its OWN grid — a content-sized `auto` actions track resolved to ~0 on
       the header (empty cell) but ~100px on data rows (Загрузить+✕), shifting EVERY column between
       rows. A fixed track makes all rows resolve identically. +Категория column (after Название). */
    grid-template-columns: 1.5fr 1fr 0.6fr 0.85fr 1fr 0.75fr 0.75fr 0.95fr 1fr 104px;
    align-items: center;
    gap: var(--globalHalf);
    padding: var(--globalHalf) var(--globalMeasure);
    font-size: 13px;
    border-top: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08);
}

.ptCalcScenRow--head {
    border-top: none;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ptCalcScenRow--best {
    background: hsla(140, 55%, 40%, 0.08);
}

.ptCalcScenCell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.ptCalcScenCell--name {
    display: flex;
    align-items: center;
    gap: var(--globalHalf);
    font-weight: 500;
    white-space: normal;
}

.ptCalcScenCell--good {
    color: hsl(140, 55%, 34%);
    font-weight: 600;
}

.ptCalcScenCell--bad {
    color: hsl(0, 60%, 42%);
    font-weight: 600;
}

.ptCalcScenBest {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 6px;
    background: hsla(140, 55%, 40%, 0.18);
    color: hsl(140, 55%, 28%);
    font-size: 10px;
    font-weight: 600;
}

.ptCalcScenActions {
    display: flex;
    align-items: center;
    gap: var(--globalHalf);
    justify-content: flex-end;
    overflow: visible;
}

.ptCalcScenLoad {
    padding: 3px var(--globalHalf);
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35);
    border-radius: 6px;
    background: #ffffff;
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    font-family: sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transitions);
    white-space: nowrap;
}

.ptCalcScenLoad:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.10);
}

.ptCalcScenDelete {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    line-height: 1;
    border: 1px solid hsla(0, 60%, 50%, 0.30);
    border-radius: 6px;
    background: #ffffff;
    color: hsl(0, 60%, 45%);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transitions);
}

.ptCalcScenDelete:hover {
    background: hsla(0, 70%, 50%, 0.10);
}

.ptPrefSliderRow {
    display: flex;
    align-items: center;
    /* gap: 12px; */
    padding: 4px 0;
}

.ptPrefSlider {
    flex: 1;
    cursor: pointer;
    accent-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.8);
}

.ptPrefSliderValue {
    font-size: 13px;
    color: var(--text-primary);
    min-width: 30px;
    text-align: center;
    user-select: none;
}

.ptPrefRadioRow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
}

.ptPrefNote {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.ptPrefRadio {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.8);
}

.ptPrefRadioLabel {
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

#ptUnitMessage {
    position: fixed;
    top: 3%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(255, 255, 255);
    color: rgba(0, 0, 0, 0.7);
    padding: 10px 10px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    z-index: calc(var(--ptZ) + 1);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
    font-family: sans-serif;
    min-width: 300px;
}

/* #ptXpenToast rule REMOVED (A4, cockpit-phase-a): its showXpenToast() producer was dead (zero callers)
   and is deleted. The red error styling (bg rgb(255,235,235) / text rgb(180,30,30) / border rgb(220,100,100))
   lives in git history — re-add it as an error variant of showPtToast() if a real error-toast caller appears
   (e.g. wiring ruExpenseError). Not pre-built now to avoid dead speculative code (AGENTS.md). */

/* ── Table view ────────────────────────────────────────────────── */

#ptTrunk:has(.ptTable) {
    padding-top: 0;
    gap: 0;
    overflow-y: hidden;
}

.ptTableWrap {
    width: 100%;
    padding-bottom: 24px;
    box-sizing: border-box;
    padding-top: var(--globalMeasure);
}

.ptTable {
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    font-size: 13px;
}

/* Heatmap mode — table grid lines turn neutral gray so colored cell
   backgrounds (painted inline via JS) stay readable. Per-metric colored
   underline below header names is also neutralized for the same reason. */
.ptTable.ptTableHeatmap {
    --ptTableLineColor: rgba(0, 0, 0, 0.24);
}

.ptTable.ptTableHeatmap .ptTableHeadGroup th {
    border-bottom: 2.5px solid var(--ptTableLineColor);
}

.ptTableEmpty {
    padding: 40px 20px;
    text-align: center;
    color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.5);
    font-size: 15px;
}

/* ADR-0017 render-edge data-trust banner. Lives in the skies bar (left of the shop name) — a
   compact, content-width pill, NOT a full-width block in the trunk. Hidden when the selected
   range's revenue spine is complete; warn (actionable hole / sync error) vs info (gentle
   not-yet-loaded edge). Short visible label + Обновить + ✕; the full sentence is in the data-tip. */
#ptTrustBanner.ptTrustHidden { display: none; }
.ptTrustBanner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 38vw;
    box-sizing: border-box;
}
.ptTrustBanner .ptTrustMsg { overflow: hidden; text-overflow: ellipsis; cursor: help; }
.ptTrustBanner.ptTrustWarn { background: #fff3f0; border: 1px solid #e6a89b; color: #8a2c1a; }
.ptTrustBanner.ptTrustInfo { background: #fff8e6; border: 1px solid #e6cf8b; color: #6b5510; }
.ptTrustBanner .ptTrustRefresh {
    flex: 0 0 auto;
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 5px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}
.ptTrustBanner .ptTrustRefresh:hover { background: rgba(0, 0, 0, 0.06); }
/* B1-5 Part C: the token-error «Заменить токен» CTA — mirrors the outline refresh button (so it
   adapts to the warn/info colour automatically) but bolder, as the primary fix for a dead token. */
.ptTrustBanner .ptTrustReplace {
    flex: 0 0 auto;
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 5px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
}
.ptTrustBanner .ptTrustReplace:hover { background: rgba(0, 0, 0, 0.06); }
.ptTrustBanner .ptTrustDismiss {
    flex: 0 0 auto;
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 5px;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1;
    opacity: 0.6;
}
.ptTrustBanner .ptTrustDismiss:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }

/* V2-F5 fresh-data pill (SKIES family — mirrors the trust banner idiom). Positive green tone:
   new data landed while the seller was reading; the whole pill is one click target that
   re-renders the reports in place. Removed by any full trunk render (iniTrunk). */
.ptDataFreshPill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
    background: #eefaf0;
    border: 1px solid #9fd8ab;
    color: #1d6b34;
    cursor: pointer;
}
.ptDataFreshPill:hover { background: #e2f5e6; }
.ptDataFreshPill .ptDataFreshGo {
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 5px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}

/* B1-5 token-lifecycle pill (SKIES family — mirrors the trust banner). Amber when expiring soon,
   red once expired. The label is a button (click → replace flow); ✕ dismisses for the day. */
#ptTokenPill.ptTokenPillHidden { display: none; }
.ptTokenPill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 38vw;
    box-sizing: border-box;
}
.ptTokenPill.ptTokenPillSoon { background: #fff8e6; border: 1px solid #e6cf8b; color: #6b5510; }
.ptTokenPill.ptTokenPillExpired { background: #fff3f0; border: 1px solid #e6a89b; color: #8a2c1a; }
.ptTokenPill .ptTokenPillMsg {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    text-align: left;
}
.ptTokenPill .ptTokenPillMsg:hover { text-decoration: underline; }
.ptTokenPill .ptTokenPillDismiss {
    flex: 0 0 auto;
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 5px;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1;
    opacity: 0.6;
}
.ptTokenPill .ptTokenPillDismiss:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }

/* B1-6 CoGS post-first-sync nudge (SKIES family — mirrors the token pill / trust banner). Info/amber
   tone, never the red error tone: it is guidance, not a failure. Two states — the full one-time card
   («Себестоимость не задана» label + «Задать» CTA + ✕ dismiss) and, after dismiss, a quiet persistent
   hint (just the clickable label) that survives until the first CoGS rate lands. */
#ptCogsNudge.ptCogsNudgeHidden { display: none; }
.ptCogsNudge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 42vw;
    box-sizing: border-box;
    background: #fff8e6;
    border: 1px solid #e6cf8b;
    color: #6b5510;
}
.ptCogsNudge.ptCogsNudgeHint { background: #fdf5df; }
.ptCogsNudge .ptCogsNudgeMsg {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 0;
    text-align: left;
}
.ptCogsNudge .ptCogsNudgeMsg:hover { text-decoration: underline; }
.ptCogsNudge .ptCogsNudgeCta {
    flex: 0 0 auto;
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    border-radius: 5px;
    padding: 1px 8px;
}
.ptCogsNudge .ptCogsNudgeCta:hover { background: rgba(0, 0, 0, 0.06); }
.ptCogsNudge .ptCogsNudgeDismiss {
    flex: 0 0 auto;
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 5px;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1;
    opacity: 0.6;
}
.ptCogsNudge .ptCogsNudgeDismiss:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }

/* The «н/д» marker for a suppressed (unknowable) net-profit value — distinct from a real 0/«—». */
.ptTrustNa { color: #b06a00; font-style: italic; opacity: 0.9; cursor: help; }

/* Header row 1 — metric group names, sticky at top */
.ptTableHeadGroup th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 3;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-headers);
    text-align: center;
    padding: 0 8px;
    border-top: 2px solid var(--ptTableLineColor);
    border-bottom: 2.5px solid color-mix(in srgb, var(--ptMetricColor, hsla(var(--pt-h), var(--pt-s), var(--pt-l), 1)) 85%, transparent);
    border-right: none;
    /* col separator via --ptColSep (all row-1 group cells have ptTableSubLast → 2px) */
    box-shadow: var(--ptColSep);
    height: var(--globalDouble);
}

/* Header row 2 — unit labels, sticky just below row 1 */
.ptTableHeadSub th {
    position: sticky;
    top: var(--ptHeadRow1H, 26px);
    background: #fff;
    z-index: 3;
    font-weight: 700;
    font-size: 11px;
    color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.8);
    text-align: center;
    padding: 0 8px;
    border-bottom: 2px solid var(--ptTableLineColor);
    height: var(--globalDouble);
}

/* Corner art cell spans both header rows — highest z-index (sticky both axes) */
.ptTableHeadGroup .ptTableArtCell {
    z-index: 5;
    /* text-align: left; */
    /* spans both rows: bottom must match the header-body divider, not the mid-row divider */
    border-top: 2px solid var(--ptTableLineColor);
    border-bottom: 2px solid var(--ptTableLineColor);
    /* right border (sticky-left divider) */
    box-shadow: inset -2px 0 0 var(--ptTableLineColor);
}

/* C1 — sortable header button (ARIA APG). Looks like the header label; the whole header is the
   hit-area. `all:unset` strips native button chrome; the properties below rebuild the label look. */
.ptTableSortBtn {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.ptTableSortBtn:focus-visible {
    outline: 2px solid var(--ptMetricColor, #4a90d9);
    outline-offset: -2px;
    border-radius: 3px;
}
/* Arrow slot — fixed width so the header never shifts between the sorted/unsorted states. */
.ptSortInd {
    display: inline-block;
    min-width: 0.85em;
    font-size: 0.85em;
    line-height: 1;
    text-align: center;
}
/* Discoverability: a faint ↕ on hover/focus of an as-yet-unsorted sortable header. */
.ptTableSortBtn:hover .ptSortInd:empty::after,
.ptTableSortBtn:focus-visible .ptSortInd:empty::after {
    content: '↕';
    opacity: 0.35;
}

/* C1 — off-screen sort description (visually hidden, screen-reader only). */
.ptTableCaption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Article rows */

.ptTableRow>td {
    border-bottom: 2px solid var(--ptTableLineColor);
}

/* Standardize ALL parent (non-expanded child) row heights to avoid
   brand rows looking shorter than article rows (image card presence).
   Child/expanded rows keep natural height. */
.ptTableRow:not(.ptTableChild)>td {
    height: var(--globalTriple);
    vertical-align: middle;
}

.ptTableRow.ptTableChild>td {
    height: var(--globalDouble);
}

.ptTableRow:not(.ptTableChild):hover {
    cursor: pointer;
}

.ptTableRow:not(.ptTableChild):hover>td {
    background: color-mix(in srgb, hsl(var(--pt-h), var(--pt-s), var(--pt-l)) 10%, #fff);
}

/* Period child rows */
.ptTableChild>td {
    background: color-mix(in srgb, hsl(var(--pt-h), var(--pt-s), var(--pt-l)) 3%, #fff);
}

.ptTableChild:hover>td {
    background: color-mix(in srgb, hsl(var(--pt-h), var(--pt-s), var(--pt-l)) 10%, #fff);
}

/* All cells — base */
.ptTableCell {
    padding: 5px 10px;
    vertical-align: middle;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* 2px group separator — last sub-col of each metric */
.ptTableSubLast {
    --ptColSep: inset -2px 0 0 var(--ptTableLineColor);
    border-right: none;
    box-shadow: var(--ptColSep);
}

/* Remove ONLY the rightmost vertical border of the entire table 
   (preserves horizontal row dividers) */
.ptTableHeadGroup th:last-child,
.ptTableHeadSub th:last-child,
.ptTableRow>td:last-child,
.ptTableRow.ptTableChild>td:last-child {
    --ptColSep: none;
    box-shadow: none;
}

/* Expanded rows need special handling - preserve horizontal bottom border */
.ptTableRow.ptTableRowExpanded>td:last-child {
    box-shadow: inset 0 -2px 0 var(--ptTableLineColor);
}

/* 1px sub-col divider — between sub-cols within a group */
.ptTableNumCell:not(.ptTableSubLast),
.ptTableSubCell:not(.ptTableSubLast) {
    --ptColSep: inset -1px 0 0 var(--ptTableLineColor);
    border-right: none;
    box-shadow: var(--ptColSep);
}

/* First column — sticky to left */
.ptTableArtCell {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset -2px 0 0 var(--ptTableLineColor);
    white-space: nowrap;
    text-align: left;
    min-width: calc(var(--globalMeasure) * 11);
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Numeric metric cells */
.ptTableNumCell {
    text-align: center;
    min-width: 80px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.ptTableToggle {
    color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.8);
    font-size: 10px;
    margin-right: 6px;
    display: inline-block;
    height: 10px;
    width: 12px;
}

/* ===== Universal name+thumbnail slot (Wave C · ADR-0011) ===== */
/* ONE shared slot holding an article/brand image or the neutral placeholder, used across the
   table · chains · combobox · Manager. Per-surface SIZE/POSITION lives on the surface class
   (.ptTableThumb / .ptLeamage / .ptEmThumb); the visual core + placeholder + «N» badge are shared
   below, so the universal imaging rule cannot drift per surface again. */
.ptNameThumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* Chains override: the slot hangs OUT-OF-FLOW in the resin gutter (.ptLeamage position:absolute,
   defined earlier in the file). The shared .ptNameThumb{position:relative} above is later in source
   order with equal specificity, so it would otherwise win and pull the thumb in-flow (shoving the
   name). Re-assert absolute here with higher specificity. The absolute wrapper is itself the badge's
   containing block, so the «N» badge still anchors to the slot corner. */
.ptNameThumb.ptLeamage { position: absolute; }

.ptNameThumb .ptNameThumbImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 3px;
    display: block;
}

/* Placeholder (ADR-0011 §6): one neutral theme-tinted box + a faint "no-photo" glyph, identical
   everywhere. Keeps the slot reserved so the name column stays aligned; conveys nothing it can't. */
.ptNameThumb .ptNameThumbPh {
    background-color: rgba(127, 127, 127, 0.10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23808080'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 62%;
    opacity: 0.5;
    border: 1px solid rgba(127, 127, 127, 0.18);
}

/* Bare «N» count badge for a brand-representative image (ADR-0011 §4) — total articles in the
   brand, no «+». Overhangs the slot's bottom-right corner. */
.ptNameThumb .ptNameThumbBadge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 1);
    border-radius: 8px;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
    pointer-events: none;
    z-index: 2;
}

/* Picker (combobox option · Manager entry row) slot size. */
.ptEmThumb {
    width: 20px;
    height: 26px;
    margin-right: 8px;
}

/* Table slot size (was a bare <img>; now sizes the shared wrapper). */
.ptTableThumb {
    height: 28px;
    width: 21px;
    vertical-align: middle;
    margin-right: 6px;
}

/* Dashboard leaderboard slot size (#1 · ADR-0011) — the article photo in a «Топ товаров» card row,
   sized for the bordered flex row (the .ptDashLeadRow gap owns the spacing, so no extra margin).
   Larger than the table thumb so the roomier leaderboard rows read as product cards, not a thin list. */
.ptDashLeadThumb {
    height: 44px;
    width: 33px;
    flex: 0 0 auto;
}

/* Артикул-selector slot size (#ptCrown toolbar button · ADR-0011) — small portrait photo before the
   selected article's name. Sized to fit inside the height-pinned #ptCrown (= --skiesHeight) content box
   without clipping; the .ptTcButton flex gap owns the spacing to the text + ▼ chevron. */
.ptArtSelThumb {
    height: 20px;
    width: 15px;
}

/* Chat slot size (#4 · ADR-0011) — a small INLINE thumbnail injected at an article's first mention
   inside an AI answer (prose or a table cell), so the chat inherits the universal name+thumbnail rule.
   Inline-flex + vertical-align keeps it on the text line without breaking flow. */
.ptChatThumb {
    width: 16px;
    height: 20px;
    margin: 0 3px;
    vertical-align: -5px;
}

/* Theme-3 (Wladya 2026-06-27 · ADR-0011 in chat): the model's UNIVERSAL article reference unit — the
   photo slot (.ptChatThumb above) + the seller's PREFERRED article name + «(бренд)». The model emits only
   «[[art:NNN]]»; the client renders this (ptChatExpandArticleTokens) so the chat obeys the universal
   name+thumbnail rule with the seller's naming preference and never prints a redundant nmId. The name
   carries a light emphasis, mirroring the prior **bold** product name the model used to write inline. */
.ptChatArtRef__name { font-weight: 600; }
/* 2a (L1-14): a non-catalog article id renders the neutral «номер товара не распознан» marker (the R7-1
   fabrication guard) — muted + un-emphasised so it reads as an absence, never a real article. */
.ptChatArtRef--unknown .ptChatArtRef__name { font-weight: 400; font-style: italic; opacity: 0.6; }

.ptTableArtName {
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.ptTablePeriodLabel {
    /* padding-left: 32px; */
    text-align: right;
    color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 1);
    /* font-weight: bold; */
    /* font-style: italic; */
}

/* Muted period-number/name prefix on a table child-row label (day-of-year / week-of-year /
   month name / «NQ»). Visually distinct from the date so the two never read as one number —
   the chains-view period-number equivalent, tuned for a flat table cell. */
.ptTablePeriodNum {
    color: #9aa0a6;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
}

/* Expanded article row — stays sticky below both header rows while scrolling period rows */
.ptTableRow.ptTableRowExpanded>td {
    position: sticky;
    top: var(--ptRowTop, 48px);
    background: #fff;
    z-index: 3;
    border-bottom: none;
    /* bottom-of-sticky-row border + col separator (2px or 1px per cell via --ptColSep) */
    box-shadow: inset 0 -2px 0 var(--ptTableLineColor), var(--ptColSep);
}

/* TOTALS row — always sticky below thead, above article rows. JS sets --ptTotalsTop = thead height.
   No box-shadow override on numeric cells — existing .ptTableRow>td border-bottom provides the divider. */
.ptTableRowTotals>td {
    position: sticky;
    top: var(--ptTotalsTop, 48px);
    background: #fff;
    z-index: 3;
}

.ptTableRowTotals>td.ptTableArtCell {
    z-index: 4;
}

.ptTableRow.ptTableRowExpanded>td.ptTableArtCell {
    z-index: 4;
    box-shadow: inset -2px 0 0 var(--ptTableLineColor), inset 0 -2px 0 var(--ptTableLineColor);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Planning mode (Планирование)
   Ghost future colossals live directly in the trunk. Uses --pln-* accent vars.
   ───────────────────────────────────────────────────────────────────────── */

/* Ghost colossal: info-massive gets planning accent color */
.ptPlanColossal .ptProfitreeColor {
    border-color: hsla(var(--pln-h), var(--pln-s), var(--pln-l), 0.85);
}

.ptPlanColossal .ptProfitreeColor .ptGiganticBranch {
    background-color: hsla(var(--pln-h), var(--pln-s), var(--pln-l), 0.07);
}

.ptPlanColossal .ptProfitreeColor .ptTbDate,
.ptPlanColossal .ptProfitreeColor .ptCd {
    color: hsl(var(--pln-h), var(--pln-s), var(--pln-l));
}

/* Plan/Fact/Δ triplet leaves (arrived plans on real periods) */
.ptLeafPlan {
    color: hsl(var(--pln-h), var(--pln-s), var(--pln-l));
    font-weight: 500;
}

.ptLeafActual {
    font-weight: 600;
}

.ptLeafDelta {
    font-size: 0.9em;
    opacity: 0.85;
}

.ptLeafDelta.ptPlanGood {
    color: hsl(122, 50%, 38%);
}

.ptLeafDelta.ptPlanBad {
    color: hsl(0, 60%, 48%);
}

.ptLeafDelta.ptPlanNeutral {
    color: hsl(0, 0%, 45%);
}

/* Hide non-plannable leaves while planning mode is on */
.ptHidePlan {
    display: none !important;
}

.ptTableRow.ptTableRowExpanded:hover>td {
    background: color-mix(in srgb, hsl(var(--pt-h), var(--pt-s), var(--pt-l)) 10%, #fff);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Notes feature (Заметки)
   - Hover ptTb on info massive's gigantic carries a single ptTbNotes button.
   - Centered modal overlays for edit (single note) and timeline (all notes).
   ───────────────────────────────────────────────────────────────────────── */

/* ptTb color override for the info massive (matches per-massive pattern: full-alpha hue). */
.ptProfitreeColor .ptTb {
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.85);
}

/* Info massive's ptTbDate header does NOT reserve a 2.5px left border for the ptTb anchor
   (overrides the generic ptTb-owning-header rule). The date header already has its own
   visual identity and the anchor border would clutter it. */
.ptProfitreeColor .ptGiganticBranch:has(> .ptTb) > .ptBigBranch > .ptTbDate {
    border-left-width: 0 !important;
}

/* Ongoing colossal: info massive uses the now-amber border instead. */
.ptProfitreeColor.ptNowColor .ptTb {
    border-color: hsla(var(--now-h), var(--now-s), var(--now-l), 1);
}

/* Plan-ghost colossal: info massive ptTb uses the planning blue accent. */
.ptPlanColossal .ptProfitreeColor .ptTb {
    border-color: hsla(var(--pln-h), var(--pln-s), var(--pln-l), 0.85);
}

/* Notes button styling — follows ptTbAdd (text-only) form. */
.ptTbNotes {
    display: flex;
    text-align: center;
    align-items: center;
    flex: 1;
    justify-content: center;
    font-size: 0.9em;
    cursor: pointer;
    border-style: solid;
    box-sizing: content-box !important;
    padding-right: var(--horizonPad);
    padding-left: var(--horizonPad);
    min-width: var(--globalDouble);
    flex-basis: auto;
    color: var(--text-secondary);
}

.ptTbNotes:hover {
    color: var(--text-primary);
}

/* Indicator dot appended after the "Заметки" text when a note exists for this period. */
.ptTbNotesHas::after {
    content: ' \00B7';
    font-weight: 700;
    margin-left: 2px;
}

.ptTbNotes:active {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
}

.ptPlanColossal .ptTbNotes:active {
    background-color: hsla(var(--pln-h), var(--pln-s), var(--pln-l), 0.12);
}

.ptProfitreeColor.ptNowColor .ptTbNotes:active {
    background-color: hsla(var(--now-h), var(--now-s), var(--now-l), 0.12);
}

/* Modal backdrop + panel (shared by edit + timeline) */
.ptModalBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: calc(var(--ptZ) + 100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    color: var(--text-primary);
    user-select: text;
}

.ptModalPanel {
    background: white;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 86vh;
    overflow: hidden;
}

/* Edit overlay sizing */
.ptModalBackdropNotesEdit .ptModalPanel {
    width: min(640px, 90vw);
}

/* Timeline overlay sizing — wider, taller */
.ptModalBackdropNotesTimeline .ptModalPanel {
    width: min(760px, 92vw);
    height: 86vh;
    padding: 16px 18px 20px 18px;
}

.ptNotesEditTitle {
    font-size: 1.15em;
    font-style: italic;
    color: var(--text-primary);
}

.ptNotesPlanBadge {
    align-self: flex-start;
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 10px;
    background: hsla(var(--pln-h), var(--pln-s), var(--pln-l), 0.12);
    color: hsl(var(--pln-h), var(--pln-s), var(--pln-l));
    font-weight: 500;
}

.ptNotesEditTextarea {
    width: 100%;
    min-height: 180px;
    max-height: 50vh;
    resize: vertical;
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.3);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.95em;
    color: var(--text-primary);
    background: white;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease;
}

.ptNotesEditTextarea:focus {
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.7);
}

.ptNotesCounter {
    align-self: flex-end;
    font-size: 0.8em;
    color: var(--text-secondary);
}

.ptNotesEditActions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ptNotesSaveBtn {
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 6px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.85);
    color: white;
    font-weight: 500;
    user-select: none;
    transition: background-color 0.15s ease;
}

.ptNotesSaveBtn:hover {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 1);
}

.ptNotesSaveBtn:active {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.7);
}

/* Timeline overlay */
.ptNotesTimelineHeader {
    font-size: 1.25em;
    color: var(--text-primary);
    padding-bottom: 6px;
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.08);
    font-style: italic;
}

.ptNotesTimelineBody {
    position: relative;
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 16px 8px 16px 4px;
    display: block;
}

.ptNotesEmpty {
    color: var(--text-secondary);
    text-align: center;
    padding: 40px 20px;
    font-size: 0.95em;
}

/* Left rail line — absolutely positioned vertical line down the body. */
.ptNotesRail {
    position: absolute;
    left: 22px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.25);
    border-radius: 1px;
    pointer-events: none;
}

.ptNotesCards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 46px;
}

.ptNotesCard {
    position: relative;
    border-style: solid;
    border-width: 2px;
    border-radius: 8px;
    padding: 10px 12px 10px 14px;
    background: white;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.05s ease;
}

.ptNotesCard:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.ptNotesCard:active {
    transform: translateY(1px);
}

.ptNotesCardReal {
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.85);
}

.ptNotesCardNow {
    border-color: hsla(var(--now-h), var(--now-s), var(--now-l), 1);
}

.ptNotesCardPlan {
    border-color: hsla(var(--pln-h), var(--pln-s), var(--pln-l), 0.85);
    background: hsla(var(--pln-h), var(--pln-s), var(--pln-l), 0.04);
}

/* Bullet on the rail, anchored to the left side of each card. */
.ptNotesCardBullet {
    position: absolute;
    left: -32px;
    top: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border-style: solid;
    border-width: 2px;
    border-color: inherit;
}

.ptNotesCardTitle {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ptNotesCardBadge {
    font-size: 0.75em;
    padding: 1px 7px;
    border-radius: 9px;
    background: hsla(var(--pln-h), var(--pln-s), var(--pln-l), 0.18);
    color: hsl(var(--pln-h), var(--pln-s), var(--pln-l));
    font-weight: 500;
}

/* L1-4 (ADR-0030 fork 4a) — the «ИИ» provenance chip on an agent-authored Mutation, wherever the
   cockpit lists individual entries (CoGS rate editor · note cards). Brand-coloured to carry the
   SAME signal the chat confirm card's «ИИ» chip (.ptChatConfirm__chip) used — the seller recognises
   it as "the AI proposed this, I confirmed it". Informational only — the entry stays editable. */
.ptAgentBadge {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    font-size: 0.7em; font-weight: 700; letter-spacing: 0.5px;
    color: #fff;
    background: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    border-radius: 6px; padding: 1px 6px;
    cursor: help;
}

.ptNotesCardText {
    font-size: 0.9em;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
}

.ptNotesCardTextTrunc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.ptNotesCardTextExpanded {
    display: block;
}

.ptNotesCardToggle {
    margin-top: 6px;
    font-size: 0.82em;
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    cursor: pointer;
    user-select: none;
    display: inline-block;
}

.ptNotesCardToggle:hover {
    text-decoration: underline;
}

.ptNotesCardMeta {
    margin-top: 8px;
    font-size: 0.75em;
    color: var(--text-secondary);
}

/* ===== Phase 2 Slice 1 — expenseoverlay extensions + expensemanager ===== */

/* Fan-out preview inside CoGS reproWrap */
.ptOvFanOutPreview { margin-top: 6px; font-size: 12px; color: #555; }
.ptOvFanOutSummary { font-weight: bold; margin-bottom: 4px; color: #333; }
.ptOvFanOutNote { font-style: italic; color: #888; }
.ptOvFanOutList { display: flex; flex-wrap: wrap; gap: 4px; max-height: 120px; overflow-y: auto; padding: 4px; border: 1px solid #eee; border-radius: 4px; background: #fafafa; }
.ptOvFanOutRow { padding: 2px 6px; background: #fff; border: 1px solid #ddd; border-radius: 3px; font-size: 11px; white-space: nowrap; }
.ptOvFanOutMore { padding: 2px 6px; font-style: italic; color: #888; }

/* Expense manager modal backdrop */
.ptModalBackdropManager { z-index: calc(var(--ptZ) + 10); }

/* ===== Hidden DEV shop-math auditor modal (src/expenseaudit.js) ===== */
/* Floats above everything (manager +10, bulk +110, calendar +200). */
.ptAuditBackdrop { z-index: calc(var(--ptZ) + 300); }
.ptAuditPanel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    width: min(760px, 92vw);
    max-height: 86vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    font-size: 13px;
}
.ptAuditHead {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
}
.ptAuditTitle { font-weight: 600; font-size: 15px; flex: 1; }
.ptAuditBadge {
    font-weight: 700; font-size: 12px;
    padding: 4px 10px; border-radius: 14px; letter-spacing: 0.02em;
}
.ptAuditPass { background: rgba(31, 157, 85, 0.14); color: #1f9d55; }
.ptAuditFail { background: rgba(192, 57, 43, 0.14); color: #c0392b; }
.ptAuditSummary { padding: 8px 18px; color: #777; font-size: 12px; border-bottom: 1px solid #f2f2f2; }
.ptAuditList { overflow-y: auto; padding: 6px 0; }
.ptAuditCheck { padding: 8px 18px; border-bottom: 1px solid #f5f5f5; }
.ptAuditCheckHead { display: flex; align-items: center; gap: 8px; }
.ptAuditMark { font-weight: 700; width: 14px; text-align: center; }
.ptAuditCheckPass .ptAuditMark { color: #1f9d55; }
.ptAuditCheckFail .ptAuditMark { color: #c0392b; }
.ptAuditCheckName { flex: 1; }
.ptAuditCheckCount { color: #c0392b; font-weight: 600; font-size: 12px; }
.ptAuditViolations {
    margin: 6px 0 2px 22px;
    border-left: 2px solid rgba(192, 57, 43, 0.3);
    padding-left: 10px;
    display: flex; flex-direction: column; gap: 4px;
}
.ptAuditViolation { font-size: 11.5px; }
.ptAuditVWhere { color: #444; }
.ptAuditVNums { color: #888; font-variant-numeric: tabular-nums; }
.ptAuditMore { font-style: italic; color: #999; font-size: 11px; }
.ptAuditFoot { padding: 12px 18px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; }
.ptAuditError { padding: 24px; color: #c0392b; }

/* Manager panel */
.ptExpenseManager {
    position: relative;
    display: flex; flex-direction: column;
    width: 90vw; height: 85vh;
    max-width: 1400px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    overflow: hidden;
}

/* ===== Planning manager (PU-4, ADR-0037 §2/§6) ===== */
/* Same overlay chrome as .ptExpenseManager (mirrors the manager idiom); its own ptPm* namespace
   so the two managers never couple. Backdrop reuses .ptModalBackdrop .ptModalBackdropManager. */
.ptPlanningManager {
    position: relative;
    display: flex; flex-direction: column;
    /* PU-8 8b: hug the grid's natural width instead of stretching to 90vw — the old
       1fr columns ballooned into unreadable inter-column gaps on wide screens. */
    width: fit-content;
    min-width: min(880px, 90vw);
    max-width: 90vw;
    height: auto; max-height: 85vh; min-height: 280px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    overflow: hidden;
}
.ptPmToolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid #e0e0e0; background: #f7f7f7;
}
.ptPmTitle { font-weight: 600; font-size: 15px; }
.ptPmCloseBtn { margin-left: auto; }
.ptPmBody {
    flex: 1; min-height: 0;
    overflow: auto;
    padding: 0;
    scrollbar-gutter: stable;   /* PU-8 8b: the vertical scrollbar must not eat the ДРР column edge */
}

/* Grain selector + window nav (toolbar controls) */
.ptPmGrainSel { display: flex; gap: 4px; }
.ptPmGrainBtn {
    padding: 5px 12px; border: 1px solid #ccc; border-radius: 4px;
    font-size: 13px; cursor: pointer; background: #fff; color: #333; user-select: none;
}
.ptPmGrainBtn:hover { background: #f0f0f0; }
.ptPmGrainBtn.ptPmGrainActive { background: #2b7de9; border-color: #2b7de9; color: #fff; }
.ptPmWindowNav { display: flex; align-items: center; gap: 6px; }
.ptPmNavBtn {
    position: relative;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 16px; background: #fff; user-select: none;
}
.ptPmNavBtn:hover { background: #f0f0f0; }
/* PU-8 8d (1b): the off-window-plan marker — a dot on ‹ / › when plan-bearing periods exist
   beyond the shown window in that direction (the data-tip names the nearest year). */
.ptPmNavBtn.ptPmNavPlans::after {
    content: '';
    position: absolute; top: 2px; right: 2px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #2b7de9;
}
.ptPmNavLabel { min-width: 72px; text-align: center; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }

/* Timeline grid (rows = window periods × cols = period + 5 metrics).
   PU-8 8b geometry: bounded column widths (no 1fr ballooning), hairline vertical separators
   between metric columns, a uniform row min-height so arrived (План+Факт+Δ stack) and future
   («+» only) rows share one rhythm, and vertically-centered content everywhere. */
.ptPmGrid { display: flex; flex-direction: column; min-width: max-content; }
.ptPmGridHead, .ptPmRow {
    display: grid;
    grid-template-columns: minmax(150px, 200px) repeat(5, minmax(126px, 156px));
}
.ptPmGridHead {
    position: sticky; top: 0; z-index: 1;
    background: #f7f7f7; font-weight: 600; border-bottom: 2px solid #e0e0e0;
}
.ptPmColPeriod, .ptPmColMetric, .ptPmCell {
    /* right padding 24px = the reserved «×» gutter (8e) + keeps the last (ДРР) column off the edge */
    padding: 7px 24px 7px 10px; border-bottom: 1px solid #f0f0f0; font-size: 13px;
}
.ptPmColPeriod {
    text-align: left; padding-right: 10px;
    display: flex; align-items: center;   /* 8b: period label vertically centered, not top-anchored */
}
.ptPmColMetric { text-align: right; color: #555; }
.ptPmCell + .ptPmCell, .ptPmColMetric + .ptPmColMetric,
.ptPmColPeriod + .ptPmCell, .ptPmColPeriod + .ptPmColMetric {
    border-left: 1px solid #f2f2f2;       /* 8b: hairline separators bind a value to its column */
}
.ptPmRow > * { min-height: 56px; }        /* 8b: one row rhythm across arrived/future */
.ptPmGridHead > * { min-height: 0; }
.ptPmRow:hover { background: #fafafa; }
.ptPmRow[data-state="ongoing"] { background: #f2f8ff; }
.ptPmRow[data-state="ongoing"]:hover { background: #e9f2ff; }
.ptPmOngoing { font-weight: 600; color: #2b7de9; }
.ptPmCell {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px;
    text-align: right; font-variant-numeric: tabular-nums;
}
.ptPmPlan { font-weight: 600; color: #222; }
.ptPmPlanEmpty { color: #ccc; font-weight: 400; }
.ptPmFact { font-size: 11.5px; color: #777; }
.ptPmDelta { font-size: 11px; font-weight: 600; }
.ptPmGood { color: #1f9d55; }
.ptPmBad { color: #c0392b; }
.ptPmNeutral { color: #999; }

/* Editable План slot (ongoing/future) + inline input + «Удалить план» (Stage 3 write) */
.ptPmEditable { cursor: pointer; border-radius: 3px; padding: 0 3px; }
.ptPmEditable:hover { background: #eaf3ff; }
.ptPmPlanEmpty.ptPmEditable { color: #7aa8dd; }   /* the «+» invites a click */
.ptPmInput {
    width: 84px; padding: 2px 4px; border: 1px solid #2b7de9; border-radius: 3px;
    font-size: 13px; text-align: right; font-variant-numeric: tabular-nums;
}
.ptPmDel {
    /* PU-8 8e: lives in the cell's reserved right gutter (24px cell padding-right), vertically
       centered — it can no longer sit on top of the value text. */
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 16px; height: 16px; line-height: 15px; text-align: center;
    border-radius: 50%; font-size: 13px; color: #c0392b; cursor: pointer;
    opacity: 0; background: rgba(192, 57, 43, 0.08);
}
.ptPmCell:hover .ptPmDel { opacity: 1; }
.ptPmDel:hover { background: rgba(192, 57, 43, 0.2); }

/* Hints — §5 implied-value (clickable one-click fill) + §4 Σ-of-children (informational) */
.ptPmImplied { font-size: 10.5px; color: #2b7de9; cursor: pointer; white-space: nowrap; }
.ptPmImplied:hover { text-decoration: underline; }
.ptPmChildSum { font-size: 10px; color: #999; white-space: nowrap; }

/* ADR-0017 data-trust markers on Факт: «н/д» (absent spine) + a neutral partial-data marker */
.ptPmNa { color: #999; font-style: italic; cursor: help; }
.ptPmFactPartial { text-decoration: underline dotted #c9a227; text-underline-offset: 2px; cursor: help; }

/* Toolbar */
.ptEmToolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid #e0e0e0; background: #f7f7f7;
}
.ptEmSearch { flex: 0 1 180px; min-width: 130px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }
.ptEmCloseBtn { margin-left: auto; }

/* Body — 2-panel layout */
.ptEmBody { display: flex; flex: 1; min-height: 0; }
.ptEmLeft {
    width: 360px;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto;
    background: #fafafa;
}
.ptEmRight { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px; background: #fff; }
.ptEmEmpty { padding: 24px 16px; text-align: center; color: #888; font-size: 13px; font-style: italic; }
.ptEmEmptyRight { padding: 40px 16px; text-align: center; color: #aaa; font-size: 14px; font-style: italic; }

/* Left rows */
.ptEmRow {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid #eee; cursor: pointer; position: relative;
}
.ptEmRow:hover { background: #f0f0f0; }
.ptEmRowSelected { background: #e3f2fd; }
.ptEmRowSelected:hover { background: #d6e9f8; }
.ptEmRowIcon { font-size: 16px; flex-shrink: 0; }
.ptEmRowMain { flex: 1; min-width: 0; }
.ptEmRowName { font-size: 13px; font-weight: 500; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptEmRowMeta { font-size: 11px; color: #777; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptEmRowActions {
    display: flex; gap: 4px; opacity: 0;
    transition: opacity 0.15s;
}
.ptEmRow:hover .ptEmRowActions { opacity: 1; }
.ptEmRowAction {
    cursor: pointer; padding: 3px 6px; border-radius: 3px; font-size: 13px; color: #555;
}
.ptEmRowAction:hover { background: #ddd; color: #000; }
.ptEmRenameInput {
    flex: 1; padding: 3px 6px; border: 1px solid #2196f3; border-radius: 3px; font-size: 13px;
}

/* GG-2 2B — «Удалённые расходы» restore section (pinned at the bottom of the left list) */
.ptEmDeleted { border-top: 2px solid #e0e0e0; margin-top: 4px; background: #f5f5f5; }
.ptEmDeletedHeader {
    padding: 10px 12px 4px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em; color: #999;
}
.ptEmRowDeleted { cursor: default; }
.ptEmRowDeleted:hover { background: transparent; }
.ptEmRowDeleted .ptEmRowName { color: #888; }
.ptEmRowDeleted .ptEmKindChip { opacity: .55; }
.ptEmRestoreBtn {
    flex-shrink: 0; align-self: center;
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.45);
    color: hsl(var(--pt-h), var(--pt-s), 35%); font-weight: 600;
}
.ptEmRestoreBtn:hover { background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.10); }

/* Right detail */
.ptEmDetailHeader {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px; border-bottom: 1px solid #e0e0e0; margin-bottom: 12px;
}
.ptEmDetailName { font-size: 16px; font-weight: bold; color: #222; }
.ptEmDetailBadge {
    padding: 3px 8px; background: #f0f0f0; border-radius: 4px; font-size: 12px; color: #555;
}
.ptEmDetailActions { margin-left: auto; display: flex; gap: 8px; }

/* Detail table */
.ptEmDetailTable { display: flex; flex-direction: column; font-size: 12px; }
.ptEmDetailRow {
    display: grid;
    grid-template-columns: 110px 1fr 100px 130px 130px 70px;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
}
.ptEmDetailRow:hover { background: #fafafa; }
.ptEmDetailHeadRow {
    background: #f7f7f7; font-weight: bold; color: #555;
    position: sticky; top: 0; z-index: 1;
}
.ptEmDetailHeadRow:hover { background: #f7f7f7; }
.ptEmDetailCell { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptEmDetailRowActions { display: flex; gap: 4px; justify-content: flex-end; }


/* ===== Phase 2 Slice 1 — pill picker (replaces native <select>, matches ptTcButton hover palette) ===== */

.ptEmPillGroup {
    display: flex; gap: 2px;
    padding: 2px; border: 1px solid #ddd; border-radius: 6px; background: #fafafa;
}
.ptEmPill {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    color: #555;
    user-select: none;
    transition: var(--transitions);
    white-space: nowrap;
}
.ptEmPill:hover {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1);
}
.ptEmPillActive {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2);
    color: hsl(var(--pt-h), var(--pt-s), calc(var(--pt-l) - 15%));
    font-weight: bold;
}
.ptEmPillActive:hover {
    background-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.25);
}

/* CoGS static distro lock label */
.ptOvCogsDistroLock {
    padding: 6px 10px;
    border: 1px dashed #bbb;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    background: #f8f8f8;
    font-style: italic;
}

.ptEmDetailPeriodView {
    margin-left: auto;
    margin-right: 12px;
}

/* Manager: detail header layout — accommodate the new period-view pills */
.ptEmDetailHeader { flex-wrap: wrap; }


/* ===== Expense-redesign Part B — Manager (named-ledger period editor) ===== */

/* Kind chip (text + colour, replaces the emoji-only kind hint) */
.ptEmKindChip {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}
.ptEmKindOverhead { background: #e3f2fd; color: #1565c0; }
.ptEmKindDirect   { background: #fff3e0; color: #e65100; }
.ptEmKindCogs     { background: #f3e5f5; color: #6a1b9a; }

/* Left row meta uses the chip in place of the old icon column */
.ptEmRow .ptEmKindChip { align-self: flex-start; margin-top: 1px; }

/* --- Detail header (title + rename pen + chip + period pills + delete) --- */
.ptEmDetailTitleWrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ptEmRenamePen {
    cursor: pointer; font-size: 13px; color: #888;
    padding: 2px 5px; border-radius: 3px;
}
.ptEmRenamePen:hover { background: #eee; color: #222; }
.ptEmPeriodModePills { margin-left: auto; }

/* --- Article selector strip (direct / CoGS) --- */
.ptEmArticleStrip {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0 10px; flex-wrap: wrap;
    border-bottom: 1px solid #eee; margin-bottom: 4px;
}
.ptEmArticleLabel { font-size: 12px; color: #555; }
/* (the native .ptEmArticleSelect was replaced by .ptEmArticleCombo — see below) */
.ptEmActiveOnly {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: #555; cursor: pointer; user-select: none;
}

/* Manager-local Бренды/Артикулы grouping lens — a segmented toggle (ADR-0010 §6). Shared by
   the B-view article strip + the bulk-tool chrome. Navigation/display ONLY, never a write
   target; matches the .ptEmPill palette so it reads as a sibling view control. */
.ptEmGroupToggle {
    display: inline-flex; align-items: stretch; flex: none;
    border: 1px solid #ccc; border-radius: 5px; overflow: hidden;
    font-size: 12px; user-select: none;
}
.ptEmGroupSeg {
    padding: 4px 10px; cursor: pointer; color: #555; background: #fff;
    transition: var(--transitions); white-space: nowrap;
}
.ptEmGroupSeg + .ptEmGroupSeg { border-left: 1px solid #ddd; }
.ptEmGroupSeg:hover { background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.1); }
.ptEmGroupSegActive {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.2);
    color: hsl(var(--pt-h), var(--pt-s), calc(var(--pt-l) - 15%));
    font-weight: bold;
}
.ptEmGroupSegActive:hover { background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.25); }

/* Searchable single-select article combobox (replaces the native <select>). Real search + always-on
   brand context (ADR-0010 D2/§3). The root takes the old <select>'s strip sizing and is the
   positioning context for the absolutely-placed dropdown panel. */
.ptEmArticleCombo {
    position: relative;
    flex: 1; min-width: 200px; max-width: 420px;
    /* CF-D1: the ONE absolute-px base for the whole combo — every child font-size below is em-relative
       to THIS, so the control scales as one consistent unit and tunes from a single knob. Kept px (not
       a relative/inherited size) because the picker overlay is body-mounted, where em/% would resolve
       against the host WB page's root font. */
    font-size: 13px;
}
.ptEmArticleComboField {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer;
}
.ptEmArticleComboField:focus { outline: none; border-color: #2196f3; }
.ptEmArticleComboOpen .ptEmArticleComboField { border-color: #2196f3; }
.ptEmArticleComboLabel { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222; }
.ptEmArticleComboPlaceholder { color: #888; }
.ptEmArticleComboCaret { flex-shrink: 0; color: #888; font-size: 0.85em; }

.ptEmArticleComboPanel {
    display: none;
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 60;
    flex-direction: column; max-height: 360px;
    background: #fff; border: 1px solid #bbb; border-radius: 5px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.ptEmArticleComboOpen .ptEmArticleComboPanel { display: flex; }
.ptEmArticleComboSearch {
    margin: 6px; padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1em;
}
.ptEmArticleComboSearch:focus { outline: none; border-color: #2196f3; }
.ptEmArticleComboList { overflow-y: auto; min-height: 0; padding-bottom: 4px; }

.ptEmArticleComboOpt {
    /* center (not baseline) so the Wave-C thumbnail slot lines up with the option text. */
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; cursor: pointer;
}
.ptEmArticleComboOpt:hover { background: #f0f7ff; }
.ptEmArticleComboOptSel { background: #e3f2fd; }
.ptEmArticleComboOptSel:hover { background: #d6e9f8; }
.ptEmArticleComboOptName { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222; }
.ptEmArticleComboOptBrand { flex-shrink: 0; font-size: 0.85em; color: #888; }
/* CF-D1: «Все — сумма» / «Все артикулы» reads as a clickable action, not a grey-italic label —
   accent-blue (the combo's own focus colour) + medium weight; the row's :hover already lifts it. */
.ptEmArticleComboOptAll { color: #2196f3; font-weight: 500; border-bottom: 1px solid #eee; }

/* Brand section header (Бренды mode) — sticky inside the scrolling list; collapsible. Brand is
   navigation/display only; the header carries the brand so its rows omit the inline brand. */
.ptEmArticleComboBrand {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; cursor: pointer; user-select: none;
    background: #f7f7f7; border-top: 1px solid #eee;
    position: sticky; top: 0;
    font-size: 0.85em; font-weight: bold; color: #555;
}
.ptEmArticleComboBrand:first-child { border-top: none; }
.ptEmArticleComboBrandTog { flex-shrink: 0; font-size: 0.7em; color: #888; }
.ptEmArticleComboBrandName { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptEmArticleComboBrandCount { flex-shrink: 0; color: #999; font-weight: normal; }
/* READ-picker brand ROW (W3-BRAND mode-pure, ADR-0029 / ADR-0011 §5 amendment): a selectable
   option-like row — image slot + name + count — NOT the sticky navigation divider the Manager uses.
   Overrides the .ptEmArticleComboBrand divider styling (sticky / grey / bold / small font) so the row
   matches the article options below it in height, weight, and the thumbnail gap. The scoped brand gets
   the same highlight as a selected article option. (The Manager's navigation-only brand header keeps
   the compact divider — it never carries this class.) */
.ptEmArticleComboBrandSelectable {
    position: static;
    background: transparent;
    border-top: none;
    gap: 8px;
    min-height: 26px;
    padding: 6px 10px;
    font-size: inherit;
    font-weight: normal;
    color: #222;
    cursor: pointer;
}
.ptEmArticleComboBrandSelectable:hover { background: #f0f7ff; }
.ptEmArticleComboBrandSel,
.ptEmArticleComboBrandSel:hover { background: #e3f2fd; }
.ptEmArticleComboEmpty { padding: 12px 10px; color: #888; font-size: 0.92em; font-style: italic; text-align: center; }

/* --- Period list (virtualized Design-3 scroll surface) --- */
.ptEmPeriodList {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    border: 1px solid #eee; border-radius: 6px; overflow: hidden;
}
/* Height is pinned in JS (fitScroller) off the bounded modal panel, not the flex
   chain — flex-grow would otherwise override an explicit height in this column. */
.ptEmPeriodScroller { flex: none; overflow-y: auto; }
/* The two virtual spacers carry the off-screen height (height set inline in JS). */
.ptEmPeriodSpacer { flex: none; }
.ptEmPeriodHeadRow,
.ptEmPeriodRow {
    display: grid;
    /* Capped label + trailing 1fr (NOT a greedy 1fr label) so Период and Сумма sit close
       (Wave 5 column-gap fix): the slack pools in the trailing column on the right instead of
       opening a chasm between the two. The trailing 1fr also keeps the coarse editor's
       `grid-column: 1 / -1` spanning the full row width. */
    grid-template-columns: minmax(180px, 240px) 160px 44px 1fr;
    align-items: center;
}
/* CoGS + specific article = two value columns: «За единицу» (primary) | «Сумма». */
.ptEmPeriodHeadRow.ptEmCogsCols,
.ptEmPeriodRow.ptEmCogsCols {
    /* «За единицу» widened to 150px so the provenance line «ОЦЕНКА по умолчанию» fits
       without the awkward «по умолчан…» clip; «Сумма» trimmed to keep the row balanced. */
    grid-template-columns: minmax(180px, 240px) 150px 110px 44px 1fr;
}
.ptEmPeriodHeadRow {
    padding: 7px 12px;
    background: #f5f5f5; border-bottom: 1px solid #e0e0e0;
    font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ptEmPeriodHeadRow > div:nth-child(2) { text-align: right; }
.ptEmPeriodHeadRow.ptEmCogsCols > div:nth-child(3) { text-align: right; }
/* height MUST equal ROW_H in expensemanager.js (the virtualizer's row pitch). */
.ptEmPeriodRow {
    box-sizing: border-box; height: 34px; padding: 0 12px;
    border-bottom: 1px solid #f3f3f3; font-size: 13px;
}
.ptEmPeriodRow:hover { background: #fafafa; }
/* The whole row is the edit target (Wave 3 — row-click toggles the editor); signal it. */
.ptEmPeriodRowEditable { cursor: pointer; }
.ptEmPeriodRowNow { background: hsla(43, 96%, 56%, 0.08); }
.ptEmPeriodRowNow:hover { background: hsla(43, 96%, 56%, 0.14); }
.ptEmPeriodCellLabel { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptEmPeriodCellValue {
    text-align: right; font-variant-numeric: tabular-nums; color: #222; font-weight: 500;
    padding-left: 8px;
}
/* CoGS «За единицу» = the primary value (purple, bold) stacked over its provenance line.
   «Сумма» drops to secondary. Stays within ROW_H (34px) via tight line-heights. */
.ptEmPeriodCellPerUnit {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    line-height: 1.12; padding-left: 8px; overflow: hidden;
}
.ptEmCogsRateVal {
    font-variant-numeric: tabular-nums; color: #6a1b9a; font-weight: 700;
}
/* Provenance (ADR-0009): «действует с» (origin) / «наследуется с» (inherited). */
.ptEmCogsProv {
    font-size: 9.5px; color: #999; font-weight: 400; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* «оценка» — default-covered history not confirmed per-period (amber). */
.ptEmCogsEstBadge {
    display: inline-block; padding: 0 4px; border-radius: 3px;
    background: hsla(43, 96%, 56%, 0.18); color: #8a6d00; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.02em;
}
.ptEmPeriodCellValueSecondary { color: #999; font-weight: 400; }
.ptEmPeriodCellAction { display: flex; justify-content: flex-end; }
.ptEmPeriodCellAction .ptEmRowAction { opacity: 0; transition: opacity 0.12s; }
.ptEmPeriodRow:hover .ptEmRowAction { opacity: 1; }

.ptEmInlineInput {
    width: 120px; padding: 3px 6px;
    border: 1px solid #2196f3; border-radius: 3px;
    font-size: 13px; text-align: right; font-variant-numeric: tabular-nums;
}

/* --- Two-knob coarse editor (inline under a row, overhead/direct only) --- */
.ptEmCoarseEditor {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px; margin: 0 8px 8px;
    background: #f7faff; border: 1px solid #d6e4f5; border-radius: 6px;
}
.ptEmCoarseKnob { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptEmCoarseKnobLabel { font-size: 12px; color: #555; font-weight: 600; }
.ptEmCoarseHint { font-size: 11px; color: #888; font-style: italic; }
/* Inline feedback for the coarse editor's actions (a re-spread has no visible coarse
   result without it). Empty by default; coloured per outcome. */
.ptEmCoarseStatus { font-size: 12px; min-height: 14px; font-weight: 600; }
.ptEmCoarseStatusOk { color: #2e7d32; }
.ptEmCoarseStatusNoop { color: #888; font-weight: 500; }
.ptEmCoarseStatusBusy { color: #888; font-weight: 500; }
/* --- Progressive-disclosure reveal («тонкая настройка», Part F) — shared by the coarse
   editor (re-spread knob) and the creation overlay (default distribution mode). The lead
   action stays visible; the heavier control is opt-in. --- */
.ptEmReveal {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    font-size: 12px; color: #2196f3; font-weight: 600;
    cursor: pointer; user-select: none; padding: 2px 0;
}
.ptEmReveal:hover { color: #1769aa; }
.ptEmRevealCaret { font-size: 9px; line-height: 1; }
.ptEmRevealLabel { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.ptEmRevealBody { display: none; flex-direction: column; gap: 8px; }
.ptEmRevealBody.ptEmRevealOpen { display: flex; }

/* A control disabled while a write is in flight (busy gate). */
.ptEmDisabled { opacity: 0.5; pointer-events: none; }
/* The disabled CoGS «Изменить ставки» button keeps pointer-events so its data-tip («выберите
   артикул…») can fire on hover — .ptEmDisabled otherwise kills hover entirely. Safe: no click
   handler is attached while it is disabled, so it stays inert; cursor signals non-interactivity. */
.ptEmCogsEditBtn.ptEmDisabled { pointer-events: auto; cursor: not-allowed; }

/* --- Minimal creation overlay --- */
.ptEmCreatePanel {
    display: flex; flex-direction: column; gap: 8px;
    width: min(440px, 92vw);
}
.ptEmCreateError {
    font-size: 12px; color: #c62828;
    background: #fdecea; border: 1px solid #f5c6c0; border-radius: 4px;
    padding: 6px 10px;
}

/* --- Inline confirm / alert (replaces native confirm()/alert(), see ptInlineDialog) --- */
/* Stacks above EVERY other expense modal (manager +10, bulk/cogs +110), the floating
   calendar (+200) and the audit modal (+300) so the dialog is never hidden behind the
   surface that raised it. */
.ptModalBackdropConfirm { z-index: calc(var(--ptZ) + 400); }
.ptEmConfirmPanel { width: min(420px, 92vw); gap: 14px; }
.ptEmConfirmMsg { font-size: 13px; line-height: 1.5; color: var(--text-primary); white-space: normal; }
.ptEmConfirmActions { margin-top: 2px; }

/* --- Bulk entry tool «Ввести значения за произвольный период» (Part C) --- */
/* Stacks ABOVE the manager (+10) AND above the base modal layer (+100) so it clears
   anything the manager itself opens. */
.ptModalBackdropBulk { z-index: calc(var(--ptZ) + 110); }
.ptEmBulkPanel { width: min(560px, 94vw); }
.ptEmBulkChip { align-self: flex-start; }
.ptEmBulkRangeRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Click-to-open trigger for the shared floating range calendar (openStandaloneCalendar). */
.ptEmBulkRangeBtn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border: 1px solid #ccc; border-radius: 6px;
    font-size: 13px; font-family: inherit; color: var(--text-primary);
    background: #fff; cursor: pointer; user-select: none;
    transition: var(--transitions);
}
.ptEmBulkRangeBtn:hover,
.ptEmBulkRangeBtn:focus-visible { border-color: #2196f3; background: #fafcff; outline: none; }
.ptEmBulkRangeBtnText { font-variant-numeric: tabular-nums; }
.ptEmBulkRangeCaret { color: #888; font-size: 10px; }
/* Adaptive mode pill that lacks its basis in the chosen range (no revenue / no sales) */
.ptEmPillDisabled { opacity: 0.4; cursor: not-allowed; color: #999; }
.ptEmPillDisabled:hover { background: transparent; }

/* --- CoGS rate editor «Себестоимость» (default rate + dated changes, ADR-0009) --- */
/* Stacks above the manager AND above the base modal layer, same as the bulk tool. */
.ptModalBackdropCogs { z-index: calc(var(--ptZ) + 110); }
.ptEmCogsPanel { width: min(620px, 95vw); }
.ptEmCogsDefaultRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptEmCogsUnit { color: #777; font-size: 12px; }
.ptEmCogsChangeList { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; }
.ptEmCogsChangeRow {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 8px; border: 1px solid #eee; border-radius: 6px; background: #fcfcfd;
}
.ptEmCogsDraftRow { border-color: #e6d3ee; background: #faf5fc; }
.ptEmCogsChangeDate { font-size: 12px; color: #555; font-weight: 600; min-width: 150px; }
.ptEmCogsChangeInput { width: 96px; }
.ptEmCogsDateBtn { min-width: 170px; }
.ptEmCogsAddBtn { margin-right: auto; }   /* footer: push «+ Добавить ставку» left, «Готово» stays right */
/* Impact-preview confirm bar — every write touching sold units shows it first. */
.ptEmCogsImpact {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px; border-radius: 6px;
    background: hsla(43, 96%, 56%, 0.12); border: 1px solid hsla(43, 96%, 56%, 0.4);
}
.ptEmCogsImpactText { font-size: 13px; color: #5a4600; font-weight: 600; line-height: 1.5; flex: 1; min-width: 0; }
.ptEmCogsImpactLine + .ptEmCogsImpactLine { margin-top: 1px; }
.ptEmCogsImpactOld { color: #9a8f70; font-weight: 400; }
.ptEmCogsImpactArrow { color: #9a8f70; margin: 0 5px; }
.ptEmCogsImpactNew { font-weight: 700; }
.ptEmCogsImpactActions { display: flex; gap: 8px; flex: none; }
/* Deep-link flash on the targeted change row. */
.ptEmCogsRowFlash { animation: ptEmCogsFlash 1.4s ease-out; }
@keyframes ptEmCogsFlash {
    0%, 30% { background: hsla(280, 60%, 60%, 0.22); }
    100% { background: #fcfcfd; }
}
.ptEmBulkModeNote:not(:empty) { margin-top: 2px; }
/* Day-distribution explainer (replaces the terse «Распределение по дням» label): a full teaching
   sentence, so normal weight + line-height, not the bold heading style of .ptOvLabel. */
.ptEmDistroExplainer { font-size: 11px; font-weight: normal; color: var(--text-secondary); line-height: 1.35; }
.ptEmBulkOverheadRow { display: flex; align-items: center; gap: 8px; }
/* Shared entry-list host (createArticleEntryList). It wraps the search/sold-only row, the
   fill-all row, and the article list — which used to be direct children of the modal panel
   (.ptModalPanel gap:10px). Re-declare the same column gap so wrapping them is layout-neutral. */
.ptEmEntryList { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ptEmBulkToolsRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ptEmBulkSearch {
    flex: 1; min-width: 160px; padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px;
}
.ptEmBulkApplyAll { display: flex; align-items: center; gap: 8px; }
.ptEmBulkArticleList {
    flex: 1 1 auto; min-height: 80px; max-height: 42vh; overflow-y: auto;
    border: 1px solid #eee; border-radius: 6px;
}
.ptEmBulkArticleRow {
    /* Wave C: a leading `auto` track holds the .ptEmThumb name+thumbnail slot (thumb | name | input). */
    display: grid; grid-template-columns: auto 1fr 130px; align-items: center; gap: 8px;
    padding: 6px 10px; border-bottom: 1px solid #f3f3f3; font-size: 13px;
}
.ptEmBulkArticleRow:hover { background: #fafafa; }
.ptEmBulkArticleName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.ptEmBulkArticleInput {
    width: 100%; box-sizing: border-box; padding: 3px 6px;
    border: 1px solid #ccc; border-radius: 3px;
    font-size: 13px; text-align: right; font-variant-numeric: tabular-nums;
}
.ptEmBulkArticleInput:focus { border-color: #2196f3; outline: none; }
/* CoGS bulk rows carry a per-unit suffix → thumb | name | input | «р/ед» (leading thumb track, Wave C). */
.ptEmBulkArticleRow.ptEmBulkArticleRowSuffixed { grid-template-columns: auto 1fr 90px auto; }
.ptEmEntryRowSuffix { color: #777; font-size: 12px; white-space: nowrap; }
.ptEmBulkArticleInput.ptEmEntryMuted { color: #aaa; }
.ptEmBulkEmpty { padding: 18px; text-align: center; color: #999; font-size: 12px; font-style: italic; }

/* Brand-grouped entry list (ADR-0010 D2 — Бренды mode, navigation/display only). Collapsible
   brand section headers above the per-article rows; the «—» bucket = untagged articles. A
   header never carries a value — the write target stays the numeric articleId. */
.ptEmBrandHeader {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; cursor: pointer; user-select: none;
    background: #f5f7f9; border-bottom: 1px solid #e8e8e8;
    position: sticky; top: 0; z-index: 1;
    font-size: 12px; font-weight: 600; color: #444;
}
.ptEmBrandHeader:hover { background: #eef1f4; }
.ptEmBrandToggle { width: 12px; flex: none; color: #888; font-size: 10px; text-align: center; }
.ptEmBrandName { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptEmBrandCount {
    flex: none; color: #888; font-weight: 400; font-variant-numeric: tabular-nums;
    background: #e8ebee; border-radius: 9px; padding: 1px 7px; font-size: 11px;
}

/* ===== «История изменений» overlay (ADR-0034, P2-5 — prochangehistory.js) ===== */

.ptChangeHistory {
    position: relative;
    display: flex; flex-direction: column;
    width: 760px; max-width: 92vw; height: 80vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.ptChHeader {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid #e0e0e0; background: #f7f7f7;
}
.ptChHeaderTitle { font-size: 15px; font-weight: 600; white-space: nowrap; }
.ptChHeaderSub { flex: 1 1 auto; font-size: 12px; color: #777; min-width: 0; }

.ptChList { flex: 1 1 auto; overflow-y: auto; padding: 0 0 12px; }

.ptChDayHeader {
    position: sticky; top: 0; z-index: 1;
    padding: 7px 16px 5px; background: #fafafa; border-bottom: 1px solid #eee;
    font-size: 11.5px; font-weight: 600; color: #666; text-transform: none;
}

.ptChRow {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 16px; border-bottom: 1px solid #f2f2f2;
}
.ptChMain { flex: 1 1 auto; min-width: 0; }
.ptChTitle { font-size: 13px; line-height: 1.45; color: #222; }
.ptChMeta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 11.5px; color: #999; }
.ptChRowUndone .ptChTitle { text-decoration: line-through; color: #a0a0a0; }
.ptChUndoneMark { color: #b26b00; font-weight: 600; }
.ptChStaleNote { color: #b26b00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }

.ptChBadgeAi {
    flex: none; font-size: 10px; font-weight: 700; color: #5b47c2;
    background: #eeeaff; border-radius: 8px; padding: 1px 6px;
}

.ptChActions { flex: none; display: flex; gap: 6px; }
.ptChBtn { white-space: nowrap; }
.ptChBtnBusy { opacity: 0.6; pointer-events: none; }
.ptChBtnDisabled { opacity: 0.45; cursor: default; }
.ptChBtnDisabled:hover { background: white; }

/* The shared name+thumbnail slot, history-sized (ADR-0011 — per-surface size class). */
.ptChThumb { margin: -2px 6px -2px 0; vertical-align: middle; }
.ptChThumb .ptNameThumbImg { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; display: inline-block; }
.ptChThumb .ptNameThumbPh { background: #eef1f4; }

.ptChEmpty { padding: 28px 20px; font-size: 13px; color: #888; text-align: center; }
.ptChMore { margin: 12px auto 0; display: block; width: max-content; }

.ptChNotice {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    max-width: 85%; padding: 8px 14px; border-radius: 6px;
    background: #fff4e5; color: #8a5300; border: 1px solid #f0c98d;
    font-size: 12.5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.ptChNoticeVisible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   B1-2 first-run onboarding wizard (prowizard.js · ADR-0035). A self-contained first-run gate
   that replaces the no-shop dead-end. Same in-flow space surface as #ptCalcRoom (flex column,
   brand-green top divider), with a centered, scrollable, card-based reading column.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* First-run toolbar: at 0 shops only the wizard tab («Начните здесь») + «Калькулятор» are meaningful.
   Hide the shop-dependent controls that would do nothing on click and only confuse. Applied by
   ptWizardApplyFirstRunToolbar; cleared for free by the reload once a shop is connected. */
#ptSkies.ptSkiesFirstRun #ptAI,
#ptSkies.ptSkiesFirstRun #ptHistory,
#ptSkies.ptSkiesFirstRun #ptShopName,
#ptSkies.ptSkiesFirstRun #ptOptionStuff {
    display: none;
}

#ptWizard {
    flex: 1;
    min-height: 0;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    font-family: sans-serif;
    color: var(--text-primary);
    overflow: hidden;
    border-top: 2.5px solid var(--ptColor);
}

.ptWizScroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--globalTriple) var(--globalMeasure);
}

.ptWizCard {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--globalMeasure);
}

.ptWizStage {
    display: flex;
    flex-direction: column;
    gap: var(--globalMeasure);
}

.ptWizKicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    user-select: none;
}

.ptWizTitle {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.ptWizLead {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
}

.ptWizText {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ptWizActions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--globalHalf);
    margin-top: var(--globalHalf);
}

.ptWizBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.ptWizBtn--primary {
    background: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    color: #ffffff;
}

.ptWizBtn--primary:hover { background: hsl(var(--pt-h), var(--pt-s), calc(var(--pt-l) - 6%)); }
.ptWizBtn--primary:disabled { opacity: 0.6; cursor: default; }

.ptWizBtn--ghost {
    background: transparent;
    color: hsl(var(--pt-h), var(--pt-s), calc(var(--pt-l) - 10%));
    border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.45);
    align-self: flex-start;
    margin-top: var(--globalHalf);
}

.ptWizBtn--ghost:hover { background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08); }

.ptWizLinkWrap {
    margin-top: var(--globalMeasure);
    padding-top: var(--globalMeasure);
    border-top: 1px solid hsla(0, 0%, 0%, 0.08);
}

.ptWizLink {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: hsl(var(--pt-h), var(--pt-s), calc(var(--pt-l) - 10%));
    cursor: pointer;
    text-decoration: underline;
}

.ptWizLink:hover { color: hsl(var(--pt-h), var(--pt-s), calc(var(--pt-l) - 18%)); }

.ptWizLinkHint {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.ptWizBack {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.ptWizBack:hover { color: var(--text-primary); }

.ptWizInstr {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
    border: 1px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
    border-radius: 10px;
    padding: var(--globalMeasure) var(--globalAndAhalf);
}

.ptWizInstrHead {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--globalHalf);
}

.ptWizSteps {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
}

.ptWizCats {
    margin: 6px 0 2px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13.5px;
    color: var(--text-secondary);
}

.ptWizCats strong { color: var(--text-primary); }

.ptWizField {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--globalHalf);
}

.ptWizLabel {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.ptWizInput {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid hsla(0, 0%, 0%, 0.2);
    border-radius: 8px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary);
    resize: vertical;
    background: #fff;
}

.ptWizInput:focus {
    outline: none;
    border-color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    box-shadow: 0 0 0 3px hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.15);
}

/* B1-12 account step: email/password fields read as normal text (monospace is the TOKEN idiom). */
.ptWizInput--auth {
    font-family: inherit;
    resize: none;
}

/* B1-12 account step: the «или по email» divider between Google and the email form. */
.ptWizAuthDivider {
    text-align: center;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: var(--globalHalf);
}

.ptWizError {
    font-size: 13px;
    color: hsl(0, 65%, 45%);
    min-height: 1em;
}

.ptWizDisclosure {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.07);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.ptWizDiscIcon { flex-shrink: 0; }

@keyframes ptWizSpin { to { transform: rotate(360deg); } }

/* ── B1-2 Increment 2: first-sync progress + done/error/no-data landing ────────────────────── */

.ptWizProgressBar {
    width: 100%;
    height: 6px;
    margin-top: var(--globalMeasure);
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.ptWizProgressFill {
    width: 0%;
    height: 100%;
    background: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    border-radius: 3px;
    transition: width 0.4s ease;
}

.ptWizSyncList {
    list-style: none;
    margin: var(--globalMeasure) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ptWizSyncItem {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.ptWizSyncGlyph {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.10);
    color: var(--text-secondary);
}

.ptWizSyncActive .ptWizSyncLabel { color: var(--text-primary); }
.ptWizSyncActive .ptWizSyncGlyph {
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.18);
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    animation: ptWizSpin 0.9s linear infinite;
}

.ptWizSyncDone .ptWizSyncLabel { color: var(--text-primary); }
.ptWizSyncDone .ptWizSyncGlyph {
    background: hsl(140, 55%, 45%);
    color: #ffffff;
}

.ptWizDoneMark {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 26px;
    font-weight: 700;
    background: hsl(140, 55%, 45%);
    color: #ffffff;
    margin-bottom: var(--globalHalf);
}

.ptWizErrorMark {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 700;
    background: hsl(4, 70%, 52%);
    color: #ffffff;
    margin-bottom: var(--globalHalf);
}

/* ===== B1-4 — AI consent card (proconsent.js) — shared by the wizard step + the AI-space gate ===== */

/* The AI-space consent GATE occupies the #ptChatRoom slot: center the card, scroll if tall. */
.ptChatConsentGate {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ptConsentScroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--globalTriple) var(--globalMeasure);
}

/* In the wizard the card renders directly into the stage (already centered by .ptWizScroll). */
.ptConsentCard {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--globalMeasure);
}

.ptConsentKicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    user-select: none;
}
.ptConsentTitle {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}
.ptConsentLead {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
}

/* The full legal text — scrollable box so consent is informed without walling the flow. */
.ptConsentTextBox {
    max-height: 260px;
    overflow-y: auto;
    padding: var(--globalMeasure);
    border: 1px solid hsla(0, 0%, 0%, 0.12);
    border-radius: 8px;
    background: hsla(0, 0%, 0%, 0.02);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.ptConsentDocTitle {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--globalHalf);
}
.ptConsentDocH {
    font-weight: 700;
    color: var(--text-primary);
    margin-top: var(--globalMeasure);
    margin-bottom: 2px;
}
.ptConsentDocP { margin: 0 0 6px; }

/* The affirmative AI checkbox + the separate marketing opt-in. */
.ptConsentCheckRow {
    display: flex;
    align-items: flex-start;
    gap: var(--globalHalf);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
}
.ptConsentCheckRow--marketing {
    color: var(--text-secondary);
    padding-top: var(--globalHalf);
    border-top: 1px solid hsla(0, 0%, 0%, 0.08);
}
.ptConsentCheck {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    cursor: pointer;
}
.ptConsentCheckLabel { flex: 1; }

.ptConsentActions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--globalHalf);
    margin-top: var(--globalHalf);
}
.ptConsentBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, opacity 0.15s;
}
.ptConsentBtn--primary {
    background: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    color: #ffffff;
}
.ptConsentBtn--primary:hover { background: hsl(var(--pt-h), var(--pt-s), calc(var(--pt-l) - 6%)); }
.ptConsentBtn--primary:disabled { opacity: 0.55; cursor: default; }

.ptConsentSkipWrap { margin-top: 2px; }
.ptConsentSkip {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: hsl(var(--pt-h), var(--pt-s), calc(var(--pt-l) - 10%));
    cursor: pointer;
}
.ptConsentSkip:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   shops-cockpit-space «Магазины» (proshops.js · ADR-0026 4th space · PRD Phase 1). A roomy
   in-cockpit home for shop list / switch / delete / add — same in-flow space surface as
   #ptCalcRoom / #ptWizard (flex column, brand-green top divider, centered reading column).
   Reuses the wizard's .ptWizBtn button styles for the add / empty-state CTA.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
#ptShopRoom {
    flex: 1;
    min-height: 0;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    font-family: sans-serif;
    color: var(--text-primary);
    overflow: hidden;
    border-top: 2.5px solid var(--ptColor);
}
.ptShopScroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--globalTriple) var(--globalMeasure);
}
.ptShopInner {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: var(--globalMeasure);
}
.ptShopTitle {
    font-size: 22px;
    font-weight: 700;
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    margin: 0;
}
.ptShopLead {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    opacity: 0.8;
    margin: 0;
}
.ptShopNotice { font-size: 13px; line-height: 1.4; min-height: 0; }
.ptShopNotice--error { color: #c0392b; }
.ptShopNotice--success { color: hsl(var(--pt-h), var(--pt-s), calc(var(--pt-l) - 6%)); }
.ptShopNotice--info { color: var(--text-primary); opacity: 0.8; }

.ptShopList { display: flex; flex-direction: column; gap: 8px; }
.ptShopRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--globalMeasure);
    padding: 12px 14px;
    border: 1.5px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.18);
    border-radius: 8px;
    background: #fff;
    transition: var(--transitions);
    position: relative;
}
.ptShopRowClickable { cursor: pointer; }
.ptShopRowClickable:hover { background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.06); }
.ptShopRowActive {
    border-color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.05);
}
.ptShopRowName { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ptShopRowNameText {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ptShopRowBadge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: hsl(var(--pt-h), var(--pt-s), var(--pt-l));
    background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.12);
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
}
.ptShopRowActions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ptShopRowBtn {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1.5px solid transparent;
    cursor: pointer;
    background: none;
    transition: var(--transitions);
}
.ptShopRowDelete { color: #c0392b; border-color: hsla(0, 60%, 45%, 0.35); }
.ptShopRowDelete:hover { background: hsla(0, 60%, 45%, 0.08); }

.ptShopDeleteConfirm {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 2;
}
.ptShopDeleteText { font-size: 13px; font-weight: 600; }
.ptShopDeleteYes { color: #fff; background: #c0392b; border-color: #c0392b; }
.ptShopDeleteYes:hover { background: #a93226; }
.ptShopDeleteNo { color: var(--text-primary); border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.3); }

.ptShopAddBtn { align-self: flex-start; margin-top: 4px; }
.ptShopEmpty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--globalMeasure);
    padding: var(--globalMeasure) 0;
}
.ptShopEmptyText { font-size: 15px; color: var(--text-primary); opacity: 0.85; margin: 0; }

/* ─── Shops space Phase 2: the active shop's detail (token · sync · datasets) ────────────────── */
.ptShopDetail {
    display: flex;
    flex-direction: column;
    gap: var(--globalMeasure);
    margin-top: var(--globalMeasure);
    padding-top: var(--globalMeasure);
    border-top: 1.5px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.18);
}
.ptShopDetailTitle {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.ptShopCard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1.5px solid hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.18);
    border-radius: 8px;
    background: #fff;
}
.ptShopCardTitle {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    opacity: 0.7;
}

.ptShopTokenStatus { display: flex; align-items: center; gap: 8px; }
.ptShopTokenStatusText { font-size: 14px; }
.ptShopDot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.ptShopDot--green { background: #27ae60; }
.ptShopDot--yellow { background: #e0a800; }
.ptShopDot--red { background: #c0392b; }
.ptShopTokenBtn { border-color: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.35); }
.ptShopTokenBtn:hover { background: hsla(var(--pt-h), var(--pt-s), var(--pt-l), 0.08); }

.ptShopSyncActions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptShopStopBtn { color: #c0392b; border-color: hsla(0, 60%, 45%, 0.35); }
.ptShopStopBtn:hover { background: hsla(0, 60%, 45%, 0.08); }
.ptShopSyncMsg { font-size: 13px; line-height: 1.4; }
.ptShopSyncMsg--error { color: #c0392b; }
.ptShopSyncMsg--info { color: var(--text-primary); opacity: 0.8; }
.ptShopSyncProgress { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ptShopChecklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ptShopCheckItem { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.75; }
.ptShopCheckItem.ptShopCheckDone { opacity: 1; }
.ptShopCheckMark { width: 14px; text-align: center; flex-shrink: 0; }
.ptShopCheckDone .ptShopCheckMark { color: #27ae60; font-weight: 700; }
.ptShopSyncHint { font-size: 12px; opacity: 0.65; }
.ptShopLastUpdate { font-size: 13px; opacity: 0.8; }

.ptShopDatasetsToggle {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    opacity: 0.7;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transitions);
}
.ptShopDatasetsToggle::before { content: '▸'; font-size: 11px; }
.ptShopDatasetsToggle.ptShopDatasetsOpen::before { content: '▾'; }
.ptShopDatasetsToggle:hover { opacity: 1; }
.ptShopDatasetsBody { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.ptShopDatasetsLoading { font-size: 13px; opacity: 0.7; }
.ptShopDsSection { display: flex; flex-direction: column; gap: 4px; }
.ptShopDsTitle { font-size: 12px; font-weight: 700; }
.ptShopDsGreen { color: #27ae60; }
.ptShopDsBlue { color: hsl(var(--pt-h), var(--pt-s), var(--pt-l)); }
.ptShopDsRed { color: #c0392b; }
.ptShopDsItem { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.ptShopDsItemClickable { cursor: pointer; }
.ptShopDsItemClickable:hover .ptShopDsName { text-decoration: underline; }
.ptShopDsName { flex: 1; min-width: 0; }
.ptShopDsMark { font-weight: 700; flex-shrink: 0; }
.ptShopDsCount { font-size: 12px; opacity: 0.7; flex-shrink: 0; }
.ptShopDsDays { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 8px 0; }
.ptShopDsMonth { display: flex; flex-direction: column; gap: 4px; }
.ptShopDsMonthName { font-size: 12px; font-weight: 600; color: hsl(var(--pt-h), var(--pt-s), var(--pt-l)); }
.ptShopDsDayList { display: flex; flex-wrap: wrap; gap: 4px; }
.ptShopDsDay {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: hsla(0, 60%, 45%, 0.1);
    color: #c0392b;
}