/* Shared styles for the grid-DFS visualizer pages. grid.js builds the board and call-stack markup. */
.fields textarea{
  display:block;width:100%;min-height:44px;max-height:10em;padding:10px 14px;field-sizing:content;resize:vertical;
  font-family:var(--mono);font-size:var(--fs-small);line-height:1.45;border:1.5px solid var(--ink-4);border-radius:6px;
  background:var(--paper);color:var(--ink)
}
.fields textarea:focus-visible{outline-offset:0;border-color:var(--mark)}

/* board: cells follow the container width and scroll sideways only when 24px cells do not fit */
.gscroll{container-type:inline-size;display:flex;overflow-x:auto;margin:0 -12px}
.gwrap{
  --gg:4px;--gc:clamp(24px, (100cqi - 24px - (var(--cols) - 1) * var(--gg)) / var(--cols), 44px);
  position:relative;flex:none;padding:12px
}
.grid{display:grid;grid-template-columns:repeat(var(--cols), var(--gc));gap:var(--gg)}
.gc{
  width:var(--gc);height:var(--gc);padding:0;display:grid;place-items:center;cursor:pointer;
  border:1.5px solid var(--rule);border-radius:6px;background:var(--sheet);color:var(--ink-3);
  font-family:var(--mono);font-size:max(var(--fs-label), calc(var(--gc) * .3));font-weight:700;
  transition:transform calc(var(--dur) * .3) cubic-bezier(.2,.8,.2,1), background-color .25s, border-color .25s, color .25s, box-shadow .25s
}
.gc:hover{border-color:var(--ink)}
.gc.land{background:var(--ink-2);border-color:var(--ink-2);color:var(--paper)}
/* island tints, reused in turn */
.t0{--tint:var(--ok)}
.t1{--tint:var(--mark)}
.t2{--tint:var(--ink-3)}
.t3{--tint:var(--probe)}
.gc.seen{background:color-mix(in srgb, var(--tint) 20%, var(--paper));border-color:var(--tint);color:var(--ink)}
.gc.open{background:color-mix(in srgb, var(--tint) 45%, var(--paper));border-color:var(--ink)}
.gc.cur{border-width:2px;transform:translateY(-3px);box-shadow:0 10px 14px -9px var(--shadow)}
.gc.probe{outline:2px dashed var(--probe);outline-offset:1px}
.gc.water.probe{background:var(--probe-tint);color:var(--ink-2)}
.gc.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
.ring{position:absolute;left:0;top:0;border:2px solid var(--ink);border-radius:8px;pointer-events:none;transition:opacity .2s}
.ring.off{opacity:0}
.wall{position:absolute;border-radius:2px;background:repeating-linear-gradient(-45deg, var(--probe) 0 2px, transparent 2px 5px)}
.tag{
  position:absolute;min-width:18px;height:17px;padding:0 4px;border:1.5px solid var(--tint);border-radius:5px;
  background:var(--paper);color:var(--ink);font:700 var(--fs-label)/14px var(--mono);text-align:center;pointer-events:none
}
.tag.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}

.legend{font-family:var(--body);display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 16px;font-size:var(--fs-label);color:var(--ink-3)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{flex:none;width:14px;height:14px;border-radius:4px}
.legend .ring{position:static;border-radius:5px}

/* dfs call stack, bottom → top */
.stk{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-height:32px;
  font-family:var(--mono);font-size:var(--fs-label);font-variant-ligatures:none
}
.stk:empty::before{font-family:var(--body);content:"empty";color:var(--ink-3);line-height:32px}
.frm{
  height:32px;display:flex;align-items:center;gap:7px;padding:0 9px;border:1.5px solid var(--rule);border-radius:6px;
  background:var(--paper);font-weight:700;white-space:nowrap
}
.frm.top{background:var(--probe-tint);border-color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  .gc.cur{transform:none}
}