/* faz1/circles.css · B4 · #f1-circles overlay. Every selector starts with #f1-circles or an f1c- class.
 * Transitions: none. The asking pulse is a CSS animation, only while #f1-app[data-playing="true"].
 */
#f1-circles { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 30;
  font-family: var(--f1-sans, "Segoe UI", -apple-system, Arial, sans-serif); }
/* a played position that sets a new world of circles (circles.reset): the old world's circles leave at its start and the new
   ones fade in with its overlays part (app.js runApply; SENARYO-ILKELERI 50: the old ones were laid on the moving map for a
   few frames) */
#f1-circles.f1c-bekle { visibility: hidden; }
#f1-circles .f1c-c { pointer-events: auto; cursor: pointer; }
#f1-circles .f1c-c .f1c-mark-bg, #f1-circles .f1c-c .f1c-mark-ic, #f1-circles .f1c-c .f1c-body,
#f1-circles .f1c-c .f1c-ring, #f1-circles .f1c-c .f1c-fill { transform-box: fill-box; transform-origin: center; }
#f1-circles .f1c-mark { transform-box: view-box; }

/* family fills (kernel tokens with the light values as fallbacks) */
.f1c-c .f1c-fill { fill: var(--fam-work, #22508F); stroke: none; }
.f1c-c .f1c-label { fill: var(--fam-work-ink, #FFFFFF); font-weight: 650; letter-spacing: -0.02em; pointer-events: none; }
.f1c-c.fam-question .f1c-fill { fill: var(--fam-question, #D6A63C); }
.f1c-c.fam-question .f1c-label { fill: #1d1a12; }
.f1c-c.fam-vote .f1c-fill { fill: var(--fam-vote, #C86A52); }
.f1c-c.fam-day .f1c-fill { fill: var(--fam-day, #86ABD6); }
.f1c-c.fam-day .f1c-label { fill: #0e1520; }
.f1c-c.fam-doc .f1c-fill { fill: var(--fam-doc, #EFE9DC); stroke: var(--baski, #1A1A1A); stroke-width: 0.9; }
.f1c-c.fam-doc .f1c-label { fill: var(--baski, #1A1A1A); }
.f1c-c.fam-root .f1c-fill, .f1c-c.fam-serh .f1c-fill { fill: var(--fam-root, #FFFFFF); stroke: var(--pro-ink, #202630); stroke-width: 1.2; }
.f1c-c.fam-root .f1c-label, .f1c-c.fam-serh .f1c-label { fill: var(--pro-ink, #202630); }
.f1c-c.fam-serh .f1c-glyph { fill: none; stroke: var(--fam-vote, #C86A52); stroke-width: 0.16; }
.f1c-c.fam-oneri .f1c-fill { fill: none; stroke: var(--pro-muted, #89919d); stroke-width: 1.2; stroke-dasharray: 3 2; }
.f1c-c.fam-oneri .f1c-label { fill: var(--pro-text2, #58616f); }
.f1c-c .f1c-dogear { fill: rgba(255, 255, 255, 0.55); stroke: none; pointer-events: none; }
.f1c-c.fam-doc .f1c-dogear { fill: #d8cfbb; }
.f1c-c.f1c-pkg .f1c-pkg-back { fill: none; stroke: var(--fam-work, #22508F); stroke-width: 1.1; opacity: 0.7; }
.f1c-c.f1c-pkg.fam-question .f1c-pkg-back { stroke: var(--fam-question, #D6A63C); }
.f1c-c.f1c-proposed .f1c-fill { fill: none; stroke: var(--pro-muted, #89919d); stroke-width: 1.2; stroke-dasharray: 3 2; }
.f1c-c.f1c-proposed .f1c-label { fill: var(--pro-text2, #58616f); }

/* check circles */
.f1c-c.f1c-check .f1c-chk { fill: var(--chk-wait, #89919d); }
.f1c-c.f1c-check.t-ok .f1c-chk, .f1c-c.f1c-check.t-explained .f1c-chk { fill: var(--chk-ok, #27A37A); }
.f1c-c.f1c-check.t-warn .f1c-chk, .f1c-c.f1c-check.t-exception .f1c-chk { fill: var(--chk-warn, #D9A000); }
.f1c-c.f1c-check.t-crit .f1c-chk { fill: var(--chk-crit, #D23A2E); }
.f1c-c .f1c-chk-t { font-size: 8.5px; font-weight: 650; fill: var(--pro-text2, #58616f); }
.f1c-c .f1c-chk-l { font-size: 8px; fill: var(--pro-text2, #58616f); }

/* rings (kernel classes) */
.f1c-c .f1c-ring { fill: none; stroke: transparent; stroke-width: 2; }
.f1c-c.r-asking .f1c-ring { stroke: var(--ring-ask, #E07F14); stroke-width: 2.2; }
.f1c-c.r-waiting .f1c-ring { stroke: var(--ring-ask, #E07F14); stroke-dasharray: 2 2.5; opacity: 0.7; }
.f1c-c.r-risk .f1c-ring { stroke: var(--ring-risk, #D9A000); stroke-width: 2.2; }
.f1c-c.r-blocked .f1c-ring { stroke: var(--ring-block, #D23A2E); stroke-width: 2.4; }
.f1c-c.r-crashed .f1c-ring { stroke: var(--ring-block, #D23A2E); stroke-width: 2.4; stroke-dasharray: 4 2; }
.f1c-c .f1c-arc { fill: none; stroke: var(--arc, #27A37A); stroke-width: 2.4; stroke-linecap: round; }
#f1-app[data-playing="true"] #f1-circles .r-asking .f1c-ring { animation: f1c-ask 1.6s ease-in-out infinite; }
@keyframes f1c-ask { 0%, 100% { opacity: 1; stroke-width: 2.2; } 50% { opacity: 0.35; stroke-width: 3.6; } }

/* gone: implode leaves a faint dot */
.f1c-c.f1c-gone { opacity: 0.28; }

/* marks */
.f1c-c .f1c-mark-bg { fill: var(--pro-bg, #ffffff); stroke: var(--pro-ink, #202630); stroke-width: 0.8; }
.f1c-c .f1c-mark-ic { fill: none; stroke: var(--pro-ink, #202630); stroke-width: 0.16; stroke-linecap: round; stroke-linejoin: round; }
.f1c-c .f1c-mark-tx { fill: var(--pro-ink, #202630); font-weight: 700; }
.f1c-c .m-lock .f1c-mark-bg, .f1c-c .m-seal .f1c-mark-bg { stroke: var(--fam-vote, #C86A52); }
.f1c-c .m-seal .f1c-mark-ic { fill: var(--fam-vote, #C86A52); stroke: none; }
.f1c-c .m-tick-person .f1c-mark-ic { stroke: var(--tukenmez-lacivert, #1E2466); stroke-width: 0.22; }
.f1c-c .m-tick-rule .f1c-mark-ic { stroke: var(--st-wait, #89919d); stroke-width: 0.22; }
.f1c-c .m-exception .f1c-mark-tx, .f1c-c .m-missing .f1c-mark-tx { fill: var(--st-crit, #d23a2e); }
.f1c-c .m-later .f1c-mark-tx { fill: var(--pro-accent, #5267d8); }
.f1c-c .m-key .f1c-mark-ic { stroke: var(--fam-vote, #C86A52); }

/* chip and labels (kernel paint-order halo) */
.f1c-c .f1c-chip rect { fill: var(--pro-focus, #edf1ff); stroke: var(--pro-accent, #5267d8); stroke-width: 0.6; }
.f1c-c .f1c-chip text { fill: var(--pro-accent, #5267d8); font-size: 9px; font-weight: 600; }
#f1-circles .f1c-t { paint-order: stroke; stroke: var(--pro-bg, #ffffff); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
#f1-circles .f1c-title { font-size: 12px; font-weight: 600; fill: var(--pro-ink, #202630); }
#f1-circles .f1c-sub { font-size: 10.5px; fill: var(--pro-text2, #58616f); }
#f1-circles .f1c-open .f1c-title { font-size: 13px; }
#f1-circles .f1c-tray-text { font-size: 11.5px; font-weight: 600; fill: var(--pro-text2, #58616f); }
#f1-circles .f1c-handover { font-size: 11px; font-weight: 700; fill: var(--saffron, #C0691A); }

/* open circle, focus, highlight, dim */
.f1c-c.f1c-open .f1c-fill { stroke: var(--pro-bg, #ffffff); stroke-width: 2; filter: none; }
.f1c-c.f1c-open.fam-work .f1c-fill { fill: color-mix(in srgb, var(--fam-work, #22508F) 16%, var(--pro-bg, #ffffff)); stroke: var(--fam-work, #22508F); stroke-width: 2; }
.f1c-c.f1c-open.fam-work .f1c-label { fill: var(--fam-work, #22508F); opacity: 0.22; }
.f1c-c.f1c-open .f1c-ring { stroke-width: 3; }
.f1c-c.f1c-focus .f1c-fill, .f1c-c.f1-cue .f1c-fill { stroke: var(--saffron, #C0691A); stroke-width: 2.4; }
.f1c-c.f1c-dimmed { opacity: 0.35; }
.f1c-c.f1c-gone.f1c-dimmed { opacity: 0.15; }
/* on the map behind an open card's scrim (circles.js hideCovered): faded with the map */
.f1c-c.f1c-behind { opacity: 0.3; }
.f1c-c.f1c-behind.f1c-dimmed { opacity: 0.2; }

/* + N fold, pills */
#f1-circles .f1c-plus circle { fill: var(--pro-bg, #ffffff); stroke: var(--pro-muted, #89919d); stroke-width: 1.1; stroke-dasharray: 2.5 2; }
#f1-circles .f1c-plus text { fill: var(--pro-text2, #58616f); font-weight: 650; }
#f1-circles .f1c-pill rect { fill: var(--pro-panel, #ffffff); stroke: var(--pro-line, #e5e8ee); }
#f1-circles .f1c-pill text { font-size: 11px; font-weight: 650; fill: var(--pro-ink, #202630); }
#f1-circles .f1c-pill .f1c-pill-dot { fill: var(--fam-work, #22508F); }
#f1-circles .f1c-pill.r-asking .f1c-pill-dot { fill: var(--ring-ask, #E07F14); }
#f1-circles .f1c-pill.r-risk .f1c-pill-dot { fill: var(--ring-risk, #D9A000); }
#f1-circles .f1c-pill.r-blocked .f1c-pill-dot, #f1-circles .f1c-pill.r-crashed .f1c-pill-dot { fill: var(--ring-block, #D23A2E); }

/* links (kernel .overlay .ln): faint at rest, full on highlight / focus / hover */
#f1-circles .f1c-link { opacity: 0.26; }
#f1-circles .f1c-link.f1c-strong { opacity: 1; }
#f1-circles .f1c-ln { fill: none; stroke-width: 1.6; stroke-linecap: round; }
#f1-circles .f1c-ln-label { font-size: 10.5px; fill: var(--pro-text2, #58616f); }
#f1-circles .k-mirror { --f1c-k: var(--k-mirror, #3478C0); }
#f1-circles .k-aggregate { --f1c-k: var(--k-aggregate, #23946A); }
#f1-circles .k-propagate { --f1c-k: var(--k-propagate, #D18A06); }
#f1-circles .k-depend { --f1c-k: var(--k-depend, #7755C8); }
#f1-circles .k-inherit { --f1c-k: var(--k-inherit, #1E97A6); }
#f1-circles .k-forward { --f1c-k: var(--k-forward, #6F7C90); }
#f1-circles .k-summarize { --f1c-k: var(--k-summarize, #C2508A); }
#f1-circles .k-escalate { --f1c-k: var(--k-escalate, #D0453A); }
#f1-circles .k-family { --f1c-k: var(--k-family, #9AA1AB); }
#f1-circles .k-question { --f1c-k: var(--k-question, #E07F14); }
#f1-circles .k-reference { --f1c-k: var(--k-reference, #6F7C90); }
#f1-circles .f1c-link .f1c-ln, #f1-circles .f1c-draw { stroke: var(--f1c-k); }
#f1-circles .f1c-link .f1c-ln-dot, #f1-circles .f1c-deliver { fill: var(--f1c-k, var(--pro-accent, #5267d8)); }
#f1-circles .k-mirror .f1c-ln { stroke-dasharray: 6 4; }
#f1-circles .k-propagate .f1c-ln { stroke-dasharray: 1.5 4; stroke-width: 2.2; }
#f1-circles .k-depend .f1c-ln { stroke-dasharray: 8 3; }
#f1-circles .k-inherit .f1c-ln { stroke-dasharray: 2 3; }
#f1-circles .k-forward .f1c-ln { stroke-dasharray: 9 3 2 3; }
#f1-circles .k-summarize .f1c-ln { stroke-width: 1.2; }
#f1-circles .k-escalate .f1c-ln { stroke-dasharray: 3 3; }
#f1-circles .k-family .f1c-ln { stroke-dasharray: 1 4; }
#f1-circles .k-question .f1c-ln { stroke-dasharray: 2 3; }
#f1-circles .k-reference .f1c-ln { stroke-dasharray: 1 3; }
#f1-circles .f1c-ln-eye path { fill: var(--pro-bg, #ffffff); stroke: var(--k-reference, #6F7C90); stroke-width: 0.2; }
#f1-circles .f1c-strip-pill rect { fill: var(--pro-panel, #ffffff); stroke: var(--pro-accent, #5267d8); }
#f1-circles .f1c-strip-pill text { font-size: 10.5px; font-weight: 700; fill: var(--pro-accent, #5267d8); }

/* bridges */
#f1-circles .f1c-bridge path { fill: none; stroke: var(--pro-accent, #5267d8); stroke-width: 1.5; stroke-dasharray: 5 4; }
#f1-circles .f1c-bridge circle { fill: var(--pro-accent, #5267d8); }
#f1-circles .f1c-bridge .f1c-bridge-pill { fill: var(--pro-focus, #edf1ff); stroke: var(--pro-accent, #5267d8); stroke-width: 1; stroke-dasharray: none; }
#f1-circles .f1c-bridge text { font-size: 11px; font-weight: 600; fill: var(--pro-accent, #5267d8); }

/* temporary animation elements */
#f1-circles .f1c-temp { pointer-events: none; }
#f1-circles .f1c-temp-ring { fill: none; stroke: var(--pro-ink, #202630); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
#f1-circles .f1c-draw { fill: none; stroke-width: 2; }

/* on paper: light token values in both themes */
#f1-circles .f1c-on-paper { --fam-work: #22508F; --fam-work-ink: #FFFFFF; --fam-root: #FFFFFF; --fam-day: #86ABD6; --fam-question: #D6A63C;
  --fam-vote: #C86A52; --fam-doc: #EFE9DC; --ring-ask: #E07F14; --ring-block: #D23A2E; --ring-risk: #D9A000; --arc: #27A37A;
  --chk-wait: #89919d; --chk-ok: #27A37A; --chk-warn: #D9A000; --chk-crit: #D23A2E; --pro-bg: #ffffff; --pro-ink: #202630; --pro-text2: #58616f; }

/* legend button and panel (bottom-left of the stage) */
.f1c-legend-btn { position: absolute; left: 10px; bottom: 10px; z-index: 31; font: 600 12px var(--f1-sans, "Segoe UI", Arial, sans-serif);
  color: var(--pro-text2, #58616f); background: var(--pro-panel, #ffffff); border: 1px solid var(--pro-line, #e5e8ee); border-radius: 14px;
  padding: 5px 11px; cursor: pointer; box-shadow: var(--f1-shadow, 0 1px 2px rgba(20,30,40,.06)); }
/* in a panel header's tool row it takes the row's button size */
.f1c-legend-btn.f1c-legend-btn-head { position: static; height: 26px; padding: 0 10px; border-radius: 13px; box-shadow: none; white-space: nowrap; flex: none; }
.f1c-legend-btn:hover, .f1c-legend-btn[aria-expanded="true"] { color: var(--pro-accent, #5267d8); border-color: var(--pro-accent, #5267d8); }
.f1c-legend { position: absolute; left: 10px; bottom: 46px; z-index: 31; width: 330px; max-height: calc(100% - 70px); overflow: auto;
  background: var(--pro-panel, #ffffff); color: var(--pro-ink, #202630); border: 1px solid var(--pro-line, #e5e8ee); border-radius: 10px;
  box-shadow: var(--f1-shadow, 0 2px 8px rgba(20,30,40,.08)); padding: 10px 12px 12px; font: 12.5px var(--f1-sans, "Segoe UI", Arial, sans-serif); }
.f1c-legend[hidden] { display: none; }
.f1c-legend .f1c-legend-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.f1c-legend .f1c-legend-x { border: 0; background: none; color: var(--pro-text2, #58616f); font-size: 14px; cursor: pointer; padding: 2px 6px; }
.f1c-legend .f1c-legend-lead { margin: 6px 0 4px; color: var(--pro-text2, #58616f); }
.f1c-legend .f1c-legend-sec h4 { margin: 10px 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--pro-text2, #58616f); }
.f1c-legend .f1c-legend-row { display: grid; grid-template-columns: 30px auto 1fr; gap: 6px; align-items: center; padding: 2px 0; }
.f1c-legend .f1c-legend-row b { font-weight: 600; white-space: nowrap; }
.f1c-legend .f1c-legend-row span { color: var(--pro-text2, #58616f); }
.f1c-legend .f1c-ln { fill: none; stroke: var(--f1c-k); stroke-width: 2; }
.f1c-legend .k-mirror { --f1c-k: var(--k-mirror, #3478C0); } .f1c-legend .k-mirror .f1c-ln { stroke-dasharray: 6 4; }
.f1c-legend .k-aggregate { --f1c-k: var(--k-aggregate, #23946A); }
.f1c-legend .k-propagate { --f1c-k: var(--k-propagate, #D18A06); } .f1c-legend .k-propagate .f1c-ln { stroke-dasharray: 1.5 4; }
.f1c-legend .k-depend { --f1c-k: var(--k-depend, #7755C8); } .f1c-legend .k-depend .f1c-ln { stroke-dasharray: 8 3; }
.f1c-legend .k-forward { --f1c-k: var(--k-forward, #6F7C90); } .f1c-legend .k-forward .f1c-ln { stroke-dasharray: 9 3 2 3; }
.f1c-legend .k-escalate { --f1c-k: var(--k-escalate, #D0453A); } .f1c-legend .k-escalate .f1c-ln { stroke-dasharray: 3 3; }
.f1c-legend .k-family { --f1c-k: var(--k-family, #9AA1AB); } .f1c-legend .k-family .f1c-ln { stroke-dasharray: 1 4; }
.f1c-legend .k-reference { --f1c-k: var(--k-reference, #6F7C90); } .f1c-legend .k-reference .f1c-ln { stroke-dasharray: 1 3; }
#f1-circles .f1c-about { font-size: 12px; font-weight: 600; fill: var(--pro-accent, #5267d8); }   /* what an opened circle is (Leo 2026-10-14) */