/* Widget primitives for Days 6-25, appended to each chapter's own style block.
   Everything below is expressed in the site's existing custom properties, so
   light mode and any future theme change carry through with no extra work. */

/* steppable code listing */
.wcode{background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:9px 0;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.75}
.wln{display:flex;gap:12px;padding:0 14px;white-space:pre;color:var(--tx2)}
.wln .wn{flex:0 0 22px;text-align:right;color:var(--tx3);font-size:11.5px;user-select:none}
.wln.on{background:rgba(77,163,255,.14);color:var(--tx);box-shadow:inset 3px 0 0 var(--ac)}
.wln.past{opacity:.5}

/* sort bars */
.wbars{display:flex;align-items:flex-end;gap:5px;height:150px;margin-bottom:24px}
.wbar{flex:1;background:var(--ac);border-radius:4px 4px 0 0;position:relative;
  transition:height .25s,background .25s;min-height:3px}
.wbar.cmp{background:var(--warn)}
.wbar.swp{background:var(--bad)}
.wbar.done{background:var(--good)}
.wbar i{position:absolute;bottom:-19px;left:0;right:0;text-align:center;
  font-style:normal;font-size:10.5px;font-family:var(--mono);color:var(--tx3)}

/* hash buckets */
.wbuckets{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
.wbucket{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px;min-height:58px}
.wbucket.hot{border-color:var(--warn)}
.wkey{font-family:var(--mono);font-size:11.5px;background:var(--bg3);border-radius:5px;
  padding:3px 7px;margin-top:4px;color:var(--ac2)}
.wkey.new{background:rgba(240,180,41,.18);color:var(--warn)}

/* class / object boxes */
.wcls{background:var(--bg);border:1px solid var(--line);border-radius:9px;
  overflow:hidden;min-width:164px}
.wcls.hot{border-color:var(--warn);box-shadow:0 0 0 2px rgba(240,180,41,.18)}
.wcls-n{background:var(--bg3);padding:7px 12px;font-weight:650;font-size:13.5px;
  color:var(--ac);border-bottom:1px solid var(--line)}
.wcls-r{padding:6px 12px;font-family:var(--mono);font-size:11.5px;color:var(--tx2);
  border-bottom:1px dashed var(--line)}
.wcls-r:last-child{border-bottom:0}
.wcls-r b{color:var(--pur);font-weight:400}

/* flow chart */
.wnode{background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:9px 15px;font-size:13.5px;text-align:center;min-width:190px;transition:.15s}
.wnode.cond{border-radius:22px;border-color:var(--warn)}
.wnode.on{border-color:var(--ac);background:rgba(77,163,255,.12);box-shadow:0 0 0 2px rgba(77,163,255,.15)}
.wnode.past{opacity:.45}
.warrow{width:2px;height:17px;background:var(--line);position:relative}
.warrow::after{content:"";position:absolute;bottom:0;left:-3px;
  border:4px solid transparent;border-top-color:var(--line)}

/* before / after wipe */
.wdiff{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.wdiff-l pre{margin:0;padding:14px;font-family:var(--mono);font-size:12.5px;
  line-height:1.6;overflow-x:auto}
.wdiff-a{position:absolute;inset:0;background:var(--bg)}

/* ordering drill */
.wordi{display:flex;align-items:center;gap:11px;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:9px 12px;cursor:grab}
.wordi code{background:none;padding:0;font-size:12.5px}

/* synchronised python/java compare */
.cln{display:block;padding:0 4px;border-radius:3px;white-space:pre}
.cln.on{background:rgba(77,163,255,.16)}

/* the widget header hint sits right, next to the badge */
.widget-h .mini{white-space:nowrap}