/* ==========================================================================
   Algorithm Atlas — the few pieces the shared Fanout skin does not cover:
   lesson kinds (topic vs pattern), problem difficulty in the rail, the map's
   problems toggle, and the embedded visualiser on the home page.
   ========================================================================== */

/* patterns are marked with a small diamond wherever lessons are listed */
.side-lesson[data-kind="pattern"] .side-lesson-t::after,
.rel-item[data-kind="pattern"] .rel-t::after { content: " ◆"; font-size: 8px; color: var(--ink-4); vertical-align: 2px; }
.lcard-kind { font-family: var(--mono); font-size: 10px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--ink-3); }
.lcard[data-kind="pattern"] { background: linear-gradient(135deg, var(--surface) 70%, var(--surface-2)); }

.side-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.side-link:hover .side-meta { display: none; }

/* difficulty letter in the practice rail */
.rel-diff {
  font-family: var(--mono); font-size: 9.5px; width: 16px; height: 16px; flex: none; border-radius: 4px;
  display: inline-grid; place-items: center; align-self: center; color: var(--on-hue); background: var(--good-text);
}
.rel-diff[data-d="medium"] { background: var(--warn-text); }
.rel-diff[data-d="hard"] { background: var(--bad-text); }

/* roadmap lesson rows carry codes */
.rm-code { font-family: var(--mono); font-size: 10px; color: var(--ink-4); flex: none; }

/* knowledge map: problems toggle */
.gm-prob { margin-left: 4px; }
.gm-prob i { background: transparent; border: 1.5px solid var(--ink-3); border-radius: 2px; }
.gm-prob[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); opacity: 1; }
.gm-prob[aria-pressed="true"] i { border-color: var(--ground); }
.gm-prob[aria-pressed="false"] { opacity: 1; }

/* home: the running visualiser sits in a framed card */
.lp-demo .viz, .lp-demo > div:last-child { border-radius: var(--r-lg); }

/* old pattern-page helpers restyled to the flat look */
.sig { border-radius: var(--r-sm); }
.cx { border-radius: var(--r-xs); font-family: var(--mono); }
.diff { border-radius: var(--r-xs); font-family: var(--mono); }
.prow { border-radius: var(--r-sm); }

/* stacked-card art uses a hue that exists in this palette */
.stack-art > span:nth-child(4) { background: var(--t-tree); }

/* pattern signals: flat rows with a hairline, not a tinted slab */
.sig { background: var(--surface); border: 1px solid var(--line-2); box-shadow: none; }

/* roadmap header + legend (the ported roadmap view uses these) */
.rm-head { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.rm-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-fine); color: var(--ink-3); }
.rm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rm-legend i { width: 9px; height: 9px; border-radius: 99px; display: block; }