/*
  Fireloop Forge: review layer (Home + Solutions/Forklifts).
  Select any text on a page -> "Comment on this" -> the comment is kept in this
  browser and listed in the review panel, with Go to it / Edit / Mark done / Delete.
  Everything here is namespaced .fl-* so it cannot collide with the site itself.
*/
.fl-ui{
  --fl-bg:#fff;
  --fl-fg:var(--fg,#15141F);
  --fl-muted:var(--muted,#565566);
  --fl-subtle:var(--subtle,#85849A);
  --fl-line:var(--line,#E6E6EC);
  --fl-line-2:var(--line-strong,#D2D2DA);
  --fl-surface:var(--surface,#FAFAFB);
  --fl-surface-2:var(--surface-2,#F0F0F4);
  --fl-accent:var(--accent,#403D82);
  --fl-accent-soft:var(--accent-soft,#EEEDF7);
  --fl-fail:var(--fail,#B42318);
  --fl-fail-soft:var(--fail-soft,#FBEBE9);
  --fl-pass:var(--pass,#1D7A4C);
  --fl-pass-soft:var(--pass-soft,#E8F3EC);
  --fl-mark:#FFE7A3;
  --fl-mark-line:#D8A62B;
  --fl-sans:var(--sans,"SUSE",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif);
  --fl-mono:var(--mono,"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace);
  font-family:var(--fl-sans);
  color:var(--fl-fg);
  font-size:14px;
  line-height:1.5;
  box-sizing:border-box;
}
.fl-ui *,.fl-ui *::before,.fl-ui *::after{box-sizing:border-box}
.fl-ui button{font-family:inherit;cursor:pointer}

/* ── the highlight left on commented text ── */
mark.fl-ann{background:var(--fl-mark);color:inherit;border-bottom:2px solid var(--fl-mark-line);border-radius:2px;padding:1px 0;cursor:pointer}
mark.fl-ann.done{background:var(--accent-soft,#EEEDF7);border-bottom-color:var(--accent,#403D82)}
mark.fl-ann.act{background:#FFD35C;box-shadow:0 0 0 4px rgba(255,211,92,.35)}
@media (prefers-reduced-motion:no-preference){mark.fl-ann{transition:background .15s ease,box-shadow .15s ease}}

/* ── "Comment on this" bubble above a selection ── */
.fl-bubble{position:fixed;z-index:9050;display:none}
.fl-bubble.on{display:block}
.fl-bubble button{display:inline-flex;align-items:center;gap:8px;font:500 13.5px var(--fl-sans);background:var(--fl-fg);color:#fff;border:0;border-radius:8px;padding:9px 14px;box-shadow:0 10px 26px rgba(21,20,31,.28)}
.fl-bubble button:hover{background:var(--fl-accent)}
.fl-bubble svg{width:15px;height:15px;flex:none}

/* ── the write-a-comment popup ── */
.fl-pop{position:fixed;z-index:9100;width:min(380px,calc(100vw - 24px));background:var(--fl-bg);border:1px solid var(--fl-line);border-radius:14px;box-shadow:0 24px 60px rgba(21,20,31,.22);padding:16px;display:none}
.fl-pop.on{display:block}
.fl-where{font:500 11px var(--fl-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fl-subtle);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-where b{font-weight:500;color:var(--fl-accent)}
.fl-quote{font-size:13px;color:var(--fl-muted);background:var(--fl-surface);border-left:3px solid var(--fl-mark-line);border-radius:0 6px 6px 0;padding:9px 11px;margin-bottom:12px;max-height:96px;overflow:auto;line-height:1.5}
.fl-pop textarea{width:100%;min-height:96px;font:15px/1.5 var(--fl-sans);color:var(--fl-fg);background:var(--fl-bg);border:1px solid var(--fl-line-2);border-radius:10px;padding:10px 12px;resize:vertical;outline:0}
.fl-pop textarea:focus{border-color:var(--fl-accent)}
.fl-pop textarea::placeholder{color:var(--fl-subtle)}
.fl-row{display:flex;gap:8px;align-items:center;margin-top:12px}
.fl-row .sp{margin-left:auto}
.fl-hint{font:11px var(--fl-mono);color:var(--fl-subtle);margin-top:8px}

/* ── buttons shared by popup and panel ── */
.fl-b{font:500 13px var(--fl-sans);border-radius:8px;padding:9px 14px;border:1px solid transparent;background:var(--fl-fg);color:#fff;white-space:nowrap}
.fl-b:hover{background:#2A2938}
.fl-b.ghost{background:var(--fl-bg);color:var(--fl-fg);border-color:var(--fl-line-2)}
.fl-b.ghost:hover{background:var(--fl-surface);border-color:var(--fl-fg)}
.fl-b.danger{background:var(--fl-bg);color:var(--fl-fail);border-color:var(--fl-line-2)}
.fl-b.danger:hover{background:var(--fl-fail-soft);border-color:var(--fl-fail)}

/* ── floating dock button ── */
.fl-dock{position:fixed;right:20px;bottom:20px;z-index:9010;display:inline-flex;align-items:center;gap:9px;font:500 14px var(--fl-sans);background:var(--fl-fg);color:#fff;border:0;border-radius:999px;padding:12px 18px;box-shadow:0 12px 32px rgba(21,20,31,.26)}
.fl-dock:hover{background:var(--fl-accent)}
.fl-dock svg{width:17px;height:17px;flex:none}
.fl-dock b{font:500 12px var(--fl-mono);background:rgba(255,255,255,.2);border-radius:999px;padding:2px 8px;min-width:24px;text-align:center}
.fl-dock b:empty{display:none}
.fl-dock[data-open="1"]{display:none}
@media (max-width:640px){.fl-dock{right:14px;bottom:14px;padding:11px 15px;font-size:13px}}

/* ── the comment list panel ── */
.fl-panel{position:fixed;top:0;right:0;bottom:0;z-index:9000;width:min(400px,100vw);background:var(--fl-bg);border-left:1px solid var(--fl-line);box-shadow:-18px 0 46px rgba(21,20,31,.14);display:none;flex-direction:column}
.fl-panel.on{display:flex}
@media (prefers-reduced-motion:no-preference){.fl-panel.on{animation:fl-slide .22s ease}}
@keyframes fl-slide{from{transform:translateX(18px);opacity:0}to{transform:none;opacity:1}}
.fl-panel > header{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid var(--fl-line)}
.fl-panel > header .t{display:flex;flex-direction:column;gap:3px;min-width:0}
.fl-panel > header b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.fl-panel > header span{font:11px var(--fl-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fl-subtle)}
.fl-x{margin-left:auto;background:none;border:0;color:var(--fl-subtle);font-size:22px;line-height:1;padding:4px 6px;border-radius:6px;flex:none}
.fl-x:hover{background:var(--fl-surface-2);color:var(--fl-fg)}

.fl-snap{padding:12px 18px;border-bottom:1px solid var(--fl-line);background:var(--fl-accent-soft);color:var(--fl-accent);font-size:12.5px;line-height:1.5}
.fl-snap b{font-weight:600}
.fl-snap b:first-child{display:block;margin-bottom:2px}

.fl-note{padding:12px 18px;border-bottom:1px solid var(--fl-line);background:#FFF8E6;color:#6B5312;font-size:12.5px;line-height:1.5}
.fl-note b{display:block;font-weight:600;color:#4A3908;margin-bottom:2px}

.fl-who{padding:14px 18px;border-bottom:1px solid var(--fl-line);background:var(--fl-surface)}
.fl-who label{display:flex;flex-direction:column;gap:6px;font:500 11px var(--fl-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fl-subtle)}
.fl-who input{font:14px var(--fl-sans);color:var(--fl-fg);background:var(--fl-bg);border:1px solid var(--fl-line-2);border-radius:8px;padding:9px 11px;outline:0}
.fl-who input:focus{border-color:var(--fl-accent)}

.fl-filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-bottom:1px solid var(--fl-line)}
.fl-chips{display:flex;gap:4px;background:var(--fl-surface-2);border-radius:999px;padding:3px}
.fl-chips button{font:500 12px var(--fl-sans);color:var(--fl-muted);background:transparent;border:0;border-radius:999px;padding:5px 11px}
.fl-chips button:hover{color:var(--fl-fg)}
.fl-chips button[aria-pressed="true"]{background:var(--fl-bg);color:var(--fl-fg);box-shadow:0 1px 3px rgba(21,20,31,.12)}

.fl-list{flex:1 1 auto;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.fl-empty{border:1px dashed var(--fl-line-2);border-radius:12px;padding:26px 20px;text-align:center;color:var(--fl-subtle);font-size:13.5px;line-height:1.65}
.fl-empty b{color:var(--fl-fg);font-weight:500}

.fl-item{border:1px solid var(--fl-line);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;gap:9px;background:var(--fl-bg)}
.fl-item.done{background:var(--fl-surface);border-color:var(--fl-line-2)}
.fl-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:500 10.5px var(--fl-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fl-subtle)}
.fl-tag{background:var(--fl-accent-soft);color:var(--fl-accent);border-radius:4px;padding:2px 7px}
.fl-tag.ok{background:var(--fl-pass-soft);color:var(--fl-pass)}
.fl-meta .at{margin-left:auto;letter-spacing:0;text-transform:none;font-family:var(--fl-sans);font-size:11px}
.fl-sect{font-size:12.5px;color:var(--fl-muted);line-height:1.4}
.fl-sect b{color:var(--fl-fg);font-weight:500}
.fl-item blockquote{margin:0;font-size:12.5px;color:var(--fl-muted);background:var(--fl-surface);border-left:3px solid var(--fl-mark-line);border-radius:0 6px 6px 0;padding:8px 10px;line-height:1.5}
.fl-item.done blockquote{border-left-color:var(--fl-accent);background:var(--fl-bg)}
.fl-body{font-size:14px;color:var(--fl-fg);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.fl-item.done .fl-body{color:var(--fl-muted)}
.fl-acts{display:flex;flex-wrap:wrap;gap:6px}
.fl-acts button{font:500 12px var(--fl-sans);color:var(--fl-muted);background:var(--fl-bg);border:1px solid var(--fl-line);border-radius:7px;padding:5px 10px}
.fl-acts button:hover{border-color:var(--fl-accent);color:var(--fl-accent)}
.fl-acts button[data-act="del"]:hover,.fl-acts button.arm{border-color:var(--fl-fail);color:var(--fl-fail);background:var(--fl-fail-soft)}

.fl-panel > footer{display:flex;flex-direction:column;gap:9px;padding:12px 18px;border-top:1px solid var(--fl-line);background:var(--fl-surface)}
.fl-fbtns{display:flex;flex-wrap:wrap;gap:6px}
.fl-panel > footer .fl-b{font-size:12px;padding:7px 11px}
.fl-panel > footer .fl-b:disabled{opacity:.5;cursor:default}
.fl-tog{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--fl-muted);cursor:pointer}
.fl-tog input{accent-color:var(--fl-accent);width:14px;height:14px;cursor:pointer}

/* ── toast ── */
.fl-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);z-index:9200;background:var(--fl-fg);color:#fff;font:14px var(--fl-sans);padding:12px 20px;border-radius:10px;box-shadow:0 16px 38px rgba(21,20,31,.3);opacity:0;pointer-events:none;max-width:min(520px,calc(100vw - 32px));text-align:center;line-height:1.45}
.fl-toast.on{opacity:1;transform:translateX(-50%)}
@media (prefers-reduced-motion:no-preference){.fl-toast{transition:opacity .18s ease,transform .18s ease}}

@media (max-width:640px){
  .fl-panel{width:100vw;border-left:0}
  .fl-panel > footer{gap:8px}
}
@media print{.fl-ui{display:none!important}mark.fl-ann{background:none;border-bottom:1px solid #999}}