/* الحارس العام: أي عنصر عليه hidden يتخفي مهما كان display بتاع كلاسه (نفس فخ .v3-mbackdrop). */
#fv3Mount [hidden], .v3-root [hidden]{ display:none !important; }

/* ============================================================
   بصماتي — Filter v3 CSS (Step 2a, 2026-09-03)
   Tokens only — every color/space/radius/shadow value is var(--…) from
   lib/tokens.css (+ lib/theme.css / lib/ui.css for --surface-*/--line/
   --orange/--blue/etc). NEW FILE ONLY. Ported from the approved look in
   _redesign/filter-v3-proto.html; class names all carry a v3- prefix.
   ============================================================ */

/* --v3-violet: the "عبر الشهور" group accent has no token in lib/tokens.css —
   this is the one deliberate literal in this file, defined once and referenced
   via var() everywhere below (per coordinator review, 2026-09-03). */
:root{ --v3-violet:#9B7BFF; }

.v3-root{ display:flex; flex-direction:column; gap:0; }

/* ── shared card shell (same recipe as #secSettings .sg-card) ── */
.v3-card{
  background:color-mix(in oklab,var(--surface-2) 78%,transparent);
  border:1px solid var(--line); border-radius:20px;
  padding:18px 20px 20px; margin:0 0 16px; position:relative; isolation:isolate;
  box-shadow:var(--shadow-1,0 1px 2px rgba(0,0,0,.28));
}
.v3-card-h{ display:flex; align-items:center; gap:9px; margin:0 0 4px; }
.v3-card-h .v3-ci{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:color-mix(in oklab,var(--orange) 16%,transparent); color:var(--orange-2); font-size:16px; }
.v3-card-h h3{ font:800 15px/1.3 "Reem Kufi",serif; margin:0; }

/* ── quick/saved question chips ── */
.v3-qbar{ display:flex; align-items:center; gap:8px; overflow-x:auto; padding:2px 2px 4px;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to left, transparent 0, #000 var(--fade-r,0px), #000 calc(100% - var(--fade-l,28px)), transparent 100%);
          mask-image:linear-gradient(to left, transparent 0, #000 var(--fade-r,0px), #000 calc(100% - var(--fade-l,28px)), transparent 100%);
}
.v3-qbar::-webkit-scrollbar{ display:none; }
.v3-chip{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font:600 13px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-soft);
  background:var(--chip); border:1px solid var(--line); border-radius:999px;
  padding:9px 15px; cursor:pointer; white-space:nowrap;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),transform .12s;
}
.v3-chip:hover{ border-color:var(--orange); color:var(--fg); transform:translateY(-1px); }
.v3-chip:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.v3-chip.is-mine{ border-color:color-mix(in oklab,var(--blue) 55%,var(--line)); color:var(--blue-2);
  background:color-mix(in oklab,var(--blue) 10%,transparent); }
.v3-chip .v3-pin{ opacity:.7; font-size:11px; }
.v3-manage{ margin-inline-start:auto; flex:none; }

/* ── sentence builder ── */
.v3-hidden-summary{ list-style:none; display:none; }
.v3-hidden-summary::-webkit-details-marker{ display:none; }
.v3-sentence{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 8px; }
.v3-mein{ font:800 16px/1 "Reem Kufi",serif; color:var(--fg); flex:none; }
.v3-conn{
  font:600 12.5px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute);
  background:transparent; border:1px dashed var(--line); border-radius:999px;
  padding:6px 11px; cursor:pointer; flex:none;
}
.v3-conn:hover{ color:var(--fg-soft); border-color:var(--fg-mute); }
.v3-conn:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.v3-conn.is-or{ color:var(--orange-2); border-color:color-mix(in oklab,var(--orange) 40%,var(--line)); }

.v3-blk{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  font:600 13.5px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg);
  border-radius:999px; padding:9px 10px 9px 8px; cursor:pointer; border:1.5px solid transparent;
  background:var(--blk-bg); border-color:var(--blk-bd); flex:none;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
}
.v3-blk:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -12px rgba(0,0,0,.5); }
.v3-blk:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.v3-blk .v3-blk-x{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  color:inherit; opacity:.6; font-size:12px; line-height:1; }
.v3-blk .v3-blk-x:hover{ opacity:1; background:rgba(0,0,0,.15); }
.v3-blk.is-locked{ opacity:.45; cursor:not-allowed; filter:grayscale(.4); }
.v3-blk.is-locked:hover{ transform:none; box-shadow:none; }
.v3-blk .v3-lock-tag{ font:700 10px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute); margin-inline-start:2px; }

/* group colours — بصمات أزرق · شفتات برتقالي · فئات أخضر · عضوية رمادي · عبر الشهور بنفسجي */
.v3-g-fp     { --blk-bg:color-mix(in oklab, var(--blue) 16%, transparent);   --blk-bd:color-mix(in oklab, var(--blue) 55%, var(--line)); }
.v3-g-shift  { --blk-bg:color-mix(in oklab, var(--orange) 16%, transparent); --blk-bd:color-mix(in oklab, var(--orange) 55%, var(--line)); }
.v3-g-cat    { --blk-bg:color-mix(in oklab, var(--ok) 16%, transparent);     --blk-bd:color-mix(in oklab, var(--ok) 55%, var(--line)); }
.v3-g-member { --blk-bg:var(--chip);                                        --blk-bd:var(--line); }
.v3-g-cross  { --blk-bg:color-mix(in oklab, var(--v3-violet) 18%, transparent); --blk-bd:color-mix(in oklab, var(--v3-violet) 55%, var(--line)); }

.v3-addcond{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font:700 13px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--orange-2);
  background:transparent; border:1.5px dashed color-mix(in oklab,var(--orange) 45%,var(--line));
  border-radius:999px; padding:8.5px 14px; cursor:pointer;
}
.v3-addcond:hover{ background:color-mix(in oklab,var(--orange) 10%,transparent); }
.v3-addcond:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

.v3-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:14px; }
/* flex-wrap stays OFF here on purpose (only turned on ≤860, see media query
   below) — wrap:wrap on an intrinsically-sized flex item makes some engines
   pick a narrower shrink-to-fit width and break internally even when the
   row has plenty of room, which is what sent the scope-months caption to
   its own line on desktop too. Desktop must stay one row. */
.v3-meta-item{ display:flex; align-items:center; gap:7px; flex:none; font:600 12.5px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute); }
.v3-meta-label{ white-space:nowrap; }
.v3-meta-item select{
  font:700 12.5px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg); background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px; padding:7px 9px; cursor:pointer;
}
/* the "(يوليو ٢٠٢٦ وأغسطس ٢٠٢٦)" caption after #fv2Scope — one line, muted,
   never lets its own text wrap into a vertical micro-column. */
#fv2ScopeMonths{ white-space:nowrap; color:var(--fg-mute); font-weight:600; }
.v3-livecount{ margin-inline-start:auto; display:flex; align-items:baseline; gap:8px; }
.v3-livecount b{ font:800 26px/1 "Reem Kufi",serif; color:var(--orange-2); transition:transform .15s var(--ease); }
.v3-livecount b.bump{ transform:scale(1.18); }
.v3-livecount span{ font:600 13px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute); }

.v3-suggest{
  margin-top:10px; display:inline-flex; align-items:center; gap:7px;
  font:600 12.5px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute);
  background:transparent; border:1px dashed var(--line-2); border-radius:999px;
  padding:7px 13px; cursor:pointer; opacity:.85;
}
.v3-suggest:hover{ opacity:1; border-color:var(--orange); color:var(--orange-2); }
.v3-suggest:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

/* ── popovers (block editor / catalog) — appended to <body>, position:fixed ── */
.v3-pop{
  position:fixed; z-index:300; width:340px; max-width:92vw;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:16px; padding:14px; box-shadow:var(--shadow-2,0 20px 50px -20px rgba(0,0,0,.6));
}
.v3-pop-row{ display:flex; gap:8px; margin-bottom:9px; }
.v3-pop-row select,.v3-pop-row input,.v3-be-field{
  flex:1; min-width:0; font:600 13px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg);
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:9px 10px;
}
.v3-be-field{ width:100%; margin-bottom:9px; }
.v3-pop-plabel{ font:600 12px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute); align-self:center; flex:none; }
.v3-pop-not{ display:flex; align-items:center; gap:8px; font:600 12.5px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-soft); margin:8px 0 12px; }
.v3-pop-not.is-disabled{ opacity:.5; }
.v3-pop-note{ font-size:11px; color:var(--fg-mute); }
.v3-pop-foot{ display:flex; justify-content:flex-end; gap:8px; }

.v3-catpop{ width:420px; }
.v3-cattabs{ display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--surface-2); margin-bottom:10px; flex-wrap:wrap; }
.v3-cattab{ flex:1; min-width:64px; font:700 11.5px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute);
  background:transparent; border:none; border-radius:8px; padding:8px 6px; cursor:pointer; }
.v3-cattab.is-active{ background:var(--surface-4); color:var(--fg); }
.v3-cattab:focus-visible,.v3-catitem:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; border-radius:8px; }
.v3-catsearch{ width:100%; margin-bottom:10px; font:600 13px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif);
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:9px 12px; color:var(--fg); }
.v3-catlist{ max-height:min(60vh,340px); overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.v3-catitem{ display:flex; flex-direction:column; gap:1px; text-align:start; width:100%;
  background:transparent; border:none; border-radius:10px; padding:9px 10px; cursor:pointer; opacity:1; }
.v3-catitem:hover{ background:var(--chip); }
.v3-catitem b{ font:700 13px/1.3 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg); }
.v3-catitem span{ font:400 11.5px/1.4 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute); }
.v3-catitem.is-locked{ opacity:.4; cursor:not-allowed; }
.v3-catitem.is-locked b::after{ content:" — شهر واحد"; font-weight:600; color:var(--warn); font-size:11px; }

/* mobile: popovers become a bottom sheet */
.v3-pop.is-sheet{ position:fixed !important; inset:auto 0 0 0 !important; top:auto !important;
  width:100% !important; max-width:100%; border-radius:20px 20px 0 0;
  max-height:70vh; overflow-y:auto; }

/* ── answer card ── */
.v3-ans-said{ font:600 13px/1.7 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-soft); margin:0 0 4px; }
.v3-ans-said b{ color:var(--fg); }
.v3-ans-count{ font:800 18px/1.3 "Reem Kufi",serif; margin:0 0 12px; }
.v3-ans-empty{ display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  background:var(--warn-bg); border:1px solid color-mix(in oklab,var(--warn) 45%,var(--line));
  border-radius:14px; padding:16px 18px; margin-bottom:12px; }
.v3-ans-empty b{ font:700 13.5px/1.5 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg); }
.v3-ans-empty span{ font:400 12.5px/1.6 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute); }
.v3-ans-flat{ font:600 12.5px/1.6 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--orange-2); margin:0 0 10px; }

.v3-months{ display:inline-flex; gap:5px; align-items:flex-end; height:28px; cursor:default; }
.v3-mbcol{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.v3-mbcol i{ display:block; width:6px; border-radius:2px 2px 0 0; background:var(--orange); opacity:.85; }
.v3-mbcol b{ font:400 8px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute); font-weight:600; }
.v3-why-row td{ background:var(--surface-1); }
.v3-why-box{ font:400 12.5px/1.7 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-soft); padding:10px 4px; }
.v3-why-btn{ background:none; border:none; color:var(--fg-mute); cursor:pointer; font:600 12px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); }
.v3-why-btn:hover{ color:var(--orange-2); }
.v3-why-btn:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

.v3-prov{ margin-top:12px; font:400 12px/1.7 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute);
  border-top:1px solid var(--line-2); padding-top:10px; }

/* ── sticky action bar ── */
.v3-actionbar{
  position:sticky; bottom:0; z-index:40; margin-top:16px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:color-mix(in oklab,var(--surface-1) 92%,transparent); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:16px; padding:12px 16px;
  box-shadow:0 -10px 30px -20px rgba(0,0,0,.4);
}
.v3-selcount{ font:700 13px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-soft); white-space:nowrap; flex:none; }
.v3-selcount .sc-muted{ font-weight:600; color:var(--fg-mute); }
.v3-spacer{ flex:1; }
.v3-mobile-save-q{ display:none; }

/* ── modals ── */
/* 2026-09-03 (Step 2 wiring, real-browser catch): `.v3-mbackdrop{display:flex}` has the SAME
   specificity as the UA/reset `[hidden]{display:none}` rule and loads later in the cascade — it
   was winning outright, so both save/manage modals rendered full-viewport `position:fixed;inset:0`
   dark backdrops on every page load regardless of their `hidden` attribute. `display:none` is now
   the default and `:not([hidden])` is the ONLY thing that turns the backdrop on. */
.v3-mbackdrop{ display:none; }
.v3-mbackdrop:not([hidden]){ position:fixed; inset:0; z-index:100; background:rgba(4,6,12,.6); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:16px; }
.v3-mbox{ width:380px; max-width:100%; background:var(--surface-1); border:1px solid var(--line);
  border-radius:18px; padding:20px; box-shadow:var(--shadow-2,0 30px 70px -30px rgba(0,0,0,.7)); }
.v3-mbox h3{ font:800 16px/1.3 "Reem Kufi",serif; margin:0 0 12px; }
.v3-mbox input{ width:100%; font:600 14px/1 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg);
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-bottom:14px; }
.v3-mfoot{ display:flex; justify-content:flex-end; gap:8px; }
.v3-managelist{ max-height:50vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.v3-managerow{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border:1px solid var(--line-2); border-radius:10px; }
.v3-managename{ font:600 13px/1.4 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg); }
.v3-managename i{ color:var(--fg-mute); font-style:normal; font-size:11px; }
.v3-manageacts{ display:flex; gap:6px; flex:none; }
.v3-hint{ font:400 12.5px/1.6 var(--font-body,"IBM Plex Sans Arabic",sans-serif); color:var(--fg-mute); }

/* ── mobile ≤860 ── */
@media(max-width:860px){
  .v3-sentence{ flex-direction:column; align-items:stretch; }
  .v3-mein{ margin-bottom:2px; }
  .v3-blk,.v3-addcond,.v3-conn{ align-self:flex-start; }
  .v3-livecount{ margin-inline-start:0; width:100%; justify-content:flex-end; padding-top:8px; border-top:1px dashed var(--line-2); }
  /* only HERE does the scope-months caption drop to its own line under the
     select — desktop keeps it single-line inline (see .v3-meta-item above) */
  .v3-meta-item{ flex-wrap:wrap; }
  #fv2ScopeMonths{ flex-basis:100%; }

  .v3-actionbar{ position:fixed; inset-inline:8px; bottom:8px; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; z-index:60; }
  .v3-actionbar::-webkit-scrollbar{ display:none; }
  .v3-spacer{ display:none; }
  .v3-selcount{ padding-inline-end:2px; }
  .v3-actionbar .u-btn{ flex:none; height:40px; padding-inline:16px; }
  .v3-actionbar #v3SaveQBtn{ display:none; }
  .v3-actionbar #fv2AssignBtn{ color:#fff; background:linear-gradient(135deg,var(--orange),var(--orange-deep)); border-color:transparent; }

  .v3-card-h{ position:relative; }
  .v3-mobile-save-q{ display:inline-flex; margin-inline-start:auto; }

  .u-table input,.u-table select,#fv2Ans input,#fv2Ans select{ font-size:16px; }
}