/* ══════════════════════════════════════════════════════════════════════════════
   chart-inspector.css — VOLURR Drawing Inspector (W3)
   Spec: docs/chart/DRAWTOOLS_INSPECTOR_SPEC.md
   ------------------------------------------------------------------------------
   LAWS THIS FILE ENFORCES
   D3  every colour/space/radius/motion value comes from a TOKEN (base.css / tokens.css).
       Zero hardcoded hex except the two documented exceptions at the bottom of §0.
   D7  RTL/LTR by LOGICAL PROPERTIES ONLY. No `left`/`right`/`margin-left`.
   D8  seven size classes, five DPRs — §9.
   D9  every interactive element ≥44px on a coarse pointer, and NO hover-only
       affordance: §10 promotes every hover-revealed control to always-visible.
   COLOR LAW  --pcac (crimson) is the only chrome accent. --up/--down are price
       direction ONLY and never appear as UI chrome. Destructive = filled crimson,
       which is why crimson is never used as a *filled* state anywhere else.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ═══ §0 · component tokens ═══════════════════════════════════════════════════ */
.pcin{
  --pcin-w:396px;                       /* desktop width, overridden per class §9 */
  --pcin-solid:var(--gold2,#c02a2a);    /* filled active state — 5.8:1 with #fff  */
  --pcin-on:#fff;                       /* text on --pcin-solid                    */
  --pcin-inset:color-mix(in srgb,var(--txt) 6%,transparent);
  --pcin-hover:color-mix(in srgb,var(--txt) 9%,transparent);
  --pcin-hair:color-mix(in srgb,var(--line) 70%,transparent);
  --pcin-sb:color-mix(in srgb,var(--txt) 18%,transparent);
  --pcin-sbh:color-mix(in srgb,var(--txt) 32%,transparent);
  /*  RAW PLATE. Owner 2026-08-14, pointing at the compact bar: «هذا باقي — بدون تحت بوكس ثردي او اسود
      شريط خام». Same value the favourites bar took an hour earlier, so the two floating panels are one
      surface language and not two.
      This WAS --pcin-glass: --card at 82% behind a 22px backdrop blur. Opaque now, and black on dark /
      white on light rather than --card (#0f1422 — near-black but blue-tinted and lighter than the plot).
      ONE token, read by the shell, the body scrim and BOTH gesture overrides, so the plate cannot change
      colour the moment a gesture starts — exactly the flip that was just removed from #pcFavBar's drag.
      The backdrop-filter goes with it, and that removal is provably free rather than a judgement call:
      a blur behind a fully opaque background paints pixels that the background then completely covers. */
  --pcin-surf:#000;
  --pcin-row:40px;                      /* row height, 44 on coarse (§10)          */
  --pcin-tap:28px;                      /* min control box, 44 on coarse (§10)     */
}
/*  the other half of the token, and it is not optional: a hardcoded #000 alone would leave the light
    theme with a black plate under #14161c glyphs — a panel you cannot read. Declared per theme, so
    «اسود» is black on dark and the plate stays white where the app is white. */
html[data-theme="light"] .pcin{--pcin-surf:#fff}

/* ═══ §1 · shell ══════════════════════════════════════════════════════════════ */
.pcin{
  /* above the floating favourites bar (#pcFavBar is z-index:41, draw/search.js:31) — it used to
     cover the inspector's search field; below the app's --z-popover:120 so real popovers still win */
  position:absolute; z-index:60;
  display:flex; width:var(--pcin-w); max-width:calc(100% - 2*var(--sp-7,16px));
  max-height:calc(100% - 2*var(--sp-7,16px));
  border:1px solid var(--line); border-radius:var(--rad-xl,18px);
  background:var(--pcin-surf);
  /*  NO LIFT. --el-4 is a 24px-offset, 70px-blur drop shadow at 62% black — the single largest soft
      region this panel put over a canvas that repaints on every tick. The hairline border above is what
      separates the plate from the plot now. Nothing is being concealed: the shadow was decoration. */
  overflow:hidden; contain:layout paint;      /* isolate: panel never invalidates the plot */
  font-family:inherit; color:var(--txt);
}
.pcin[hidden]{display:none}
.pcin-main{display:flex;flex-direction:column;flex:1;min-width:0}

/* ═══ §2 · icon rail (tabs) ═══════════════════════════════════════════════════ */
.pcin-rail{
  flex:none; width:54px; display:flex; flex-direction:column; align-items:center;
  gap:var(--sp-1,4px); padding:var(--sp-5,12px) 0;
  background:var(--pcin-inset); border-inline-end:1px solid var(--pcin-hair);
}
.pcin-rail button{
  position:relative; width:38px; height:38px; min-width:var(--pcin-tap); min-height:var(--pcin-tap);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--rad-md,10px); background:transparent; color:var(--txt2);
  transition:background var(--dur-1,.12s) var(--ease,ease), color var(--dur-1,.12s) var(--ease,ease);
}
.pcin-rail button:hover{background:var(--pcin-hover);color:var(--txt)}
.pcin-rail button[aria-selected="true"]{
  background:var(--pcac); color:var(--pcin-on);
  box-shadow:0 4px 14px color-mix(in srgb,var(--pcac) 40%,transparent);
}
.pcin-rail button:focus-visible{outline:2px solid var(--pcac);outline-offset:2px}
.pcin-rail .pcin-sp{flex:1}
/* tooltip — inline-end side, so it mirrors in LTR automatically */
.pcin-rail button::after{
  content:attr(data-tip); position:absolute; inset-inline-end:calc(100% + 8px); top:50%;
  transform:translateY(-50%) scale(.92); transform-origin:100% 50%;
  padding:4px 9px; border-radius:var(--rad-xs,6px);
  background:var(--card); border:1px solid var(--line); color:var(--txt);
  font-size:11px; font-weight:700; white-space:nowrap;
  opacity:0; pointer-events:none; box-shadow:var(--el-2,0 8px 22px rgba(0,0,0,.4));
  transition:opacity var(--dur-1,.12s) var(--ease,ease), transform var(--dur-1,.12s) var(--ease,ease);
}
.pcin-rail button:hover::after,.pcin-rail button:focus-visible::after{opacity:1;transform:translateY(-50%) scale(1)}

/* ═══ §3 · header ═════════════════════════════════════════════════════════════ */
.pcin-hd{
  display:flex; align-items:center; gap:var(--sp-4,10px);
  padding:var(--sp-6,14px) var(--sp-6,14px) var(--sp-5,12px);
  cursor:move; user-select:none; touch-action:none;
}
.pcin-orb{
  flex:none; width:32px; height:32px; border-radius:var(--rad-sm,9px);
  display:grid; place-items:center; background:var(--pcin-c,var(--pcac));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pcin-c,var(--pcac)) 15%,transparent),
             0 6px 18px color-mix(in srgb,var(--pcin-c,var(--pcac)) 38%,transparent);
}
.pcin-orb svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.pcin-id{flex:1;min-width:0}
/*  THE HEADER IS THE DRAG HANDLE, SO NOTHING INERT INSIDE IT MAY TAKE THE POINTER.
    [owner spec 2026-08-14: «#pcInspName وأي نص فوق منطقة السحب لا يبتلع pointerdown»]
    MEASURED FIRST, and the honest result is that the drag already worked at every one of five points
    across the 340 px header — 3 %, 20 %, 45 %, 72 % all moved 36 px, including the two where
    document.elementFromPoint returns #pcInspName, because the listener sits on the header and the event
    bubbles up to it. The 95 % point correctly refuses, because it is a button.
    This is applied anyway and NOT sold as a bug fix: it makes the intent explicit, it stops the title
    text being selected mid-drag, and it removes one hit-test layer from every pointermove. The two
    buttons keep their own pointer-events, so nothing about clicking changes. */
.pcin-hd > .pcin-orb, .pcin-hd > .pcin-id, .pcin-hd > .pcin-id *{pointer-events:none}
.pcin-hd > button{pointer-events:auto}
.pcin-id b{display:block;font-size:15px;font-weight:800;letter-spacing:-.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcin-id span{display:block;margin-top:2px;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:10.5px;font-weight:500;color:var(--muted);letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:start}
.pcin-hb{
  flex:none; width:32px; height:32px; min-width:var(--pcin-tap); min-height:var(--pcin-tap);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--rad-md,10px); background:var(--pcin-inset); color:var(--txt2);
  transition:background var(--dur-1,.12s) var(--ease,ease), color var(--dur-1,.12s) var(--ease,ease);
}
.pcin-hb:hover{background:var(--pcin-hover);color:var(--txt)}
.pcin-hb:focus-visible{outline:2px solid var(--pcac);outline-offset:2px}

/* multi-selection banner */
.pcin-multi{
  display:flex; align-items:center; gap:var(--sp-2,6px);
  padding:var(--sp-2,6px) var(--sp-6,14px);
  background:var(--pcac-bg); color:var(--pcac);
  font-size:11.5px; font-weight:700;
  border-block:1px solid color-mix(in srgb,var(--pcac) 26%,transparent);
}

/* ═══ §4 · search ═════════════════════════════════════════════════════════════ */
.pcin-srch{position:relative;margin:0 var(--sp-6,14px) var(--sp-4,10px)}
.pcin-srch svg{
  position:absolute; inset-inline-start:11px; top:50%; transform:translateY(-50%);
  width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2;pointer-events:none;
}
.pcin-srch input{
  width:100%; min-height:var(--pcin-tap);
  padding-block:8px; padding-inline:34px 34px;
  border:1px solid transparent; border-radius:var(--rad-md,10px);
  background:var(--pcin-inset); color:var(--txt); font:600 12px inherit;
  transition:border-color var(--dur-1,.12s) var(--ease,ease), background var(--dur-1,.12s) var(--ease,ease);
}
.pcin-srch input::placeholder{color:var(--muted);font-weight:500}
.pcin-srch input:focus{outline:0;background:var(--pcin-hover);
  border-color:color-mix(in srgb,var(--pcac) 55%,transparent)}
.pcin-srch kbd{
  position:absolute; inset-inline-end:9px; top:50%; transform:translateY(-50%);
  font:700 9.5px var(--font-mono,monospace); color:var(--muted);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px; pointer-events:none;
}

/* ═══ §5 · scope (D1 — the one control that replaces the defaults panel) ══════ */
.pcin-scope{display:flex;gap:var(--sp-1,4px);padding:0 var(--sp-6,14px) var(--sp-4,10px)}
.pcin-scope button{
  flex:1 1 0; min-width:0; min-height:var(--pcin-tap);
  padding:8px 4px; border:0; border-radius:var(--rad-sm,9px);
  background:var(--pcin-inset); color:var(--txt2);
  font-size:10.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background var(--dur-1,.12s) var(--ease,ease), color var(--dur-1,.12s) var(--ease,ease);
}
.pcin-scope button:hover{background:var(--pcin-hover);color:var(--txt)}
.pcin-scope button[aria-pressed="true"]{background:var(--pcac);color:var(--pcin-on)}
.pcin-scope button:focus-visible{outline:2px solid var(--pcac);outline-offset:2px}

/* ═══ §6 · body · scrollbar (never the native OS bar, never horizontal) ═══════ */
.pcin-b{
  flex:1; min-height:0; padding:0 var(--sp-6,14px) var(--sp-5,12px);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--pcin-sb) transparent; scrollbar-gutter:stable;
}
.pcin-b::-webkit-scrollbar{width:6px;height:0}
.pcin-b::-webkit-scrollbar-track{background:transparent}
.pcin-b::-webkit-scrollbar-thumb{background:var(--pcin-sb);border-radius:999px}
.pcin-b::-webkit-scrollbar-thumb:hover{background:var(--pcin-sbh)}
.pcin-b::-webkit-scrollbar-button,.pcin-b::-webkit-scrollbar-corner{display:none;width:0;height:0;background:transparent}
/* structural guard against flex-child overflow — scoped to the LAYOUT boxes only.
   `.pcin *` was too wide a net: at (0,1,1) it out-specified every control rule and
   silently zeroed each min-width, which is how a 44px touch target measured 28px. */
.pcin-main,.pcin-b,.pcin-hd,.pcin-id,.pcin-r,.pcin-r>label,.pcin-ctl,.pcin-g,
.pcin-scope,.pcin-srch,.pcin-f,.pcin-prev{min-width:0}

/* live preview card */
.pcin-prev{
  position:relative; height:76px; margin-bottom:var(--sp-5,12px);
  border-radius:var(--rad-lg,14px); background:var(--pcin-inset);
  box-shadow:inset 0 0 0 1px var(--pcin-hair); overflow:hidden;
}
.pcin-prev svg{position:absolute;inset:0;width:100%;height:100%}
.pcin-prev i{
  position:absolute; inset-inline-start:10px; top:8px; font-style:normal;
  font:700 9px var(--font-mono,monospace); letter-spacing:.6px; text-transform:uppercase; color:var(--muted);
}

/* ═══ §7 · groups + rows ══════════════════════════════════════════════════════ */
.pcin-g{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; gap:var(--sp-3,8px); padding:var(--sp-4,10px) 2px var(--sp-2,6px);
  background:linear-gradient(180deg,var(--pcin-surf) 62%,transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pcin-g b{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.pcin-g hr{flex:1;margin:0;border:0;border-top:1px solid var(--pcin-hair)}

.pcin-r{
  display:flex; align-items:center; gap:var(--sp-4,10px);
  min-height:var(--pcin-row); padding:3px 2px; border-radius:var(--rad-sm,9px);
  transition:background var(--dur-1,.12s) var(--ease,ease);
}
.pcin-r:hover{background:var(--pcin-hover)}
.pcin-r>label{
  flex:1; min-width:0; display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--txt2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* inheritance dot — ○ inherited · ● overridden on this drawing (D5 predictability) */
.pcin-r>label::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--muted); opacity:.55;
}
.pcin-r[data-ov="1"]>label{color:var(--txt)}
.pcin-r[data-ov="1"]>label::before{
  background:var(--pcac); opacity:1;
  box-shadow:0 0 8px color-mix(in srgb,var(--pcac) 70%,transparent);
}
.pcin-rev{
  flex:none; width:22px; height:22px; display:none; align-items:center; justify-content:center;
  border:0; border-radius:var(--rad-xs,6px); background:transparent; color:var(--muted);
}
.pcin-r[data-ov="1"]:hover .pcin-rev,
.pcin-r[data-ov="1"]:focus-within .pcin-rev{display:inline-flex}
.pcin-rev:hover{background:var(--pcin-hover);color:var(--pcac)}
/* SIZE GATE (measured 2026-07-25: 2372 clipped controls at 1280x720, 70% of them the 7-option
   tfMin/tfMax segments): the row and its segments may wrap AT EVERY SIZE. Wrapping was previously
   scoped to the coarse/phone block, so a desktop pointer got a segment that simply ran off the
   panel edge — silently, because overflow-x is hidden. A control that cannot fit beside its label
   now takes the next line instead of being cut. */
.pcin-r{flex-wrap:wrap}
.pcin-r>label{flex:1 1 auto;min-width:38%}
.pcin-ctl{flex:0 1 auto;max-width:100%;display:inline-flex;align-items:center;gap:var(--sp-3,8px);
  margin-inline-start:auto}

/* ═══ §8 · controls ═══════════════════════════════════════════════════════════ */
.pcin-seg{display:inline-flex;flex-wrap:wrap;max-width:100%;gap:2px;padding:3px;
  border-radius:var(--rad-md,10px);background:var(--pcin-inset)}
.pcin-seg button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--pcin-tap); padding:5px 9px; border:0; border-radius:var(--rad-xs,6px);
  background:transparent; color:var(--txt2); font-size:11px; font-weight:700; white-space:nowrap;
  transition:background var(--dur-1,.12s) var(--ease,ease), color var(--dur-1,.12s) var(--ease,ease);
}
.pcin-seg button:hover:not([aria-pressed="true"]){color:var(--txt)}
.pcin-seg button[aria-pressed="true"]{background:var(--pcin-solid);color:var(--pcin-on)}
.pcin-seg button:focus-visible{outline:2px solid var(--pcac);outline-offset:-2px}
.pcin-seg svg{display:block;pointer-events:none}

.pcin-col{
  position:relative; flex:none; width:38px; height:32px;
  min-width:var(--pcin-tap); min-height:var(--pcin-tap);
  border:0; border-radius:var(--rad-md,10px); background:var(--pcin-c,var(--pcac));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--txt) 20%,transparent),
             0 4px 12px color-mix(in srgb,var(--pcin-c,var(--pcac)) 35%,transparent);
}
.pcin-col input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border-radius:inherit}
.pcin-col:focus-within{outline:2px solid var(--pcac);outline-offset:2px}

.pcin-sws{display:flex;flex-wrap:wrap;gap:7px;padding:3px 2px 6px;
  /* 2px end padding: the last swatch of a full row landed exactly on the content
     edge, which reads as a clipped control on a sub-pixel DPR (1.25/1.5). */}
.pcin-sw{
  width:24px;height:24px;min-width:var(--pcin-tap);min-height:var(--pcin-tap);
  padding:0;border:0;border-radius:var(--rad-sm,9px);background:var(--pcin-c);
  transition:transform var(--dur-1,.12s) var(--ease,ease);
}
.pcin-sw:hover{transform:scale(1.12)}
.pcin-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--pcac)}
.pcin-sw:focus-visible{outline:2px solid var(--pcac);outline-offset:3px}

.pcin-rng{display:flex;align-items:center;gap:9px}
.pcin-rng input[type=range]{width:106px;max-width:100%;accent-color:var(--pcac);
  height:var(--pcin-tap);touch-action:none}       /* touch-action:none → the slider owns the drag, the panel never scrolls under it */
.pcin-rng b{
  min-width:44px;text-align:end;font:700 11.5px var(--font-mono,monospace);
  color:var(--txt);font-variant-numeric:tabular-nums;direction:ltr;
}

.pcin-tgl{
  position:relative; flex:none; width:40px; height:23px; min-width:44px; min-height:var(--pcin-tap);
  padding:0; border:0; border-radius:999px; background:var(--pcin-inset);
  box-shadow:inset 0 0 0 1px var(--pcin-hair);
  transition:background var(--dur-1,.12s) var(--ease,ease);
}
.pcin-tgl i{
  position:absolute; top:50%; inset-inline-start:3px; width:17px; height:17px; margin-top:-8.5px;
  border-radius:50%; background:var(--muted);
  transition:inset-inline-start var(--dur-1,.12s) var(--ease,ease), background var(--dur-1,.12s) var(--ease,ease);
}
.pcin-tgl[aria-pressed="true"]{background:var(--pcac);box-shadow:none}
.pcin-tgl[aria-pressed="true"] i{inset-inline-start:20px;background:#fff}
.pcin-tgl:focus-visible{outline:2px solid var(--pcac);outline-offset:2px}

.pcin-num,.pcin-txt{
  min-height:var(--pcin-tap); padding:6px 9px;
  border:1px solid transparent; border-radius:var(--rad-sm,9px);
  background:var(--pcin-inset); color:var(--txt);
}
.pcin-num{width:112px;font:600 11.5px var(--font-mono,monospace);
  font-variant-numeric:tabular-nums;direction:ltr;text-align:end}
.pcin-txt{width:100%;font:600 12px inherit}
.pcin-num:focus,.pcin-txt:focus{outline:0;border-color:color-mix(in srgb,var(--pcac) 55%,transparent)}

/* honesty note — used where a control is deliberately absent (D4) */
.pcin-note{
  display:flex; gap:var(--sp-3,8px); align-items:flex-start; margin:2px 0 4px;
  padding:9px 11px; border-radius:var(--rad-md,10px);
  background:color-mix(in srgb,var(--pcac) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--pcac) 22%,transparent);
  font-size:11.5px; font-weight:600; line-height:1.6; color:var(--txt2);
}
.pcin-note svg{flex:none;width:15px;height:15px;margin-top:1px;fill:none;stroke:var(--pcac);stroke-width:2}

/* levels table (fib / gann) */
.pcin-lv{width:100%;border-collapse:collapse;font-size:11.5px;margin-bottom:4px}
.pcin-lv th{padding:0 4px 6px;text-align:start;color:var(--muted);
  font:800 9px var(--font-mono,monospace);letter-spacing:.6px;text-transform:uppercase}
.pcin-lv td{padding:4px;border-top:1px solid var(--pcin-hair)}
.pcin-lv .v{font:700 11px var(--font-mono,monospace);color:var(--txt);font-variant-numeric:tabular-nums;direction:ltr}
.pcin-lv .d{display:inline-block;width:15px;height:15px;border-radius:5px;background:var(--pcin-c);vertical-align:-3px}
.pcin-lv button{min-width:var(--pcin-tap);min-height:var(--pcin-tap);border:0;border-radius:var(--rad-xs,6px);
  background:transparent;color:var(--muted);font-size:13px}
.pcin-lv button:hover{background:var(--pcin-hover);color:var(--pcac)}

.pcin-emoji{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 6px}
.pcin-emoji button{width:34px;height:34px;min-width:var(--pcin-tap);min-height:var(--pcin-tap);
  border:0;border-radius:var(--rad-md,10px);background:var(--pcin-inset);font-size:18px;line-height:1}
.pcin-emoji button:hover{background:var(--pcin-hover)}
.pcin-emoji button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--pcac)}

.pcin-empty{padding:26px 10px;text-align:center;color:var(--muted);font-size:12px;font-weight:600}

/* ═══ §9 · footer ═════════════════════════════════════════════════════════════ */
.pcin-f{
  display:flex; align-items:center; gap:var(--sp-2,6px);
  padding:var(--sp-4,10px) var(--sp-6,14px); border-top:1px solid var(--pcin-hair);
}
.pcin-f button{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2,6px);
  min-height:var(--pcin-tap); padding:9px 12px; border:0; border-radius:var(--rad-md,10px);
  background:var(--pcin-inset); color:var(--txt2); font-size:11.5px; font-weight:700;
  transition:background var(--dur-1,.12s) var(--ease,ease), color var(--dur-1,.12s) var(--ease,ease);
}
.pcin-f button:hover{background:var(--pcin-hover);color:var(--txt)}
.pcin-f button:focus-visible{outline:2px solid var(--pcac);outline-offset:2px}
.pcin-f .pri{flex:1;background:var(--pcac);color:var(--pcin-on)}
.pcin-f .pri:hover{background:var(--pcin-solid);color:var(--pcin-on)}
/* destructive: the ONLY filled-crimson control besides the primary — see COLOR LAW */
.pcin-f .del:hover{background:var(--pcac);color:var(--pcin-on)}

.pcin-i{width:15px;height:15px;flex:none;pointer-events:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ═══ §10 · SIZE CLASSES (D8) ═════════════════════════════════════════════════ */
/* desktop / large — the default above: 396px floating.                          */
@media (max-width:1439px){ .pcin{--pcin-w:372px} }                    /* laptop  */
@media (max-width:1023px){ .pcin{--pcin-w:360px} }                    /* tablet  */

/* docked mode — tablet/desktop user preference, persisted by the renderer */
.pcin.is-dock{
  position:relative; inset:auto; width:var(--pcin-w); max-width:none; max-height:none;
  height:100%; border-radius:0; border:0; border-inline-start:1px solid var(--line);
  background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none;
}

/* phone portrait — BOTTOM SHEET. Never covers the drawing being edited. */
@media (max-width:479px){
  .pcin{
    position:fixed; inset:auto 0 0 0; width:100%; max-width:100%;
    height:var(--pcin-snap,52vh); max-height:88vh;
    border:0; border-top:1px solid var(--line);
    border-radius:var(--rad-xl,18px) var(--rad-xl,18px) 0 0;
    box-shadow:0 -18px 50px rgba(0,0,0,.5);
    transition:height var(--dur-2,.18s) var(--ease,ease);
  }
  .pcin .pcin-rail{
    flex-direction:row; width:auto; height:auto; padding:var(--sp-2,6px) var(--sp-4,10px);
    border-inline-end:0; border-block-end:1px solid var(--pcin-hair);
    justify-content:space-around; order:-1;
  }
  .pcin{flex-direction:column}
  .pcin .pcin-rail button::after{display:none}              /* no tooltips on touch */
  .pcin .pcin-rail .pcin-sp{display:none}
  .pcin .pcin-hd{padding-top:var(--sp-3,8px)}
  .pcin .pcin-hd::before{                           /* grab handle */
    content:""; position:absolute; inset-inline:0; top:6px; margin-inline:auto;
    width:38px; height:4px; border-radius:4px; background:var(--muted); opacity:.5;
  }
  .pcin .pcin-ctl{max-width:58%}
}
/* phone landscape — side sheet, short viewport */
@media (max-width:767px) and (max-height:479px){
  .pcin{
    inset:0 auto 0 0; inset-inline-start:auto; inset-inline-end:0;
    width:320px; height:100%; border-radius:0;
    border-inline-start:1px solid var(--line); border-top:0;
  }
  .pcin .pcin-rail{flex-direction:column;order:0;border-block-end:0;
    border-inline-end:1px solid var(--pcin-hair)}
  .pcin{flex-direction:row}
  .pcin .pcin-hd::before{display:none}
}

/* ═══ §11 · INPUT (D9) ════════════════════════════════════════════════════════ */
@media (pointer:coarse),(max-width:479px){
  .pcin{--pcin-tap:44px;--pcin-row:48px}
  /* NO hover-only affordance: the revert control is permanently visible on touch */
  .pcin-r[data-ov="1"] .pcin-rev{display:inline-flex}
  .pcin-r:hover{background:transparent}          /* sticky :hover on touch is noise */
  .pcin-rail button::after{display:none}
  .pcin *{-webkit-tap-highlight-color:transparent}
  .pcin-seg{gap:3px;flex-wrap:wrap}
  .pcin-r{flex-wrap:wrap;align-items:center}
  .pcin-r>label{flex:1 1 100%}
  .pcin-ctl{max-width:100%;flex:1 1 100%;justify-content:flex-end}
  .pcin-seg button,.pcin-scope button,.pcin-f button,.pcin-lv button{min-width:var(--pcin-tap)}
  .pcin-rev{width:var(--pcin-tap);height:var(--pcin-tap)}   /* always visible on touch → must be reachable */
  .pcin-hb,.pcin-rail button{min-width:var(--pcin-tap);width:var(--pcin-tap);height:var(--pcin-tap)}
  .pcin-sws{gap:9px}
}
/* a fine pointer keeps the compact 28px controls — but NEVER below the phone
   breakpoint, where the touch sizing above must win regardless of pointer type */
@media (pointer:fine) and (min-width:480px){ .pcin{--pcin-tap:28px} }

/* the panel scrolls itself; a two-finger scroll must never reach the chart */
.pcin-b{touch-action:pan-y}
.pcin-hd{touch-action:none}

/* ═══ §12 · MOTION / CONTRAST / PERF ══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .pcin,.pcin *{transition:none!important;animation:none!important}
}
/* during a chart gesture the renderer sets .is-gesture: blur is the most expensive
   thing on the panel, and a gesture frame budget is 16.7ms (LOCK 15).
   This is a PERFORMANCE measure, not concealment — no defect is being hidden. */
/* the gesture override no longer has a blur to kill, and it must repeat the SAME surface token — a
   different colour here would flip the plate the instant a chart gesture began. */
.pcin.is-gesture{background:var(--pcin-surf)}
@media (prefers-reduced-transparency:reduce),(update:slow){
  .pcin{background:var(--pcin-surf)}
}
@media (forced-colors:active){
  .pcin{background:Canvas;border-color:CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none}
  .pcin-seg button[aria-pressed="true"],.pcin-scope button[aria-pressed="true"],
  .pcin-rail button[aria-selected="true"]{background:Highlight;color:HighlightText;forced-color-adjust:none}
  .pcin-r>label::before{forced-color-adjust:none}
}

/* ═══ §13 · COMPACT BAR — the first thing shown on every selection ═══════════
   Replaces .pcdbar (chart-institutional.css:274-289), which was 16 rules of
   hardcoded LIGHT colours with no dark variant and no theme scoping at all:
   a white glossy pill floating over a #0B0F19 chart. Same component, same
   schema, same tokens as the panel — so it can never drift from it again. */
.pcin.is-compact{
  width:auto; max-width:calc(100% - 24px); height:auto; max-height:none;
  border-radius:999px; padding:5px 6px; align-items:center;
  /* the owner saw a dark smear under the bar. --el-3 is a 44px-blur drop shadow: over a chart that
     repaints every frame the compositor must re-blur that whole soft rectangle behind a translucent,
     backdrop-filtered pill. Replaced with a hairline + a 6px shadow — the bar still lifts off the
     candles, but there is no large blurred region riding above the plot. */
  /*  and the last of the lift goes. The 6px shadow was already the reduced replacement for --el-3;
      the owner asked for none at all («بدون تحت بوكس ثردي»), so only the hairline ring is left to
      define the strip against the plot. */
  box-shadow:0 0 0 1px var(--pcin-hair);
}
.pcin.is-compact .pcin-main{flex-direction:row;align-items:center;gap:2px;width:auto}
.pcin-cbar{display:flex;align-items:center;gap:2px}
.pcin-cbar button{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-width:34px;height:34px;padding:0 8px;border:0;border-radius:var(--rad-sm,9px);
  /*  glyphs at the PRIMARY text token, not the dimmed secondary one — near-white on the black plate,
      #14161c i.e. black on the white one. «لون اشاره اسود حتا اكثر تظهر», one token, both themes. */
  background:transparent;color:var(--txt);font-size:11.5px;font-weight:700;
  transition:background var(--dur-1,.12s) var(--ease,ease),color var(--dur-1,.12s) var(--ease,ease);
}
.pcin-cbar button:hover{background:var(--pcin-hover);color:var(--txt)}
.pcin-cbar button:active{transform:scale(.94)}
.pcin-cbar button[aria-pressed="true"]{background:var(--pcac-bg);color:var(--pcac)}
.pcin-cbar button:focus-visible{outline:2px solid var(--pcac);outline-offset:-2px}
.pcin-cbar .pcin-cdel:hover{background:color-mix(in srgb,var(--pcac) 18%,transparent);color:var(--pcac)}
.pcin-cbar b{font:700 11px var(--font-mono,monospace);font-variant-numeric:tabular-nums;letter-spacing:.2px}
.pcin-crng{display:inline-flex;align-items:center;gap:6px;padding-inline:6px}
.pcin-crng input[type=range]{width:72px;height:26px}
/* the live value readout (100%, x1) is a NUMBER the owner reads off the bar — primary ink, not the dim tier */
.pcin-crng b{min-width:34px;font:700 11px var(--font-mono,monospace);color:var(--txt);text-align:end}
@media (pointer:coarse),(max-width:479px){ .pcin-crng input[type=range]{width:88px;height:var(--pcin-tap)} }
.pcin-csep{width:1px;height:20px;margin-inline:3px;flex:none;
  background:linear-gradient(180deg,transparent,var(--pcin-hair),transparent)}
/* colour control: the swatch IS the value — no separate label needed */
.pcin-cc{position:relative;overflow:hidden}
.pcin-cc i{display:block;width:18px;height:3.5px;border-radius:2px;background:var(--pcin-c,var(--pcac));
  box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--txt) 22%,transparent)}
.pcin-cc svg{margin-bottom:1px}
.pcin-cc input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.pcin-cgrip{display:grid;grid-template-columns:repeat(2,2.5px);gap:2.5px;padding:0 6px;flex:none;
  cursor:grab;touch-action:none}
/* the grip steps up one tier as well, but stays BELOW the tools so the handle does not compete with them */
.pcin-cgrip b{width:2.5px;height:2.5px;border-radius:50%;background:var(--txt2);opacity:.75}
.pcin.is-compact .pcin-hd{padding:0;cursor:default}
@media (pointer:coarse),(max-width:479px){
  .pcin.is-compact{border-radius:26px;padding:4px 6px;flex-wrap:wrap;justify-content:center}
  .pcin.is-compact .pcin-main{flex-wrap:wrap;justify-content:center}
  .pcin-cbar{flex-wrap:wrap;justify-content:center}
  .pcin-cbar button{min-width:var(--pcin-tap);height:var(--pcin-tap)}
}