/* ============================================================
   Feedwrk — extra UI elements for the handbook layer.
   Token-driven; pairs with tokens.css + feedwrk-ui.css.
   Proposed (LEARNINGS L-054) for promotion into the core toolkit.
   Pictogram · code window · upload · wizard steps · tooltip.
   ============================================================ */

/* ---- pictogram: a single-stroke glyph in a rounded accent tile ----------
   The app uses the monochrome VOLTAGE pictogram (module marks, the org tile).
   The colour family (azure / emerald / coral / gold / violet) is the LANDING
   pictogram — see the Landing Handbook. One icon family, single-stroke, 24px
   grid. Never emoji; the sparkles glyph = AI / Enrich. */
.fw-picto{width:46px;height:46px;border-radius:var(--r-3);display:grid;place-items:center;flex:none;
  color:var(--voltage);background:var(--voltage-tint)}
.fw-picto svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.fw-picto--sm{width:34px;height:34px;border-radius:var(--r-2)} .fw-picto--sm svg{width:18px;height:18px}
.fw-picto--lg{width:64px;height:64px} .fw-picto--lg svg{width:30px;height:30px}
.fw-picto--ink{color:var(--ink-3);background:var(--surface-sunken)}     /* neutral / inactive */

/* ---- code window: framed machine text (feed URLs, snippets, CLI) --------
   Mono only. Keys are voltage; everything else stays ink — no signal colours
   as decoration. A dark variant for terminals / landing surfaces. */
.fw-codewindow{border:1px solid var(--rule);border-radius:var(--r-3);background:var(--surface);overflow:hidden}
.fw-codewindow .cw-bar{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;background:var(--surface-sunken);border-bottom:1px solid var(--rule)}
.fw-codewindow .cw-dots{display:inline-flex;gap:6px}
.fw-codewindow .cw-dots i{width:10px;height:10px;border-radius:50%;background:var(--rule-strong)}
.fw-codewindow .cw-name{font-family:var(--font-mono);font-size:12px;color:var(--ink-4)}
.fw-codewindow .cw-copy{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--rule-strong);border-radius:var(--r-1);background:var(--surface);color:var(--ink-3);font-size:12px;cursor:pointer}
.fw-codewindow .cw-copy:hover{background:var(--state-hover);color:var(--ink-1)}
.fw-codewindow .cw-copy svg{width:13px;height:13px}
.fw-codewindow .cw-body{margin:0;padding:14px 16px;overflow:auto;font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--ink-2);tab-size:2}
.fw-codewindow .cw-body .ln{color:var(--ink-5);user-select:none;display:inline-block;width:20px;text-align:right;margin-right:14px}
.fw-codewindow .cw-k{color:var(--voltage)}            /* key / attribute / keyword */
.fw-codewindow .cw-v{color:var(--ink-1)}              /* value / string */
.fw-codewindow .cw-c{color:var(--ink-4)}              /* comment */
.fw-codewindow .cw-t{color:var(--ink-1);font-weight:600} /* tag / element name */
/* dark variant — terminal / landing */
.fw-codewindow--dark{background:#14141e;border-color:rgba(255,255,255,.1)}
.fw-codewindow--dark .cw-bar{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.08)}
.fw-codewindow--dark .cw-dots i{background:rgba(255,255,255,.22)}
.fw-codewindow--dark .cw-name{color:rgba(255,255,255,.55)}
.fw-codewindow--dark .cw-copy{background:transparent;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.7)}
.fw-codewindow--dark .cw-copy:hover{background:rgba(255,255,255,.1);color:#fff}
.fw-codewindow--dark .cw-body{color:rgba(255,255,255,.82)}
.fw-codewindow--dark .cw-ln,.fw-codewindow--dark .cw-body .ln{color:rgba(255,255,255,.3)}
.fw-codewindow--dark .cw-k{color:#b9a7ff} .fw-codewindow--dark .cw-v{color:#fff} .fw-codewindow--dark .cw-c{color:rgba(255,255,255,.4)}

/* ---- upload / drop zone --------------------------------------------------*/
.fw-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:1.5px dashed var(--rule-strong);border-radius:var(--r-3);background:var(--surface);
  padding:var(--s-8) var(--s-6);text-align:center;cursor:pointer;transition:border-color var(--motion-fast),background var(--motion-fast)}
.fw-upload:hover{border-color:var(--voltage);background:var(--voltage-tint)}
.fw-upload .ico{width:40px;height:40px;border-radius:50%;background:var(--surface-sunken);color:var(--ink-3);display:grid;place-items:center}
.fw-upload .ico svg{width:20px;height:20px}
.fw-upload .t{font-size:14px;color:var(--ink-1);font-weight:500}
.fw-upload .t b{color:var(--voltage);font-weight:600}
.fw-upload .h{font-size:12px;color:var(--ink-4)}

/* ---- wizard steps (progress indicator) -----------------------------------*/
.fw-steps{display:flex;align-items:flex-start}
.fw-steps .st{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.fw-steps .st::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--rule)}
.fw-steps .st:first-child::before{display:none}
.fw-steps .st.done::before,.fw-steps .st.current::before{background:var(--voltage)}
.fw-steps .dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface);
  border:2px solid var(--rule);color:var(--ink-4);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.fw-steps .st.done .dot{background:var(--voltage);border-color:var(--voltage);color:#fff}
.fw-steps .st.current .dot{border-color:var(--voltage);color:var(--voltage)}
.fw-steps .dot svg{width:15px;height:15px}
.fw-steps .lb{margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.fw-steps .st.current .lb{color:var(--ink-1);font-weight:600}

/* ---- tooltip -------------------------------------------------------------*/
.fw-tooltip{position:relative;display:inline-flex}
.fw-tooltip .tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  background:var(--ink-1);color:#fff;font-size:12px;line-height:1.4;padding:6px 10px;border-radius:var(--r-1);
  white-space:nowrap;box-shadow:var(--shadow-pop);pointer-events:none;z-index:var(--z-toast)}
.fw-tooltip .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink-1)}

/* ---- THE LOGO — the feedwrk wordmark ------------------------------------
   Canonical file: design-system/brand/feedwrk-logo.svg.
   HARD RULE (accepted by Kaspars, 2026-07-08): this wordmark is the one
   brand mark, used everywhere the brand shows. Inline it as a symbol and
   render via currentColor (ink on light; on-dark text on dark — see
   direction.css for the landing dark override). Never redraw, re-set in
   type, stretch, recolour outside ink/white, or add effects. Min 16px. */
.fw-logo{height:20px;width:auto;aspect-ratio:2379.6/459.3;display:block;
  fill:currentColor;color:var(--ink-1)}
.fw-logo--lg{height:26px}